diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 000000000..753cb9cdd
Binary files /dev/null and b/.DS_Store differ
diff --git a/css/store.css b/css/store.css
new file mode 100644
index 000000000..5113d5367
--- /dev/null
+++ b/css/store.css
@@ -0,0 +1,316 @@
+:root {
+    --grey-dark: #363434;
+    --grey: #ADADAD;
+    --grey-light: #F7F7F7;
+    --orange: #F05A28;
+    --orange-light: hsl(20, 84%, 80%);
+    --white: #fff;
+  }
+
+body {
+    font-family: 'Roboto', sans-serif;
+    -webkit-font-smoothing: antialiased;
+}
+
+
+
+/*hamburger menu*/
+.h-menu {
+    display: none;
+    position: absolute;
+    cursor: pointer;
+}
+
+.topnav {
+    display: flex;
+}
+#check {
+    display: none;
+}
+
+/*form*/
+
+
+.all-container {
+    display:flex;
+    flex-direction: row;
+   
+    
+}
+
+/*main left area includes title and form*/
+.main-section {
+    display: flex;
+    flex-direction: column;
+    margin-left: 90px;
+    margin-right: 90px;
+   
+}
+
+/*page title*/
+.page-title{
+   
+}
+
+.page-title h1{
+    color: #F05A28;
+}
+
+/*form*/
+.all-form {
+    display: flex;
+  
+    width: 650px;
+}
+
+.orderform {
+    display:flex;
+    flex-direction: column;
+    width:100%;
+     
+}
+
+
+
+.input {
+    border:solid 1.5px gray;
+    border-radius: 3px;
+    margin: 0 5px 1rem 0;
+    padding: 0.5rem;
+}
+
+input,
+ label {
+     width: auto;
+    }
+
+button {
+        background-color:var(--orange);
+        padding: 20px;
+        margin: 15px 400px 100px 0px;
+        justify-content: left;
+        color: white;
+        border-radius: 5px;
+        border: none;
+    }
+
+
+fieldset {
+    border: none;
+    display:flex;
+    gap: 15px;
+    width:auto;
+    }
+
+.fillname {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    width: 600px;
+    justify-content: space-between;
+    }
+
+.firstnametext {
+   margin-bottom: 13px;
+}
+
+.lastnametext {
+    margin-bottom: 13px;
+ }
+
+ #first_name {
+    width: 250px;
+ }
+
+ #last_name {
+    width: 250px;
+ }
+
+ #address2 {
+    width:575px;
+ }
+
+ #address {
+    width:575px;
+ }
+
+.filladdress {
+    display: flex;
+    flex-direction: column;
+    }
+
+.filllocation {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    width: 600px;
+    justify-content: space-between;
+    
+}
+
+.citytext {
+    margin-bottom: 13px;
+ }
+
+ .postcodetext {
+    margin-bottom: 13px;
+ }
+
+ select {
+    width: 270px;
+    height: 40px;
+    background-color: white;
+    border-radius: 3px;
+    border:solid 1.5px gray;
+    border-radius: 3px;
+    margin: 0 5px 10px 0;
+    padding: 2px;
+    
+
+  }
+
+
+ #postcode{
+    width: 250px;
+ }
+
+   
+.choosecolor {
+    margin: 20px 0 2px 0;
+    }
+   
+.colorchoice {
+       margin: 20px 0 20px 0;
+    }
+
+
+
+/*image right of page*/
+.img-right {
+    
+    width:650px;
+    height:900px;
+  
+}
+
+.imgmain {
+    display:flex;
+    flex-wrap: wrap;
+    height:100%;
+    width:100%;
+}
+
+@media screen and (max-width:768px) {
+
+    ul {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--grey-light);
+      opacity: .9;
+      top: -800px;
+      gap: 10px;
+      z-index: 1;
+      transition: all 0.3s ease-in-out;
+      border-radius: 5px;
+  }
+  
+  .fillname {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    flex-wrap: wrap;}
+  
+  .filllocation {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      align-items: stretch;
+    }
+
+    #address2 {
+        width:250px;
+     }
+    
+     #address {
+        width:250px;
+     }
+  
+  .all-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .imgmain {
+    display:flex;
+    flex-wrap: wrap;
+    height:50%;
+    width:50%;
+}
+
+input,
+ label {
+     width: 80px;
+    }
+
+   }
+
+
+@media screen and (max-width:480px){
+    .topnav{
+        display: none;
+        visibility: hidden;
+        align-items: center;
+        justify-content: center;
+        width: 180px;
+        height: 40vh;
+        flex-direction: column;
+        top: -600px;
+        border-radius: 5px;
+        border:#363434 solid 10px;
+        background-color: #F05A28;
+        z-index: 1;
+        gap: 8px;
+        opacity: 1;
+        position: fixed;
+        background-color: var(--grey-light);
+    } 
+
+   .h-menu{
+     display: inline-block;
+     z-index: 4;
+   } 
+
+  #check:checked ~ .h-menu{
+    transform: scale(20);
+    background-color: var(--orange);
+    opacity: 0.9;
+   }
+
+   #check:checked ~ .topnav{
+     top: 0;
+ }
+
+ fieldset {
+    border: none;
+    /* display: flex; */
+    gap: 15px;
+    /* width: min-content; */
+}
+
+input, label {
+    width: 113px;
+}
+
+
+fieldset {
+    border: none;
+    display: flex;
+    gap: 15px;
+    width: auto;
+    flex-direction: column;
+}
+}
+
+ 
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 5cb025cef..4d180984f 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,5 +1,14 @@
 
  /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
