Fixed Issue#80 : Make landing page responsive for Tablet Screens.(DAY 05).

index.html

@@ -259,7 +259,7 @@ <h5>Nike Air Max</h5>
         <div class="container">
             <div class="footer-section">
                 <h3>About Us</h3>
-                <p>Nike is a global leader in sportswear, committed to innovation and inspiring athletes at all levels. Our mission is to bring performance-driven products that empower individuals to achieve their potential, while driving sustainability and creating a better future through sport.</p>
+                <p class="footer-p">Nike is a global leader in sportswear, committed to innovation and inspiring athletes at all levels. Our mission is to bring performance-driven products that empower individuals to achieve their potential, while driving sustainability and creating a better future through sport.</p>
             </div>
 
             <div class="footer-section">

style.css

@@ -590,6 +590,34 @@ header i:hover,header #cart:hover{
 }
 
 /* Media Queries */
+@media (max-width: 1024px) and (min-width: 600px) {
+    .container {
+        flex-direction: row;
+        justify-content: center;
+        gap: 20px;
+        transform: translateX(125px);
+    }
+
+    .footer-section {
+        margin: 10px 0;
+    }
+
+    .footer-section p {
+        font-size: 14px;
+    }
+
+    .footer-section h3 {
+        font-size: 18px;
+    }
+
+    .footer-bottom {
+        font-size: 13px;
+    }
+    section.sec {
+        height: 200rem;
+    }
+}
+
 @media (max-width: 768px) {
     *{
         font-size: small;
@@ -605,7 +633,7 @@ img {
     width: 59%;
 }
 ul {
-    transform: translate(-95px, 0px);
+    /* transform: translate(-95px, 0px); */
 }
 header #cart {
     transform: translate(-90px, 0);
@@ -704,13 +732,55 @@ i.ri-menu-3-fill {
 
 @media (max-width: 768px) {
     section.sec {
-            height: 492rem;
+            height: 200rem;
     }
+
     .cards {
         transform: translate(-27px, 65px);
 }
 h2 {
     transform: translate(81px, 53px);
     font-size: medium;
 }
-    }
+    }
+    @media (min-width: 768px) and (max-width: 1024px){
+        header img {
+            width: 56px;
+        }
+        .page #shoe {
+            z-index: 100;
+            position: absolute;
+            align-items: center;
+            justify-content: center;
+            width: 95%;
+            height: 29%;
+            top: -1%;
+            left: 20%;
+        }
+        .box {
+            display: flex;
+            width: 50%;
+        }
+        h3 {
+            transform: translateX(-121px);
+        }
+        ul {
+            transform: translate(-122px, 0px);
+        }
+        .footer-p {
+            transform: translateX(-122px);
+        }
+        h4 {
+            transform: translateX(-236px);
+        }
+        p {
+            transform: translateX(-301px);
+        }
+        img {
+            width: 100%;
+        }
+        #right h1 {
+             margin-left: -4%;
+        }
+    }
+