diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..6f3a2913e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/css/normalize.css b/css/normalize.css
index 957605911..cddb546d4 100755
--- a/css/normalize.css
+++ b/css/normalize.css
@@ -433,4 +433,5 @@ table {
 td,
 th {
     padding: 0;
-}
\ No newline at end of file
+}
+
diff --git a/css/style.css b/css/style.css
index 5cb025cef..e97c2aa78 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,10 +1,19 @@
 
- /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
 
-body {
+body{
     font-family: 'Roboto', sans-serif;
     -webkit-font-smoothing: antialiased;
-}
+    font-size: 16px;
+   
+} 
+
+
+ /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
+ 
+
+
+
+
 
 /**
  * Add your custom styles below
@@ -17,3 +26,295 @@ body {
  */
 
 
+
+
+
+
+.header-container{
+
+   display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+}
+
+ .logo{
+   padding-left: 50px;
+   padding-top: 20px;
+   width:30px;
+ }
+
+
+ .navbar{
+   list-style-type: none;
+   margin: 0;
+   padding:0;
+   display: flex;
+   justify-content: flex-end;
+   margin-right: 30px;
+   gap:10px;
+   
+   
+ }
+
+ .navbar, a{
+   text-decoration: none;
+   color:#333333be;
+ }
+
+ .navbar a:hover{
+   color:rgb(255, 94, 0);
+ }
+
+
+ .main-cover{
+   width:300px;
+  
+ }
+
+ .section-one{
+   text-align: center;
+   padding:10vw;
+   background-image: url("/img/first-background.jpg" );
+   background-size: cover;
+   color:white;
+   
+   
+   
+ }
+
+.learn-more-btn {
+   background-color:rgb(255, 94, 0);
+    border-radius: 4px;
+    border:  rgba(192, 102, 19, 0.822)  ;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 20px;
+    padding-right: 20px;
+    margin-top: 30px;
+    width:200px;
+}
+
+
+
+
+ .section-two-bar,ul{
+   
+   list-style-type: none;
+   display: flex;
+   gap:10rem;
+   justify-content: center;
+
+   
+
+ }
+
+ .section-two-bar img{
+   width: 150px;
+   
+ }
+
+ h4{
+   text-align: center;
+   padding: 20px;
+ }
+
+ hr{
+   border: none;
+   border-top: 2px solid #ddd;
+ }
+
+
+
+
+
+ .media{
+   display: flex;
+   gap:10rem;
+   justify-content: center;
+   
+ }
+
+ .media img{
+   height: 50px;
+   width: 50px;
+   border: 1px solid #6159596c;
+   border-radius: 70px;
+   padding: 10px;
+
+
+ }
+
+.quote-container{
+  background-color: bisque;
+display: flex;
+color: rgba(0, 0, 0, 0.541);
+
+
+}
+
+.quote-position{
+  display: flex;
+  flex-direction: column;
+    align-content: center;
+    justify-content: center;
+    line-height: 2em;
+    padding: 5em;
+
+}
+
+
+
+
+
+
+.button-quote{
+
+  background-color:rgb(255, 94, 0);
+    border-radius: 4px;
+    border:  rgb(255, 128, 0)  ;
+    color: white;
+    width:200px;
+
+}
+
+.btn-color{
+  background-color:rgb(255, 94, 0);
+}
+
+
+        .store-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: stretch; 
+            padding: 20px;
+            gap: 20px;
+            min-height: 100vh; 
+        }
+
+        .form-container {
+            width: 50%;
+            padding: 20px;
+            
+        }
+
+        h1 {
+            font-size: 24px;
+            margin-bottom: 20px;
+            color:  #f4623a;
+        }
+
+        form {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .color-selection,
+        .terms-container {
+            display: flex;
+            
+            gap: 10px; 
+        }
+
+        input[type="text"],
+        select,
+        button {
+            padding: 10px;
+            margin-top: 5px;
+            border-radius: 6px;
+            border: 1px solid #ccc;
+            width: 100%; 
+          
+      
+        }
+
+        .flex-container {
+            display: flex;
+            justify-content: space-between; 
+        }
+
+        .half-width {
+            width: 48%; 
+        }
+
+       .submit-button {
+            background-color: #f4623a;
+              color: white;
+            border: none;
+            cursor: pointer;
+            padding: 15px;
+            font-size: 16px;
+            margin-top: 20px;
+        }
+
+        button:hover {
+            background-color: #d04a28;
+        }
+
+        .store-img {
+            width: 100%;
+    height: 100%; 
+    object-fit: cover;
+        }
+
+        .aside-img-store {
+            
+            width: 50%; 
+    justify-content: flex-end;
+        }
+
+
+
+@media  (max-width:568px){
+
+  .section-two-bar,ul{
+    list-style-type: none;
+    display: flex;
+    gap: 10rem;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+  .header-container {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-direction: column;
+  
+}
+.logo {
+  /* padding-left: 50px; */
+  padding-top: 20px;
+  width: 30px;
+  padding-right: 60px;
+  padding-bottom: 30px;
+}
+.media {
+  display: flex;
+  gap: 10rem;
+  justify-content: center;
+  flex-direction: column-reverse;
+  align-content: center;
+  align-items: center;
+}
+.quote-container {
+    display: flex;
+    flex-direction: column;
+}
+.flex-container {
+    display: flex;
+    flex-direction: column;
+}
+.store-container {
+    display: flex;
+    gap: 20px;
+    flex-direction: column;
+    align-items: center;
+}
+.color-selection, .terms-container {
+    display: flex;
+    gap: 10px;
+    flex-direction: column;
+  }
+    
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 3e742ef04..fae633aea 100755
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
     <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>
 
@@ -15,5 +16,110 @@
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
     <!-- All the images you need are in the 'img' folder -->
 
+
+<header>
+        <div class="header-container">
+        <img src="img/karma-logo.svg"  class="logo"> 
+             <nav>
+            <ul class="navbar">
+
+<li><a href="index.html"> Meet Karma </a> </li>
+
+
+<li> <a href="#how-it-work">How it work</a> </li>
+
+
+<li><a href="store.html" > Store</a></li>
+
+<li> <a href="#blog">Blog</a></li>
+<li><a href="#help">Help </a></li>
+<li> <aLogin</li>
+            </ul>
+        </nav>
+        </div>
+    </header>
+
+    <br>
+    <br>
+<main>
+
+<section class="section-one">
+    <h1> introducing karma</h1>
+        <p>Bring wifi with you,everywhere you go</p>
+   <button class="learn-more-btn"> Learn More</button>
+</section>
+
+<br><br>
+<h4> Everyone needs a little Karma</h4>
+
+
+<section class="section-two-bar">
+
+        
+        <ul>
+<li>
+   <img src="img/icon-devices.svg">
+   <p>Internet For all devices</p>
+</li>
+<li>
+    <img src="img/icon-coffee.svg">
+    <p> Boost your productivity</p>
+</li>
+<li>
+<img src="img/icon-refill.svg">
+<p> Pay as you go</p>
+</li>
+
+    </ul>
+</section>
+
+
+
+<br>
+
+
+
+<section class="quote-container">
+
+       <img src="level-2/homepage-feature.png">
+       <div class="quote-position"> 
+        <h2>"Wherever I am, I just don't worry about my connection anymore!"</h2>
+    <button class="button-quote">Get Karma today</button> 
+    </div>
+     
+    
+
+</section>
+
+    
+    
+
+
+<br>
+
+<footer> <h4>Join us</h4>
+<br><br>
+    <div class="media">
+        <img src="img/twitter-icon.svg">
+        <img src="img/facebook-icon.svg">
+        <img src="img/instagram-icon.svg">
+    </div>
+<br><br>
+   <h4>&copy karma mobility</h4> 
+   
+</footer>
+
+</main>
+
+
+ <!--    <main class="main-container">
+<h1> introducing karma</h1>
+        <p> bring wifi with you,everywhere you go </p>
+        <button> learn more</button>
+    </main> -->
+
+
+
+
 </body>
 </html>
diff --git a/store.html b/store.html
new file mode 100644
index 000000000..6ae45c3a0
--- /dev/null
+++ b/store.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <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>
+        <div class="header-container">
+        <img src="img/karma-logo.svg"  class="logo"> 
+             <nav>
+            <ul class="navbar">
+
+
+<li><a href="index.html"> <b>Meet Karma</b></a> </li>
+
+
+<li> <a href="#how-it-work">How it work</a> </li>
+<li><a href="#store" >Store</a></li>
+<li> <a href="#blog">Blog</a></li>
+<li><a href="#help">Help </a></li>
+            </ul>
+        </nav>
+        </div>
+    </header>
+<hr>
+
+    <div class="store-container">
+        <div class="form-container">
+            <h1>Order your Karma wifi device today!</h1>
+            <form action="#">
+                <div class="flex-container">
+                <div class="half-width">
+                        <label for="first-name">First name *</label>
+                        <input type="text" id="first-name" required>
+                    </div>
+                    <div class="half-width">
+                        <label for="last-name">Last name *</label>
+                        <input type="text" id="last-name" required>
+                    </div>
+                </div>
+
+                <label for="address">Address *</label>
+                <input type="text" id="address" required>
+
+                <label for="address2">Address 2</label>
+                <input type="text" id="address2">
+
+                <div class="flex-container">
+                    <div class="half-width">
+                        <label for="city">City *</label>
+                        <select id="city" required>
+                            <option value="">Select your city...</option>
+                        </select>
+                    </div>
+                    <div class="half-width">
+                        <label for="postcode">Postcode *</label>
+                        <input type="text" id="postcode" required>
+                    </div>
+                </div>
+<label>Select a colour</label>  
+
+<div class="color-selection">
+
+                <input type="radio" id="karma-orange" name="color" value="orange" required>
+                <label for="karma-orange">Karma orange</label>
+                <input type="radio" id="space-grey" name="color" value="grey">
+                <label for="space-grey">Space Grey</label>
+
+</div>
+                <div class="terms-container">
+
+                <label for="terms">By placing your order you agree to Karma's <a href="#">Terms and Conditions</a>. *</label>
+                <input type="checkbox" id="terms" required>
+                </div>
+                
+
+                <button type="submit">Place my order</button class="submit-button" class="btn-color">
+            </form>
+        </div>
+
+        <aside class="aside-img-store">
+            <img src="level-2/store-image_by-andrew-neel-unsplash.jpg" class="store-img" alt="Store Image">
+        </aside>
+    </div>
+
+
+<footer> <h4>Join us</h4>
+<br><br>
+    <div class="media">
+        <img src="img/twitter-icon.svg">
+        <img src="img/facebook-icon.svg">
+        <img src="img/instagram-icon.svg">
+    </div>
+<br><br>
+   <h4>&copy karma mobility</h4> 
+   
+</footer>
+</body>
+</html>
\ No newline at end of file