banner section mobile responsive

xyryc · xyryc · commit 296a4997aa0c · 2024-08-03T23:11:26.000+06:00
diff --git a/index.html b/index.html
@@ -15,6 +15,7 @@
       crossorigin="anonymous"
     ></script>
   </head>
+
   <body class="poppins-regular" style="cursor: url(images/arrow.cur), auto">
     <header>
       <!-- Navbar -->
@@ -27,12 +28,12 @@ <h3>Shutter Shop</h3>
           <p>Sign Up</p>
           <p>Login</p>
           <i class="fa-solid fa-magnifying-glass" id="search-icon"></i>
-          <i class="fa-brands fa-opencart" id="cart-icon"></i>
+          <i class="fa-brands fa-opencart"></i>
         </div>
       </nav>
 
       <!-- Banner Section -->
-      <div class="container banner hide">
+      <div class="container banner">
         <div class="text-content">
           <h1>Start your Journey as Influencer</h1>
           <p>
diff --git a/styles/gears.css b/styles/gears.css
@@ -335,6 +335,7 @@ footer .social i {
 
 /* Media Queries */
 @media screen and (max-width: 576px) {
+  /* Navbar */
   #navbar-icon {
     display: inline;
   }
@@ -348,7 +349,54 @@ footer .social i {
   }
 
   .nav-bar {
+    padding-top: 2rem;
     border: 2px solid red;
-    padding-top: 2.1rem;
+  }
+
+  /* Banner section */
+  .container {
+    padding-top: 2rem;
+  }
+
+  .banner {
+    flex-direction: column-reverse;
+    gap: 0;
+  }
+
+  .image-container {
+    width: 100%;
+  }
+
+  .background-image {
+    width: 100%;
+  }
+
+  .overlay-image {
+    width: 100%;
+    left: 0;
+    top: 40px;
+  }
+
+  .banner .text-content{
+    width: 100%;
+    justify-content: center;
+  }
+
+  .banner .text-content h1 {
+    font-size: 1.75rem;
+    line-height: 2.5rem;
+    text-align: center;
+  }
+
+  .banner .text-content p {
+    width: 100%;
+    text-align: center;
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+
+  .banner button{
+    width: 60%;
+    margin: 0 auto;
   }
 }
