diff --git a/css/style.css b/css/style.css
index 5cb025cef..a4c751f53 100755
--- a/css/style.css
+++ b/css/style.css
@@ -15,5 +15,187 @@ body {
  * 
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
  */
+ .navbar {
+    display: flex;
+    align-items: center;
+    
+ }
+ .navbar img {
+    width: 2rem;
+    height: 2rem;
+    margin-left: 3rem;
+ }
+ .navbar a {
+    text-decoration: none;
+    color:grey;
+ }
+ .navbar a:hover {
+    color: coral;
+ }
+ .meet_karma {
+    margin-left: auto;
+ }
+ .how_it_works, .meet_karma, .store, .blog, .help, .log_in {
+    margin-right: 2rem;
+ }
+ .main_upper_part {
+    background-image:url(../img/first-background.jpg);
+    background-size: cover;
+    height: 40rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    
+    
+ }
+ #main_introduction {
+    font-size: 4.5rem;
+    color:beige;
+    margin-top: 15rem;
+    margin-bottom: 0px;
+ }
+ #main_rest {
+    font-size: 2.5rem;
+    color: beige;
+    
+ }
+ #learn_more {
+    background-color: coral;
+    font-size: 2rem;
+    margin-top: 3rem;
+    
+    
+ }
+#learn_more a {
+    text-decoration: none;
+    color: beige;
+    
+}
+#learn_more a:hover {
+    color: blue;
+}
+.main_lower_part {
+    display: flex;
+    flex-direction: column;
+    color: grey;
+    
+}
+#main_lower_part_title {
+    font-size: 4rem;
+    padding-top: 6rem;
+    padding-left: 32rem;
+}
+.main_lower_part_section1 {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    align-items:flex-end;
+    margin-bottom: 10rem;
+}
+.main_lower_part_section1 a {
+    text-decoration: none;
+    color: grey;
+    
+}
+.main_lower_part_section1 img {
+    margin-bottom: 4rem;
+}
+footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: grey;
+    margin-bottom: 5rem;
+    
+    
+}
 
+footer img {
+    width: 4rem;
+    height: 4rem;
+}
+.extended_section {
+    height: 30rem;
+    width: 100%;
+    background-color: rgb(243, 230, 214);
+    display: flex;
+    margin-bottom: 8rem;
+}
+.extended_section img {
+    height: 30rem;
+    width: 45rem;
+}
+.extended_section_right {
+    display: flex;
+    flex-direction: column;
+    margin-left: 20rem;
+    justify-content: center;
+    align-items: center;
+}
+.extended_section_right p {
+    font-size: 2.5rem;
+    color: gray;
+    
+}
+#quotation_mark {
+    color: coral;
+    font-size: 3rem;
+}
+#anymore {
+    margin-left: 9rem;
+}
+#get_karma_today a {
+    text-decoration: none;
+    color: beige;
+    background-color: coral;
+    font-size: 1.5rem;
+}
 
+/* this section is for store.html*/
+.store_navbar {
+    background-color: beige;
+    border-bottom: rgb(218, 221, 223);
+    border-bottom-style: solid;
+}
+.main_section {
+    display: grid;
+    grid-template-columns: 60rem 1fr;
+    grid-template-areas: 
+    "f im";
+}
+.main_section_left {
+    grid-area: f;
+}
+.main_section_image {
+    grid-area: im;
+    width: 55.5rem;
+    height: 80rem;
+}
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-left: 11rem;
+}
+#form_title {
+    margin-top: 10rem;
+    font-size: 2.5rem;
+    color:coral ;
+}
+.name_form, .address_form, .address2_form, .city_form, .select_color, .terms_form, .submit {
+    margin-top: 4rem;
+    
+    
+}
+#address, #address2 {
+    width: 32rem;
+    height: 2rem;
+    
+}
+#first_name, #last_name, #city, #post_code {
+    height: 2rem;
+    
+}
+#space_grey {
+    margin-left: 3rem;
+}
diff --git a/index.html b/index.html
index 3e742ef04..a577a78be 100755
--- a/index.html
+++ b/index.html
@@ -14,6 +14,66 @@
     <!-- 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 class="navbar">
