diff --git a/css/style.css b/css/style.css
index 5cb025cef..76063e7f0 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,19 +1,315 @@
+body {
+  font-family: "Roboto", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  margin: 0;
+}
 
- /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
+body,
+button {
+  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+  color: var(--grey-dark);
+  font-size: 1rem;
+}
 
-body {
-    font-family: 'Roboto', sans-serif;
-    -webkit-font-smoothing: antialiased;
+h1,
+p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.header,
+.content,
+.footer {
+  padding: 0;
+  margin: 0 auto;
+}
+
+/*Header*/
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 5rem;
+  background-color: aliceblue;
+}
+
+.header__logo {
+  max-height: 70px;
+  width: 1.5rem;
+  padding-left: 100px;
+}
+
+#hamnav {
+  margin-left: 5em;
+}
+
+#hamnav label,
+#hamburger {
+  display: none;
+}
+
+#hamitems {
+  margin-left: 3em;
+  display: flex;
+  justify-content: flex-end;
+  gap: 2em;
+  padding: 10px;
+  font-weight: 600;
+}
+#hamitems a {
+  padding: 13px;
+  color: gray;
+  text-decoration: none;
+  text-align: center;
+}
+
+#hamitems a:hover {
+  color: orange;
+}
+
+/*Button*/
+
+button {
+  background-color: #c05326;
+  color: white;
+  border-radius: 3px;
+  border: none;
+  padding: 1rem 1.5rem;
+}
+
+/* INSERT BUTTON STYLES HERE */
+
+button:hover {
+  background-color: gray;
+}
+
+.btn {
+  padding-left: 45%;
+  padding-top: 2em;
+  padding-bottom: 5em;
+}
+
+/*Content*/
+
+.content {
+  display: flex;
+  flex-direction: column;
+  padding-right: 30px;
+}
+
+/*Promote*/
+
+.pro__img {
+  width: 100%;
+  height: 23rem;
+}
+
+.pro {
+  background-color: lightpink;
+  width: 95%;
+  height: 17rem;
+  font-weight: bold;
+  font-size: 1.6rem;
+  text-align: center;
+  padding-top: 6rem;
+  padding-left: 2rem;
+  color: rgb(52, 44, 44);
+}
+
+.promote {
+  display: flex;
+  flex-direction: row;
+  padding-top: 2.5rem;
 }
 
-/**
- * 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'
- */
+.color {
+  color: #c05326;
+}
+
+.pro__btn {
+  padding-top: 1em;
+}
+
+/*Introduction*/
+
+.introduction-img {
+  background-image: url("../img/first-background.jpg");
+  height: 34em;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+.karma-introduction h1 {
+  padding-top: 100px;
+  font-size: 2.5rem;
+  color: white;
+  text-align: center;
+  position: relative;
+}
+
+.karma-introduction p {
+  font-size: 2rem;
+  margin-bottom: 2rem;
+  padding-top: 80px;
+  color: white;
+  text-align: center;
+  position: relative;
+}
+
+.main {
+  position: static;
+  margin-bottom: 3rem;
+  padding: 4rem 20%;
+  font-size: 2rem;
+  font-weight: 50;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}
+
+/*Caption*/
+.more__caption {
+  padding: 0 12rem;
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+  flex-wrap: wrap;
+  align-content: space-around;
+  text-align: center;
+  justify-content: center;
+}
+
+/*articles*/
+
+.art-text {
+  display: flex;
+  justify-content: center;
+  font-size: 1.6rem;
+  margin-bottom: 2rem;
+  padding-top: 30px;
+}
+
+.article__img {
+  padding-left: 2.5rem;
+  width: 8rem;
+}
+
+/*Footer*/
 
+hr.new {
+  border-top: 1px solid rgb(232, 224, 224);
+  width: 70%;
+  margin-top: 4rem;
+}
+
+.footer {
+  margin-top: 1rem;
+  text-align: center;
+}
+
+.footer p {
+  padding: 1.5rem;
+  text-align: center;
+  font-size: 0.85rem;
+}
+
+.text {
+  color: gray;
+  padding-top: 0.5em;
+}
+
+.img__footer {
+  text-align: center;
+  width: 1rem;
+  border: 1px solid gray;
+  border-radius: 50%;
+  padding: 10px;
+  overflow: hidden;
+}
+@media screen and (max-width: 768px) {
+  .header,
+  .content,
+  .footer {
+    padding: 0;
+  }
+  .header__logo {
+    padding: 0;
+  }
+  #hamitems {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1000;
+    gap: 0.3em;
+  }
+  #hamitems a {
+    border: 2px solid rgb(117, 105, 105);
+    border-radius: 3px;
+  }
+
+  .nav__link {
+    background-color: rgb(243, 233, 234);
+    font-weight: 600;
+    padding: 0.3em;
+  }
 
