Add hover effect on social media icons (#124)

Anjaliavv51 · Jan 13, 2025 · fd8f910 · fd8f910
2 parents 3422934 + 09e0a1c
commit fd8f910
Showing 1 changed file with 25 additions and 7 deletions.
diff --git a/footercss.css b/footercss.css
@@ -57,19 +57,37 @@
     gap: 20px;
     margin-top: 1rem;
 }
-
 .social-links a {
     color: #333; 
     font-size: 1.5rem;
     text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);   
     transition: all 0.3s ease;
-}
-
-.social-links a:hover {
-    color: #E5A186;
+  }
+  
+  .social-links a[aria-label="Facebook"]:hover {
+    color: #3b5998; /* Facebook blue */
     text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
-}
-
+  }
+
+  .social-links a[aria-label="Twitter"]:hover {
+    color: #1da1f2; /* Twitter blue */
+    text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+  }
+
+  .social-links a[aria-label="Instagram"]:hover {
+    color: #e4405f; /* Instagram gradient */
+    text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+  }
+
+  .social-links a[aria-label="YouTube"]:hover {
+    color: #ff0000; /* YouTube red */
+    text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+  }
+
+  .social-links a[aria-label="Linkedin"]:hover {
+    color: #0077b5; /* LinkedIn blue */
+    text-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+  }
 .contact-info li {
     display: flex;
     align-items: center;