fix: icon hover effect properly (#1384)

* fix footer icons in Mobile Responsiveness

* fix icon hover effect properly

Author: codewithdhruba01

pages/githubbadge.html

@@ -991,11 +991,11 @@ <h1>GitHub Copilot</h1>
                         <img src="../assets/recode.png" alt="Recode-Hive logo" class="footer-logo">
                     </a>
                     <div class="social-media-links">
-                        <a href="https://facebook.com/recodehive" target="_blank" class="social-icon"><i class="fab fa-facebook-f"></i></a>
-                        <a href="https://twitter.com/recodehive" target="_blank" class="social-icon"><i class="fab fa-twitter"></i></a>
-                        <a href="https://instagram.com/recodehive" target="_blank" class="social-icon"><i class="fab fa-instagram"></i></a>
-                        <a href="https://linkedin.com/company/recodehive" target="_blank" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
-                        <a href="https://github.com/recodehive" target="_blank" class="social-icon"><i class="fab fa-github"></i></a>
+                        <a href="https://facebook.com/recodehive" target="_blank" class="social-icon1"><i class="fab fa-facebook-f"></i></a>
+                        <a href="https://twitter.com/recodehive" target="_blank" class="social-icon2"><i class="fab fa-twitter"></i></a>
+                        <a href="https://instagram.com/recodehive" target="_blank" class="social-icon3"><i class="fab fa-instagram"></i></a>
+                        <a href="https://linkedin.com/company/recodehive" target="_blank" class="social-icon4"><i class="fab fa-linkedin-in"></i></a>
+                        <a href="https://github.com/recodehive" target="_blank" class="social-icon5"><i class="fab fa-github"></i></a>
                     </div>
                 </div>
 
@@ -1031,11 +1031,10 @@ <h5>
 
         <div class="footer-bottom">
             <div class="footer-container">
-                <p class="footer-copyright">
-                    © <span id="dynamic-year">2024</span> Recode-Hive. Made with 🖤 by the community. All rights
-                    reserved.
-                </p>
-            </div>
+            <p>© <span id="dynamic-year">2024</span> Recode-Hive. Made with 🖤 by the 
+            <a href="https://github.com/recodehive/awesome-github-profiles" target="_blank" rel="noopener noreferrer" class="no-underline">community</a>. All rights reserved.
+        </p>
+        </div>
         </div>
 
         <script>
@@ -1054,15 +1053,73 @@ <h5>
             gap: 15px;
         }
 
-        .social-icon {
+        .social-icon1 {
+            font-size: 2rem; /* Increased icon size */
+            color: #333; /* Default color */
+            transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition for transform and color */
+        }
+        .social-icon2 {
+            font-size: 2rem; /* Increased icon size */
+            color: #333; /* Default color */
+            transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition for transform and color */
+        }
+        .social-icon3 {
+            font-size: 2rem; /* Increased icon size */
+            color: #333; /* Default color */
+            transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition for transform and color */
+        }
+        .social-icon4 {
+            font-size: 2rem; /* Increased icon size */
+            color: #333; /* Default color */
+            transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition for transform and color */
+        }
+        .social-icon5 {
             font-size: 2rem; /* Increased icon size */
             color: #333; /* Default color */
             transition: transform 0.3s ease, color 0.3s ease; /* Smooth transition for transform and color */
         }
 
-        .social-icon:hover {
-            color: #007bff; /* Change color on hover */
-            transform: rotate(20deg); /* Rotate 20 degrees on hover */}
+        .social-icon1:hover {
+            background: #007bff; /* Change color on hover */
+            transform: rotate(20deg); /* Rotate 20 degrees on hover */
+            background-clip: text;  
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .social-icon2:hover {
+            background: #007bff; /* Change color on hover */
+            transform: rotate(20deg); /* Rotate 20 degrees on hover */
+            background-clip: text;  
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .social-icon3:hover {
+             background: radial-gradient(circle at 30% 107%, 
+              #fdf497 0%, #fdf497 5%, 
+              #fd5949 45%, 
+              #d6249f 60%, 
+              #285AEB 90%);
+             background-clip: text;  
+             -webkit-background-clip: text;
+             -webkit-text-fill-color: transparent;
+             transform: rotate(20deg);
+        }
+
+        .social-icon4:hover {
+            background: #0077b5; /* Change color on hover */
+            transform: rotate(20deg); /* Rotate 20 degrees on hover */
+            background-clip: text;  
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .social-icon5:hover {
+            color: #636464; /* Change color on hover */
+            transform: rotate(20deg); /* Rotate 20 degrees on hover */
+        }
+
     </style>
 
     <!-- Scroll to top --> <button id="scrollToTop" aria-label="Scroll to top">