diff --git a/css/store.css b/css/store.css
new file mode 100644
index 000000000..5729fd957
--- /dev/null
+++ b/css/store.css
@@ -0,0 +1,302 @@
+/* body {
+  font-family: "Roboto", sans-serif;
+  -webkit-font-smoothing: antialiased;
+} */
+body {
+  /* font-family: "Roboto", sans-serif; */
+  font-family: "Montserrat", sans-serif;
+  /* -webkit-font-smoothing: antialiased; */
+}
+
+:root {
+  --grey-dark: #292b2c;
+  --grey-light: #e4e4e4;
+  --orange-dark: #c05326;
+  --orange-light: #f7eae4;
+  --white: #fff;
+}
+/* header & nav */
+header {
+  display: flex;
+  justify-content: space-between;
+  height: 4rem;
+  background-color: #f9f9f9;
+  width: 90%;
+  margin: auto;
+}
+
+header nav ul .meet-karma a {
+  color: var(--orange-dark);
+}
+.logo {
+  flex-basis: 20%;
+  margin-left: 20px;
+}
+.nav {
+  flex-basis: 80%;
+}
+.nav ul {
+  display: flex;
+  list-style-type: none;
+  justify-content: flex-end;
+  margin-right: 40px;
+}
+.nav ul li {
+  margin-right: 2.8rem;
+}
+.nav ul a {
+  text-decoration: none;
+  color: #000;
+}
+.nav ul li a:hover {
+  color: var(--orange-dark);
+  background-color: #f7f7f7;
+  border-radius: 5px;
+}
+
+/* main */
+.main {
+  display: flex;
+  /* flex-direction: column;
+  justify-content: center; */
+
+  width: 90%;
+  margin: auto;
+  height: 53rem;
+}
+.main h1 {
+  margin: auto;
+  padding: 60px 0;
+  color: #e68d67;
+  width: 20rem;
+  font-size: 29px;
+}
+.img-main {
+  background-image: url(../level-2/store-image_by-andrew-neel-unsplash.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 50%;
+  height: 908px;
+}
+
+/* form */
+.form-main {
+  width: 50%;
+  height: 908px;
+}
+#form-info {
+  display: flex;
+  flex-flow: column wrap;
+  align-content: center;
+}
+.name-form-group {
+  display: flex;
+  justify-content: center;
+  gap: 1.3rem;
+}
+.form-group input {
+  margin-top: 7px;
+  padding: 7px;
+  width: 137px;
+  margin-bottom: 20px;
+}
+#address {
+  padding: 7px;
+  width: 312px;
+}
+.dropdown-city-option {
+  margin-top: 7px;
+  padding: 7px;
+  width: 137px;
+}
+#dropdown {
+  margin-top: 7px;
+  padding: 7px;
+  width: 196px;
+}
+#postcode {
+  width: 95px;
+}
+.radio {
+  display: flex;
+  justify-content: center;
+}
+#input-radio {
+  width: 58px;
+}
+
+#input-checkbox {
+  width: 22px;
+}
+#lable-checkbox {
+  width: 330px;
+  line-height: 27px;
+}
+.text-checkbox {
+  color: var(--orange-dark);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+#form-group-radio {
+  margin-top: 15px;
+}
+#form-group-checkbox {
+  margin-top: 65px;
+}
+.form-group-submit {
+  margin-top: 25px;
+}
+#submit {
+  width: 12rem;
+  padding: 14px;
+  border-radius: 4px;
+  background-color: #c05326;
+  color: #fff;
+  border: none;
+}
+/* break */
+.hr {
+  margin-top: 60px;
+  width: 90%;
+  text-align: center;
+  color: #f5eeee;
+}
+/* footer */
+footer {
+  text-align: center;
+  margin: 0;
+  /* font-size: 11px; */
+  margin-top: 15px;
+}
+.footer-icon {
+  display: flex;
+}
+.fab {
+  font-size: 20px;
+  padding: 10px;
+}
+.fa-twitter {
+  color: blue;
+}
+.fa-instagram {
+  color: rgb(243, 139, 191);
+}
+.fa-facebook {
+  color: rgb(45, 122, 238);
+}
+.fa-facebook:before {
+  content: "";
+  margin: 10px;
+}
+
+.menu-hamburger {
+  display: none;
+}
+
+@media (max-width: 455px) {
+  #contanore {
+    /* position: relative; */
+    display: flex;
+    flex-direction: column;
+    width: 455px;
+    /* height: 2112px;  */
+
+    background: #ffffff;
+  }
+  nav {
+    display: none;
+  }
+
+  header {
+    position: absolute;
+    width: 455px;
+    height: 67px;
+    left: 0px;
+    top: 0px;
+  }
+  .menu-hamburger {
+    position: absolute;
+    left: 88%;
+    right: 5.6%;
+    top: 1.95%;
+    bottom: 97.89%;
+
+    background: #000000;
+    border-radius: 1px;
+    display: inline-block;
+  }
+  .main {
+    display: flex;
+    flex-direction: column;
+    /* justify-content: center; */
+    align-items: center;
+    width: 375px;
+    /* align-content: center; */
+    height: 89rem;
+  }
+  /* .form-main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  } */
+  .name-form-group {
+    display: flex;
+    flex-direction: column;
+    /* justify-content: center; */
+    align-items: center;
+    width: 100%;
+    margin: auto;
+  }
+  #lastname,
+  #name {
+    width: 312px;
+    margin: auto;
+  }
+  #dropdown {
+    width: 334px;
+  }
+  .postcode {
+    padding: 0;
+    margin: 0;
+    margin-right: 212px;
+  }
+  .padd {
+    margin-top: 17px;
+  }
+  #form-group-radio {
+    display: flex;
+    flex-direction: column;
+    /* justify-content: center; */
+    align-items: flex-start;
+  }
+  .radio {
+    display: flex;
+    flex-direction: column;
+    /* justify-content: center; */
+    align-items: flex-start;
+  }
+  #input-radio {
+    width: 39px;
+  }
+  .radio input type {
+    margin-right: 40px;
+  }
+  /* .rectangle1 {
+    position: absolute;
+    left: 88%;
+    right: 5.6%;
+    top: 1.95%;
+    bottom: 97.89%;
+
+    background: #000000;
+    border-radius: 1px;
+  } */
+  .img-main {
+    /* background-image: url(../level-2/store-image_by-andrew-neel-unsplash.jpg);
+    background-repeat: no-repeat;
+    background-size: cover; */
+    width: 100%;
+    height: 908px;
+  }
+}
diff --git a/css/style.css b/css/style.css
index 5cb025cef..aefb94112 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,9 +1,9 @@
-
- /* 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; */
+  font-family: "Montserrat", sans-serif;
+  /* -webkit-font-smoothing: antialiased; */
 }
 
 /**
@@ -15,5 +15,285 @@ body {
  * 
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
  */
