diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 46c150e15..7369e2932 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -16,21 +16,24 @@ Please complete the details below this message
 
 # Your Details
 
-- Your Name:
-- Your City:
-- Your Slack Name:
+- Your Name: Abdirahim Sharif Hussein
+- Your City: Birmingham
+- Your Slack Name:Abdirahim Sharif Hussein
 
 # Homework Details
 
-- Module:
-- Week:
+- Module: HTML-CSS-Module-Project
+- Week: 2
 
 # Notes
 
 - What did you find easy?
 
+
 - What did you find hard?
+indenting the code
 
 - What do you still not understand?
 
+
 - Any other notes?
diff --git a/css/store.css b/css/store.css
new file mode 100644
index 000000000..b0c4e4de9
--- /dev/null
+++ b/css/store.css
@@ -0,0 +1,221 @@
+*{
+    margin: 0;
+}
+.colour-radio{
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    margin-right: 10px;
+}
+.grey-radio{
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    margin-right: 10px;
+}
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;  
+    height: 5rem;
+    width: 100%;
+    background-color: rgb(238, 231, 231);
+  }
+
+  .navigation-menu{
+    display: flex;
+    list-style: none;
+}
+
+.nav-item {
+padding: 16px 0;
+      
+ }
+.nav-header{
+        color: grey;
+        font-weight: 500;
+        text-decoration: none;
+        padding: 0 1em;
+        margin-right: 10px;
+        transition: opacity 0.25s;
+ }
+ .nav-header:hover {
+        color: orangered;
+      }
+/*form section*/
+.main{
+position: absolute;
+width: 1318px;
+height: 1235px;
+left: 122px;
+top: 98px;
+
+}
+.form-container {
+margin: 0px 5%;
+display: flex;
+justify-content: space-between;
+width: 70%;
+height: 50%;
+    }
+
+.image-form{
+position: absolute;
+width: 701px;
+height: 1235px;
+left: 739px;
+top: 98px;
+}
+
+.title {
+    position: absolute;
+    width: 521px;
+    height: 118px;
+    left: 123px;
+    top: 214px;
+    
+    font-family: 'Roboto';
+    font-style: normal;
+    font-weight: 500;
+    font-size: 50px;
+    line-height: 59px;
+    
+    color: #DE6E49;
+}
+
+.form {
+    position: absolute;
+    width: 501px;
+    height: 849px;
+    left: 122px;
+    top: 414px;    
+ }
+.first-name {
+    position: absolute;
+    width: 235px;
+    height: 90px;
+    left: 122px;
+    top: 414px;
+}
+.Last-name {
+position: absolute;
+width: 235px;
+height: 90px;
+left: 384px;
+top: 414px;
+}
+
+.first-name input,
+.Last-name input{
+  width: 320px;
+  height: 50px;
+  margin-top: 1rem;
+  border: 3px solid rgb(177, 174, 174);
+  border-radius: 5px;
+}
+
+.Address {
+position: absolute;
+width: 499px;
+height: 90px;
+left: 122px;
+top: 536px;
+}
+.Address input{
+width: 685px;
+height: 53px;
+margin-top: 1rem;
+border: 3px solid rgb(177, 174, 174);
+border-radius: 4px;
+}
+.Address-2{
+position: absolute;
+width: 499px;
+height: 90px;
+left: 122px;
+top: 658px;
+}
+.Address-2 input{
+    width: 685px;
+    height: 53px;
+    margin-top: 1rem;
+    border: 3px solid rgb(177, 174, 174);
+    border-radius: 5px;
+}
+
+.city{
+position: absolute;
+width: 250px;
+height: 90px;
+left: 122px;
+top: 780px;
+}
+.city select {
+width: 405px;
+    height: 50px;
+    margin-top: 1rem;
+    font-family: 'Roboto';
+    font-style: italic;
+    font-weight: 400;
+    font-size: 21px;
+    color: #666666;
+    border: 3px solid rgb(177, 174, 174);
+    border-radius: 5px;
+
+}
+.Postcode{
+position: absolute;
+width: 165px;
+height: 90px;
+left: 456px;
+top: 790px;
+}
+.Postcode input{
+    width: 200px;
+    height: 45px;
+    margin-top: 0.2rem;
+    border: 3px solid rgb(177, 174, 174);
+    border-radius: 5px;
+} 
+.colour-radio {
+position: absolute;
+width: 353px;
+height: 70px;
+left: 122px;
+top: 940px;
+width: 200px;
+height: 53px;
+margin-top: 1rem;
+border: 3px solid rgb(177, 174, 174);
+border-radius: 4px;
+}
+
+.checkbox {
+position: absolute;
+width: 500px;
+height: 51px;
+left: 123px;
+top: 1106px;
+}
+
+.submit{
+position: absolute;
+width: 269px;
+height: 70px;
+left: 122px;
+top: 1100px;
+
+}
+.submit button {
+    background: #E0633A;
+    font-family: 'Roboto';
+    font-style: normal;
+    color: white;
+    font-weight: 500;
+    font-size: 22px;
+    margin-top: 4em;
+    line-height: 26px;
+    width: 280px;
+    height: 70px;
+    border-radius: 0.25em;
+  }
diff --git a/css/style.css b/css/style.css
index 5cb025cef..e722615b6 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,11 +1,176 @@
 
