diff --git a/css/style.css b/css/style.css
index 5cb025cef..dd9070f42 100755
--- a/css/style.css
+++ b/css/style.css
@@ -4,8 +4,12 @@
 body {
     font-family: 'Roboto', sans-serif;
     -webkit-font-smoothing: antialiased;
+    margin: 0;
+    padding: 0;
+
 }
 
+
 /**
  * Add your custom styles below
  * 
@@ -13,7 +17,202 @@ body {
  * - 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'
+ * - When using Flexbox, remember    the items you want to move around need to be inside a parent container set to 'display: flex'
  */
 
 
+/* Temporrary */
+
+/* img {
+    width: 5%;
+} */
+
+
+/* Header */
+header {
+    position: fixed;
+    width: 100%;
+}
+
+nav{
+    /* position: inline-block;; */
+    background-color: white;
+    width: 100%;
+    margin: 0 0 0 10;
+    display: block;
+}
+.logo-nav {
+    /* display: inline-block; */
+    width: 1.5%;
+    padding: 1rem 1rem 1rem 20rem;
+}
+
+.menu {
+    list-style-type: none;
+    /* display: inline; */
+    /* align-items: right; */
+    float: right;
+    padding-right: 20rem;
+    display: block;
+}
+
+.menu li {
+    display: inline-block;
+    padding: 1rem 1rem 1rem 1rem;
+    font-weight: normal;
+    font-style: normal;
+    color: grey;
+}
+
+.menu li:hover{
+    color: black;
+    cursor: pointer;
+}
+
+.menu li:first-child {
+    font-weight: bold;
+}
+
+
+
+/* MAIN */
+
+/* First section */
+
+.first-section {
+    background-image: url(../img/first-background.jpg);
+    background-position: center bottom;
+    background-size: cover;
+    background-repeat: no-repeat;
+    height: 25rem;
+    padding-top: 12rem; /* Generally I have no idea */
+    padding-bottom: 8rem;
+}
+
+
+.first-section h1{  
+    margin-top: 12rem 0 0 0;  /*Generally I have no idea  */
+    text-align: center;
+    font-size: 3rem;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.first-section h2{  
+    text-align: center;
+    font-size: 1.5rem;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.button-first {
+    margin: auto;
+    text-align: center;
+}
+
+
+/* Change it in to children and eddit h1 h2? */
+.white-font {
+    color: white;
+}
+
+/* I coopied it from page: button + button:hover */
+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;
+}
+
+/* second section */
+.second-section img {
+    width: 25%;
+}
+.second-section h2{
+    text-align: center;
+    padding: 5rem 0 5rem 0;
+    font-size: 2.75rem;
+    font-style: normal;
+    font-weight: normal;
+}
+
+.list-of-pictures {
+    list-style-type: none;
+    text-align: center;
+
+}
+.list-of-pictures li {
+    display: inline-block;
+    width: 30%;
+    
+}
+
+h3 {
+    font-weight: normal;
+    font-style: normal;
+}
+
+/* hr */
+hr{
+    border-top: #eaebec 1px solid;
+    padding:0;
+    margin:0;
+    width: 85%;
+    height: 0;
+    margin: auto;
+}
+
+/* footer */
+h4 {
+    font-weight: normal;
+    font-style: normal;
+}
+
+footer{
+    width: 100%;
+    padding-bottom: 10rem;
+}
+
+.manipulator{
+    display: inline-block;
+    width: 100%;
+}
+
+footer h4, p {
+    text-align: center;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.icons {
+    list-style-type: none;
+    text-align: center;
+    padding: 0; /* small horrible stubborn value!*/ 
+}
+
+.icons > li {
+    display: inline-block;
+    text-align: center;
+    padding: 0.50rem;
+ }
+
+/*Easy edition of color's icons - nice */ 
+.icons .twitter {
+    color: #55acee;
+}
+.icons .facebook {
+    color: #4c66a4;
+}
+.icons .instagram {
+    color: #3f729b;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 876b59d64..0f0ffc9ee 100755
--- a/index.html
+++ b/index.html
@@ -1,21 +1,98 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <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 rel="stylesheet" href="css/normalize.css">
+    <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">
-    <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
+    <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 -->
+    <header>
+        <nav>
+            <img class="logo-nav" src="img/karma-logo.svg" alt="">
+            <ul class="menu">
+                <li>Meet Karma</li>
+                <li>How it works</li>
+                <li>Store</li>
+                <li>Blog</li>
+                <li>Help</li>
+                <li>Login</li>
+            </ul>
+
+        </nav>
+    </header>
+
+    <main>
+
+        <section class="first-section">
+            <h1 class="white-font">Introducing Karma</h1>
+            <h2 class="white-font">Bring WiFi with You, everywhere You go.</h2>
+            <div class="button-first">
+                <button>Learn More</button>
+            </div>
+        </section>
+
+        <section class="second-section">
+            <h2>Everyone needs a little Karma</h2>
+            <ul class=list-of-pictures>
+                <li>
+                    <img src="img/icon-devices.svg" alt="">
+                    <div>
+                        <h3>Internet for all devices</h3>
+                    </div>
+                </li>
+                <li>
+                    <img src="img/icon-coffee.svg" alt="">
+                    <div>
+                        <h3>Boos Your Productivity</h3>
+                    </div>
+                </li>
+                <li>
+                    <img src="img/icon-refill.svg" alt="">
+                    <div>
+                        <h3>Pay as You go</h3>
+                    </div>
+                </li>
+            </ul>
+        </section>
+
+        <hr>
+
+        <footer>
+            <div class="manipulator">
+                <h4>Join us on</h4>
+
+                <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>
+
+                <p>© Karma Mobility, Inc.</p>
+            </div>
+        </footer>
+
+
+    </main>
+
 
 </body>
-</html>
+
+</html>
\ No newline at end of file