Skip to content

Commit d1713c2

Browse files
codewithdhruba01sanjay-kv
codewithdhruba01
and
sanjay-kv
authored
Improve: The hover effects on the social media icons in the footer section (#1389)
* enhance: Learn more Button and smooth hover effect * improve: hover effects on the social media icons in the footer section issue: #1387 Co-Authored-By: Sanjay Viswanathan <[email protected]> * update event styles Co-Authored-By: Sanjay Viswanathan <[email protected]> --------- Co-authored-by: Sanjay Viswanathan <[email protected]>
1 parent f0ccc80 commit d1713c2

File tree

4 files changed

+234
-253
lines changed

4 files changed

+234
-253
lines changed

‎pages/compare.html‎

Lines changed: 119 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -280,7 +280,7 @@
280280

281281
.footer-description {
282282
flex: 1 1 300px;
283-
max-width: 300px;
283+
max-width: 450px;
284284
margin-right: 30px;
285285
}
286286

@@ -567,125 +567,127 @@ <h2>Contributor Comparison</h2>
567567
</div>
568568

569569
<footer id="Contact" class="footer-2">
570-
<div class="footer-container">
571-
<div class="footer-content">
572-
<div class="footer-info">
573-
<a href="#">
574-
<img src="../assets/recode.png" alt="Recode-Hive logo" class="footer-logo">
570+
<div class="footer-container">
571+
<div class="footer-content">
572+
<div class="footer-info">
573+
<a href="#"><img src="../assets/recode.png" alt="Recode-Hive logo" class="footer-logo"></a>
574+
575+
<!-- Social Media Icons -->
576+
<div class="social-media-icons">
577+
<a href="https://github.com/sanjay-kv" target="_blank" aria-label="GitHub" data-social="github">
578+
<i class="fab fa-github"></i>
579+
<div class="filled"></div>
580+
</a>
581+
<a href="https://stream.recodehive.com/github" target="_blank" aria-label="YouTube" data-social="youtube">
582+
<i class="fab fa-youtube footer-youtube-icon"></i>
583+
<div class="filled"></div>
584+
</a>
585+
<a href="https://www.linkedin.com/in/sanjay-k-v/" target="_blank" aria-label="LinkedIn" data-social="linkedin">
586+
<i class="fab fa-linkedin-in footer-linkedin-icon"></i>
587+
<div class="filled"></div>
588+
</a>
589+
<a href="https://twitter.com/sanjay_kv_" target="_blank" aria-label="Twitter" data-social="twitter">
590+
<i class="fab fa-twitter footer-twitter-icon"></i>
591+
<div class="filled"></div>
592+
</a>
593+
<a href="https://www.facebook.com/sanjay.k.viswanathan/" target="_blank" aria-label="Facebook" data-social="facebook">
594+
<i class="fab fa-facebook-f footer-facebook-icon"></i>
595+
<div class="filled"></div>
575596
</a>
576-
577-
<!-- Social Media Icons -->
578-
<div class="social-media-icons">
579-
<a href="https://github.com/sanjay-kv" target="_blank" aria-label="GitHub" data-social="github">
580-
<i class="fab fa-github"></i>
581-
<div class="filled"></div>
582-
</a>
583-
<a href="https://stream.recodehive.com/github" target="_blank" aria-label="YouTube" data-social="youtube">
584-
<i class="fab fa-youtube"></i>
585-
<div class="filled"></div>
586-
</a>
587-
<a href="https://www.linkedin.com/in/sanjay-k-v/" target="_blank" aria-label="LinkedIn" data-social="linkedin">
588-
<i class="fab fa-linkedin-in"></i>
589-
<div class="filled"></div>
590-
</a>
591-
<a href="https://twitter.com/sanjay_kv_" target="_blank" aria-label="Twitter" data-social="twitter">
592-
<i class="fab fa-twitter"></i>
593-
<div class="filled"></div>
594-
</a>
595-
<a href="https://www.facebook.com/sanjay.k.viswanathan/" target="_blank" aria-label="Facebook" data-social="facebook">
596-
<i class="fab fa-facebook-f"></i>
597-
<div class="filled"></div>
598-
</a>
599-
</div>
600-
<!-- End of Social Media Icons -->
601-
</div>
602-
603-
<div class="footer-links">
604-
<div class="footer-section">
605-
<h6 class="footer-heading">ABOUT RECODE-HIVE</h6>
606-
<a href="pages/help.html" class="footer-link">Contact Us</a>
607-
<a href="https://github.com/recodehive/awesome-github-profiles/blob/main/CODE_OF_CONDUCT.md" class="footer-link">Code of Conduct</a>
608-
<a href="pages/faq.html" class="footer-link">FAQ's</a>
609-
</div>
610-
<div class="footer-section">
611-
<h6 class="footer-heading">GET INVOLVED</h6>
612-
<a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&amp;projects=&amp;template=add_profile.md&amp;title=Add+Profile%3A+" class="footer-link">Add Your Profile</a>
613-
<a href="https://github.com/recodehive/Support/issues/new?assignees=&labels=invite+me+to+the+community&amp;projects=&template=invitation.yml&amp;title=Please+invite+me+to+the+Recode-Hive+GitHub+Community+Organization" class="footer-link">Join the Organization</a>
614-
<a href="./pages/events.html" class="footer-link">Events</a>
615-
</div>
616-
</div>
617-
618-
<div class="footer-description">
619-
<h5>We focus on quality content for the right people at the right time⏱. What we are trying to do is help you
620-
brand personal skills through GitHub readme.md, listing the best profiles, and giving you the opportunity to
621-
list your profile to the world 🌎.</h5>
622-
<a href="https://stream.recodehive.com/github" class="footer-button">Explore</a>
623597
</div>
624-
</div>
625-
</div>
626-
627-
<div class="footer-bottom">
628-
<div class="footer-container">
629-
<p class="footer-copyright">
630-
© <span id="dynamic-year">2024</span> Recode-Hive. Made with 🖤 by the community. All rights reserved.
631-
</p>
632-
</div>
633-
</div>
634-
</footer>
635-
636-
<style>
637-
.footer-info {
638-
display: flex;
639-
flex-direction: column;
640-
align-items: center;
641-
}
642-
643-
.social-media-icons {
644-
display: flex;
645-
justify-content: center;
646-
margin-top: 10px;
647-
}
648-
649-
.social-media-icons a {
650-
margin: 0 15px;
651-
text-decoration: none;
652-
color: #000;
653-
position: relative;
654-
transition: transform 0.3s, background-color 0.3s;
655-
}
656-
657-
.social-media-icons a i {
658-
font-size: 24px;
659-
}
660-
661-
.social-media-icons a .filled {
662-
position: absolute;
663-
top: 0;
664-
left: 0;
665-
right: 0;
666-
bottom: 0;
667-
background-color: transparent;
668-
transition: background-color 0.3s;
669-
border-radius: 50%;
670-
}
671-
672-
.social-media-icons a:hover {
673-
transform: rotate(20deg);
674-
}
675-
676-
.social-media-icons a:hover .filled {
677-
background-color: rgba(0, 0, 0, 0.1);
678-
}
679-
680-
.footer-links {
681-
text-align: left;
682-
margin-top: 20px;
683-
}
598+
<!-- End of Social Media Icons -->
599+
</div>
600+
<div class="footer-links" style="text-align: left;">
601+
<div class="footer-section">
602+
<h6 class="footer-heading">ABOUT RECODE-HIVE</h6>
603+
<div>
604+
<a href="pages/help.html" class="footer-link">Contact Us</a>
605+
<a href="https://github.com/recodehive/awesome-github-profiles/blob/main/CODE_OF_CONDUCT.md" class="footer-link">Code of Conduct</a>
606+
<a href="pages/faq.html" class="footer-link">FAQ's</a>
607+
</div>
608+
</div>
609+
<div class="footer-section">
610+
<h6 class="footer-heading">GET INVOLVED</h6>
611+
<div>
612+
<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>
613+
<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>
614+
<a href="./pages/events.html" class="footer-link">Events</a>
615+
</div>
616+
</div>
617+
</div>
618+
<div class="footer-description">
619+
<h5>We focus on quality content for the right people at the right time. What we are trying to do is help you
620+
brand personal skills through GitHub readme.md, listing the best profiles, and giving you the opportunity to
621+
list your profile to the world.</h5>
622+
<a href="https://stream.recodehive.com/github" class="footer-button">Explore</a>
623+
</div>
624+
</div>
625+
</div>
626+
627+
<div class="footer-bottom">
628+
<p>© <span id="dynamic-year">2025</span> Recode-Hive. Made with 🖤 by the
629+
<a href="https://github.com/recodehive/awesome-github-profiles" target="_blank" rel="noopener noreferrer" class="no-underline">community</a>. All rights reserved.
630+
</p>
631+
</div>
632+
</footer>
633+
634+
<script>
635+
document.getElementById("dynamic-year").textContent = new Date().getFullYear();
636+
</script>
684637

685-
.footer-section {
686-
margin-bottom: 15px;
687-
}
688-
</style>
638+
<style>
639+
.footer-info {
640+
display: flex;
641+
flex-direction: column;
642+
align-items: center;
643+
}
644+
645+
.social-media-icons {
646+
display: flex;
647+
justify-content: center;
648+
margin-top: 10px;
649+
}
650+
651+
.social-media-icons a {
652+
margin: 0 15px;
653+
text-decoration: none;
654+
color: #000;
655+
position: relative;
656+
transition: transform 0.3s, background-color 0.3s;
657+
}
658+
659+
.social-media-icons a i {
660+
font-size: 24px;
661+
}
662+
663+
.social-media-icons a .filled {
664+
position: absolute;
665+
top: 0;
666+
left: 0;
667+
right: 0;
668+
bottom: 0;
669+
background-color: transparent;
670+
transition: background-color 0.3s;
671+
border-radius: 50%;
672+
}
673+
674+
.social-media-icons a:hover {
675+
transform: rotate(20deg);
676+
}
677+
678+
.social-media-icons a:hover .filled {
679+
background-color: rgba(0, 0, 0, 0.1);
680+
}
681+
682+
.footer-links {
683+
text-align: left;
684+
margin-top: 20px;
685+
}
686+
687+
.footer-section {
688+
margin-bottom: 15px;
689+
}
690+
</style>
689691

690692

691693
<!-- Scroll to top -->

0 commit comments

Comments
 (0)