Last changes to check mobile version

nsaimk · nsaimk · commit 19a9eac002b0 · 2023-02-15T11:01:42.000Z
diff --git a/css/style.css b/css/style.css
@@ -186,6 +186,12 @@ body {
   border-top: 2px solid rgb(235, 235, 235);
   margin-left: 90px;
 }
+.form-line-mobile{
+  display: none;
+}
+.mobile-img{
+  display: none;
+}
 
 label {
   font-weight: bold;
@@ -219,11 +225,13 @@ input[type="radio"]:checked {
 
 /* none-display for desktop size */
 
-.hamburger-menu {
+#hamburger-menu {
   display: none;
 }
 
+
 @media screen and (max-width: 540px) {
+  /* MEET KARMA PAGE */
   .nav-desktop {
     display: none;
   }
@@ -243,15 +251,18 @@ input[type="radio"]:checked {
     background-color: #000;
     border-radius: 5px;
   }
-/*   #menu {
+  /*   #menu {
     display: none;
   } */
 
   /* main */
-  .icons{
+  .icons {
     display: flex;
     flex-direction: column;
     gap: 40px;
     border-bottom: 2px solid rgb(223, 223, 223);
   }
+
+  /* STORE PAGE  */
+
 }
diff --git a/store-mobile.css b/store-mobile.css
@@ -0,0 +1,68 @@
+@media screen and (max-width: 540px) {
+  .nav-list {
+    display: none;
+  }
+
+  .store-main {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .form-group-inline {
+    display: flex;
+    flex-direction: column;
+  }
+  .city-postcode {
+    display: flex;
+    flex-direction: column;
+  }
+  #postcode {
+    width: 120px;
+  }
+  .orange-grey {
+    display: grid;
+    grid-template-columns: 30px 160px;
+    grid-template-rows: repeat(2, 1fr);
+    grid-template-areas:
+      "a c"
+      "b d";
+  }
+  #color1 {
+    grid-area: a;
+  }
+  #color2 {
+    grid-area: b;
+  }
+  .color1-orange {
+    grid-area: c;
+  }
+  .color1-grey {
+    grid-area: d;
+  }
+  .form-line {
+    display: none;
+  }
+  .form-line-mobile {
+    border-bottom: 2px solid grey;
+    margin-top: 10px;
+  }
+
+  .mobile-img {
+    display: inline;
+    background-position: center; /* Center the image */
+    background-repeat: no-repeat; /* Do not repeat the image */
+    background-size: cover; /* Resize the background image to cover the entire container */
+    margin-top: 80px;
+    margin-bottom: 50px;
+  }
+
+  footer {
+    border-top: 2px solid rgb(223, 221, 221);
+    margin-right: 30px;
+    margin-left: 30px;
+  }
+  .form-button {
+    margin-left: 70px;
+    margin-top: 30px;
+  }
+}
diff --git a/store.html b/store.html
@@ -7,6 +7,7 @@
     <title>Document</title>
     <link rel="stylesheet" href="./css/normalize.css" />
     <link rel="stylesheet" href="./css/style.css">
+    <link rel="stylesheet" href="./store-mobile.css">
   </head>
       <header class="header">
       <img src="./img/karma-logo.svg" alt="" style="height: 50px" />
@@ -22,6 +23,11 @@
           <li class="nav-item"><a href="#">Login</a></li>
         </ul>
       </nav>
+      <button id="hamburger-menu">
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
     </header>
 
     <!-- MAIN  -->
@@ -75,9 +81,9 @@ <h1 class="form-h2">Order your Karma wifi device today!</h1>
     <label for="color">Select a color</label>
       <div class="orange-grey">
             <input type="radio" id="color1" name="color" value="orange" />
-            <label for="color1">Karma orange</label>
+            <label for="color1" class="color1-orange">Karma orange</label>
             <input type="radio" id="color2" name="color" value="grey" />
-            <label for="color2">Space grey</label>
+            <label for="color2" class="color1-grey">Space grey</label>
       </div>
   </div>
 
@@ -90,10 +96,12 @@ <h1 class="form-h2">Order your Karma wifi device today!</h1>
       </form>
 
       </div>
-      <div class="background-img">
+      <div class="background-img"></div>
 
-      </div>
       <div class="form-line"></div>
+      <div class="mobile-img"><img src="./level-2/store-image_by-andrew-neel-unsplash.jpg" alt="" width="500px"></div>
+            <div class="form-line-mobile"></div>
+
     </main>
 
     <!-- FOOTER -->