- /* 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;
+  -webkit-font-smoothing: antialiased;
+  font-size: 2.75em;
+  outline:0;
+  padding:0;
+  margin:0;
+  border:0;
+}
+.nav-menu {
+  display: flex;
+  list-style: none;
+  flex-direction:row;
+  justify-content: end;
+
+}
+.nav-list {
+  margin-left: 15px;
+  padding: 0.rem 0;
+ font-family: 'sans-serif';
+ padding-bottom:0px;
+}
+.karma-logo {
+  display: flex;
+  align-items: center;
+  width: auto;
+  height: auto;
+  padding: 10px 2px;
+  position:absolute;
+}
+.header-nav{
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: center;
+  padding-right: 10%;
+  list-style: none;
+  line-height: 3em;
+}
+.header-nav ul, .nav-list{
+  display: flex;
+}
+.header-nav a:hover, 
+.header-nav a:focus{
+color: red;
+}
+.main-img {
+  background-image :url("../img/first-background.jpg");
+  background-origin: unset;
+  background-size: cover;
+  background-color: rgb(rgb(43, 35, 35), green, blue);
+  background-position: 60%;
+}
+.I.Karma-text-intro{
+  height: 325px;
+  text-align: center;
+  display: flex;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: auto;
+  margin-bottom: auto;
+  max-width: 225px;
+  max-height: fit-content;
+  color: black;
+  justify-content: center;
+  align-items: center;
+}
+.learn-more-28 {
+  appearance: none;
+  background-color: transparent;
+  border: 2px solid #1A1A1A;
+  border-radius: 15px;
+  box-sizing: border-box;
+  color: #3B3B3B;
+  cursor: pointer;
+  display: inline-block;
+  font-family:Arial, Helvetica, sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: normal;
+  margin: 0;
+  min-height: 60px;
+  min-width: 0;
+  outline: none;
+  padding: 16px 24px;
+  text-align: center;
+  text-decoration: none;
+  transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  width: 100%;
+  will-change:auto;
+}
+
+.learn-more-28:disabled {
+  pointer-events: none;
+}
+
+.learn-more-28:hover {
+  color: #fff;
+  background-color: #1A1A1A;
+  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
+  transform: translateY(-2px);
+}
+
+.learn-more28:active {
+  box-shadow: none;
+  transform: translateY(0);
+}
+
+.Karma-abilities{
+  padding-top: 1.5em;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+
+}
+
+.Karma-abilities div h2{
+  font-weight: normal;
+  font-style: none;
+  font-size: 32px;
+  padding: 1em;
+}
+.Karma-abilities li{
+ font-size: 1em;
+ margin-top: 32px;
+margin-bottom: auto;
+}
+#device {
+border: 1px solid #ddd;
+border-radius: 4px;
+padding: 5px;
+width: 10px;
+display: block;
+margin-left: auto;
+margin-right: auto;
+width: 50%;
+}
+#coffee {
+border: 1px solid #ddd;
+border-radius: 4px;
+padding: 5px;
+width: 10px;
+display: block;
+margin-left: auto;
+margin-right: auto;
+width: 50%;
 }
+#refill {
+border: 1px solid #ddd;
+border-radius: 4px;
+padding: 5px;
+width: 10px;
+display: block;
+margin-left: auto;
+margin-right: auto;
+width: 50%;
+}
+sast-class{
+background: rgba(224, 99, 58, 0.1);
+}
+.homepage-feature{
+  background-color:rgb(193, 164, 164);
+    display: flex;
+     text-align: center;
 
+}
+footer{
+  font-size: 1rem
+  }
 /**
  * Add your custom styles below
  * 
diff --git a/form-finished.html b/form-finished.html
new file mode 100644
index 000000000..6a34b29a6
--- /dev/null
+++ b/form-finished.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width-device-width,
+initial-scale-1.0">
+<meta http-equiv="X-UA-Compatible" content="ie-edge">
+</head>
+<body>
+<div id="results"></div>
+<title>results</title>
+<a href="/">Back to Homepage</a>
+<script>
+const resultslist = document.getElementById("results")
+new URLSearchParans(window.location.search).forEach((value,
+name) => {
+resultsList.append('$(name): $(value)')
+ resultsList.append(document.createElement('br'))
+})
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 3e742ef04..841c7e47b 100755
--- a/index.html
+++ b/index.html
@@ -1,4 +1,3 @@
-<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
@@ -6,14 +5,88 @@
     <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="style.css">
     <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
 </head>
 <body>
+    <header id= "headerPage"  class= "headerPage">
+        <!--The Logo-->
+        <img src="img/karma-logo.svg" alt=" karma Logo" width="60px" height="50px"/>
+        <img id="karma-logo">
+        <nav id ="header-nav" class = "header-nav"></nav>
+        <nav>
+            <ul class="nav-menu">
+              <li class="nav-list">
+                <li><a href="#" class="nav-item">Meet Karma</a></li>
+                <li><a href="#" class="nav-item">How it Works</a></li>
+                <li><a href="#" class="nav-item">Store</a></li>
+                <li><a href="#"class="nav-item">Blog</a></li>
+                <li><a href="#" class="nav-item">Help</a></li>
+                <li><a href="#"class="nav-item">Login</a></li>
+            </ul>
+            <a class="burger-nav" id="burger-btn"></a>
+        </nav>
+    </header>
+    <!--main section of the page-->
+    <main id = "main">
+        <section id="main-img" class = "main-img">
+            <article class = "Karma-text-intro">
+                <h1>Introducing Karma</h1> 
+                <p>Bring wifi with you, everywhere you go.</p> </div>
+                <button class="learn-more-28" role="button">Learn More</button>
+            </article>
+         </section>
 
-    <!-- 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 -->
+    <!--section about the different feature karma has-->
+        <section id ="Karma-abilities"  class = "Karma-abilities">
+            <h2>Everyone needs a little karma</h2>
+        <article class="center-section">
+                    <img id = "device" 
+                         src="./img/icon-devices.svg" width="100px" height="100px"> 
+                    <figcaption>Internet for all device</figcaption>
+          </article>
+       <article class="center-section">
+                    <img id="coffee" 
+                         src="./img/icon-coffee.svg" width="100px" height="100px">
+         <figcaption>Boost your Productivity</figcaption> </article>
+        <article class="center-section">
+                    <img id="refill"
+                         src="./img/icon-refill.svg" width="100px" height="100px">
+          <figcaption>Pay as you go</figcaption> </article>
+        </section>
+        </main>
+ <!--homepage extension -->
+  <section class="homepage-section">
+        <img src="img\homepage-feature.png" alt="Homepage feature">
+        <section class="sast-class">"Wherever I am, I just don't worry about my connection anymore!" </section>
+            <button class="learnmore-28">Get Karma today</button>
+  </section>
+        <!--footer section of the page-->
+        <footer id = "footer">
+        <section id ="footer-section"  class = "footer-section">
+         <div>
+            <h3>Join us</h3>
+        </div>
 
+          <nav id ="footer-nav-bar" class = "footer-nav-bar">
+              <ul id ="footer-nav- list">
+                  <li>
+                      <a href="#"><img src ="Picture/twitter-icon.svg" alt="twitter image" width=1.875em height=1.875em></a>
+                </li>
+                <li>
+                    <a href="#"><img src ="Picture/facebook-icon.svg" alt="facebook image" width=1.875em height=1.875em></a>
+                </li>
+                <li>
+                    <a href="#"><img src ="Picture/instagram-icon.svg" alt="instagram icon" width=1.875em height=1.875em></a>
+                </li>
+              </ul>
+          </nav>
+    
+        </section>
+    </footer>
 </body>
 </html>
+
+    <!-- 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 -->
diff --git a/store.html b/store.html
new file mode 100644
index 000000000..2ca97e3de
--- /dev/null
+++ b/store.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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/store.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+ <header class="header">
+      <img src="img/karma-logo.svg" alt="Karma logo" width="40" height="40" />
+ <nav>
+    <ul class="navigation-menu">
+              <ls class="nav-item"><a class="nav-header" href="index.html">Meet Karma</a></ls>
+          <ls class="nav-item"><a class="nav-header" href="#">How it works</a></ls>
+          <ls class="nav-item"><a  class="nav-header" href="#">Store</a></ls>
+          <ls class="nav-item"><a class="nav-header" href="#">Blog</a></ls>
+          <ls class="nav-item"><a class="nav-header" href="#">Help</a></ls>
+          <ls class="nav-item"><a class="nav-header" href="#">Login</a></ls>
+        </ul>
+   </nav>
+    </header>
+   <main>
+      <div class="form-container">
+        <div class="title">
+    <b>Order your Karma wifi</b>
+          <br> device today!</div>
+    <form action="form-finished.html" method="get">
+        <div class="first-name">
+            <label for="first-name">First Name *</label>
+            <input type="text" name="first-name" id="first-name" required>
+        </div>
+        <div class="Last-name">
+            <label for="Last-name">Last Name *</label>
+            <input type="text" name=Last-name id="Last-name" required>
+            <br />
+        </div>
+        <div class="Address">
+            <label for="Address">Address *</label><br />
+             <input type="text" name="Address" id="Address" required>
+        </div>
+        <div class="Address-2">
+            <label for="Address-2">Address 2 *</label><br />
+            <input type="text" name="Address-2" id="Address-2" required>
+        </div>
+        <div class="city">
+            <label for="city">City *</label> 
+             <select id="city" name="city" required>
+                <option value="1">London</option>
+                <option value="2">Manchester</option>
+                <option value="3">Birmingham</option>
+                <option value="4">Edinburgh</option>
+                <option value="5">Bristol</option>
+                <option value="6">Cardiff</option>
+             </select>
+             </div>
+             <br />
+        <div class="Postcode">
+            <label for="Postcode">Postcode *</label><br />
+             <input type="text" name="Postcode" id="Postcode" required>
+             </div>
+
+<div> 
+
+
+    <div class="colour-radio">
+    <p><b>Select color</b></p>
+    <br />
+        <label class="karma-orange">Karma Orange
+         <input type="radio" value="Karma-orange" name="Karma-orange" id="karma-orange" checked>
+         <span class="checkmark"></span>
+        </label>
+        <label class="Space-grey">Space Grey
+        <input type="radio" value="Space-grey" name="Space-grey" id="Space-grey">
+        <span class="checkmark"></span>
+        </label>
+    </div>
+    <br />
+    <div class="checkbox">
+    <label for="checkbox-label">By placing your order you agree to Karma's <a href="#">Terms and Conditions.</a> *
+    <input id="agreement" type="checkbox" name="checked">
+     <span class="checkmark"></span>
+     </label>                    
+</div> 
+
+<br />
+<div class="submit">
+<button id ="submit" type="submit">Place My Order</button>
+</div> 
+
+
+</form>
+<img class="image-form" src="./level-2/store-image_by-andrew-neel-unsplash.jpg" alt="image desktop" width="500px" >
+</main>
+</body>
+</html>
\ No newline at end of file