diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css
index 5cb025ce..19bcf308 100644
--- a/week2/2-website/css/style.css
+++ b/week2/2-website/css/style.css
@@ -1,19 +1,257 @@
+* {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+    box-sizing: border-box;
+}
+
+    .top-navigation {
+        background-color: #fff;
+        position: fixed;
+        width: 100%;
+        border-bottom: 1px solid #DDD;
+        z-index:  9999;
+        display: block;
+    }
+
+
+    .top-navigation > .content {
+        height: 4.375rem;
+    }
+
+
+    .content {
+        padding: 0 0.938rem;
+        margin: 0 auto;
+        min-width: 37.5rem;
+    }
+
+    .top-navigation .links {
+        float: right;
+        color: #838994;
+        font-size: 1.04rem;
+        margin-top: 1.7rem;
+        width: 507.016px;
+        height: 16px;
+        align-content: space-between;
+
+    }
+    ol ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font: inherit;
+        vertical-align: baseline;
+        box-sizing: border-box;
+    }
+    ul {
+        display: flex;
+        margin-inline-start: 1em;
+        margin-block-end: 1em;
+        margin-inline-start: 0;
+        margin-inline-end: 0;
+        padding-inline-start: 40px;
+        -webkit-font-smoothing: antialiased;
+    }
+    .top-navigation .links li.active {
+        color: #4c5058;
+        font-weight: 500;
+    }
+    .top-navigation .links li {
+        display: inline-block;
+        margin-left: 1.563rem;
+
+    }
+    li {
+        text-align: -webkit-match-parent;
+        list-style: none;
+        text-align: center;
+    }
+
+    .top-navigation .logo {
+        height: 4.375rem;
+
+    }
+
+    .introduction {
+        background-image: url(img/first-background.jpg);
+        background-position: center bottom;
+        background-repeat: no-repeat;
+        background-size: cover;
+        height: 45.938rem;
+        overflow: auto;
+    }
+    .introduction h1 {
+        margin-top: 17.5rem;
+        font-size: 3.12rem;
+    }
+    .introduction h1, .introduction h3 {
+        color: #fff;
+        text-align: center;
+        font-weight: 300;
+    }
+    .introduction h3 {
+        margin-top: 1.25rem;
+        font-size: 1.56rem;
+    }
+    .introduction .buttons {
+        color: #fff;
+        text-align: center;
+        margin-top: 1.56rem;
+    }
+
+    @media (min-width: 48rem) {
+      .content {
+        width: 46rem;
+     }
+    }
+
+        .content {
+            width: 46rem;
+            padding: 0 0.938rem;
+            min-width: 37.5rem;
+        }
+
+
+    h1 {
+        margin-top: 17.5rem;
+        font-size: 3.125rem;
+        color: #fff;
+        text-align: center;
+        font-weight: 300;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font: inherit;
+        vertical-align: baseline;
+        box-sizing: border-box;
+    }
+
+
+
+    h3 {
+        display: block;
+        color: #ddd;
+    }
+
 
