diff --git a/css/style.css b/css/style.css
index 5cb025cef..1a5be2733 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,19 +1,211 @@
-
- /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
+/* General styles */
 
 body {
-    font-family: 'Roboto', sans-serif;
-    -webkit-font-smoothing: antialiased;
+  display: flex;
+  flex-direction: column;
+  font-family: "Roboto", sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+ul {
+  list-style: none;
+}
+
+ul li {
+  display: inline-block;
 }
 
-/**
- * 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'
- */
+h5 {
+  font-size: 1rem;
+  text-align: center;
+}
+
+.content {
+  padding: 0 1rem;
+  margin: 0 auto;
+  min-width: 37.5rem;
+}
+:focus {
+  outline: none;
+}
 
+/* Navbar styles */
+
+.top-navigation .content {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.logo,
+.links {
+  display: inline-flex;
+}
+
+.logo {
+  height: 4.375rem;
+}
+
+.links {
+  justify-items: space-around;
+  align-items: center;
+  color: #838994;
+}
 
+.links > li {
+  margin-left: 1.563rem;
+}
+
+.active {
+  color: #4c5058;
+  font-weight: 500;
+}
+
+/* Introduction styles */
+
+.introduction {
+  background-image: url("../img/first-background.jpg");
+  background-position: center bottom;
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: 46rem;
+  overflow: auto;
+}
+
+.introduction h1,
+.introduction h3 {
+  color: white;
+  text-align: center;
+  font-weight: 300;
+}
+
+.introduction h1 {
+  margin-top: 17.5rem;
+  font-size: 3rem;
+}
+
+button {
+  width: 10rem;
+  background-color: #f15a29;
+  border-color: #f15a29;
+  text-shadow: none;
+  border-style: none;
+  border-radius: 4px;
+  padding: 1rem 1.5rem;
+  color: white;
+  font-size: 1.1rem;
+  text-align: center;
+}
+
+button:hover {
+  background-color: #d9400e;
+  border-color: #cf3d0e;
+  cursor: pointer;
+}
+
+.buttons {
+  display: flex;
+  justify-content: center;
+}
+
+/* Cases styles */
+.cases {
+  background-color: #fff;
+  overflow: hidden;
+  padding-bottom: 5rem;
+}
+
+.cases h2 {
+  font-size: 2.75rem;
+  margin: 1.625rem 0 3.125rem;
+  font-weight: 300;
+}
+
+.cases .content {
+  margin-top: 8rem;
+  color: #1d1e21;
+  text-align: center;
+}
+
+.cases .devices h3 {
+  font-weight: 400;
+  font-size: 1.5rem;
+  margin: 2.5rem 0px 1.9rem;
+}
+
+.cases .devices > li {
+  width: 33.3333333%;
+  float: left;
+}
+
+/* Footer styles */
+
+.social {
+  background-color: #fff;
+  overflow: auto;
+  padding-bottom: 9rem;
+  text-align: center;
+}
+
+.social .content {
+  display: flex;
+  flex-direction: column;
+}
+
+.social .copy {
+  font-size: 0.9rem;
+  font-weight: 300;
+  color: #838994;
+}
+
+.social .icons {
+  margin: 0;
+  padding: 0;
+}
+
+.social .icons > li {
+  border-radius: 1.25rem;
+  width: 2.5rem;
+  height: 2rem;
+  display: inline-block;
+  margin-left: 5px;
+  margin-right: 5px;
+  border: 1px solid #eaebec;
+  padding: 0;
+  text-align: center;
+  line-height: 2rem;
+}
+
+.social .icons > li:hover {
+  cursor: pointer;
+}
+.social .twitter {
+  color: #55acee;
+}
+.social .facebook {
+  color: #4c66a4;
+}
+.social .instagram {
+  color: #3f729b;
+}
+.icons {
+  text-align: center;
+}
+
+/* Media queries */
+
+@media (min-width: 48rem) {
+  .content {
+    width: 46rem;
+  }
+}
+@media (min-width: 62rem) {
+  .content {
+    width: 60rem;
+  }
+}
+@media (min-width: 75rem) {
+  .content {
+    width: 60%;
+  }
+}
diff --git a/index.html b/index.html
index 876b59d64..ed998c13f 100755
--- a/index.html
+++ b/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <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 href='http://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
+    <link href="http://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">
@@ -16,6 +16,72 @@
     <!-- 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">
+        <img class="logo" src="img/karma-logo.svg" alt="Logo Image" width="26">
+        <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> 
+    </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 src="img/icon-devices.svg" alt="Internet for all devices image" width="127" height="127">
+                <div class="caption">
+                    <h3>Internet for all devices</h3>
+                </div>
+            </li>
+            <li>
+                <img src="img/icon-coffee.svg" alt="Boost your productivity image" width="127" height="127">
+                <div class="caption">
+                    <h3>Boost your productivity</h3>
+                </div>
+            </li>
+            <li>
+                <img src="img/icon-refill.svg" alt="Pay as You Go image" width="127" height="127">
+                <div class="caption">
+                    <h3>Pay as You Go</h3>
+                </div>
+            </li>
+        </ul>
+    </div>
+</section>
+<footer class="social">
+    <div class="content">
+        <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>
+        <h4 class="copy">
+            © Karma Mobility, Inc.
+        </h4>
+    </div>
+</footer>
 
 </body>
 </html>