Skip to content

Commit

Permalink
Added popup effect on icons upon hover
Browse files Browse the repository at this point in the history
  • Loading branch information
ankitsinghbisht8 committed May 24, 2024
1 parent 22c3c46 commit a73c2f2
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 9 deletions.
10 changes: 5 additions & 5 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -1966,11 +1966,11 @@ <h3>Calculates the linear density of the yarn from unit system to another.</h3>
<div class="footer-basic">
<footer>
<div class="social">
<a href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user"></i></a>
<a href="mailto:[email protected]" target="_blank"><i class="fa-solid fa-envelope"></i></a>
<a href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
<a href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
<a href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
<a class="user" href="https://rakesh9100.bio.link/" target="_blank"><i class="fa-solid fa-user socials"></i></a>
<a class="message" href="mailto:[email protected]" target="_blank"><i class="fa-solid fa-envelope"></i></a>
<a class="github" href="https://www.github.com/Rakesh9100" target="_blank"><i class="fa-brands fa-square-github"></i></a>
<a class="twitter" href="https://twitter.com/rakeshroshan73" target="_blank"><i class="fa-brands fa-square-x-twitter"></i></a>
<a class="facebook" href="https://www.facebook.com/rakesh6203/" target="_blank"><i class="fa-brands fa-square-facebook"></i></a>
</div>
<ul class="list-inline">
<li class="list-inline-item"><a href="#home">Home</a></li>
Expand Down
27 changes: 23 additions & 4 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -1444,20 +1444,39 @@ section {
font-size: 3.5rem;
text-decoration: none;
margin: 0 1rem;
transition: 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
gap: 4rem;
}

/* Pop up effect */

.social a:hover i{
transform: translateY(-8px);
}


.social a {
color: var(--secondary);
}

.social a:hover {
color: var(--primary);
.social a.user:hover {
color: #4af3b5;
}
.social a.message:hover {
color: #73408f;
}
.social a.github:hover {
color: #21d061;
}
.social a.twitter:hover {
color: #00fff7;
}
.social a.facebook:hover {
color: #0026ff;
}

.footer-basic .copyright {
Expand Down

0 comments on commit a73c2f2

Please sign in to comment.