From 3db10a368f5d9b04fafe11ca799951663e39554a Mon Sep 17 00:00:00 2001
From: VidhanThakur09 <vidhanthakur2700@gmail.com>
Date: Tue, 29 Oct 2024 00:55:41 +0530
Subject: [PATCH] improve social media icons

---
 components/Footer/Footer.html | 10 ++++----
 styles/styles.css             | 43 +++++++++++++++++++++++++++++------
 2 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/components/Footer/Footer.html b/components/Footer/Footer.html
index 4f3659f7..d8a50333 100644
--- a/components/Footer/Footer.html
+++ b/components/Footer/Footer.html
@@ -57,27 +57,27 @@ <h3>Quick links</h3>
         <h3>Follow us on</h3>
         <ul class="social-icons">
           <li>
-            <a href="https://github.com" target="_blank"
+            <a href="https://github.com" id="github" target="_blank"
               ><i class="fab fa-github"></i
             ></a>
           </li>
           <li>
-            <a href="https://instagram.com" target="_blank"
+            <a href="https://instagram.com" id="instagram"target="_blank"
               ><i class="fab fa-instagram"></i
             ></a>
           </li>
           <li>
-            <a href="https://x.com" target="_blank"
+            <a href="https://x.com" id="twitter" target="_blank"
               ><i class="fa-brands fa-x-twitter"></i
             ></a>
           </li>
           <li>
-            <a href="https://facebook.com" target="_blank"
+            <a href="https://facebook.com" id="facebook" target="_blank"
               ><i class="fab fa-facebook"></i
             ></a>
           </li>
           <li>
-            <a href="https://linkedin.com" target="_blank"
+            <a href="https://linkedin.com" id="linkedin" target="_blank"
               ><i class="fab fa-linkedin"></i
             ></a>
           </li>
diff --git a/styles/styles.css b/styles/styles.css
index 5fc39768..f3f3accf 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -765,16 +765,45 @@ footer {
   font-size: 1.2rem;
   border-radius: 50%;
   margin: 0.2rem 0.5rem 0.2rem 0;
-  transition: 0.3s ease;
+  transition: 5s;
   color: var(--secondary-color) #b74b4b;
   text-decoration: none;
 }
 
 .social-icons a:hover {
-  color: black;
-  transform: scale(1.3) translateY(-5px);
-  background-color: #fffefe;
-  box-shadow: 0 0 25px #0c0909ef;
+    color: white;
+    transform: scale(1.1);
+    padding: 2px 2px;
+    border-radius: 4px;
+    border: none;
+}
+#github, #linkedin, #instagram,#facebook,#twitter{
+  transition: all .38s ease;
+}
+#github:hover{
+  color: white;
+  background-color:#3a383c ;
+  font-size: 1.5rem;
+}
+#linkedin:hover{
+  color: white;
+  background-color:#0a66c2 ;
+  font-size: 1.5rem;
+}
+#instagram:hover{
+  color: white;
+  background-color: #e1306c;
+  font-size: 1.5rem;
+}
+#twitter:hover{
+  color: white;
+  background-color: #14171A;
+  font-size: 1.5rem;
+}
+#facebook:hover{
+  color: white;
+  background-color: #106bcb;
+  font-size: 1.5rem;
 }
 .copyright {
   display: flex;
@@ -843,7 +872,7 @@ footer {
     color: var(--secondary-color);
   }
 
-  .social-icons a {
+  /* .social-icons a {
     display: inline-flex;
     justify-content: center;
     align-items: center;
@@ -864,7 +893,7 @@ footer {
     transform: scale(1.3) translateY(-5px);
     background-color: #fffefe;
     box-shadow: 0 0 25px #0c0909ef;
-  }
+  } */
 
   @media (max-width: 768px) {
     .footer-container {