From 362534d1364e66740cd00cf76e77c560332e4398 Mon Sep 17 00:00:00 2001
From: Mubashir2611 <hussainmubashir445@gmail.com>
Date: Tue, 4 Jun 2024 02:17:33 +0530
Subject: [PATCH] Add footer UI

---
 index.html |  8 ++++++++
 styles.css | 13 ++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 83892b84..81eabc6c 100644
--- a/index.html
+++ b/index.html
@@ -871,6 +871,14 @@ <h4 class="footer__subtitle">Support</h4>
           <a href="./privacy.html" class="footer__link">Privacy Policy</a>
           <p class="footer__text">Contact Us</p>
         </div>
+        <div class="footer__col">
+          <p>Social Media</p>
+          <section class="social-icon">
+            <a href="#" class="fa-brands fa-facebook fa-2xl"></a>
+            <a href="#"  class="fa-brands fa-instagram fa-2xl"></a>
+          <a href="#" class="fa-brands fa-twitter fa-2xl"></a>
+        </section>
+        </div>
         <div class="footer__col">
           <h4>Address</h4>
           <div class="mapouter">
diff --git a/styles.css b/styles.css
index 559a1b24..a8616627 100644
--- a/styles.css
+++ b/styles.css
@@ -1123,7 +1123,7 @@ header {
 
 .footer__col {
   flex: 1;
-  max-width: 200px;
+  max-width: 100%;
   margin: 10px;
   text-align: center;
   flex-direction: column;
@@ -1174,7 +1174,18 @@ header {
   color: var(--extra-light);
   border-top: 1px solid var(--text-light);
 }
+.social-icon a {
+  transition: transform 0.3s ease;
+  padding: 10px;
+}
 
+.social-icon a:hover {
+  transform: scale(1.1);
+  color: white; 
+}
+.footer:hover{
+  background: linear-gradient(135deg, #654ea3, #eaafc8);
+}
 @media (width < 1200px) {
   .header__image img:nth-child(1) {
     max-width: 30vw;