+  #hamnav label {
+    display: inline-block;
+    color: rgb(35, 26, 18);
+    font-size: 1.2em;
+    font-style: normal;
+    padding: 10px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1000;
+  }
+
+  #hamburger {
+    display: none;
+  }
+
+  #hamitems {
+    display: none;
+  }
+
+  #hamnav input:checked ~ #hamitems {
+    display: flex;
+    flex-direction: column;
+    margin-top: 43px;
+  }
+
+  .introduction-img {
+    background-size: 100% 100%;
+    object-fit: contain;
+  }
+
+  .btn {
+    padding-left: 38%;
+    padding-bottom: 20%;
+  }
+
+  .article__img {
+    padding-left: 1rem;
+    width: 33%;
+  }
+
+  .more__caption {
+    padding: 0 3rem;
+    justify-content: center;
+  }
+
+  .promote {
+    display: flex;
+    flex-direction: column;
+    padding-top: 3rem;
+    margin: 0;
+  }
+  .pro {
+    width: 100%;
+    overflow: hidden;
+    padding-left: 0;
+  }
+}
diff --git a/index.html b/index.html
index 3e742ef04..3a522b6e4 100755
--- a/index.html
+++ b/index.html
@@ -1,19 +1,130 @@
 <!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"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <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>
-
-    <!-- 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 -->
-
-</body>
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:400,500,300"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link rel="stylesheet" href="css/style.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+    <title>HTML-CSS-Module-Project</title>
+  </head>
+  <body>
+    <header class="header">
+      <img
+        src="img/karma-logo.svg"
+        alt="it is used for website"
+        class="header__logo"
+      />
+
+      <nav id="hamnav">
+        <label for="hamburger">&#9776;</label>
+        <input type="checkbox" id="hamburger" />
+
+        <div id="hamitems">
+          <a class="nav__link" href="#">How it Works</a>
+          <a class="nav__link" href="#">Store</a>
+          <a class="nav__link" href="#">Blog</a>
+          <a class="nav__link" href="#">Help</a>
+          <a class="nav__link" href="#">Login</a>
+        </div>
+      </nav>
+    </header>
+
+    <content class="content">
+      <content class="introduction-img">
+        <section class="karma-introduction">
+          <h1>Introduction Karma</h1>
+          <p>Bring WiFi with you, everywhere you go</p>
+          <main class="btn">
+            <button>Learn More</button>
+          </main>
+        </section>
+      </content>
+
+      <content class="main">
+        <p>Everyone Needs a little Karma</p>
+      </content>
+
+      <section class="more__caption">
+        <article class="art-area">
+          <img
+            class="article__img"
+            src="img/icon-devices.svg"
+            alt="more detail"
+          />
+          <p class="art-text">Internat for all devices</p>
+        </article>
+
+        <article class="art-area">
+          <img
+            class="article__img"
+            src="img/icon-coffee.svg"
+            alt="you can enjoy your spare time."
+          />
+          <p class="art-text">Boost your productivity</p>
+        </article>
+
+        <article class="art-area">
+          <img
+            class="article__img"
+            src="img/icon-refill.svg"
+            alt="you can visit anytime "
+          />
+          <p class="art-text">Pay us You Go</p>
+        </article>
+      </section>
+    </content>
+
+    <figure class="promote">
+      <img
+        class="pro__img"
+        src="./level-2/homepage-feature.png"
+        alt="advertising"
+      />
+      <main class="pro">
+        <p>
+          <span class="color">"</span>Whenever I am, I just do't worry about my
+          connection anymore!<span class="color">"</span>
+        </p>
+        <main class="pro__btn">
+          <a href="./level-2/store.html"><button>Get Karma today</button></a>
+        </main>
+      </main>
+    </figure>
+
+    <hr class="new" />
+
+    <footer class="footer">
+      <p>Join us own</p>
+      <content class="footer__content">
+        <img
+          class="img__footer"
+          src="img/twitter-icon.svg"
+          alt="you can have contact"
+        />
+
+        <img
+          class="img__footer"
+          src="img/facebook-icon.svg"
+          alt="for more detail"
+        />
+
+        <img
+          class="img__footer"
+          src="img/instagram-icon.svg"
+          alt="you can visit"
+        />
+        <p class="text">@ Karma Mobility, Ick</p>
+      </content>
+    </footer>
+  </body>
 </html>