+:root {
+  --grey-dark: #292b2c;
+  --grey-light: #e4e4e4;
+  --orange-dark: #c05326;
+  --orange-light: #f7eae4;
+  --white: #fff;
+}
+/* header & nav */
+header {
+  display: flex;
+  justify-content: space-between;
+  height: 4rem;
+  background-color: #f9f9f9;
+  width: 90%;
+  margin: auto;
+}
+/* @media (max-width: 650px) {
+  header {
+    width: 100%;
+    padding: 0 1rem;
+    justify-content: space-around;
+  }
+  .nav ul {
+    display: flex;
+    list-style-type: none;
+    justify-content: flex-start;
+  }
+} */
+header nav ul .store a {
+  color: var(--orange-dark);
+}
+.logo {
+  flex-basis: 20%;
+  margin-left: 20px;
+}
+.nav {
+  flex-basis: 80%;
+}
+.nav ul {
+  display: flex;
+  list-style-type: none;
+  justify-content: flex-end;
+  margin-right: 40px;
+}
+.nav ul li {
+  margin-right: 2.8rem;
+}
+.nav ul a {
+  text-decoration: none;
+  color: #000;
+}
+.nav ul li a:hover {
+  color: var(--orange-dark);
+  background-color: #f7f7f7;
+  border-radius: 5px;
+}
 