+ :root {
+  --grey-dark: #363434;
+  --grey: #ADADAD;
+  --grey-light: #F7F7F7;
+  --orange: #F05A28;
+  --orange-light: hsl(20, 84%, 80%);
+  --white: #fff;
+}
+
 
 body {
     font-family: 'Roboto', sans-serif;
@@ -16,4 +25,230 @@ body {
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
  */
 
+/*navigation*/
+
+ header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-top: 20px;
+    padding-right:140px;
+    padding-bottom:20px;
+    background-color:var(--grey-light);
+ }
+
+ header img {
+    width: 50px;
+    height: 50px;
+    margin-left:100px;
+ }
+ ul {
+    display: flex;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+  ul li a {
+    color: grey;
+    padding: 14px 16px;
+    text-decoration: none;
+  }
+  ul li:first-child a {
+    color:black;
+  }
+
+  li a:hover {
+    color: orange;
+  }
+
+  /*first section - intro to karma*/
+
+  #section1 {
+    background-image: url("../img/first-background.jpg");
+    padding-bottom: 100px;
+    padding-top: 150px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  h1{
+    color:#fff;
+
+  }
+  h2{
+    color:#fff;
+    font-weight: 200;
+  }
+  button {
+    align-content: center;
+    color: white;
+    background-color: orange;
+    border: none;
+    border-radius: 5px;
+    padding: 15px 20px;
+    /*margin-left: 650px;*/
+    margin-top: 50px;
+  }
+  #text1 {
+    color:black;
+    text-align: center;
+  }
+
+/*section 2 - need karma*/
+
+  #section2 {
+  }
+  .container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    padding-left: 150px;
+    padding-right: 150px;
+    align-items: center;
+  }
+
+.icons{
+    width: 200px;
+    height: 200px;
+}
+
+.box {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 100px;
+}
+
+.gridcontainer {
+    height:100%;
+    display: grid;
+    background-color:bisque;
+    grid-template-columns: repeat(15, 1fr);
+    grid-template-rows: 100px 100px 100px 100px;
+    margin-bottom:  50px;
+    grid-template-areas: 
+        "p p p p p p p . . . . . . ."
+        "p p p p p p p q q q q q q q"
+        "p p p p p p p g g g g g g g"
+        "p p p p p p p . . . . . . .";
+}
+
+.photo1{
+  grid-area: p;
+  background-image: url(/level-2/homepage-feature.png);
+  height: 100%;
+  width: 100%;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.quote {
+  grid-area: q;
+  justify-self: center;
+  text-align: center;
+  font-size: 25px;
+  font-style: italic;
+  font-weight: 400;
+  
+}
+
+.quote p span{
+  color: darkorange;
+}
+.getbutton {
+  grid-area: g;
+  justify-self: center;
+  text-align: center;
+  margin-top:70px;
+}
+
+.btn-get {
+  grid-area: g;
+  justify-self: center;
+  text-align: center;
+  text-decoration: none;
+  color:var(--white);
+  background-color: var(--orange);
+  padding: 20px 20px;
+  border-radius: 6px;
+}
+
+.btn-get:hover {
+  background-color: var(--grey-dark);
+}
+
+
+
+/*footer*/
+
+footer {
+    text-align: center;
+    margin: 40px 100px 100px 40px;
+    border-top: 1px solid grey ;
+  }
+
+  .social {
+    width: 20px;
+    border: 1px solid lightgrey;
+    border-radius: 100px;
+    margin-right: 10px;
+    padding: 10px;
+  }
+
+  #copyright {
+    color: grey;
+    text-align: center;
+  }
+
+
+/* media query for tablet*/
+
+ @media screen and (max-width:768px) {
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--grey-light);
+    opacity: .9;
+    top: -800px;
+    gap: 10px;
+    z-index: 1;
+    transition: all 0.3s ease-in-out;
+    border-radius: 5px;
+}
+
+.fillname {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex-wrap: wrap;}
+
+.filllocation {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+.all-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.gridcontainer {
+  height: 100%;
+  display: grid;
+  background-color: bisque;
+  grid-template-columns: 1fr;
+  grid-template-rows: 300px 122px 122px;
+  margin-bottom: 50px;
+  grid-template-areas: "p"
+      "q"
+      "g"
+      ".";
+}
 
+ }
\ No newline at end of file
diff --git a/index.html b/index.html
index 3e742ef04..a27fb90cc 100755
--- a/index.html
+++ b/index.html
@@ -9,11 +9,74 @@
     <link rel="stylesheet" href="css/style.css">
     <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
 </head>
