diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 000000000..3816ae869
Binary files /dev/null and b/.DS_Store differ
diff --git a/css/style.css b/css/style.css
index 5cb025cef..7226e8115 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,9 +1,8 @@
-
- /* 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;
+  -webkit-font-smoothing: antialiased;
 }
 
 /**
@@ -16,4 +15,333 @@ body {
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
  */
 
+/* header style*/
+body {
+  padding: 0;
+  margin: 0%;
+  width: auto;
+  width: 1440px;
+}
+header {
+  max-width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  color: #c4c4c41a;
+  height: 89px;
+}
+.logo > img {
+  width: 100%;
+  height: 100%;
+  max-width: 20px;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+}
+
+ul {
+  list-style: none;
+}
+.nav-bar {
+  width: 50vw;
+  display: flex;
+  justify-content: space-around;
+  margin: 0 auto;
+}
+li {
+  font-size: 16px;
+}
+a {
+  text-decoration: none;
+  color: #65686d;
+  transition: background-color 0.5s;
+}
+a:hover {
+  color: #ea9377;
+}
+
+/* section Introducing Karma*/
+
+.Intro {
+  background: url(../img/first-background.jpg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100%;
+  height: 859px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
 
+#Content-Intro {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 5%;
+}
+
+h1 {
+  font-weight: 100;
+  font-size: 4.4em;
+
+  margin-bottom: 0.5em;
+  color: white;
+}
+p {
+  font-size: 2em;
+  margin: 0%;
+  font-weight: lighter;
+}
+.bringWiFi {
+  color: white;
+}
+button {
+  border: none;
+  background-color: #e06339;
+  display: inline-block;
+  margin-top: 36px;
+  line-height: 2em;
+  padding: 0.2em 1em;
+  font-size: 1.4em;
+  border-radius: 2px;
+  transition-duration: 0.4s;
+  color: white;
+}
+button:hover {
+  background-color: white;
+  color: #e06339;
+}
+.Advantages {
+  height: 812px;
+  margin-top: -80px;
+  display: flex;
+  align-items: center;
+}
+
+.titleAdvantages {
+  text-align: center;
+}
+h2 {
+  font-weight: lighter;
+  font-size: 3em;
+  text-align: center;
+  margin-top: 4em;
+}
+.icon img {
+  width: 10em;
+  height: 10em;
+}
+#icon1,
+#icon2,
+#icon3 {
+  width: 415px;
+  height: 351px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.icon {
+  width: 415px;
+  height: 351px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  flex-direction: row;
+  width: 100%;
+  text-align: center;
+  margin: 20px 0;
+  min-height: 200px;
+  column-gap: 10%;
+  padding-inline-start: 0px;
+}
+.icon p {
+  margin-top: 10px;
+}
+
+/* Footer*/
+footer {
+  height: 370px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+#nav-social {
+  display: flex;
+  justify-content: center;
+}
+footer > p {
+  text-align: center;
+  font-size: 1.4em;
+  margin-top: 6px;
+  color: #65686d;
+}
+ul.socialmedia {
+  padding: 0px 0px 0px 0px;
+  display: flex;
+  align-content: space-around;
+}
+#companyName {
+  font-size: 1.1em;
+  color: #65686d;
+}
+
+.mainStore {
+  color: #e06339;
+}
+
+/*------------------------------------------Store style----------------------*/
+.mainstore {
+  display: flex;
+  max-width: 100%;
+  justify-content: center;
+}
+.orderform {
+  display: flex;
+  align-items: center;
+  gap: 10%;
+  height: 1235px;
+}
+.loginform {
+  width: 521px;
+  height: 1234px;
+  margin-left: 123px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.imgright {
+  height: 1235px;
+}
+#fname,
+#lname {
+  height: 53px;
+  width: 235px;
+}
+.wrapername {
+  display: flex;
+  justify-content: flex-start;
+  gap: 5%;
+  margin-bottom: 20px;
+}
+#address,
+#address2 {
+  width: 499px;
+  height: 53px;
+  margin-bottom: 20px;
+}
+.city-postcode {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-content: flex-end;
+  gap: 5%;
+  margin-bottom: 20px;
+}
+#selectCity {
+  width: 307px;
+  height: 58px;
+  line-height: 22px;
+  font-size: 21px;
+}
+#postcode {
+  width: 165px;
+  height: 53px;
+  line-height: 22px;
+  font-size: 21px;
+}
+.radiobutton {
+  display: flex;
+  flex-flow: row;
+  justify-content: flex-start;
+  size: 22px;
+  line-height: 25px;
+  margin-top: 20px;
+}
+.radiobutton > label {
+  font-size: 21px;
+}
+.dropdownmenu,
+.name,
+.lname,
+.address1,
+.address2,
+.postcode > label {
+  font-size: 21px;
+}
+
+.radiobutton > input[type="radio"] {
+  width: 22px;
+  height: 22px;
+  margin-right: 10px;
+  accent-color: #de6e49;
+}
+.radiobutton > label {
+  margin-right: 10px;
+}
+.radiobutton > input[type="radio"]:after {
+  background-color: #d1d3d1;
+}
+.radiobutton > input[type="radio"]:checked:after {
+  background-color: #ffa500;
+}
+/*------------------Style Checkbox----------------------*/
+.boxes {
+  margin-top: 70px;
+  font-size: 18px;
+}
+.boxes a {
+  color: #e06339;
+}
+input[type="checkbox"] {
+  display: none;
+}
+
+input[type="checkbox"] + label {
+  display: block;
+  position: relative;
+  padding-left: 35px;
+  margin-bottom: 40px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+input[type="checkbox"] + label:before {
+  content: "";
+  display: block;
+  width: 20px;
+  height: 20px;
+  border: 1px solid #e0633a;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0.6;
+  -webkit-transition: all 0.12s, border-color 0.08s;
+  transition: all 0.12s, border-color 0.08s;
+}
+
+input[type="checkbox"]:checked + label:before {
+  width: 10px;
+  top: -5px;
+  left: 5px;
+  border-radius: 0;
+  opacity: 6;
+  border-top-color: transparent;
+  border-left-color: transparent;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.titlestore > p {
+  color: #de6e49;
+  font-size: 50px;
+  line-height: 59px;
+  text-align: center;
+  margin-bottom: 2em;
+}
+.select-colour {
+  font-size: 21px;
+  margin-top: 50px;
+}
diff --git a/index.html b/index.html
index 3e742ef04..c68baaed0 100755
--- a/index.html
+++ b/index.html
@@ -1,19 +1,129 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <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>
-
+    <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>
     <!-- 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>
+      <div class="logo">
+        <img src="img/karma-logo.svg" alt="karma karma-logo" width="50px" />
+      </div>
+      <div class="navlinks">
+        <nav id="nav-bar">
+          <ul class="nav-bar">
+            <li>
+              <a class="nav-link" href="#MeetKarma"
+                ><strong>Meet Karma</strong></a
+              >
+            </li>
+            <li><a class="nav-link" href="#HowItWorks">How it works</a></li>
+            <li>
+              <a class="nav-link" href="store.html" target="_blank">Store</a>
+            </li>
+            <li><a class="nav-link" href="#Blog">Blog</a></li>
+            <li><a class="nav-link" href="#SHelp">Help</a></li>
+            <li><a class="nav-link" href="#Login">Login</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+
+    <main>
+      <section class="Intro">
+        <div id="Content-Intro">
+          <h1>Introducing Karma</h1>
+          <p class="bringWiFi">Bring Wi-Fi with you, everywhere you go.</p>
+          <button
+            onclick="window.location.href='https://github.com/CodeYourFuture/HTML-CSS-Module-Project';"
+          >
+            Learn More
+          </button>
+        </div>
+      </section>
+
+      <!-- Section Everyone needs a little Karma -->
+
+      <div class="titleAdvantages">
+        <h2>Everyone needs a little Karma</h2>
+      </div>
 
-</body>
+      <section class="Advantages">
+        <div class="icon">
+          <div id="icon1">
+            <img
+              src="../HTML-CSS-Module-Project/img/icon-devices.svg"
+              alt="device"
+            />
+            <p>Internet for all devices</p>
+          </div>
+          <div id="icon2">
+            <img
+              src="../HTML-CSS-Module-Project/img/icon-coffee.svg"
+              alt="coffee"
+            />
+            <p>Boost your productivity</p>
+          </div>
+          <div id="icon3">
+            <img
+              src="../HTML-CSS-Module-Project/img/icon-refill.svg"
+              alt="refill"
+            />
+            <p>Pay as You Go</p>
+          </div>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <hr />
+      <p>Join us on</p>
+      <nav id="nav-social">
+        <ul class="socialmedia">
+          <li class="sm">
+            <a class="social-media" href="#twitter"
+              ><img
+                src="../HTML-CSS-Module-Project/img/twitter-icon.svg"
+                width="25"
+                height="25"
+                alt="twitterIcon"
+            /></a>
+          </li>
+          <li class="sm">
+            <a class="social-media" href="#facebook"
+              ><img
+                src="../HTML-CSS-Module-Project/img/facebook-icon.svg"
+                width="25"
+                height="25"
+                alt="facebookIcon"
+            /></a>
+          </li>
+          <li class="sm">
+            <a class="social-media" href="#instagram"
+              ><img
+                src="../HTML-CSS-Module-Project/img/instagram-icon.svg"
+                width="25"
+                height="25"
+                alt="instagramIcon"
+            /></a>
+          </li>
+        </ul>
+      </nav>
+      <p id="companyName">@Karma mobility, Inc.</p>
+    </footer>
+  </body>
 </html>
diff --git a/store.html b/store.html
new file mode 100644
index 000000000..f6e841329
--- /dev/null
+++ b/store.html
@@ -0,0 +1,214 @@
+<!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 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="logo">
+        <img src="img/karma-logo.svg" alt="karma karma-logo" width="50px" />
+      </div>
+      <div class="navlinks">
+        <nav id="nav-bar">
+          <ul class="nav-bar">
+            <li>
+              <a class="nav-link" href="#MeetKarma"
+                ><strong>Meet Karma</strong></a
+              >
+            </li>
+            <li><a class="nav-link" href="#HowItWorks">How it works</a></li>
+            <li>
+              <a class="nav-link" href="store.html" target="_blank">Store</a>
+            </li>
+            <li><a class="nav-link" href="#Blog">Blog</a></li>
+            <li><a class="nav-link" href="#SHelp">Help</a></li>
+            <li><a class="nav-link" href="#Login">Login</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+    <main>
+      <section class="mainstore">
+        <div class="orderform">
+         
+          <form class="loginform">
+            <div class="titlestore">
+            <p>Order your Karma wifi device today!</p>
+          </div>
+          <div class="wrapername">
+            <div class="name">
+              <label for="fname">First Name*</label><br />
+              <br>
+              <input
+                type="text"
+                id="fname"
+                name="fname"
+                required
+                minlength="4"
+                maxlength="8"
+                size="10"
+              />
+            </div>
+            <div class="lname">
+              <label for="lname">Last Name*</label><br />
+              <br>
+              <input
+                type="text"
+                id="lname"
+                name="lname"
+                required
+                minlength="4"
+                maxlength="8"
+                size="10"
+              />
+            </div>
+            </div>
+            <div class="address1">
+              <label for="address">Address*</label><br />
+              <br>
+              <input
+                type="text"
+                id="address"
+                name="address"
+                required
+                minlength="4"
+                maxlength="20"
+                size="26"
+              /><br />
+            </div>
+            <div class="address2">
+              <label for="address2">Address 2</label><br />
+              <br>
+              <input
+                type="text"
+                id="address2"
+                name="address2"
+                required
+                minlength="4"
+                maxlength="20"
+                size="26"
+              /><br />
+            </div>
+            <div class="city-postcode">
+            <div class="dropdownmenu">
+              <label for="selectCity">City*</label><br />
+              <br>
+              <select id="selectCity" Select yout city>
+                <option value="select-your-city">Select your city</option>
+                <option value="london">London</option>
+                <option value="bristol">Bristol</option>
+                <option value="edinburgh">Edinburgh</option>
+                <option value="liverpool">Liverpool</option>
+                <option value="oxford">Oxford</option>
+                <option value="birmingham">Birmingham</option>
+                <option value="nottingham">Nottingham</option>
+                <br />
+              </select>
+            </div>
+            <div class="postcode">
+              <label for="postcode">Post code*</label><br />
+              <br>
+              <input
+                type="text"
+                id="postcode"
+                name="postcode"
+                required
+                minlength="4"
+                maxlength="20"
+                size="26"
+              /><br />
+            </div></div>
+            <div class="select-colour">
+              <p>Select a colour</p></div>
+            <div class="radiobutton"> 
+              <input
+                type="radio"
+                id="karma-orange"
+                name="karma-orange"
+                value="karma-orange" required
+              />
+              <label for="karma-orange">Karma orange</label>
+              <input
+                type="radio"
+                id="space-grey"
+                name="space-grey"
+                value="space-grey"
+              />
+              <label for="space-grey">Space grey</label>
+            </div>
+            
+       
+
+<!---------------------------Checkbox-->
+
+<div class="boxes">
+
+<input type="checkbox" id="box-2" checked required>
+  <label for="box-2">By placing your order you agree Karma's
+                <a href="#termsconditions" target="_blank">Terms and conditions. *</a>
+              <span class="checkmark"></span> </label>
+</div>
+
+<!---------------------------Button Place my order-->
+<div class="button">
+            <button>Place my order</button></div>
+          </form>
+          <div>
+          <img
+          class="imgright"
+          src="../HTML-CSS-Module-Project/level-2/store-image_by-andrew-neel-unsplash.jpg"
+          alt="homepage-desktop"
+        /></div>
+        </div>
+      </main>
+    <footer>
+      <hr />
+      <p>Join us on</p>
+      <nav id="nav-social">
+        <ul class="socialmedia">
+          <li class="sm">
+            <a class="social-media" href="#twitter"
+              ><img
+                src="../HTML-CSS-Module-Project/img/twitter-icon.svg"
+                width="25"
+                height="25"
+                alt="twitterIcon"
+            /></a>
+          </li>
+          <li class="sm">
+            <a class="social-media" href="#facebook"
+              ><img
+                src="../HTML-CSS-Module-Project/img/facebook-icon.svg"
+                width="25"
+                height="25"
+                alt="facebookIcon"
+            /></a>
+          </li>
+          <li class="sm">
+            <a class="social-media" href="#instagram"
+              ><img
+                src="../HTML-CSS-Module-Project/img/instagram-icon.svg"
+                width="25"
+                height="25"
+                alt="instagramIcon"
+            /></a>
+          </li>
+        </ul>
+      </nav>
+      <p id="companyName">@Karma mobility, Inc.</p>
+    </footer>
+  </body>
+</html>