From e0175da60fdafac6b8901ddf304922691b52514d Mon Sep 17 00:00:00 2001
From: 25sana <sana.khiari2002@gmail.com>
Date: Fri, 26 Aug 2022 13:10:58 +0100
Subject: [PATCH 1/8]  last change

---
 css/store.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/css/store.css b/css/store.css
index 9c331984a..5ac8666e1 100644
--- a/css/store.css
+++ b/css/store.css
@@ -35,6 +35,7 @@ form{
 .store-form .input-box{
     margin-bottom:30px ; 
     width: 100%; 
+    font-weight: 500;
 }
 .store-form .input-group{
     display: flex;
@@ -47,12 +48,14 @@ form{
     border-radius: 5px;
     width: 90%;
     height: 35px;
+    
 }
 .store-form .input-box select{
     border: 2px solid #686868;
     border-radius: 5px;
     width: 95%;
     height: 40px;
+    color: #686868;
 }
 .store-form .check-box input{
     border: 2px solid #686868;

From e28e749a6129d65934b93e967dd65aa95f43821f Mon Sep 17 00:00:00 2001
From: 25sana <sana.khiari2002@gmail.com>
Date: Tue, 30 Aug 2022 10:22:48 +0100
Subject: [PATCH 2/8] home-page mobil

---
 index.html | 42 +++++++++++++++++++++++++++---------------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 510878861..5ca7d5d39 100755
--- a/index.html
+++ b/index.html
@@ -14,23 +14,28 @@
     <!-- 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="logo" >
-        </div>
-        <div class="container">
-            <ul>
-                <li><a href="index.html" class="current">Meet Karma</a></li>
-                <li><a href="#">How it works</a></li>
-                <li><a href="store.html">Store</a></li>
-                <li><a href="#">Blog</a></li>
-                <li><a href="#">Help</a></li>
-                <li><a href="#" class="login_button">login</a></li>
 
-            </ul>
-        </div>
-    </header>
     <main>
+        <div class="header">
+            <div class="logo">
+                <img src="../img/karma-logo.svg" alt="logo" >
+            </div>
+            <div class="container">
+                <div class="nav-list" id="nav-bar" ></div> <!--id="nav-bar"-->
+                <ul>
+                    <li><a href="index.html" class="current">Meet Karma</a></li>
+                    <li><a href="#">How it works</a></li>
+                    <li><a href="store.html">Store</a></li>
+                    <li><a href="#">Blog</a></li>
+                    <li><a href="#">Help</a></li>
+                    <li><a href="#" class="login_button">login</a></li>
+    
+                </ul>
+                <div class="menu-hamburger" id="hamburger-button">
+                    <img src="../level-3/menu-hamburger.svg" alt="" height="35px" width="35px" >
+                </div>
+            </div>
+        </div>
         <div class="content-up">
                 <h1>Introducing Karma</h1>
                 <p>Bring WiFi with you, everywhere you go.</p>
@@ -81,4 +86,11 @@ <h4>Join us on</h4>
         </div>
     </footer>
 </body>
+  <script>
+                const hamburgerButton = document.getElementById('hamburger-button');
+                const navList = document.getElementById('nav-bar');
+                hamburgerButton.addEventListener('click', ()=>{
+                    navList.classList.toggle('active');
+                })
+            </script>      
 </html>

From 039872b98be869ddec15e486f5e99c083813b965 Mon Sep 17 00:00:00 2001
From: 25sana <sana.khiari2002@gmail.com>
Date: Tue, 30 Aug 2022 10:23:33 +0100
Subject: [PATCH 3/8] home-page mobil

---
 css/style.css | 97 +++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 86 insertions(+), 11 deletions(-)

diff --git a/css/style.css b/css/style.css
index b6b5efce6..2c8785a49 100755
--- a/css/style.css
+++ b/css/style.css
@@ -17,11 +17,11 @@ body {
  */
 
 
- header{
+ .header{
     top: 0;
     left: 0;
     position: fixed;
-    height: 80px;
+    height: 80px; 
     display: flex;
     justify-content: space-around;
     align-items: center;
@@ -29,9 +29,10 @@ body {
     background-color: 	#F5F5F5;
     z-index: 1000;
 }
-header .logo{
-    margin-left: 60px;
-}
+.header .logo{ 
+    margin-left: 40px;
+    width: 30px; 
+} 
 ul{
     display: flex;
     list-style-type: none;
@@ -50,12 +51,14 @@ ul li a:hover{
 li a:hover::after{
     width: 100%;
 }
-    
+.menu-hamburger{
+    display: none;
+} 
 .content-up{
     padding-top: 80px;
     background-image: url("../img/first-background.jpg");
     width: 100%; 
-    height: 650px;
+    height: 650px; 
     display: flex; 
     flex-direction: column;
     align-items: center; 
@@ -147,9 +150,7 @@ footer .footer-bottom{
     align-items: center; 
 }
 .new-section-img{
-     width: 35%; 
-
-    
+     width: 35%;   
 }
 .new-section .new-right{
     display: flex;
@@ -172,10 +173,84 @@ footer .footer-bottom{
     border: none;
     font-weight: 600;
     text-transform: capitalize;
-    border-radius: 5px;
+    border-radius: 10px;
    
 }
 .new-section span{
     color: #cc5500;
 
 }
+@media screen and (max-width:768px) {
+   .header ul{
+    flex-direction: column; 
+    position: absolute;
+    top: 55px;
+    right: 0;
+    background-color: #F5F5F5;
+    font-size: 20px;
+    width: 100%;
+    text-align: center;
+    display: none ;
+   }
+   .header li{
+    margin-top: 10px;
+   }
+    .header .logo{
+    position: absolute;
+    left: 25px;
+    width: 25px;
+   } 
+    .menu-hamburger{
+        display:block;
+        position: absolute;
+        top: 25px;
+        right: 15px;
+    } 
+    .active{
+        display: block;
+    }
+    .content-up{
+      background-size: 100% 100%;
+    }
+    .content-up h1 {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        margin-top: 40px;
+        font-size: 80px;
+    }  
+    .content-up p {
+        font-size: 50px;
+    }    
+    .Learn-More-button{
+        padding: 25px 40px;
+        font-size: x-large;
+        font-weight: lighter;
+    }
+    .content-down .row1{
+        flex-direction: column;
+        height: 50%;
+        margin-top: 50px;
+        margin-bottom: 50px;
+    }
+    .new-section{
+        flex-direction: column;
+    }
+    .new-section img{
+        width: 100%;
+        height: auto;
+    }
+    .new-section p{
+        margin: 70px 55px ;
+        padding: 25px;
+        text-align: justify;
+        font-weight: 400;
+    }
+    .new-section button{
+        padding: 25px 100px;
+        margin-bottom: 70px;
+        font-size: xx-large;
+        font-weight: 400;
+    }
+}

From 613a93cf11825b0fd9986929d34588fc1471347c Mon Sep 17 00:00:00 2001
From: 25sana <sana.khiari2002@gmail.com>
Date: Tue, 30 Aug 2022 18:21:53 +0100
Subject: [PATCH 4/8] home-page mobil mod

---
 css/style.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index 2c8785a49..1cd6f88a9 100755
--- a/css/style.css
+++ b/css/style.css
@@ -124,6 +124,8 @@ footer{
     bottom: 0;
     width: 100%;
     background-color: white;
+    margin-top: 100px;
+    padding-top: 100px;
 }
 footer .footer-content h4{
     font-size: large;
@@ -204,7 +206,7 @@ footer .footer-bottom{
         display:block;
         position: absolute;
         top: 25px;
-        right: 15px;
+        right: 20px;
     } 
     .active{
         display: block;

From b62959f35005ad6bcd28dad85a3c3dda1ec368e9 Mon Sep 17 00:00:00 2001
From: 25sana <sana.khiari2002@gmail.com>
Date: Tue, 30 Aug 2022 18:22:45 +0100
Subject: [PATCH 5/8] store-page mobil

---
 css/store.css | 52 +++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 44 insertions(+), 8 deletions(-)

diff --git a/css/store.css b/css/store.css
index 5ac8666e1..35234da3f 100644
--- a/css/store.css
+++ b/css/store.css
@@ -117,13 +117,6 @@ label {
 .radio input:checked + .radio__radio::after{
     transform: scale(1);
 }
-/*.check-box{
-    display: flex;
-    justify-content: center ;
-    align-items: baseline; 
-    text-align:justify; 
-    cursor: pointer;
-} */
 .check-box p{
     color: #535353;
 }
@@ -151,10 +144,53 @@ label {
 
 }
 .checkmark::after{  
-     content: url(../level-2/checkmark.svg); 
+    content: url(../level-2/checkmark.svg); 
     display: none; 
 }
 .check-box input:checked + .checkmark::after {  
     display: block; 
 }
 
+@media screen and (max-width:768px){
+   .right-image{
+    margin-top: 1200px;
+    width:100%
+   }
+   .store-form{
+    position: absolute;
+    width: 100%;
+   }
+   .store-form h1{
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+   }
+   .input-group{
+    flex-direction: column;
+    width: 100%;
+   }
+   .radio-group{
+    flex-direction: column ;
+    align-items: flex-start;
+   }
+   .radio{
+    margin-bottom: 0;
+   }
+   .postCode{
+    width: 30%;
+   }
+   .check-box p{
+    overflow: wrap;
+    padding-right: 10px;
+   }
+   .check-box{
+    margin-top: 40px;
+   }
+
+   .store-form .button{
+    width: 70%;
+	padding: 15px 55px;
+}
+    
+}
\ No newline at end of file

From 7eab2a398513283e4b96e50835d86b64961ee0a7 Mon Sep 17 00:00:00 2001
From: 25sana <sana.khiari2002@gmail.com>
Date: Tue, 30 Aug 2022 18:23:06 +0100
Subject: [PATCH 6/8] store-page mobil

---
 store.html | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/store.html b/store.html
index ade4306f1..87ee9b27b 100644
--- a/store.html
+++ b/store.html
@@ -11,11 +11,14 @@
         <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
     </head>
     <body>
-            <header>
+           
+        <main>
+            <div class="header">
                 <div class="logo">
-                    <img src="./img/karma-logo.svg" alt="logo" width="30px" height="30px">
+                    <img src="../img/karma-logo.svg" alt="logo" >
                 </div>
                 <div class="container">
+                    <div class="nav-list" id="nav-bar" ></div> 
                     <ul>
                         <li><a href="index.html" class="current">Meet Karma</a></li>
                         <li><a href="#">How it works</a></li>
@@ -23,31 +26,33 @@
                         <li><a href="#">Blog</a></li>
                         <li><a href="#">Help</a></li>
                         <li><a href="#" class="login_button">login</a></li>
-
+        
                     </ul>
+                    <div class="menu-hamburger" id="hamburger-button">
+                        <img src="../level-3/menu-hamburger.svg" alt="" height="35px" width="35px" >
+                    </div>
                 </div>
-            </header>
-        <main>
+            </div>
                 <img class="right-image" src="./level-2/store-image_by-andrew-neel-unsplash.jpg" alt="" >
                 <div class="store-form">
                     <h1>Order your Karma wifi divice today!</h1> 
                     <form action="#">
                         <div class="input-group">
                             <div class="input-box">
-                                <label class="details">First Name*</label>
+                                <label >First Name*</label>
                                 <input type="text" placeholder="" required>
                             </div>
                             <div class="input-box">
-                                <label class="details">Last Name*</label>
+                                <label >Last Name*</label>
                                 <input type="text" placeholder="" required>
                             </div>
                         </div>
                         <div class="input-box">
-                            <label class="details">Adress*</label>
+                            <label >Adress*</label>
                             <input type="email" placeholder="" required>
                         </div>
                         <div class="input-box">
-                            <label class="details">Adress2*</label>
+                            <label>Adress2*</label>
                             <input type="email" placeholder="" required>
                         </div>
                         <div class="input-group">
@@ -63,10 +68,12 @@ <h1>Order your Karma wifi divice today!</h1>
                             </div>
                             <div class="input-box">
                                 <label class="details">Post code*</label>
-                                <input type="text" placeholder="" required>
+                                <div class="postCode">
+                                    <input type="text" placeholder=""  required>
+                                </div>
                             </div>
                         </div>
-                            <label class="details">Select Color</label>
+                            <label >Select Color</label>
                             <div class="radio-group">
                                 <label class="radio">
                                     <input type="radio" value="Karma-orange" name="color" >
@@ -82,7 +89,7 @@ <h1>Order your Karma wifi divice today!</h1>
                                 </label>
                             </div>
                         <div class="check-box">
-                            <label class="check">
+                            <label >
                                 <input type="checkbox" > 
                                 <div class="checkmark"></div>
                                 <p class="conditions">By placing your order you agree to <span class="orange-codition"><u>Karma's Terms and Conditions</u></span>  *</p>

From 08de2ed74ab8c704b01fc3958fe36c7ac39b4923 Mon Sep 17 00:00:00 2001
From: 25sana <sana.khiari2002@gmail.com>
Date: Thu, 1 Sep 2022 14:32:39 +0100
Subject: [PATCH 7/8] mob

---
 css/style.css | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/css/style.css b/css/style.css
index 1cd6f88a9..6dd9e51d7 100755
--- a/css/style.css
+++ b/css/style.css
@@ -124,8 +124,7 @@ footer{
     bottom: 0;
     width: 100%;
     background-color: white;
-    margin-top: 100px;
-    padding-top: 100px;
+    margin-top: 80px; 
 }
 footer .footer-content h4{
     font-size: large;
@@ -134,8 +133,8 @@ footer .footer-content h4{
 
 footer .footer-content ul li a img {
     border: 1px solid #D3D3D3;
-    border-radius: 40%;
-    padding: 7px ;
+    border-radius: 60%;
+    padding: 5px ;
     opacity: 0.7;
     
 }
@@ -215,15 +214,13 @@ footer .footer-bottom{
       background-size: 100% 100%;
     }
     .content-up h1 {
-        display: flex;
-        justify-content: center;
         align-items: center;
         text-align: center;
-        margin-top: 40px;
-        font-size: 80px;
+        margin-top: 60px;
+        font-size: 50px;
     }  
     .content-up p {
-        font-size: 50px;
+        font-size: 30px;
     }    
     .Learn-More-button{
         padding: 25px 40px;
@@ -246,13 +243,16 @@ footer .footer-bottom{
     .new-section p{
         margin: 70px 55px ;
         padding: 25px;
-        text-align: justify;
+        text-align: center;
         font-weight: 400;
     }
     .new-section button{
-        padding: 25px 100px;
+        display: flex;
+        align-items: center;
+        padding: 25px 65px;
         margin-bottom: 70px;
-        font-size: xx-large;
+        font-size: x-large;
         font-weight: 400;
     }
+
 }

From f08145be29e1ffc00422bfcf1faed66230124c11 Mon Sep 17 00:00:00 2001
From: 25sana <sana.khiari2002@gmail.com>
Date: Thu, 1 Sep 2022 14:33:02 +0100
Subject: [PATCH 8/8] mob

---
 css/store.css | 41 +++++++++++++++++++++++------------------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/css/store.css b/css/store.css
index 35234da3f..b5b7dfe48 100644
--- a/css/store.css
+++ b/css/store.css
@@ -7,6 +7,10 @@ body {
 main{
     width: 100%;
 }
+.header .logo{ 
+    width: 50px; 
+} 
+
 img{
     width: 50%;
     float: right;
@@ -16,20 +20,18 @@ form{
 }
 .store-form{
     margin-top: 80px;
-    width: 40%;
+    width: 50%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    text-align: justify;
-    margin-left: 5%;
-    margin-right: 5%;
+    text-align: flex-start;
 }
 .store-form h1{
+    text-align: center;
     margin-top: 60px;
     font-size: 45px;
-    font-weight: 500;
-    letter-spacing: 1px;
+    font-weight: 400;
     color: #cc5500;
 }
 .store-form .input-box{
@@ -47,14 +49,14 @@ form{
     border: 2px solid #686868;
     border-radius: 5px;
     width: 90%;
-    height: 35px;
+    height: 45px;
     
 }
 .store-form .input-box select{
     border: 2px solid #686868;
     border-radius: 5px;
     width: 95%;
-    height: 40px;
+    height: 50px;
     color: #686868;
 }
 .store-form .check-box input{
@@ -72,7 +74,7 @@ label {
     width: 40%;
 	background: hwb(25 7% 3% / 0.943);
 	padding: 15px 35px;
-    margin: 30px;
+    margin-top: 30px; 
 	border: 0;
 	border-radius: 3px;
 	letter-spacing: 1px;
@@ -153,12 +155,12 @@ label {
 
 @media screen and (max-width:768px){
    .right-image{
-    margin-top: 1200px;
+    margin-top: 1250px;
     width:100%
    }
    .store-form{
-    position: absolute;
-    width: 100%;
+    position: absolute; 
+    width: 100%; 
    }
    .store-form h1{
     display: flex;
@@ -178,19 +180,22 @@ label {
     margin-bottom: 0;
    }
    .postCode{
-    width: 30%;
+    width: 40%;
+   }
+   .store-form{
+    width: 80%;
    }
    .check-box p{
-    overflow: wrap;
-    padding-right: 10px;
+    margin-left: 15px;
    }
    .check-box{
     margin-top: 40px;
    }
 
    .store-form .button{
-    width: 70%;
-	padding: 15px 55px;
-}
+    width: auto;
+	padding: 25px 50px;
+    margin-left: 30%;
+} 
     
 }
\ No newline at end of file