+
+<!--navigation-->
+
 <body>
+    <header>
+        <img src="img/karma-logo.svg" alt="logo of karma">
+            <ul>
+                <div class="topnav"></div>
+                <li><a href="/index.html">Meet Karma</a></li>
+                <li><a href="#">How it Works</a></li>
+                <li><a href="/store.html">Store</a></li>
+                <li><a href="#">Blog</a></li>
+                <li><a href="#">Help</a></li>
+                <li><a href="#">Login</a></li>
+            </div>
+            <label for = "check" class="h-menu"><img src="/level-3/menu-hamburger.svg" alt="hamburger-menu"> </label>
+
+        </ul>
+        
+    </header>
 
-    <!-- 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 -->
+<main>
+    <section id="section1">
+        <h1>Introducing Karma</h1>
+        <h2>Bring WiFi with you, everywhere you go.</h2>
+        <button>Learn More</button>
+    </section>
+    <section id="section2">
+        <h1 id="text1">Everyone needs a little Karma</h1>
+        <div class="container">
+            <article class="box">
+                <img class="icons" src="img/icon-devices.svg" alt="devices icon">
+                <div class="texts">
+                    <h3>Internet for all devices</h3>
+                </div>
+            </article>
+            <article class="box">
+                <img class="icons" src="img/icon-coffee.svg"  alt="coffee icon">
+                <div class="texts">
+                    <h3>Boost your productivity</h3>
+                </div>
+            </article>
+            <article class="box">
+                <img class="icons" src="img/icon-refill.svg" alt="refill icon">
+                <div class="texts">
+                    <h3>Pay as You go</h3>
+                </div>
+            </article>
+        </div>
+    </section>
 
