Added a responsive footer

swaraj-das · Jul 14, 2024 · eaf5691 · eaf5691
1 parent 1ba280d
commit eaf5691
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 23 deletions.
diff --git a/index.html b/index.html
@@ -179,16 +179,39 @@ <h3>Mechanical Gaming Keyboard</h3>
         </div>
     </div>
 
-    <div class="social-links">
-        <img src="images/fb.png" alt="Facebook">
-        <img src="images/tw.png" alt="Twitter">
-        <img src="images/ig.png" alt="Instagram">
-    </div>
+
     <footer>
-        <p>&copy; 2024 Collect your GamingTools - All rights reserved.</p>
-        <p>Made by Swaraj &#128512;</p>
+        <div class="footer-container">
+            <div class="footer-content">
+                <div class="footer-section">
+                    <div class="logo-name">
+                        <img src="images/logo.png" alt="Logo">
+                        <h4>Collect your GamingTools</h4>
+                    </div>
+                    <p>Collect your GamingTools is your one-stop shop for the best gaming accessories. We provide a wide range of controllers, VR accessories, media remotes, and more.</p>
+                </div>                
+                <div class="footer-section">
+                    <h4>Contact Us</h4>
+                    <p class="contact">Email: [email protected]</p>
+                    <p class="contact">Phone: +123 456 7890</p>
+                </div>
+                <div class="footer-section">
+                    <h4>Follow Us</h4>
+                    <div class="social-links">
+                        <img src="images/fb.png" alt="Facebook">
+                        <img src="images/tw.png" alt="Twitter">
+                        <img src="images/ig.png" alt="Instagram">
+                    </div>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>&copy; 2024 Collect your GamingTools - All rights reserved.</p>
+                <p>Made by Swaraj &#128512;</p>
+            </div>
+        </div>
     </footer>
+
 
 <script src="script.js"></script>
 </body>
-</html>
+</html>
diff --git a/style.css b/style.css
@@ -269,29 +269,89 @@ button:hover{
     font-weight: 600;
 }
 
-.social-links img {
-    height: 20px;
-    margin: 15px;
+.footer-container {
+    background-color: #444444;
+    color: #fff;
+    padding: 40px 20px;
+    text-align: center;
+    position: relative;
+}
+
+.footer-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    margin-bottom: 20px;
+}
+
+.footer-section {
+    flex: 1 1 200px;
+    margin: 10px 20px;
+    max-width: 300px;
+    text-align: left;
+}
+
+.footer-section .logo-name {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.footer-section .logo-name img {
+    height: 50px;
+    margin-right: 10px;
+}
+
+.footer-section .logo-name h4 {
+    font-size: 18px;
+    margin: 20px 0;
+}
+
+.footer-section .contact {
+    font-size: 14px;
+    line-height: 28px;
+    color: #d3d3d3;
+    font-weight: 600;
     cursor: pointer;
-    transition: transform 0.3s; 
 }
 
-.social-links{
-    text-align: center;
-    margin-bottom: 10px;
+.footer-section .contact:hover {
+    color: #ffee05;
 }
 
-.social-links img:hover {
-    transform: scale(1.2); 
+.footer-section h4 {
+    margin-bottom: 20px;
+}
+
+.footer-section p {
+    line-height: 22px;
+    font-size: 14px;
+    font-weight: 400;
+    text-align: justify;
 }
 
-footer {
+.footer-bottom {
+    border-top: 0.7px dashed #e4e4e4;
+    padding-top: 20px;
+    max-width: 30%; 
+    margin: 0 auto;
     text-align: center;
-    padding: 10px;
-    background-color: #272727;
-    color: #fff;
+}
+
+.footer-bottom p {
+    margin: 5px 0;
     font-size: 12px;
-    line-height: 16px;
+}
+
+.social-links img {
+    height: 30px;
+    margin: 20px;
+    cursor: pointer;
+    transition: transform 0.3s;
+}
+
+.social-links img:hover {
+    transform: scale(1.2);
 }
 
 
@@ -375,4 +435,22 @@ footer {
         font-size: 20px;
     }
 
-}
+    .footer-content {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .footer-section {
+        max-width: 100%;
+        text-align: center;
+    }
+
+    .footer-section .logo-name {
+        justify-content: center;
+    }
+
+    .footer-bottom {
+        max-width: fit-content;
+    }
+
+}