diff --git a/css/style.css b/css/style.css
index 5cb025cef..f60bf977a 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,19 +1,314 @@
-
- /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
+/* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
 
 body {
-    font-family: 'Roboto', sans-serif;
-    -webkit-font-smoothing: antialiased;
+   font-family: 'Roboto', sans-serif;
+  
 }
 
 /**
- * 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'
- */
+* 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'
+*/
+
+
+
+
+*{
+   margin:0 auto;
+}
+
+
+
+.logo img{
+   width: 20px;
+}
+header{
+   display: flex;
+   flex-direction: row;
+   justify-content: space-around;
+}
+
+li{
+   display: inline-block;
+   padding-left: 10px;
+   font-weight: 100;
+   /* text-transform: none;
+   text-decoration: none; */
+   font-size: medium;
+   margin-top: 20px;
+   margin-bottom: 15px;
+ }
+   
+
+li a{
+   text-decoration: none;
+   color: #434242;
+   height: 96px;
+width: 1448px;
+
+
+}
+
+li a:hover{ 
+   color: coral;
+
+}
+nav{
+  /* background: #C4C4C41A; */
+  margin-top: 5px;
+  display: block;
+  
+
+}
+
+.karma{
+   display: flex;
+   flex-direction: column;
+   width: 100%;
+   background-image: url("/img/first-background.jpg");
+   height:70vh;
+   background-size: cover;
+   background-position: center;
+   align-items: center;
+   justify-content: center;
+   color: white;
+   
+}
+
+.icon-container{
+   width: 60%;
+   display: flex;
+   flex-direction: row;
+   align-content: center;
+   padding: 40px;
+   justify-content: center;
+   
+
+}
+
+img.icon{
+   width: 100px;
+   height: 100px;
+   
+}
+
+.icon-box{
+   display: flex;
+   align-items: center;
+   flex-direction: column;
+}
+h3{
+   text-align: center;
+   margin-top: 90px;
+   font-size: 40px;
+   font-weight: lighter;
+}
+/* h2{
+  font-weight: lighter;
+} */
+
+footer{
+   display: flex;
+   flex-direction: column;
+}
+
+.footer{
+   display: flex;
+   flex-direction: row;
+}
+
+.footer_icon{
+   height: 20px;
+   width: 20px;
+   padding: 10px;
+
+}
+
+img{
+   max-height: 100%;
+
+}
+
+hr{
+   width: 80%;
+}
+
+h5{
+
+   padding: 10px;
+   font-size: medium;
+}
+
+
+
+
+button{
+   background-color:rgb(253, 67, 5);
+   margin-top: 80px;
+   padding: 10px;
+}
+
+.feature {
+  position: left;
+  width: 120%;
+  height: 439px;
+  left: 599px;
+  top: 1758px;
+  
+
+}
+
+header{
+  background-color:lightgray;
+  ;
+}
+
+#container {
+  display:flex;
+  background-color:antiquewhite;
+  
+}
+
+.box {
+
+ text-align: center;
+  width: 50%;
+  text-emphasis:center;
+  flex-direction: row;
+  
+}
+
+.text{
+  margin-top: 120px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-weight: 400px;
+  font-size: 42px;
+  line-height: 49px;
+  color: #434242;
+ 
+}
+
+.button5{
+  border:none;
+  color: white;
+  padding:10px 20px 10px 20px;
+  border-radius: 5px;
+}
+
+.imgg{
+  display: flex;
+  
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 50%;
+  height:808px;
+
+ 
+}
+
+.containerrr{
+  display: flex;
+  flex-direction: row;
+
+}
+.form *{
+ 
+  padding: 10px;
+  
+} 
+.form input{
+  border-radius: 5px;
+}
+option{
+  border-radius: 5px;
+}
+/* 
+.form{
+  width: 50%;
+
+} */
+.firstline{
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  /* padding: 30px; */
+  
+}
+.radioo{
+  margin-left: 50px;
+}
+.labell{
+  margin-left: 0;
+}
+
+.firstname{
+  display:flex;
+   flex-direction: column;
+}
+#firstname{
+
+border-radius: 4px;
+
+}
+
+.lastname{
+  display:flex;
+   flex-direction: column;
+   
+}
+.address{
+  margin-top: 25px;
+  margin-left: 50px;
+
+}
+
+#addressLines , #addressLines{
+  width: 426px;
+}
+.postcity{
+  display: flex;
+  margin-top: 35px;
+}
+.radio{
+  margin-top: 35px;
+  margin-left: 50px;
+}
+.checkbox{
+  margin-top: 35px;
+}
+.radio{
+  margin-top: 35px;
+}
+.bu{
+  margin-top:35px;
+   color: white;
+   background-color:#E0633A;
+   font-size: medium;
+   height: 70px;
+width: 169px;
+border-radius: 4px;
+  
+}
+#city{
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.postcode{
+  /* margin-left: 70px; */
+}
+.order{
+  height: 118px;
+width: 521px;
+color: #DE6E49;
+font-size: 50px;
+border-radius: nullpx;
+margin-bottom: 35px;
+font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
 
 
diff --git a/index.html b/index.html
index 3e742ef04..362bca342 100755
--- a/index.html
+++ b/index.html
@@ -15,5 +15,103 @@
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
     <!-- All the images you need are in the 'img' folder -->
 
-</body>
+
 </html>
+
+<header>
+
+    <div class="logo"><img src="./img/karma-logo.svg" id="logo"  alt="karma logo">
+    </div>
+
+  <nav>
+    <ul>
+        
+        <li><a href="#" id="meet-karma">Meet Karma</a></li>
+        <li><a href="#">How it works</a></li>
+        <li><a href="#">Store</a></li>
+        <li><a href="#">Blog</a></li>
+        <li><a href="#">Help</a></li>
+        <li><a href="#">Login</a></li>
+
+    </ul>
+  </nav>
+</header>
+
+<div class="karma">
+    <h1>intoducing karma</h1>
+    <h2> bring wifi with you,everywhere you googleapis</h2>
+    <button>learn more</button>
+</div>
+
+<div class="main">
+<h3>everyone needs a little karma</h3>
+</div>
+
+<div class="icon-container">
+    
+<div class="icon-box">
+
+    <img src="./img/icon-devices.svg" class="icon">
+    <h4>internet for all devices</h4>
+
+</div>
+
+<div class="icon-box">
+
+    <img src="./img/icon-coffee.svg" class="icon">
+    <h4>boost your productivity</h4>
+
+</div>
+
+<div class="icon-box">
+
+    <img src="./img/icon-refill.svg" class="icon">
+    <h4>pay as you go</h4>
+
+</div>
+</div>
+<section>
+    <div id="container">
+    <div>
+        <img class="feature" src="./level-2\homepage-feature.png" alt="home page feature">
+    </div>
+
+    <div class="box">
+        <div class="text">
+        <h4>Wherever I am, I just don’t worry about my connection anymore!</h4>
+        </div>
+        <button class="button5">Get Karma today</button>
+    </div>
+</div>
+
+
+
+</section>
+
+
+<footer>
+    <div>
+        <h5>join us</h5>
+    </div>
+
+    <div class="footer">
+
+        <div class="footer_icon">
+            <img src="./img/twitter-icon.svg" alt="twitter icon">
+        </div>
+
+        <div class="footer_icon">
+            <img src="./img/facebook-icon.svg"  alt="facebook icon">
+        </div>
+   
+        <div class="footer_icon">
+            <img src="./img/instagram-icon.svg"  alt="instagram icon">
+        </div>
+
+    </div>
+
+    <h6>@ karma mobility icon</h6>
+ </div>
+
+</footer>
+</body>
\ No newline at end of file
diff --git a/store.html b/store.html
new file mode 100644
index 000000000..6419e718c
--- /dev/null
+++ b/store.html
@@ -0,0 +1,117 @@
+<!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="shortcut icon" type="image/x-icon"  href="favicon.ico">
+</head>
+<body>
+
+<header>
+
+    <div class="logo"><img src="../img/karma-logo.svg" id="logo"  alt="karma logo">
+    </div>
+
+  <nav class="nav">
+    <ul class="navlist">
+        
+        <li><a href="#" id="meet-karma">Meet Karma</a></li>
+        <li><a href="#">How it works</a></li>
+        <li><a href="#">Store</a></li>
+        <li><a href="#">Blog</a></li>
+        <li><a href="#">Help</a></li>
+        <li><a href="#">Login</a></li>
+
+    </ul>
+  </nav>
+</header>
+
+<main class="containerrr">
+    <section class="form">
+            <h1 class="order">Order your Karma wifi device today!</h1>
+            <form>
+              <section class="firstline">
+                <div class="firstname">
+                    <label class="labell" for="firstName">First name*</label>
+                    <input id="firstName" type="text" name="first-name"></input>
+                </div>
+                <div class="lastname">
+                    <label  class="labell" for="lastName">Last name*</label>
+                    <input id="lastName" type="text" name="last-name"/>
+                </div>
+            </section>
+                <div class="address">
+                    <label for="addressLines">Address*</label>
+                    <input id="addressLines" type="text" name="addresslanes"/>
+                </div>
+                <div class="address">
+                    <label for="addressLines">Address 2*</label>
+                    <input  id="addressLines" type="text" name="addresslanes"/>
+                </div>
+            <div class="postcity">
+                <div>
+                    <label for="city">city*</label>
+                    <select id="city">
+                        <option name="city">Select your City</option>
+                        <option name="city">Manchester</option>
+                        <option name="city">London</option>
+                        <option name="city">Liverpool</option>
+                    </select>
+                </div>
+                <div class="postcode">
+                    <label for="postcode">postcode*</label>
+                    <input  id="postcode" type="text" name="postcode"/>
+                </div>
+            </div>
+                 <div class="radio">
+                    <span >select a color</span>
+                    <div>
+                        <input  type="radio" name="color">Karma orange
+                        <input class="radioo" type="radio" name="color">space Grey
+                    </div>
+                </div>
+                    <div class="checkbox">
+                        <input type="checkbox"><h9> By placing your order you agree to Karma's <a href="#">Terms and Conditions *.</a></h9>
+                    </div>
+                    <div>
+                        <button class="bu">Place my order</button>
+                    </div>
+               
+            </form>
+        </section>
+        <section class="imgg">
+            <img src="../level-2\store-image_by-andrew-neel-unsplash.jpg" alt="Girl">
+        </section>
+</main>
+
+<footer>
+    <div>
+        <h5>join us</h5>
+    </div>
+
+    <div class="footer">
+
+        <div class="footer_icon">
+            <img src="../img/twitter-icon.svg" alt="twitter icon">
+        </div>
+
+        <div class="footer_icon">
+            <img src="../img/facebook-icon.svg"  alt="facebook icon">
+        </div>
+   
+        <div class="footer_icon">
+            <img src="../img/instagram-icon.svg"  alt="instagram icon">
+        </div>
+
+    </div>
+
+    <h6>@ karma mobility icon</h6>
+ </div>
+
+</footer>
+    
+</body>
\ No newline at end of file