From 98c330bda22c49fd4d58641b3c0de31e9d70bc3d Mon Sep 17 00:00:00 2001
From: KamNik0044 <105980197+KamNik0044@users.noreply.github.com>
Date: Fri, 29 Jul 2022 22:07:39 +0100
Subject: [PATCH 1/2] KarmaProject

---
 css/style.css | 400 +++++++++++++++++++++++++++++++++++++++++++++++++-
 index.html    |  83 ++++++++++-
 2 files changed, 479 insertions(+), 4 deletions(-)

diff --git a/css/style.css b/css/style.css
index 5cb025cef..a3b0a3f02 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,4 +1,8 @@
-
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+}
  /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
 
 body {
@@ -15,5 +19,399 @@ body {
  * 
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
  */
+ header {
+     display: flex;
+     justify-content: space-between;
+ }
+
+.brand-img {
+    width: 30px;
+    margin: 5px 0 0 70px;
+    line-height: 70px;
+    
+}
+
+.nav {
+    text-align: right;
+    height: 70px;
+    line-height: 70px;
+}
+
+.menu {
+    margin: 0 30px 0 0;
+    width: 100%;
+}
+
+.menu a {
+    text-decoration: none;
+    color: #000;
+    margin: 0 10px;
+    line-height: 70px;
+    font-size: 1rem;
+    font-weight: lighter;
+}
+
+span {
+    font-size: 1rem;
+    font-weight: bold;
+}
+
+label {
+    margin: 0 40px 0 0;
+    font-size: 26px;
+    line-height: 70px;
+    display: none;
+}
+
+#toggle {
+    display: none;
+
+}
+
+@media screen and (max-width: 500px) {
+    label {
+        display: block;
+        cursor: pointer;
+    }
+    .menu {
+        text-align: center;
+        width: 100%;
+        display: none;
+    }
+    .menu a {
+        display: block;
+        margin: 0;
+        background: #fff;
+    }
+    .menu a:hover {
+        background-color: #E06239;
+        color: #fff;
+    }
+
+    span {
+        display: block;
+        background-color: #fff;
+        margin: 0;
+    }
+    #toggle:checked + .menu {
+        display: block;
+    }
+}
+
+/* hero section */
+.hero {
+    background: url("../img/first-background.jpg");
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    flex-direction: column;
+    height: 100vh;
+}
+
+
+.hero-text {
+    color: #fff;
+    font-weight: lighter;
+    text-align: center;
+    height: 16rem;
+    margin-top: 3rem;
+}
+
+.hero-title {
+    font-size: 2rem;
+    padding: .2rem 2rem;
+}
+
+.hero-text p {
+    padding: .2rem 3rem;
+    font-size: 1.3rem;
+    margin-top: 2rem;
+}
+
+
+.all-btns {
+    color: #fff;
+    background-color: #E06239;
+    border: none;
+    padding: .7rem;
+    font-size: .9rem;
+    border-radius: 5px;
+    margin-top: 1.5rem;
+}
+
+.all-btns:hover {
+    color: #E06239;
+    background-color: #fff;
+}
+/* end of hero section */
+
+@media screen and (min-width: 400px) {
+    .hero {
+        padding: 160px 0;
+    }
+    .hero-title {
+        font-size: 2.8rem;
+        padding: .2rem 2rem;
+    }
+    .hero-text p {
+        font-size: 1.8rem;
+    }
+}
+
+@media screen and (min-width: 700px) {
+    .hero-title {
+        font-size: 4rem;    
+    }
+    .hero-text p {
+        padding: .2rem 3rem;
+        font-size: 1.6rem;
+    }
+    .hero-btn {
+        font-size: 1.2rem;
+    }
+    .nav-toggle {
+        display: none;
+    }
+    .hero-btn {
+        font-size: 1.6rem;
+    }
+}
+
+@media screen and (min-width: 2000px) {
+    .all-btns {
+        font-size: 3rem;   
+    }  
+    .hero-title {
+        font-size: 6rem;
+    }
+    .hero-text p {
+    font-size: 2rem;
+    }
+}
+
+
+
+/* 
+/* 
+/* 
+/* 
+/* 
+/* 
+/* 
+/* article section  */
+.intro-header h2 {
+    font-size: 1.3rem;
+    font-weight: lighter;
+    padding: 0 4rem;
+    text-align: center;
+    margin-top: 5rem;
+}
+
+.intro-imgs {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 4rem;
+}
+
+.intro-imgs p {
+    margin-bottom: 2rem;
+    margin-top: 1rem;
+    text-align: center;
+    font-size: .7rem;
+}
+
+.intro-left-img {
+    width: 115px;
+}
+
+.intro-middle-img {
+    width: 115px;
+}
+
+.intro-right-img {
+    width: 115px;
+}
+
+@media screen and (min-width: 400px) {
+    .intro-header h2 {
+        font-size: 1.8rem;
+    }
+    .hero-btn {
+        font-size: 1rem;
+    }
+    .intro-imgs p {
+        font-size: .9rem;
+    }
+    .intro-left-img {
+        width: 150px;
+    }
+    .intro-middle-img {
+        width: 150px;
+    }
+    .intro-right-img {
+        width: 150px;
+    }
+}
+
+
+@media screen and (min-width: 500px) {
+    .intro-header h2 {
+        font-size: 2.5rem;
+    }
+}
+
+@media screen and (min-width: 700px) {
+    .intro-header h2 {
+        font-size: 2.8rem;
+    }
+    .intro-imgs {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+    }
+    .intro-imgs p {
+        font-size: 1rem;
+    }
+    .intro-left-img {
+        width: 180px;
+        margin: 0 4rem;
+    }
+    .intro-middle-img {
+        width: 180px;
+        margin: 0 4rem;
+    }
+    .intro-right-img {
+        width: 180px;
+        margin: 0 4rem;
+    }
+}
+
+@media screen and (min-width: 900px) {
+    .intro-header h2 {
+        font-size: 3.8rem;
+    }
+    .intro-imgs p {
+        font-size: 1.8rem;
+    }
+    .intro-left-img {
+        width: 300px;
+    }
+    .intro-middle-img {
+        width: 300px;
+    }
+    .intro-right-img {
+        width: 300px;
+    }  
+}
+
+/* article section end  */
+/* 
+/* 
+/* 
+/* 
+/* 
+/* 
+/* 
+/* 
+/* 
+/* 
+/* get section */
+.get-section {
+    display: flex;
+    flex-direction: column;
+    background-color: #FCEFEB;
+}
+
+
+.get-img img {
+    width: 100vw;
+}
+
+.get-text {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.get-text p {
+    margin: 3rem 5rem 0 5rem;
+    text-align: center;
+    font-style: italic;
+}
+
+@media screen and (min-width:700px) {
+    .get-section {
+        flex-direction: row;
+    }
+    .get-img img {
+        width: 50vw;
+    }
+    .get-text p {
+        margin-top: 1rem;
+        font-size: 1.5rem;  
+    }
+}
+
+@media screen and (min-width:1000px) {
+    .get-text p {
+         margin-top: 7rem;
+        font-size: 2rem;  
+    }
+}
+
+@media screen and (min-width:1500px) {
+    .get-text p {
+        margin-top: 15rem;
+        font-size: 2rem;  
+    }
+}
+
+@media screen and (min-width:2050px) {
+    .get-text p {
+        margin-top: 15rem;
+        font-size: 5.7rem;   
+    }
+}
+
+
+
+/* line break section  */
+.line-break { 
+    display: flex;
+    justify-content: center;
+}
+
+.line-break hr {
+    background-color: #292929;
+    margin: 2.5rem 0;
+}
+/* line break section end */
+
+
+/* footer section */
+.join-text {
+    display: flex;
+    justify-content: center;
+}
+
+.join-icons {
+    display: flex;
+    justify-content: center;
+}
+
+.join-icons img {
+    width: 20px;
+    margin: 3px;
+    border: 2px #29292946 solid;
+    border-radius: 40px;
+    
+}
 
+/* footer end */
 
diff --git a/index.html b/index.html
index 3e742ef04..a2b928240 100755
--- a/index.html
+++ b/index.html
@@ -11,9 +11,86 @@
 </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="brand-img">
+            <img class="logo-img" src="/img/karma-logo.svg" alt="Brand image">
+        </div>
+        <div class="nav">
+            
+            <label for="toggle">&#9776;</label>
+            <input type="checkbox" id="toggle"/>
+
+            <div class="menu">
+                <span>Meet Karma</span>
+                <a href="#">How it Works</a>
+                <a href="#">Store</a>
+                <a href="#">Blog</a>
+                <a href="#">Help</a>
+                <a href="#">Login</a>
+            </div>
+        </div>
+    </header>
+
+
+
+
+    <section class="hero">
+        <div class="hero-text">
+            <div class="hero-title">Introducing Karma</div>
+            <p>Bring WiFi with you, everywhere you go.</p>
+            <button class="all-btns">Learn More</button>
+        </div>
+    </section>
+    
+    <article class="intro-article">
+        <div class="intro-wrapper">
+            <div class="intro-header">
+                <h2>Everyone needs a little Karma</h2>
+            </div>
+    
+            <div class="intro-imgs">
+                <div class="intro-left-img">
+                    <img src="/img/icon-devices.svg" alt="Outline image of a desktop computer, tablet and mobile">
+                    <p>Internet for all devices</p>
+                </div>
+    
+                <div class="intro-middle-img">
+                    <img src="/img/icon-coffee.svg" alt="Outline image of a cup of coffee">
+                    <p>Boost you productivity</p>
+                </div>
+                <div class="intro-right-img">
+                    <img src="/img/icon-refill.svg" alt="Outline image of a petrol pump">
+                    <p>Pay as You Go</p>
+                </div>
+            </div>
+        </div>
+    </article>
+    
+    <section class="line-break">
+        <hr width="90%">
+    </section>
+    
+    <footer>
+        <div class="join-text">
+            <p>Join us on</p>
+        </div>
+        <div class="join-icons">
+            <img src="img/twitter-icon.svg" alt="">
+            <img src="img/facebook-icon.svg" alt="">
+            <img src="img/instagram-icon.svg" alt="">
+        </div>
+        <div class="join-text">
+            <p>Karma</p>
+        </div>
+    
+    
+    
+    
+    
+    </footer>
+
+
 
 </body>
 </html>

From c2c9a1225a1a30ae63f2511649ab658d51f22fb0 Mon Sep 17 00:00:00 2001
From: KamNik0044 <105980197+KamNik0044@users.noreply.github.com>
Date: Fri, 5 Aug 2022 22:11:58 +0100
Subject: [PATCH 2/2] Store added

---
 css/style.css | 621 +++++++++++++++++++++-----------------------------
 index.html    | 161 +++++++------
 store.html    | 117 ++++++++++
 3 files changed, 467 insertions(+), 432 deletions(-)
 create mode 100644 store.html

diff --git a/css/style.css b/css/style.css
index a3b0a3f02..f60bf977a 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,417 +1,314 @@
-html, body {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-}
- /* 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;
+  
 }
 
 /**
- * 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'
- */
- header {
-     display: flex;
-     justify-content: space-between;
+* 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'
+*/
+
+
+
+
+*{
+   margin:0 auto;
+}
+
+
+
+.logo img{
+   width: 20px;
+}
+header{
+   display: flex;
+   flex-direction: row;
+   justify-content: space-around;
+}
+
+li{
+   display: inline-block;
+   padding-left: 10px;
+   font-weight: 100;
+   /* text-transform: none;
+   text-decoration: none; */
+   font-size: medium;
+   margin-top: 20px;
+   margin-bottom: 15px;
  }
+   
+
+li a{
+   text-decoration: none;
+   color: #434242;
+   height: 96px;
+width: 1448px;
+
 
-.brand-img {
-    width: 30px;
-    margin: 5px 0 0 70px;
-    line-height: 70px;
-    
 }
 
-.nav {
-    text-align: right;
-    height: 70px;
-    line-height: 70px;
+li a:hover{ 
+   color: coral;
+
 }
+nav{
+  /* background: #C4C4C41A; */
+  margin-top: 5px;
+  display: block;
+  
 
-.menu {
-    margin: 0 30px 0 0;
-    width: 100%;
 }
 
-.menu a {
-    text-decoration: none;
-    color: #000;
-    margin: 0 10px;
-    line-height: 70px;
-    font-size: 1rem;
-    font-weight: lighter;
+.karma{
+   display: flex;
+   flex-direction: column;
+   width: 100%;
+   background-image: url("/img/first-background.jpg");
+   height:70vh;
+   background-size: cover;
+   background-position: center;
+   align-items: center;
+   justify-content: center;
+   color: white;
+   
 }
 
-span {
-    font-size: 1rem;
-    font-weight: bold;
+.icon-container{
+   width: 60%;
+   display: flex;
+   flex-direction: row;
+   align-content: center;
+   padding: 40px;
+   justify-content: center;
+   
+
 }
 
-label {
-    margin: 0 40px 0 0;
-    font-size: 26px;
-    line-height: 70px;
-    display: none;
+img.icon{
+   width: 100px;
+   height: 100px;
+   
 }
 
-#toggle {
-    display: none;
+.icon-box{
+   display: flex;
+   align-items: center;
+   flex-direction: column;
+}
+h3{
+   text-align: center;
+   margin-top: 90px;
+   font-size: 40px;
+   font-weight: lighter;
+}
+/* h2{
+  font-weight: lighter;
+} */
 
+footer{
+   display: flex;
+   flex-direction: column;
 }
 
-@media screen and (max-width: 500px) {
-    label {
-        display: block;
-        cursor: pointer;
-    }
-    .menu {
-        text-align: center;
-        width: 100%;
-        display: none;
-    }
-    .menu a {
-        display: block;
-        margin: 0;
-        background: #fff;
-    }
-    .menu a:hover {
-        background-color: #E06239;
-        color: #fff;
-    }
-
-    span {
-        display: block;
-        background-color: #fff;
-        margin: 0;
-    }
-    #toggle:checked + .menu {
-        display: block;
-    }
-}
-
-/* hero section */
-.hero {
-    background: url("../img/first-background.jpg");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    display:flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    flex-direction: column;
-    height: 100vh;
-}
-
-
-.hero-text {
-    color: #fff;
-    font-weight: lighter;
-    text-align: center;
-    height: 16rem;
-    margin-top: 3rem;
-}
-
-.hero-title {
-    font-size: 2rem;
-    padding: .2rem 2rem;
-}
-
-.hero-text p {
-    padding: .2rem 3rem;
-    font-size: 1.3rem;
-    margin-top: 2rem;
-}
-
-
-.all-btns {
-    color: #fff;
-    background-color: #E06239;
-    border: none;
-    padding: .7rem;
-    font-size: .9rem;
-    border-radius: 5px;
-    margin-top: 1.5rem;
-}
-
-.all-btns:hover {
-    color: #E06239;
-    background-color: #fff;
-}
-/* end of hero section */
-
-@media screen and (min-width: 400px) {
-    .hero {
-        padding: 160px 0;
-    }
-    .hero-title {
-        font-size: 2.8rem;
-        padding: .2rem 2rem;
-    }
-    .hero-text p {
-        font-size: 1.8rem;
-    }
-}
-
-@media screen and (min-width: 700px) {
-    .hero-title {
-        font-size: 4rem;    
-    }
-    .hero-text p {
-        padding: .2rem 3rem;
-        font-size: 1.6rem;
-    }
-    .hero-btn {
-        font-size: 1.2rem;
-    }
-    .nav-toggle {
-        display: none;
-    }
-    .hero-btn {
-        font-size: 1.6rem;
-    }
-}
-
-@media screen and (min-width: 2000px) {
-    .all-btns {
-        font-size: 3rem;   
-    }  
-    .hero-title {
-        font-size: 6rem;
-    }
-    .hero-text p {
-    font-size: 2rem;
-    }
-}
-
+.footer{
+   display: flex;
+   flex-direction: row;
+}
 
+.footer_icon{
+   height: 20px;
+   width: 20px;
+   padding: 10px;
 
-/* 
-/* 
-/* 
-/* 
-/* 
-/* 
-/* 
-/* article section  */
-.intro-header h2 {
-    font-size: 1.3rem;
-    font-weight: lighter;
-    padding: 0 4rem;
-    text-align: center;
-    margin-top: 5rem;
-}
-
-.intro-imgs {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top: 4rem;
-}
-
-.intro-imgs p {
-    margin-bottom: 2rem;
-    margin-top: 1rem;
-    text-align: center;
-    font-size: .7rem;
-}
-
-.intro-left-img {
-    width: 115px;
-}
-
-.intro-middle-img {
-    width: 115px;
-}
-
-.intro-right-img {
-    width: 115px;
-}
-
-@media screen and (min-width: 400px) {
-    .intro-header h2 {
-        font-size: 1.8rem;
-    }
-    .hero-btn {
-        font-size: 1rem;
-    }
-    .intro-imgs p {
-        font-size: .9rem;
-    }
-    .intro-left-img {
-        width: 150px;
-    }
-    .intro-middle-img {
-        width: 150px;
-    }
-    .intro-right-img {
-        width: 150px;
-    }
-}
-
-
-@media screen and (min-width: 500px) {
-    .intro-header h2 {
-        font-size: 2.5rem;
-    }
-}
-
-@media screen and (min-width: 700px) {
-    .intro-header h2 {
-        font-size: 2.8rem;
-    }
-    .intro-imgs {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-around;
-    }
-    .intro-imgs p {
-        font-size: 1rem;
-    }
-    .intro-left-img {
-        width: 180px;
-        margin: 0 4rem;
-    }
-    .intro-middle-img {
-        width: 180px;
-        margin: 0 4rem;
-    }
-    .intro-right-img {
-        width: 180px;
-        margin: 0 4rem;
-    }
-}
-
-@media screen and (min-width: 900px) {
-    .intro-header h2 {
-        font-size: 3.8rem;
-    }
-    .intro-imgs p {
-        font-size: 1.8rem;
-    }
-    .intro-left-img {
-        width: 300px;
-    }
-    .intro-middle-img {
-        width: 300px;
-    }
-    .intro-right-img {
-        width: 300px;
-    }  
-}
-
-/* article section end  */
-/* 
-/* 
-/* 
-/* 
-/* 
-/* 
-/* 
-/* 
-/* 
-/* 
-/* get section */
-.get-section {
-    display: flex;
-    flex-direction: column;
-    background-color: #FCEFEB;
 }
 
+img{
+   max-height: 100%;
 
-.get-img img {
-    width: 100vw;
 }
 
-.get-text {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-bottom: 2rem;
+hr{
+   width: 80%;
 }
 
-.get-text p {
-    margin: 3rem 5rem 0 5rem;
-    text-align: center;
-    font-style: italic;
+h5{
+
+   padding: 10px;
+   font-size: medium;
 }
 
-@media screen and (min-width:700px) {
-    .get-section {
-        flex-direction: row;
-    }
-    .get-img img {
-        width: 50vw;
-    }
-    .get-text p {
-        margin-top: 1rem;
-        font-size: 1.5rem;  
-    }
+
+
+
+button{
+   background-color:rgb(253, 67, 5);
+   margin-top: 80px;
+   padding: 10px;
 }
 
-@media screen and (min-width:1000px) {
-    .get-text p {
-         margin-top: 7rem;
-        font-size: 2rem;  
-    }
+.feature {
+  position: left;
+  width: 120%;
+  height: 439px;
+  left: 599px;
+  top: 1758px;
+  
+
 }
 
-@media screen and (min-width:1500px) {
-    .get-text p {
-        margin-top: 15rem;
-        font-size: 2rem;  
-    }
+header{
+  background-color:lightgray;
+  ;
 }
 
-@media screen and (min-width:2050px) {
-    .get-text p {
-        margin-top: 15rem;
-        font-size: 5.7rem;   
-    }
+#container {
+  display:flex;
+  background-color:antiquewhite;
+  
 }
 
+.box {
 
+ text-align: center;
+  width: 50%;
+  text-emphasis:center;
+  flex-direction: row;
+  
+}
 
-/* line break section  */
-.line-break { 
-    display: flex;
-    justify-content: center;
+.text{
+  margin-top: 120px;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-weight: 400px;
+  font-size: 42px;
+  line-height: 49px;
+  color: #434242;
+ 
 }
 
-.line-break hr {
-    background-color: #292929;
-    margin: 2.5rem 0;
+.button5{
+  border:none;
+  color: white;
+  padding:10px 20px 10px 20px;
+  border-radius: 5px;
 }
-/* line break section end */
 
+.imgg{
+  display: flex;
+  
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 50%;
+  height:808px;
 
-/* footer section */
-.join-text {
-    display: flex;
-    justify-content: center;
+ 
 }
 
-.join-icons {
-    display: flex;
-    justify-content: center;
+.containerrr{
+  display: flex;
+  flex-direction: row;
+
+}
+.form *{
+ 
+  padding: 10px;
+  
+} 
+.form input{
+  border-radius: 5px;
+}
+option{
+  border-radius: 5px;
+}
+/* 
+.form{
+  width: 50%;
+
+} */
+.firstline{
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  /* padding: 30px; */
+  
+}
+.radioo{
+  margin-left: 50px;
+}
+.labell{
+  margin-left: 0;
 }
 
-.join-icons img {
-    width: 20px;
-    margin: 3px;
-    border: 2px #29292946 solid;
-    border-radius: 40px;
-    
+.firstname{
+  display:flex;
+   flex-direction: column;
+}
+#firstname{
+
+border-radius: 4px;
+
+}
+
+.lastname{
+  display:flex;
+   flex-direction: column;
+   
+}
+.address{
+  margin-top: 25px;
+  margin-left: 50px;
+
+}
+
+#addressLines , #addressLines{
+  width: 426px;
+}
+.postcity{
+  display: flex;
+  margin-top: 35px;
+}
+.radio{
+  margin-top: 35px;
+  margin-left: 50px;
+}
+.checkbox{
+  margin-top: 35px;
+}
+.radio{
+  margin-top: 35px;
+}
+.bu{
+  margin-top:35px;
+   color: white;
+   background-color:#E0633A;
+   font-size: medium;
+   height: 70px;
+width: 169px;
+border-radius: 4px;
+  
+}
+#city{
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.postcode{
+  /* margin-left: 70px; */
+}
+.order{
+  height: 118px;
+width: 521px;
+color: #DE6E49;
+font-size: 50px;
+border-radius: nullpx;
+margin-bottom: 35px;
+font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
-/* footer end */
 
diff --git a/index.html b/index.html
index a2b928240..362bca342 100755
--- a/index.html
+++ b/index.html
@@ -11,86 +11,107 @@
 </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="brand-img">
-            <img class="logo-img" src="/img/karma-logo.svg" alt="Brand image">
-        </div>
-        <div class="nav">
-            
-            <label for="toggle">&#9776;</label>
-            <input type="checkbox" id="toggle"/>
-
-            <div class="menu">
-                <span>Meet Karma</span>
-                <a href="#">How it Works</a>
-                <a href="#">Store</a>
-                <a href="#">Blog</a>
-                <a href="#">Help</a>
-                <a href="#">Login</a>
-            </div>
-        </div>
-    </header>
 
+</html>
 
+<header>
 
+    <div class="logo"><img src="./img/karma-logo.svg" id="logo"  alt="karma logo">
+    </div>
 
-    <section class="hero">
-        <div class="hero-text">
-            <div class="hero-title">Introducing Karma</div>
-            <p>Bring WiFi with you, everywhere you go.</p>
-            <button class="all-btns">Learn More</button>
-        </div>
-    </section>
-    
-    <article class="intro-article">
-        <div class="intro-wrapper">
-            <div class="intro-header">
-                <h2>Everyone needs a little Karma</h2>
-            </div>
-    
-            <div class="intro-imgs">
-                <div class="intro-left-img">
-                    <img src="/img/icon-devices.svg" alt="Outline image of a desktop computer, tablet and mobile">
-                    <p>Internet for all devices</p>
-                </div>
+  <nav>
+    <ul>
+        
+        <li><a href="#" id="meet-karma">Meet Karma</a></li>
+        <li><a href="#">How it works</a></li>
+        <li><a href="#">Store</a></li>
+        <li><a href="#">Blog</a></li>
+        <li><a href="#">Help</a></li>
+        <li><a href="#">Login</a></li>
+
+    </ul>
+  </nav>
+</header>
+
+<div class="karma">
+    <h1>intoducing karma</h1>
+    <h2> bring wifi with you,everywhere you googleapis</h2>
+    <button>learn more</button>
+</div>
+
+<div class="main">
+<h3>everyone needs a little karma</h3>
+</div>
+
+<div class="icon-container">
     
-                <div class="intro-middle-img">
-                    <img src="/img/icon-coffee.svg" alt="Outline image of a cup of coffee">
-                    <p>Boost you productivity</p>
-                </div>
-                <div class="intro-right-img">
-                    <img src="/img/icon-refill.svg" alt="Outline image of a petrol pump">
-                    <p>Pay as You Go</p>
-                </div>
-            </div>
+<div class="icon-box">
+
+    <img src="./img/icon-devices.svg" class="icon">
+    <h4>internet for all devices</h4>
+
+</div>
+
+<div class="icon-box">
+
+    <img src="./img/icon-coffee.svg" class="icon">
+    <h4>boost your productivity</h4>
+
+</div>
+
+<div class="icon-box">
+
+    <img src="./img/icon-refill.svg" class="icon">
+    <h4>pay as you go</h4>
+
+</div>
+</div>
+<section>
+    <div id="container">
+    <div>
+        <img class="feature" src="./level-2\homepage-feature.png" alt="home page feature">
+    </div>
+
+    <div class="box">
+        <div class="text">
+        <h4>Wherever I am, I just don’t worry about my connection anymore!</h4>
         </div>
-    </article>
-    
-    <section class="line-break">
-        <hr width="90%">
-    </section>
-    
-    <footer>
-        <div class="join-text">
-            <p>Join us on</p>
+        <button class="button5">Get Karma today</button>
+    </div>
+</div>
+
+
+
+</section>
+
+
+<footer>
+    <div>
+        <h5>join us</h5>
+    </div>
+
+    <div class="footer">
+
+        <div class="footer_icon">
+            <img src="./img/twitter-icon.svg" alt="twitter icon">
         </div>
-        <div class="join-icons">
-            <img src="img/twitter-icon.svg" alt="">
-            <img src="img/facebook-icon.svg" alt="">
-            <img src="img/instagram-icon.svg" alt="">
+
+        <div class="footer_icon">
+            <img src="./img/facebook-icon.svg"  alt="facebook icon">
         </div>
-        <div class="join-text">
-            <p>Karma</p>
+   
+        <div class="footer_icon">
+            <img src="./img/instagram-icon.svg"  alt="instagram icon">
         </div>
-    
-    
-    
-    
-    
-    </footer>
 
+    </div>
 
+    <h6>@ karma mobility icon</h6>
+ </div>
 
-</body>
-</html>
+</footer>
+</body>
\ No newline at end of file
diff --git a/store.html b/store.html
new file mode 100644
index 000000000..6419e718c
--- /dev/null
+++ b/store.html
@@ -0,0 +1,117 @@
+<!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/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" id="logo"  alt="karma logo">
+    </div>
+
+  <nav class="nav">
+    <ul class="navlist">
+        
+        <li><a href="#" id="meet-karma">Meet Karma</a></li>
+        <li><a href="#">How it works</a></li>
+        <li><a href="#">Store</a></li>
+        <li><a href="#">Blog</a></li>
+        <li><a href="#">Help</a></li>
+        <li><a href="#">Login</a></li>
+
+    </ul>
+  </nav>
+</header>
+
+<main class="containerrr">
+    <section class="form">
+            <h1 class="order">Order your Karma wifi device today!</h1>
+            <form>
+              <section class="firstline">
+                <div class="firstname">
+                    <label class="labell" for="firstName">First name*</label>
+                    <input id="firstName" type="text" name="first-name"></input>
+                </div>
+                <div class="lastname">
+                    <label  class="labell" for="lastName">Last name*</label>
+                    <input id="lastName" type="text" name="last-name"/>
+                </div>
+            </section>
+                <div class="address">
+                    <label for="addressLines">Address*</label>
+                    <input id="addressLines" type="text" name="addresslanes"/>
+                </div>
+                <div class="address">
+                    <label for="addressLines">Address 2*</label>
+                    <input  id="addressLines" type="text" name="addresslanes"/>
+                </div>
+            <div class="postcity">
+                <div>
+                    <label for="city">city*</label>
+                    <select id="city">
+                        <option name="city">Select your City</option>
+                        <option name="city">Manchester</option>
+                        <option name="city">London</option>
+                        <option name="city">Liverpool</option>
+                    </select>
+                </div>
+                <div class="postcode">
+                    <label for="postcode">postcode*</label>
+                    <input  id="postcode" type="text" name="postcode"/>
+                </div>
+            </div>
+                 <div class="radio">
+                    <span >select a color</span>
+                    <div>
+                        <input  type="radio" name="color">Karma orange
+                        <input class="radioo" type="radio" name="color">space Grey
+                    </div>
+                </div>
+                    <div class="checkbox">
+                        <input type="checkbox"><h9> By placing your order you agree to Karma's <a href="#">Terms and Conditions *.</a></h9>
+                    </div>
+                    <div>
+                        <button class="bu">Place my order</button>
+                    </div>
+               
+            </form>
+        </section>
+        <section class="imgg">
+            <img src="../level-2\store-image_by-andrew-neel-unsplash.jpg" alt="Girl">
+        </section>
+</main>
+
+<footer>
+    <div>
+        <h5>join us</h5>
+    </div>
+
+    <div class="footer">
+
+        <div class="footer_icon">
+            <img src="../img/twitter-icon.svg" alt="twitter icon">
+        </div>
+
+        <div class="footer_icon">
+            <img src="../img/facebook-icon.svg"  alt="facebook icon">
+        </div>
+   
+        <div class="footer_icon">
+            <img src="../img/instagram-icon.svg"  alt="instagram icon">
+        </div>
+
+    </div>
+
+    <h6>@ karma mobility icon</h6>
+ </div>
+
+</footer>
+    
+</body>
\ No newline at end of file