diff --git a/level-2/store.css b/level-2/store.css
new file mode 100644
index 000000000..e5b29c763
--- /dev/null
+++ b/level-2/store.css
@@ -0,0 +1,343 @@
+body {
+  font-family: "Roboto", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  margin: 0;
+}
+
+body,
+button {
+  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+  color: var(--grey-dark);
+  font-size: 1rem;
+}
+
+h1,
+p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.header,
+.content,
+.footer {
+  padding: 0;
+  margin: 0;
+}
+
+/*Navigation*/
+
+#hamnav {
+  margin-left: 5em;
+}
+
+#hamnav label,
+#hamburger {
+  display: none;
+}
+
+#hamitems {
+  margin-left: 3em;
+  display: flex;
+  justify-content: flex-end;
+  gap: 2em;
+  padding: 10px;
+  font-weight: 600;
+}
+#hamitems a {
+  padding: 13px;
+  color: gray;
+  text-decoration: none;
+  text-align: center;
+}
+
+#hamitems a:hover {
+  color: orange;
+}
+
+/*Header*/
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 5rem;
+  background-color: aliceblue;
+}
+
+.head__logo {
+  max-height: 71px;
+  width: 1.5rem;
+  padding-left: 100px;
+}
+
+/*Button*/
+
+button {
+  background-color: #c05326;
+  color: white;
+  border-radius: 3px;
+  border: none;
+  padding: 0.7rem 1.5rem;
+}
+
+button:hover {
+  background-color: gray;
+}
+
+.button-info {
+  padding-top: 2rem;
+}
+
+.form__part {
+  margin: 8rem;
+  text-align: start;
+  font-weight: bold;
+}
+
+input[type="text"] {
+  width: 95%;
+  padding: 12px 20px;
+  border: 2px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+input[type="last name"] {
+  width: 110%;
+  padding: 12px 20px;
+  border: 2px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+select {
+  width: 140%;
+  padding: 12px 20px;
+  border: 2px solid #ccc;
+  border-radius: 4px;
+  background-color: border-box;
+  color: gray;
+  font-size: 1rem;
+  font-style: italic;
+}
+
+.form {
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 1.9em;
+}
+
+/*Radio active button*/
+
+input[type="radio"] {
+  appearance: none;
+  border: 2px solid gray;
+  padding: 8px;
+  border-radius: 50%;
+}
+input[type="radio"]:checked {
+  background-color: rgb(255, 140, 0);
+  border-color: rgb(203, 210, 216);
+}
+
+/*Checkbox*/
+
+input[type="checkbox"] {
+  transform: scale(1.6);
+}
+
+input[type="checkbox"]:checked::before {
+  content: "\2713";
+  display: block;
+  width: 11.5px;
+  height: 11.5px;
+  line-height: 13px;
+  text-align: start;
+  background-color: #fff;
+  border: 1px solid #605753;
+  border-radius: 2px;
+  color: #c05326;
+  font-weight: bold;
+}
+
+/*Name*/
+
+.last__name {
+  display: flex;
+  flex-direction: row;
+  padding-top: 2.5rem;
+  gap: 2rem;
+}
+
+.for__name {
+  display: flex;
+  flex-direction: column;
+}
+
+.last__name-2 {
+  display: flex;
+  flex-direction: row;
+  gap: 6rem;
+}
+
+input[type="postcode"] {
+  width: 87%;
+  padding: 12px 6px;
+  border: 2px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.for__name-2 {
+  display: flex;
+  flex-direction: column;
+}
+
+.form {
+  color: gray;
+}
+
+.text {
+  color: #c05326;
+  font-size: 2.3rem;
+  font-weight: bold;
+  justify-items: center;
+  font-style: bold;
+  /* padding-top: 5rem; */
+}
+
+/*img*/
+
+.store__img {
+  width: 49%;
+}
+
+/*radio*/
+
+.radio-1 {
+  padding-top: 3rem;
+  padding-bottom: 3.5rem;
+}
+
+/*footer*/
+
+.footer {
+  margin-top: 2rem;
+  text-align: center;
+}
+
+a {
+  color: darkorange;
+}
+
+.footer p {
+  padding-bottom: 1rem;
+  text-align: center;
+  font-size: 0.85rem;
+}
+
+.for__text {
+  padding-top: 1em;
+  color: gray;
+}
+
+.img__icon {
+  text-align: center;
+  width: 1rem;
+  border: 1px solid gray;
+  border-radius: 50%;
+  padding: 10px;
+  overflow: hidden;
+}
+
+hr.new {
+  margin-top: 0px;
+  border: 1px solid rgb(237, 233, 233);
+  width: 80%;
+  margin-bottom: 70px;
+}
+
+@media screen and (max-width: 768px) {
+  .head__logo {
+    padding: 0;
+  }
+
+  #hamitems {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1000;
+    gap: 0.3em;
+  }
+  #hamitems a {
+    border: 2px solid rgb(117, 105, 105);
+    border-radius: 3px;
+  }
+
+  .nav__link {
+    background-color: rgb(243, 233, 234);
+    font-weight: 600;
+    padding: 0.3em;
+  }
+
+  #hamnav label {
+    display: inline-block;
+    color: rgb(35, 26, 18);
+    font-size: 1.2em;
+    font-style: normal;
+    padding: 10px;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1000;
+  }
+
+  #hamburger {
+    display: none;
+  }
+
+  #hamitems {
+    display: none;
+  }
+
+  #hamnav input:checked ~ #hamitems {
+    display: flex;
+    flex-direction: column;
+    margin-top: 43px;
+  }
+
+  .form {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+  .button-info {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 2em 0;
+  }
+  .last__name {
+    display: block;
+  }
+
+  input[type="last name"] {
+    width: 95%;
+  }
+
+  .last__name-2 {
+    display: block;
+  }
+
+  select {
+    width: 95%;
+  }
+
+  input[type="postcode"] {
+    width: 50%;
+  }
+
+  .store__img {
+    width: 100%;
+  }
+}
diff --git a/level-2/store.html b/level-2/store.html
new file mode 100644
index 000000000..eb23bcb75
--- /dev/null
+++ b/level-2/store.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Karma</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:400,500,300"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link rel="stylesheet" href="../level-2/store.css" />
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+    <title>Store-Page/HTML-CSS-Module-Project</title>
+  </head>
+  <body>
+    <header class="header">
+      <img
+        src="../img/karma-logo.svg"
+        alt="it is main section"
+        class="head__logo"
+      />
+
+       <nav id="hamnav">
+        <label for="hamburger">&#9776;</label>
+        <input type="checkbox" id="hamburger" />
+
+        <div id="hamitems">
+          <a class="nav__link" href="#">How it Works</a>
+          <a class="nav__link" href="#">Store</a>
+          <a class="nav__link" href="#">Blog</a>
+          <a class="nav__link" href="#">Help</a>
+          <a class="nav__link" href="#">Login</a>
+        </div>
+      </nav>
+    </header>
+
+    <section class="form">
+
+       <img src="store-image_by-andrew-neel-unsplash.jpg"
+        alt="useful"
+        class="store__img"
+        >
+        
+      <article class="form__part">
+        <p class="text">
+          Order your Karma wifi
+          device today!
+        </p>
+
+        <form >
+          <section class="for-gap">
+            
+          <span class="last__name">
+            <span class="for__name">
+              
+              <label for="name">First name *</label>
+              <input type="text" id="nname" name="name" value="" required/>
+            </span>
+
+            <span class="for__name">
+              <label for="name">Last name *</label>
+              <input type="last name" id="name" name="name" value=""  required /><br />
+            </span>
+          </span>
+
+          <label for="name">Address *</label><br />
+          <input type="text" id="name" name="name" value="" required/><br /><br />
+          <label for="name">Address 2*</label><br />
+          <input type="text" id="name" name="name" value="" required/><br /><br />
+
+
+          <span class="last__name-2">
+            <span class="for__name-2">
+          <label for="cities" ></label>City *</label>
+           
+          <select name="cities" id="cities">
+             <option value="text">Select your city...</option> 
+            <option value="text">London</option>
+            <option value="text">Manchester</option>
+            <option value="text">Liverpool</option>
+            <option value="text">Salford</option></select>
+            </span>
+           
+             <span class="for__name-2">
+          <label for="name">Postcode *</label>
+          <input type="postcode" id="fname" name="name" value="" required/>
+          
+          </span>
+          </span>
+          </section>
+
+          <section class="radio-1">
+          <article>Select a color</article><br>
+
+          <input type="radio" id="specifyColor" 
+            name="radio1" value="GFG" required>
+        <label for="specifyColor">Karma orange</label>
+        <input type="radio" id="specifyColor" 
+            name="radio1" value="GFG" required>
+        <label for="specifyColor">Space gray</label>
+
+          </section>
+
+          <input name="tick" type="checkbox" required/> By placing your order you agree
+          to Karma's<a href="#"> Terms and<br>Conditions</a>.*
+
+          <main class="button-info">
+            <button>Place my order</button>
+          </main>
+        </form>
+
+        
+
+      </article>
+
+</section>
+
+       <hr class="new" />
+
+    <footer class="footer">
+      <p>Join us own</p>
+      <content class="footer__detail">
+        <img
+          class="img__icon"
+          src="../img/twitter-icon.svg"
+          alt="for contact"
+        />
+
+        <img
+          class="img__icon"
+          src="../img/facebook-icon.svg"
+          alt="for more detail"
+        />
+
+        <img
+          class="img__icon"
+          src="../img/instagram-icon.svg"
+          alt="for visit"
+        />
+
+
+        <p class="for__text">@ Karma Mobility, Ick</p>
+      </content>
+    </footer>
+  </body>
+</html>