+/* START <main> */
+/* section img */
+main {
+  margin-bottom: 60px;
+}
+main .img {
+  background-image: url("../img/first-background.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 90%;
+  height: 500px;
+  margin: auto;
+  color: #fff;
+  display: flex;
+  flex-flow: column wrap;
+  /* align-items: center; */
+  justify-content: center;
+  align-content: center;
+  margin-bottom: 60px;
+}
+.btn-main-img {
+  color: #fff;
+  background-color: var(--orange-dark);
+  width: 7rem;
+  padding: 10px;
+  border-radius: 6px;
+  border: none;
+  position: relative;
+  left: 137px;
+  top: 36px;
+}
+/* article */
+.main-sec-txt-h1 {
+  font-size: 38px;
+  font-weight: 250;
+}
+.main-sec-txt-p {
+  font-size: 20px;
+  font-weight: 300;
+  margin: 0;
+}
+.main-art-txt {
+  font-size: 38px;
+  color: #5a5a5a;
+  margin-bottom: 47px;
+}
+.main-art-icon-txt {
+  font-size: 22px;
+  font-weight: 800;
+  color: #5a5a5a;
+  margin-top: 41px;
+}
+.article {
+  width: 100%;
+  height: auto;
+  display: flex;
+  flex-flow: column wrap;
+  text-align: center;
+  justify-content: center;
+  align-content: center;
+}
+.article-icon {
+  display: flex;
+  text-align: center;
+}
+
+/* </main> */
+/* section- level2*/
+.level2 {
+  width: 90%;
+  display: flex;
+  margin: auto;
+}
+.level2 .img {
+  width: 40%;
+  background-image: url("../level-2/homepage-feature.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: 350px;
+}
+.level2-content {
+  width: 60%;
+  height: 350px;
+  background-color: #ffe5b4;
+  display: flex;
+  flex-flow: column wrap;
+  align-items: center;
+  justify-content: center;
+}
+.btn-level2-content {
+  color: #fff;
+  background-color: var(--orange-dark);
+  padding: 5px;
+  border: none;
+  border-radius: 3px;
+}
+.qut {
+  color: rgb(238, 118, 88);
+}
+
+.hr {
+  margin-top: 60px;
+  width: 90%;
+  text-align: center;
+  color: #f5eeee;
+}
+/* footer */
+footer {
+  text-align: center;
+  margin: 0;
+  /* font-size: 11px; */
+  margin-top: 15px;
+}
+.footer-icon {
+  display: flex;
+}
+.fab {
+  font-size: 20px;
+  padding: 10px;
+}
+.fa-twitter {
+  color: blue;
+}
+.fa-instagram {
+  color: rgb(243, 139, 191);
+}
+.fa-facebook {
+  color: rgb(45, 122, 238);
+}
+.fa-facebook:before {
+  content: "";
+  margin: 10px;
+}
+
+/* START @media (max-width: 650px) */
+@media (max-width: 650px) {
+  body {
+    display: flex;
+    flex-direction: column;
+  }
+  .article-icon {
+    display: flex;
+    flex-direction: column;
+  }
+  .level2-content {
+    display: flex;
+    flex-direction: column;
+  }
+  .level2-content h2 {
+    font-size: 13px;
+    font-weight: bold;
+  }
+  /* .level2-txt {
+    font-size: 13px;
+    font-weight: bold;
+  } */
+  header {
+    display: flex;
+    flex-direction: column;
+    height: 100px;
+    width: 100%;
+  }
+  .logo {
+    display: inline-flex;
+    justify-content: center;
+  }
+  .nav ul {
+    display: flex;
+    padding: 0;
+  }
+  .nav ul li {
+    margin-right: 28px;
+  }
+  .nav ul li a {
+    font-size: 13px;
+    font-weight: bold;
+  }
+  /* .svg {
+    width: 500px;
+  } */
+}
+/* END OF @media (max-width: 650px) */
+/* START @media (max-width: 920px) */
+@media (max-width: 920px) {
+  header {
+    display: flex;
+    flex-direction: column;
+    height: 100px;
+    width: 100%;
+  }
+  .logo {
+    display: inline-flex;
+    justify-content: center;
+    margin-bottom: 20px;
+  }
+  .nav ul {
+    display: flex;
+    padding: 0;
+    margin: 0;
+  }
+  .nav ul li {
+    margin-right: 28px;
+  }
+  .nav ul a {
+    font-size: 19px;
+    font-weight: bold;
+  }
+  .level2-txt {
+    font-size: 23px;
+    font-weight: bold;
+  }
+  .svg {
+    width: 250px;
+  }
+  .main-art-icon-txt {
+    font-size: 18px;
+  }
+  .article-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
 
+/* END OF @media (max-width: 920px) */
diff --git a/img/icon-devices.svg b/img/icon-devices.svg
index 8e4806e87..d1f8c07de 100755
--- a/img/icon-devices.svg
+++ b/img/icon-devices.svg
@@ -1,4 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
-	<path fill="#F05A29"
+	<path fill="#F05A29" 
 		d="M122 66.463h-1.106v-48.41c0-3.033-2.468-5.5-5.5-5.5H13.521a5.506 5.506 0 00-5.5 5.5v38.126h-2.02a5.506 5.506 0 00-5.5 5.5v51.996c0 3.032 2.467 5.5 5.5 5.5h35.546c3.033 0 5.5-2.468 5.5-5.5V90.627H57.69v10.04h-5.422a1.5 1.5 0 100 3H81.5a1.5 1.5 0 000-3h-5.421v-10.04h23.944v16.562c0 3.032 2.468 5.5 5.5 5.5H122c3.032 0 5.5-2.468 5.5-5.5V71.963c0-3.033-2.468-5.5-5.5-5.5zm-77.953 47.212c0 1.379-1.122 2.5-2.5 2.5H6.001a2.503 2.503 0 01-2.5-2.5v-4.286h40.546v4.286zm0-7.286H3.501v-44.71c0-1.378 1.122-2.5 2.5-2.5l35.546-.001c1.378 0 2.5 1.122 2.5 2.5v44.711zm29.032-5.722h-12.39v-10.04h12.39v10.04zm-26.032-13.04v-9.548h52.976v9.548H47.047zm52.976-15.664v3.116H47.047V61.678c0-3.033-2.467-5.5-5.5-5.5l-30.525.001V18.053c0-1.378 1.122-2.5 2.5-2.5h101.873c1.379 0 2.5 1.122 2.5 2.5v48.41h-12.371a5.507 5.507 0 00-5.501 5.5zm24.477 35.226c0 1.379-1.121 2.5-2.5 2.5h-16.477a2.502 2.502 0 01-2.5-2.5v-4.08H124.5v4.08zm0-7.08h-21.477V71.963c0-1.379 1.121-2.5 2.5-2.5H122c1.379 0 2.5 1.121 2.5 2.5v28.146z" />
 	</svg>
\ No newline at end of file
diff --git a/img/karma-logo.svg b/img/karma-logo.svg
index d550e81d8..456b9fd6a 100755
--- a/img/karma-logo.svg
+++ b/img/karma-logo.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 216">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 216" width='30px' height='50px'>
 	<path fill="#F15B2A"
 		d="M126.1 212.9c4.1 4.1 10.7 4.1 14.8 0 4.1-4.1 4.1-10.7 0-14.8l-28.6-28.6 18.1-18.1c8.4-8.4 13.6-20 13.6-32.9C144 92.8 123.2 72 97.5 72S51 92.8 51 118.5c0 12.8 5.2 24.5 13.6 32.9l18.1 18.1-18.1 18.1c-4.6 4.6-11 7.5-18.1 7.5-14.1 0-25.6-11.5-25.6-25.6v-159C20.9 4.7 16.2 0 10.5 0 4.7 0 0 4.7 0 10.5v159C0 195.2 20.8 216 46.5 216c12.8 0 24.5-5.2 32.9-13.6l18.1-18.1 28.6 28.6zm-46.7-76.3c-4.6-4.6-7.5-11-7.5-18.1 0-14.1 11.5-25.6 25.6-25.6 14.1 0 25.6 11.5 25.6 25.6 0 7.1-2.9 13.5-7.5 18.1l-18.1 18.1-18.1-18.1z" />
-	</svg>
\ No newline at end of file
+	</svg>
diff --git a/index.html b/index.html
index 3e742ef04..bc5a8031b 100755
--- a/index.html
+++ b/index.html
@@ -1,19 +1,94 @@
 <!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" />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
+      rel="stylesheet"
+    />
 
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap" rel="stylesheet">
+  </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">
+      </div>
+      <nav class="nav">
+        <ul>
+          <li class="li-nav"><a href="#">Meet Karma</a></li>
+          <li class="li-nav"><a href="#">How it Works</a></li>
+          <li class="li-nav store"><a href="./store.html">Store</a></li>
+          <li class="li-nav"><a href="#">Blog</a></li>
+          <li class="li-nav"><a href="#">Help</a></li>
+          <li class="li-nav"><a href="#">Login</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <section class="img">
+        <h1 class="main-sec-txt-h1">Introdusing Karma</h1>
+        <p class="main-sec-txt-p">Bring WiFi with you, everywhere you go.</p>
+        <button class="btn-main-img">Learn More</button>
+      </section>
+      <article class="article">
+        <h1 class="main-art-txt">Everyone need a little Karma.</h1>
+        <div class="article-icon">
+          <div class="svg">
+            <iframe src="./img/icon-devices.svg" frameborder="0"></iframe>
+            <p class="main-art-icon-txt">Internet for all devices</p> 
+          </div>
+          <div class="svg">
+            <iframe src="./img/icon-coffee.svg" frameborder="0"></iframe>
+            <p class="main-art-icon-txt">Bost your Productivity</p>
+          </div>
+          <div class="svg">
+            <iframe src="./img/icon-devices.svg" frameborder="0"></iframe>
+            <p class="main-art-icon-txt">Py as You Go</p>
+          </div>
+        </div>
+      </article>
+    </main>
+    <section class="level2">
+      <div class="img"></div>
+      <div class="level2-content">
+        <h2 class="level2-txt"><span class="qut">" </span> Wherever I am, I just don't</h2>
+        <h2 class="level2-txt">worry about my conection</h2>
+        <h2 class="level2-txt">anymore! <span class="qut"> "</span></h2>
+        <button class="btn-level2-content"">Get Karma today</button>
+      </div>
+    </section>
+    <hr class="hr" />
+    <footer>
+      <p> <small> <strong>Jouin us on</strong> </small></p>
+      <div footer-icon>
+        <!-- <iframe src="./img/twitter-icon.svg" frameborder="0"></iframe>
+        <iframe src="./img/facebook-icon.svg" frameborder="0"></iframe> -->
+        <!-- <iframe src="./img/instagram-icon.svg" frameborder="0"></iframe> -->
 
-</body>
+        <span class="fab fa-twitter" aria-hidden="true"></span>
+        <span class="fab fa-facebook" aria-hidden="true"></span>
+        <span class="fab fa-instagram" aria-hidden="true"></span>
+      </div>
+      <p><small>&copy; 2022 Jul Karma Mobility INC </small></p>
+    </footer>
+  </body>
 </html>
diff --git a/store.html b/store.html
new file mode 100644
index 000000000..49d59bdcf
--- /dev/null
+++ b/store.html
@@ -0,0 +1,235 @@
+<!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/store.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
+      rel="stylesheet"
+    />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap"
+      rel="stylesheet"
+    />
+    <script
+      src="https://kit.fontawesome.com/e428625613.js"
+      crossorigin="anonymous"
+    ></script>
+  </head>
+  <body>
+    <div id="contanore">
+      <header>
+        <div class="responsive-header">
+          <div class="logo">
+            <iframe src="./img/karma-logo.svg" frameborder="0"></iframe>
+          </div>
+
+          <div class="menu-hamburger">
+            <a
+              href="#main-menu"
+              id="main-menu-toggle"
+              class="menu-toggle"
+              aria-label="Open main menu"
+            >
+              <span class="sr-only">Open main menu</span>
+              <span class="fa fa-bars" aria-hidden="true"></span>
+            </a>
+          </div>
+        </div>
+
+        <nav class="nav">
+          <ul>
+            <li class="li-nav meet-karma">
+              <a href="./index.html">Meet Karma</a>
+            </li>
+            <li class="li-nav"><a href="#">How it Works</a></li>
+            <li class="li-nav"><a href="#">Store</a></li>
+            <li class="li-nav"><a href="#">Blog</a></li>
+            <li class="li-nav"><a href="#">Help</a></li>
+            <li class="li-nav"><a href="#">Login</a></li>
+          </ul>
+        </nav>
+      </header>
+      <main class="main">
+        <div class="form-main">
+          <h1>Order your Karma wifi device today!</h1>
+          <form id="form-info">
+            <!--name and last name-->
+            <div class="name-form-group">
+              <div>
+                <label class="label" for="name">Name *</label>
+                <div class="form-group">
+                  <input
+                    type="text"
+                    name="name"
+                    id="name"
+                    placeholder="Enter your name"
+                    required
+                  />
+                </div>
+              </div>
+              <div>
+                <label class="label" for="lastName">Last name *</label>
+                <div class="form-group">
+                  <input
+                    type="text"
+                    name="name"
+                    id="lastname"
+                    placeholder="Enter your lastName"
+                    required
+                  />
+                </div>
+              </div>
+            </div>
+
+            <label class="label padd" for="address">Address *</label>
+            <div class="form-group">
+              <input
+                type="address"
+                name="address"
+                id="address"
+                placeholder="Enter your address"
+                required
+              />
+            </div>
+            <label class="label" for="address">Address 2</label>
+            <div class="form-group">
+              <input
+                type="address"
+                name="address"
+                id="address"
+                placeholder="Enter your address"
+              />
+            </div>
+            <!--option select citey-->
+            <div class="name-form-group">
+              <div>
+                <label class="label" for="city">City *</label>
+                <div class="form-group">
+                  <select id="dropdown" required>
+                    <option
+                      class="dropdown-city-option"
+                      disabled
+                      selected
+                      value
+                    >
+                      Select your city...
+                    </option>
+
+                    <option value=" London">London</option>
+                    <option value=" Birmingham">Birmingham</option>
+                    <option value="Manchester">Manchester</option>
+                    <option value="Liverpool">Liverpool</option>
+                    <option value="Glasgow">Glasgow</option>
+                    <option value=" Sheffield">Sheffield</option>
+                    <option value=" Edinburgh">Edinburgh</option>
+                    <option value="Leeds">Leeds</option>
+                    <option value="Sheffield">Sheffield</option>
+                    <option value="Bristol">Bristol</option>
+                  </select>
+                </div>
+              </div>
+
+              <div class="postcode">
+                <label class="label" for="postcode">Postcode *</label>
+                <div class="form-group">
+                  <input
+                    type="text"
+                    name="name"
+                    id="postcode"
+                    placeholder="postcode"
+                    required
+                  />
+                </div>
+              </div>
+            </div>
+            <!--select a color   type="radio"-->
+            <div id="form-group-radio">
+              <p>Select a color</p>
+              <div class="radio">
+                <div>
+                  <label>
+                    <input
+                      name="user-recommend"
+                      value="Karma-orange"
+                      type="radio"
+                      id="input-radio"
+                      checked
+                    />Karma orange</label
+                  >
+                </div>
+                <div>
+                  <label>
+                    <input
+                      name="user-recommend"
+                      value="Space-grey"
+                      type="radio"
+                      id="input-radio"
+                    />Space grey</label
+                  >
+                </div>
+              </div>
+            </div>
+
+            <!--check box-->
+            <div id="form-group-checkbox">
+              <div id="lable-checkbox">
+                <label>
+                  <input
+                    id="input-checkbox"
+                    name="prefer"
+                    value="karma-projects"
+                    type="checkbox"
+                  />
+                  By placing your order you agree to Karma's
+                  <span class="text-checkbox">Terms and conditions</span>. *
+                </label>
+              </div>
+            </div>
+
+            <!--submit-->
+            <div class="form-group-submit">
+              <button type="submit" id="submit" class="submit-button">
+                Place my order
+              </button>
+            </div>
+          </form>
+
+          <!--End of form-->
+        </div>
+        <div class="img-main"></div>
+      </main>
+      <hr class="hr" />
+      <footer>
+        <p>
+          <small> <strong>Jouin us on</strong> </small>
+        </p>
+        <div footer-icon>
+          <!-- <iframe src="./img/twitter-icon.svg" frameborder="0"></iframe>
+        <iframe src="./img/facebook-icon.svg" frameborder="0"></iframe> -->
+          <!-- <iframe src="./img/instagram-icon.svg" frameborder="0"></iframe> -->
+
+          <span class="fab fa-twitter" aria-hidden="true"></span>
+          <span class="fab fa-facebook" aria-hidden="true"></span>
+          <span class="fab fa-instagram" aria-hidden="true"></span>
+        </div>
+        <p><small>&copy; 2022 Jul Karma Mobility INC </small></p>
+      </footer>
+    </div>
+  </body>
+</html>