diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css
index 5cb025ce..5712894e 100644
--- a/week2/2-website/css/style.css
+++ b/week2/2-website/css/style.css
@@ -1,19 +1,213 @@
 
- /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
+ body {
+  /*background-color: LightGray;*/
+  font-family: "Roboto", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1;
+}
 
-body {
-    font-family: 'Roboto', sans-serif;
-    -webkit-font-smoothing: antialiased;
+.content {
+  padding: 0 0.938rem;
+  margin: 0 auto;
+  min-width: 37.5rem;
+}
+:focus {
+  outline: none;
 }
 
 /**
- * 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'
+ * Navigation Section
  */
+.top-navigation {
+  display: flex;
+  background-color: #fff;
+  position: fixed;
+  width: 100%;
+  border-bottom: 1px solid #ddd;
+  z-index: 9999;
+}
+.top-navigation > .content {
+  height: 4.375rem;
+}
+.top-navigation .logo {
+  height: 4.375rem;
+}
+.top-navigation .links {
+  float: right;
+  color: #030d20;
+  font-size: 1.04rem;
+  margin-top: 1.7rem;
+}
+.top-navigation .links li {
+  display: inline-flex;
 
+  margin-left: 1.563rem;
+}
+.top-navigation .links li.active {
+  color: #4c5058;
+  font-weight: 500;
+}
+.top-navigation .links li:hover {
+  cursor: pointer;
+  color: #333333;
+}
+
+/**
+ * Introduction Section
+ */
+.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,
+.introduction h3 {
+  color: white;
+  text-align: center;
+  font-weight: 300;
+}
+.introduction h1 {
+  margin-top: 17.5rem;
+  font-size: 3.125rem;
+}
+.introduction h3 {
+  margin-top: 1.25rem;
+  font-size: 1.563rem;
+}
+/**
+ * The buttons
+ */
+.introduction .buttons {
+  color: white;
+  text-align: center;
+  margin-top: 1.563rem;
+}
+.introduction .half {
+  width: 49%;
+  padding: 0 0.938rem;
+  display: flex;
+  vertical-align: bottom;
+  font-size: 1.125rem;
+  line-height: 1.2;
+}
 
+/**
+ * The Three Case Images
+ */
+.cases {
+  background-color: #fff;
+  overflow: hidden;
+  padding-bottom: 5rem;
+}
+.cases .content {
+  margin-top: 7.875rem;
+  padding: none;
+  color: #1d1e21;
+  text-align: center;
+}
+.cases h2 {
+  font-size: 2.75rem;
+  margin: 1.625rem 0 3.125rem;
+  font-weight: 300;
+}
+.cases .devices > li {
+  width: 33.3333333%;
+  float: left;
+}
+.cases .devices h3 {
+  font-weight: 400;
+  font-size: 1.563rem;
+  margin: 2.5rem 0px 1.875rem;
+}
+.cases .devices p {
+  font-weight: 300;
+  font-size: 1.313rem;
+}
+ul,
+ol {
+  list-style: none;
+}
+
+/**
+ * Footer
+ */
+.social {
+  background-color: #fff;
+  overflow: auto;
+  padding-bottom: 9.375rem;
+  text-align: center;
+}
+.social hr {
+  border: 0;
+  border-top: 1px solid #eaebec;
+  margin: 1.313rem 0;
+}
+.social .icons > li {
+  display: inline-flex;
+  border-radius: 1.25rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  margin: 1.25rem 5px;
+  border: 1px solid #eaebec;
+  padding: 0.625rem 0;
+  text-align: center;
+}
+.social .icons > li:hover {
+  cursor: pointer;
+}
+.social .twitter {
+  color: #55acee;
+}
+.social .facebook {
+  color: #4c66a4;
+}
+.social .instagram {
+  color: #3f729b;
+}
+.social .copy {
+  font-size: 0.9rem;
+  font-weight: 300;
+  color: #838994;
+}
+
+/**
+ * Responsive Design
+ */
+@media (min-width: 48rem) {
+  .content {
+    width: 46rem;
+  }
+}
+@media (min-width: 62rem) {
+  .content {
+    width: 60rem;
+  }
+}
+@media (min-width: 75rem) {
+  .content {
+    width: 60%;
+  }
+}
+
+/**
+ * button
+ */
+button {
+  width: 9.688rem;
+  background-color: #f15a29;
+  border-color: #f15a29;
+  text-shadow: none;
+  border-style: none;
+  border-radius: 4px;
+  padding: 1rem 1.5rem;
+  color: white;
+  font-size: 1.125rem;
+}
+button:hover {
+  background-color: #d9400e;
+  border-color: #cf3d0e;
+  cursor: pointer;
+}
diff --git a/week2/2-website/index.html b/week2/2-website/index.html
index 876b59d6..8347541d 100644
--- a/week2/2-website/index.html
+++ b/week2/2-website/index.html
@@ -1,21 +1,116 @@
-<!DOCTYPE html>
+<!-- Add a link to your CSS file here (use the line above to guide you) -->
+<!-- Add a link to your CSS file here (use the line above to guide you) --><!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <head>
+    <meta charset="UTF-8" />
     <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">
-    <!-- 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>
+    <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/style.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
+  </head>
 
-    <!-- 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 -->
-
-</body>
+  <body>
+    <header>
+      <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 Image"
+            width="26"
+          />
+        </div>
+      </nav>
+    </header>
+    <main>
+      <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>
+    </main>
+    <!-- Create your section here -->
+    <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-instagram"></i>
+          </li>
+        </ul>
+        <span class="copy"> &copy; Karma Mobility, Inc. </span>
+      </div>
+    </footer>
+  </body>
 </html>