Merge pull request #325 from Pratibha666/feature/hover-socialmedia-icons

hover effect on social media icons
Mujtabaa07 · Jan 14, 2025 · 02a2c20 · 02a2c20
2 parents 242c2a3 + 1a975a4
commit 02a2c20
Showing 1 changed file with 30 additions and 1 deletion.
diff --git a/src/componets/footer.js b/src/componets/footer.js
@@ -85,21 +85,45 @@ const SocialIcons = styled.div`
 
 const SocialIcon = styled(motion.a)`
   color: #fffbeb;
-  font-size: 1.5rem;
+  font-size: 1.8rem;
   text-decoration: none;
   padding: 0.5rem;
   border-radius: 50%;
+
+  transition: color 0.3s ease, transform 0.3s ease;
+
+  &:hover {
+    transform: scale(1.2);
   transition: all 0.3s ease;
 
   &:hover {
     color: #fbbf24;
+
+  }
+
+  &[href*="facebook.com"]:hover {
+    color: #3b5998; /* Facebook Blue */
+  }
+
+  &[href*="twitter.com"]:hover {
+    color: #1da1f2; /* Twitter Blue */
+  }
+
+  &[href*="instagram.com"]:hover {
+    color: #e4405f; /* Instagram Pink */
+  }
+
+  &[href*="linkedin.com"]:hover {
+    color: #0077b5; /* LinkedIn Blue */
   }
 
   @media (max-width: 768px) {
     font-size: 1.3rem;
   }
 `;
 
+
+
 const Divider = styled.hr`
   border: none;
   height: 2px;
@@ -108,6 +132,7 @@ const Divider = styled.hr`
   width: 80%;
 `;
 
+
 function Footer() {
   return (
     <FooterContainer>
@@ -131,7 +156,11 @@ function Footer() {
             aria-label="LinkedIn"
             role="link"
           >
+
+            <i className="fab fa-twitter"></i> {/* Updated Twitter icon */}
+
             <i className="fab fa-linkedin-in"></i> {/* LinkedIn icon */}
+
           </SocialIcon>
           <SocialIcon
             href="https://instagram.com"