+   <section>
+    <div class="gridcontainer">
+        <div class="photo1"></div>
+        <div class="quote"><p><span>"</span>Wherever I am, I just don't <br> worry about my connection <br> anymore!<span>"</span></p></div>
+        <div class="getbutton"><a href="/store.html" class="btn-get">Get Karma today</a></div>
+    </div>
+   </section>
+   
+</main>
+<footer>
+        <p>Join us on:</p>
+        <div>
+          <img class="social" src="/img/twitter-icon.svg" alt="twitter icon"/>
+          <img class="social" src="/img/facebook-icon.svg" alt="facebook icon"/>
+          <img class="social" src="/img/instagram-icon.svg" alt="instagram icon"/>
+        </div>
+        <p id="copyright"> Karma Mobility, Inc.</p>
+</footer>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/store.html b/store.html
new file mode 100644
index 000000000..653ad40a4
--- /dev/null
+++ b/store.html
@@ -0,0 +1,127 @@
+<!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='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="stylesheet" href="css/store.css">
+    <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
+</head>
+
+<!--navigation-->
+
+<body>
+    <header>
+        <img src="img/karma-logo.svg" alt="logo of karma">
+            <ul>
+                <input type="checkbox" id="check" />
+                <div class="topnav">
+                    <li><a href="/index.html">Meet Karma</a></li>
+                    <li><a href="#">How it Works</a></li>
+                    <li><a href="/store.html">Store</a></li>
+                    <li><a href="#">Blog</a></li>
+                    <li><a href="#">Help</a></li>
+                    <li><a href="#">Login</a></li>
+                </div>
+        <label for = "check" class="h-menu"><img src="/level-3/menu-hamburger.svg" alt="hamburger-menu"> </label>
+        </ul>
+        
+    </header>
+
+
+<main>
+    <div class="all-container">
+    <div class="main-section">
+        <div class="page-title">
+            <h1>Order your Karma WiFi Device today!</h1>
+        </div>
+
+        <div class="all-form">
+        <form class="orderform">
+            
+            <fieldset class="fillname">
+
+                <div class="firstnamecontainer">
+                    <div class="firstnametext">
+                        <label for="first_name">First name*</label>
+                    </div>          
+                    <div>
+                        <input type="text" class="input" id="first_name" required>
+                    </div>
+                </div>
+                
+                <div class="lastnamecontainer">
+                    <div class="lastnametext">
+                        <label for="last_name">Last name*</label>
+                    </div>          
+                    <div>
+                        <input type="text" class="input" id="last_name" required>
+                    </div>
+                </div>
+                </fieldset>
+
+            <fieldset class="filladdress">
+                <label for="address" >Address*</label> <input type="text" class="input" id="address" name="address" required>
+                <label for="address2">Address 2</label> <input type="text" class="input" id="address2" name="address2">
+            </fieldset>
+
+            <fieldset class="filllocation">
+
+                <div class="citycontainer">
+                    <div class="citytext">
+                        <label for="city">City*</label> 
+                    </div>
+                     <div>
+                         <select id="city" name="city" class="input"><option value="">Select your city...</option>
+                            <option value="">London</option>
+                            <option value="">Manchester</option>
+                       </select>
+                     </div>
+                </div>
+                 
+                 <div class="postcodecontainer">
+                    <div class="postcodetext">
+                    <label for="postcode">Postcode*</label>
+                    </div>
+                    <div>
+                        <input type="text" class="input" id="postcode" name="postcode">
+                        </div>
+                    </div>
+                </fieldset>
+
+            <fieldset class="choosecolor">
+                <legend class="colorchoice">Select a colour</legend>
+                <label for="karma_orange">Karma Orange</label>
+                <input type="radio" value="Karma range" name="colour" class="input" id="karma_orange">
+                <label for="space_grey">Space Grey</label>
+                <input type="radio" value="Space Grey" name="colour" class="input" id="space_grey">
+
+            </fieldset>
+            <input type="checkbox" class="input" id="tandcs">
+            <label for="tandcs">By placing your order you agree to Karma's Terms and Conditions.*</label>
+            </fieldset>
+            <button>Place my order</button>
+        </form>
+    </div>
+    </div>
+    
+
+    <div class="img-right"><img class="imgmain" src="/level-2/store-image_by-andrew-neel-unsplash.jpg"/>
+    </div>
+    </div>
+</main>
+
+    <footer>
+        <p>Join us on:</p>
+        <div>
+          <img class="social" src="/img/twitter-icon.svg" alt="twitter icon"/>
+          <img class="social" src="/img/facebook-icon.svg" alt="facebook icon"/>
+          <img class="social" src="/img/instagram-icon.svg" alt="instagram icon"/>
+        </div>
+        <p id="copyright"> Karma Mobility, Inc.</p>
+</footer>
+</body>
+</html>
\ No newline at end of file