Fix : hover effects of the social media icons on the blog page (#1392)

issue: #1390  👍

Co-authored-by: Sanjay Viswanathan <[email protected]>

Author: codewithdhruba01

pages/blog.html

@@ -1830,64 +1830,66 @@ <h1 style="font-size: 50px;">Github Profile Review</h1>
 					<a href="#"><img src="../assets/recode.png" alt="Recode-Hive logo" class="footer-logo"></a>
 
 					<!-- Social Media Icons -->
-					<div class="social-media-icons">
-						<a href="https://github.com/sanjay-kv" target="_blank" aria-label="GitHub" data-social="github">
-							<i class="fab fa-github"></i>
-							<div class="filled"></div>
-						</a>
-						<a href="https://stream.recodehive.com/github" target="_blank" aria-label="YouTube" data-social="youtube">
-							<i class="fab fa-youtube"></i>
-							<div class="filled"></div>
-						</a>
-						<a href="https://www.linkedin.com/in/sanjay-k-v/" target="_blank" aria-label="LinkedIn" data-social="linkedin">
-							<i class="fab fa-linkedin-in"></i>
-							<div class="filled"></div>
-						</a>
-						<a href="https://twitter.com/sanjay_kv_" target="_blank" aria-label="Twitter" data-social="twitter">
-							<i class="fab fa-twitter"></i>
-							<div class="filled"></div>
-						</a>
-						<a href="https://www.facebook.com/sanjay.k.viswanathan/" target="_blank" aria-label="Facebook" data-social="facebook">
-							<i class="fab fa-facebook-f"></i>
-							<div class="filled"></div>
-						</a>
-					</div>
-					<!-- End of Social Media Icons -->
+                 <div class="social-media-icons">
+                  <a href="https://github.com/sanjay-kv" target="_blank" aria-label="GitHub" data-social="github">
+                      <i class="fab fa-github"></i>
+                      <div class="filled"></div>
+                  </a>
+                  <a href="https://stream.recodehive.com/github" target="_blank" aria-label="YouTube" data-social="youtube">
+                      <i class="fab fa-youtube footer-youtube-icon"></i>
+                      <div class="filled"></div>
+                  </a>
+                  <a href="https://www.linkedin.com/in/sanjay-k-v/" target="_blank" aria-label="LinkedIn" data-social="linkedin">
+                      <i class="fab fa-linkedin-in footer-linkedin-icon"></i>
+                      <div class="filled"></div>
+                  </a>
+                  <a href="https://twitter.com/sanjay_kv_" target="_blank" aria-label="Twitter" data-social="twitter">
+                      <i class="fab fa-twitter footer-twitter-icon"></i>
+                      <div class="filled"></div>
+                  </a>
+                  <a href="https://www.facebook.com/sanjay.k.viswanathan/" target="_blank" aria-label="Facebook" data-social="facebook">
+                      <i class="fab fa-facebook-f footer-facebook-icon"></i>
+                      <div class="filled"></div>
+                  </a>
+              </div>
+              <!-- End of Social Media Icons -->
 				</div>
 				<div class="footer-links" style="text-align: left;">
 					<div class="footer-section">
 						<h6 class="footer-heading">ABOUT RECODE-HIVE</h6>
-						<div>
-							<a href="pages/help.html" class="footer-link">Contact Us</a>
-							<a href="https://github.com/recodehive/awesome-github-profiles/blob/main/CODE_OF_CONDUCT.md" class="footer-link">Code of Conduct</a>
-							<a href="pages/faq.html" class="footer-link">FAQ's</a>
-						</div>
+					<div>
+                        <a href="help.html" class="footer-link">Contact Us</a>
+                        <a href="https://github.com/recodehive/awesome-github-profiles/blob/main/CODE_OF_CONDUCT.md" class="footer-link">Code of Conduct</a>
+                        <a href="faq.html" class="footer-link">FAQ's</a>
+                    </div>
 					</div>
 					<div class="footer-section">
 						<h6 class="footer-heading">GET INVOLVED</h6>
 						<div>
 							<a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&amp;labels=%E2%9E%95+profile&amp;projects=&amp;template=add_profile.md&amp;title=Add+Profile%3A+" class="footer-link">Add Your Profile</a>
 							<a href="https://github.com/recodehive/Support/issues/new?assignees=&amp;labels=invite+me+to+the+community&amp;projects=&amp;template=invitation.yml&amp;title=Please+invite+me+to+the+Recode-Hive+GitHub+Community+Organization" class="footer-link">Join the Organization</a>
-							<a href="./pages/events.html" class="footer-link">Events</a>
+							<a href="events.html" class="footer-link">Events</a>
 						</div>
 					</div>
 				</div>
 				<div class="footer-description">
-					<h5>We focus on quality content for the right people at the right time⏱. What we are trying to do is help you
+					<h5>We focus on quality content for the right people at the right time. What we are trying to do is help you
 						brand personal skills through GitHub readme.md, listing the best profiles, and giving you the opportunity to
-						list your profile to the world 🌎.</h5>
+						list your profile to the world.</h5>
 					<a href="https://stream.recodehive.com/github" class="footer-button">Explore</a>
 				</div>
 			</div>
 		</div>
 
 		<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>
-		</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>
+
+    <script>
+        document.getElementById("dynamic-year").textContent = new Date().getFullYear();
+    </script>
 	</footer>
 
 	<style>

pages/events.html

@@ -257,11 +257,6 @@ <h5>
     .footer-section {
         margin-bottom: 15px; /* Space between sections */
     }
-
-    .footer-bottom {
-        text-align: center; /* Center the footer-bottom content */
-        margin-top: 20px; /* Space between main content and footer */
-    }
 </style>
 
 <button id="scrollToTop" aria-label="Scroll to top">

styles/blog.css

@@ -43,10 +43,6 @@ body.dark-mode .blog-card .save-btn {
     color: #fff;
 }
 
-
-
-
-
 .saved-blogs {
     display: flex; 
     align-items: center; 
@@ -588,4 +584,29 @@ body.dark-mode .saved-blogs {
     width: 0%;
     background: white;
     transition: width 0.2s ease;
+}
+
+.footer-bottom {
+  border-top: 1px solid #75727298;
+  padding: 10px 0;
+  text-align: center;
+}
+
+
+.footer-bottom p {
+  margin: 0;
+  padding: 10px 0;
+  max-width: 100%;
+  font-weight: 400;
+}
+
+.footer-bottom a.no-underline {
+  text-decoration: none;
+  word-break: break-word;
+  color: #1992d3;
+}
+
+.footer-bottom a.no-underline:hover {
+  text-decoration: none;
+  color: #026499;
 }