8000 Improve: The hover effects on the social media icons in the footer section by codewithdhruba01 · Pull Request #1389 · recodehive/awesome-github-profiles · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Improve: The hover effects on the social media icons in the footer section #1389

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 8, 2025
Merged

Improve: The hover effects on the social media icons in the footer section #1389

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2d32a58
enhance: Learn more Button and smooth hover effect
codewithdhruba01 Jun 5, 2025
40ff7d0
improve: hover effects on the social media icons in the footer section
codewithdhruba01 Jun 8, 2025
5f8dda4
update event styles
codewithdhruba01 Jun 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
236 changes: 119 additions & 117 deletions pages/compare.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -280,7 +280,7 @@

.footer-description {
flex: 1 1 300px;
max-width: 300px;
max-width: 450px;
margin-right: 30px;
}

Expand Down Expand Up @@ -567,125 +567,127 @@ <h2>Contributor Comparison</h2>
</div>

<footer id="Contact" class="footer-2">
<div class="footer-container">
<div class="footer-content">
<div class="footer-info">
<a href="#">
<img src="../assets/recode.png" alt="Recode-Hive logo" class="footer-logo">
<div class="footer-container">
<div class="footer-content">
<div class="footer-info">
<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 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>

<!-- 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>

<div class="footer-links">
<div class="footer-section">
<h6 class="footer-heading">ABOUT RECODE-HIVE</h6>
<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 class="footer-section">
<h6 class="footer-heading">GET INVOLVED</h6>
<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>
<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>
<a href="./pages/events.html" class="footer-link">Events</a>
</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
brand personal skills through GitHub readme.md, listing the best profiles, and giving you the opportunity to
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>
</footer>

<style>
.footer-info {
display: flex;
flex-direction: column;
align-items: center;
}

.social-media-icons {
display: flex;
justify-content: center;
10000 margin-top: 10px;
}

.social-media-icons a {
margin: 0 15px;
text-decoration: none;
color: #000;
position: relative;
transition: transform 0.3s, background-color 0.3s;
}

.social-media-icons a i {
font-size: 24px;
}

.social-media-icons a .filled {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: transparent;
transition: background-color 0.3s;
border-radius: 50%;
}

.social-media-icons a:hover {
transform: rotate(20deg);
}

.social-media-icons a:hover .filled {
background-color: rgba(0, 0, 0, 0.1);
}

.footer-links {
text-align: left;
margin-top: 20px;
}
<!-- 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>
<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>
</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
brand personal skills through GitHub readme.md, listing the best profiles, and giving you the opportunity to
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">
<p>© <span id="dynamic-year">2025</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>
</footer>

<script>
document.getElementById("dynamic-year").textContent = new Date().getFullYear();
</script>

.footer-section {
margin-bottom: 15px;
}
</style>
<style>
.footer-info {
display: flex;
flex-direction: column;
align-items: center;
}

.social-media-icons {
display: flex;
justify-content: center;
margin-top: 10px;
}

.social-media-icons a {
margin: 0 15px;
text-decoration: none;
color: #000;
position: relative;
transition: transform 0.3s, background-color 0.3s;
}

.social-media-icons a i {
font-size: 24px;
}

.social-media-icons a .filled {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: transparent;
transition: background-color 0.3s;
border-radius: 50%;
7973 }

.social-media-icons a:hover {
transform: rotate(20deg);
}

.social-media-icons a:hover .filled {
background-color: rgba(0, 0, 0, 0.1);
}

.footer-links {
text-align: left;
margin-top: 20px;
}

.footer-section {
margin-bottom: 15px;
}
</style>


<!-- Scroll to top -->
Expand Down
Loading
0