- /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
+    button {
+        width: 9.688rem;
+        color: #f15a29;
+        background-color: #f15a29;
+        text-shadow: none;
+        border-style: none;
+        border-radius: 4px;
+        padding: 1erm 1.5rem;
+        color: #fff;
+        font-size: 1.125rem;
+    }
+    .cases {
+        background-color: #fff;
+        overflow: hidden;
+        padding-bottom: 5rem;
 
-body {
-    font-family: 'Roboto', sans-serif;
-    -webkit-font-smoothing: antialiased;
+    }
+    .cases .content {
+        margin-top: 7.875rem;
+        color: #1d1e21;
+        text-align: center;
+    }
+    .cases h2 {
+        font-size: 2.75rem;
+        margin: 1.625rem 0 3.125rem;
+        font-size: 300;
+    }
+
+    .cases .devices > li {
+        width: 33.3333333%;
+        float: left;
+        text-align: center;
+
+    }
+
+img {
+    width: 127px;
+    height: 127px;
+}
+.caption {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+    box-sizing: border-box;
+   /* display: block;*/
+}
+.cases .devices h3 {
+    font-weight: 400;
+    font-size: 1.156rem;
+    margin: 2.5rem 0px 1.875rem;
+}
+.social {
+    background-color: #fff;
+    overflow: auto;
+    padding-bottom: 9.375rem;
+    text-align: center;
+    display: block;
+}
+
+.icons {
+    list-style: none;
+    text-align: center;
+}
+
+h5 {
+    color: black;
+    text-align: center;
+}
+.icons > li:hover {
+    cursor: pointer;
+}
+.social .icons > li {
+    border-radius: 1.25rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    display: inline-block;
+    margin: 1.25rem 5px;
+    border: 1px solid #eaebec;
+    text-align: center;
+}
+.twitter {
+    color: #55acee;
+}
+.fa {
+    display: inline-block;
+    font: normal;
+    font-size: inherit;
+    text-rendering: auto;
+    text-align: center;
 }
 
-/**
- * Add your custom styles below
- * 
- * Remember: 
- * - Be organised, use comments and separate your styles into meaningful chunks
- *    for example: General styles, Navigation styles, Hero styles, Footer etc.
- * 
- * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
- */
+.fa-twitter {
+    content: "\f099";
+}
 
+.social .facebook {
+    color: #4c66a4;
+}
+.fa-facebook {
+    content: "\f09a";
+}
 
+.social .instagram {
+    color: #3f729b;
+}
+.fa-instagram:before {
+    content: "\f16d";
+}
+.social .copy {
+    font-size: 0.9rem;
+    font-weight: 300;
+    color: #838994;
+}
diff --git a/week2/2-website/index.html b/week2/2-website/index.html
index 876b59d6..250e3672 100644
--- a/week2/2-website/index.html
+++ b/week2/2-website/index.html
@@ -6,16 +6,76 @@
     <title>Karma</title>
     <link href='//fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
     <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="style.css">
     <!-- Add a link to your CSS file here (use the line above to guide you) -->
     <link rel="stylesheet" href="css/style.css">
     <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
 </head>
 <body>
-
-    <!-- Add your HTML markup here -->
-    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
-    <!-- All the images you need are in the 'img' folder -->
-
+    <nav class="top-navigation">
+        <div class="content">
+            <ul class="links">
+                <li class="active">Meet Karma</li>
+                <li>How it Works</li>
+                <li>Store</li>
+                <li>Blog</li>
+                <li>Help</li>
+                <li>Login</li>
+            </ul>
+            <img class="logo" src="img/karma-logo.svg" alt="Logo Imge" width="26">
+        </div>
+    </nav>
+    <section class="introduction">
+        <div class="content">
+            <h1>Introducing Karma</h1>
+            <h3>Bring WiFi with you, everywhere you go.</h3>
+            <div class="buttons">
+                <button>Learn More</button>
+            </div>
+        </div>
+    </section>
+    <section class="cases">
+        <div class="content">
+            <h2>Everyone needs a little Karma.</h2>
+            <ul class="devices">
+                <li>
+                    <img width="127" height="127" src="img/icon-devices.svg" alt="Internet for all devices image">
+                    <div class="Caption">
+                        <h3>Internet for all devices</h3>
+                    </div>
+                </li>
+                <li>
+                    <img width="127" height="127" src="img/icon-coffee.svg" alt="Boost your productivity image">
+                    <div class="caption">
+                        <h3>Boost your productivity</h3>
+                    </div>
+                </li>
+                <li>
+                    <img width="127" height="127" src="img/icon-refill.svg" alt="Pay as You Go image">
+                    <div class="caption">
+                        <h3>Pay as You Go</h3>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </section>
+    <footer class="social">
+        <div class="content">
+            <hr>
+            <h5>Join us on</h5>
+            <ul class="icons">
+                <li class="twitter">
+                    <i class="fa fa-twitter"></i>
+                </li>
+                <li class="facebook">
+                    <i class="fa fa-facebook"></i>
+                </li>
+                <li class="instagram">
+                    <i class="fa fa-insragram"></i>
+                </li>
+            </ul>
+            <span class="copy">@Karma Mobility,Inc.</span>
+            </div>
+    </footer>
 </body>
 </html>