Skip to content

Commit

Permalink
Merge pull request #211 from Sujal1201/main
Browse files Browse the repository at this point in the history
adding animation effect in social media icons
  • Loading branch information
aditya-bhaumik authored Oct 4, 2024
2 parents fec60a1 + 0cfe887 commit ff3b7d9
Show file tree
Hide file tree
Showing 6 changed files with 62 additions and 54 deletions.
16 changes: 9 additions & 7 deletions about.html
Original file line number Diff line number Diff line change
Expand Up @@ -176,13 +176,15 @@ <h3>Quick links</h3>
</div>
<div class="footer-list">
<h3>Follow us on</h3>
<ul class="social-icons">
<li><a href="https://github.com" target="_blank"><i class="fa-brands fa-github"></i></a></li>
<li><a href="https://instagram.com" target="_blank"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://x.com" target="_blank"><i class="fa-brands fa-x-twitter"></i></a></li>
<li><a href="https://facebook.com" target="_blank"><i class="fab fa-facebook"></i></a></li>
<li><a href="https://linkedin.com" target="_blank"><i class="fab fa-linkedin"></i></a></li>
</ul>
<div class="social-icons">
<ul>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-github"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-facebook"></i></a>
</ul>
</div>
</div>
</div>
<div class="copyright">&copy; 2024 PathSphere. All rights reserved.</div>
Expand Down
16 changes: 9 additions & 7 deletions forum.html
Original file line number Diff line number Diff line change
Expand Up @@ -125,13 +125,15 @@ <h3>Quick links</h3>
</div>
<div class="footer-list">
<h3>Follow us on</h3>
<ul class="social-icons">
<li><a href="https://github.com" target="_blank"><i class="fa-brands fa-github"></i></a></li>
<li><a href="https://instagram.com" target="_blank"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://x.com" target="_blank"><i class="fa-brands fa-x-twitter"></i></a></li>
<li><a href="https://facebook.com" target="_blank"><i class="fab fa-facebook"></i></a></li>
<li><a href="https://linkedin.com" target="_blank"><i class="fab fa-linkedin"></i></a></li>
</ul>
<div class="social-icons">
<ul>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-github"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-facebook"></i></a>
</ul>
</div>
</div>
</div>
<div class="copyright">&copy; 2024 PathSphere. All rights reserved.</div>
Expand Down
16 changes: 9 additions & 7 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -204,13 +204,15 @@ <h3>Quick links</h3>
</div>
<div class="footer-list">
<h3>Follow us on</h3>
<ul class="social-icons">
<li><a href="https://github.com" target="_blank"><i class="fab fa-github"></i></a></li>
<li><a href="https://instagram.com" target="_blank"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://x.com" target="_blank"><i class="fa-brands fa-x-twitter"></i></a></li>
<li><a href="https://facebook.com" target="_blank"><i class="fab fa-facebook"></i></a></li>
<li><a href="https://linkedin.com" target="_blank"><i class="fab fa-linkedin"></i></a></li>
</ul>
<div class="social-icons">
<ul>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-github"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-facebook"></i></a>
</ul>
</div>
</div>
</div>
<div class="copyright">&copy; 2024 PathSphere. All rights reserved.</div>
Expand Down
16 changes: 9 additions & 7 deletions jobs.html
Original file line number Diff line number Diff line change
Expand Up @@ -99,13 +99,15 @@ <h3>Quick Links</h3>
</div>
<div class="footer-list">
<h3>Follow Us On</h3>
<ul class="social-icons">
<li><a href="https://github.com" target="_blank" style="color: var(--secondary-color);"><i class="fab fa-github"></i></a></li>
<li><a href="https://instagram.com" target="_blank" style="color: var(--secondary-color);"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://x.com" target="_blank" style="color: var(--secondary-color);"><i class="fa-brands fa-x-twitter"></i></a></li>
<li><a href="https://facebook.com" target="_blank" style="color: var(--secondary-color);"><i class="fab fa-facebook"></i></a></li>
<li><a href="https://linkedin.com" target="_blank" style="color: var(--secondary-color);"><i class="fab fa-linkedin"></i></a></li>
</ul>
<div class="social-icons">
<ul>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-github"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-facebook"></i></a>
</ul>
</div>
</div>
</div>
<div class="copyright">&copy; 2024 PathSphere. All rights reserved.</div>
Expand Down
21 changes: 9 additions & 12 deletions scholarships.html
Original file line number Diff line number Diff line change
Expand Up @@ -354,18 +354,15 @@ <h3>Quick Links</h3>
</div>
<div class="footer-list">
<h3>Follow Us On</h3>
<ul class="social-icons">
<li><a href="https://github.com" target="_blank" style="color: var(--secondary-color);"><i
class="fab fa-github"></i></a></li>
<li><a href="https://instagram.com" target="_blank" style="color: var(--secondary-color);"><i
class="fab fa-instagram"></i></a></li>
<li><a href="https://x.com" target="_blank" style="color: var(--secondary-color);"><i
class="fa-brands fa-x-twitter"></i></a></li>
<li><a href="https://facebook.com" target="_blank" style="color: var(--secondary-color);"><i
class="fab fa-facebook"></i></a></li>
<li><a href="https://linkedin.com" target="_blank" style="color: var(--secondary-color);"><i
class="fab fa-linkedin"></i></a></li>
</ul>
<div class="social-icons">
<ul>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-github"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-facebook"></i></a>
</ul>
</div>
</div>
</div>
<div class="copyright">&copy; 2024 PathSphere. All rights reserved.</div>
Expand Down
31 changes: 17 additions & 14 deletions styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -359,25 +359,28 @@ footer {
color: var(--secondary-color);
}

.social-icons {
display: flex;
gap: 15px;
}

.social-icons li {
list-style: none;
}

.social-icons a {
color: var(--secondary-color);
font-size: 24px;
transition: color 0.3s ease;
display: inline-flex;
justify-content: center;
align-items: center;
width: 2.5rem;
height: 2.5rem;
background-color: transparent;
border: 0.2rem solid #1a0202;
font-size: 1.2rem;
border-radius: 50%;
margin: 0.2rem 0.5rem 0.2rem 0;
transition: 0.3s ease;
color:var(--secondary-color) #b74b4b;
text-decoration: none;
}

.social-icons a:hover {
color: var(--secondary-color);
color: black;
transform: scale(1.3) translateY(-5px);
background-color: #fffefe;
box-shadow: 0 0 25px #0c0909ef;
}

/* Responsive Styles */
@media (max-width: 768px) {
.footer-container {
Expand Down

0 comments on commit ff3b7d9

Please sign in to comment.