+            <div><a href="./index.html"><img src="./img/karma-logo.svg"></a></div>
+            <div class="meet_karma"><a href="#">Meet Karma</a></div>
+            <div class="how_it_works"><a href="#">How it Works</a></div>
+            <div class="store"><a href="./store.html">Store</a></div>
+            <div class="blog"><a href="#">Blog</a></div>
+            <div class="help"><a href="#">Help</a></div>
+            <div class="log_in"><a href="#">Login</a></div>
+
+        </nav>
+        
+
+    </header>
+    <main>
+        <div class="main_upper_part">
+            <p id="main_introduction">Introducing Karma</p>
+            <p id="main_rest">Bring WiFi with you, everywhere you go.</p>
+            <span id="learn_more"><a href="#">Learn More</a></span>
+        </div>
+        <div class="main_lower_part">
+            <p id="main_lower_part_title">Everyone needs a little Karma.</p>
+            <div class="main_lower_part_section1">
+                <div>
+                    <img src="./img/icon-devices.svg">
+                    <p><a href="#">Internet for all devices</a></p>
+                </div>
+                <div>
+                    <img src="./img/icon-coffee.svg">
+                    <p><a href="#">Boost your productivity</a></p>
+                </div>
+                <div>
+                    <img src="./img/icon-refill.svg">
+                    <p><a href="#">Pay as You Go</a></p>
+                </div>
+            </div>
+
+        </div>
+        <div class="extended_section">
+            <img src="./level-2/homepage-feature.png">
+            <div class="extended_section_right">
+                <p><span id="quotation_mark">"</span>Whenever I am, I just don't
+                <br>worry about my connection
+                <br><span id="anymore">anymore!<span id="quotation_mark">"</span></p>
+                <span id="get_karma_today"><a href="./store.html">Get Karma today</a></span>
+            </div>
+        </div>
+    </main>
+    
+    <hr style="width: 85%; color: rgb(249, 245, 245);">
+    
+    <footer>
+        <p>Join us on</p>
+        <div>
+            <a href="#"><img src="./img/twitter-icon.svg"></a>
+            <a href="#"><img src="./img/facebook-icon.svg"></a>
+            <a href="#"><img src="./img/instagram-icon.svg"></a>
+        </div>
+        <p>&copy Karma Mobility.Inc</p>
+    </footer>
 
 </body>
 </html>
diff --git a/store.html b/store.html
new file mode 100644
index 000000000..f4ecddd4e
--- /dev/null
+++ b/store.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Store</title>
+    <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
+</head>
+<body>
+    <header>
+        <nav class="navbar store_navbar">
+            <div><a href="./index.html"><img src="./img/karma-logo.svg"></a></div>
+            <div class="meet_karma"><a href="#">Meet Karma</a></div>
+            <div class="how_it_works"><a href="#">How it Works</a></div>
+            <div class="store"><a href="#">Store</a></div>
+            <div class="blog"><a href="#">Blog</a></div>
+            <div class="help"><a href="#">Help</a></div>
+            <div class="log_in"><a href="#">Login</a></div>
+
+        </nav>
+        
+
+    </header>
+    <main>
+        <div class="main_section">
+            <div class="main_section_left">
+                
+                <form>
+                    <p id="form_title">Order your Karma wifi<br>device today!</p>
+                    <div class="name_form">
+                        <label for="first_name" >First Name *</label>
+                        <input type="text" required id="first_name" name="first_name">
+                        <label for="last_name">Last Name *</label>
+                        <input type="text" required id="last_name" name="last_name">
+                    </div>
+                    <div class="address_form">
+                        <label for="address" >Address *</label>
+                        <input type="text" required id="address" name="address">
+                    </div>
+                    <div class="address2_form">
+                        <label for="address2" >Address 2</label>
+                        <input type="text" id="address2" name="address2">
+                    </div>
+                    <div class="city_form">
+                        <label for="city">City *</label>
+                        <input type="text" required id="city" name="city">
+                        <label for="post_code">Post Code *</label>
+                        <input type="text" required id="post_code" name="post_code">
+                    </div>
+                    <div class="select_color">
+                        <p>Select a color</p>
+                        <input type="radio" id="karma_orange" name="select_color" value="Karma Orange">
+                        <label for="karma_orange">Karma Orange</label>
+                        <input type="radio" id="space_grey" name="select_color" value="Space Grey">
+                        <label for="space_grey">Space Grey</label>
+
+                    </div>
+                    <div class="terms_form">
+                        <input type="checkbox" required id="terms_and_conditions" name="termes_and_conditions">
+                        <label for="termes_and_conditions">By placing your order you agree to Karma's <a href="#">Terms and Conditions </a>*</label>
+
+                    </div>
+                    <div class="submit">
+                        <input type="submit" value="submit">
+                    </div>
+
+
+                </form>
+            </div>
+            <img class="main_section_image" src="./level-2/store-image_by-andrew-neel-unsplash.jpg">
+        </div>
+         
+    </main>
+    <hr style="width: 85%; color: rgb(249, 245, 245);">
+    
+    <footer>
+        <p>Join us on</p>
+        <div>
+            <a href="#"><img src="./img/twitter-icon.svg"></a>
+            <a href="#"><img src="./img/facebook-icon.svg"></a>
+            <a href="#"><img src="./img/instagram-icon.svg"></a>
+        </div>
+        <p>&copy Karma Mobility.Inc</p>
+    </footer>
+    
+</body>
+</html>
\ No newline at end of file