Skip to content

Commit

Permalink
Fixes#1249:[BUG]:Hovering of the footer section is not smooth
Browse files Browse the repository at this point in the history
  • Loading branch information
Arghya Chakraborty authored and Arghya Chakraborty committed Oct 21, 2024
1 parent 7bbe0a1 commit bc4c1b9
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 22 deletions.
81 changes: 70 additions & 11 deletions blog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha384-k6RqeWeci5ZR/Lv4MR0sA0FfDOM23A9ne1mDRAjlGZ/mZTxC1en0R3B0e5nt/q4U" crossorigin="anonymous">

<!--swiper slider css-->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

Expand All @@ -18,6 +20,7 @@

<link rel="stylesheet" href="Scroll_and_progressbar.css">
<link rel="stylesheet" href="style.css">



</head>
Expand Down Expand Up @@ -1192,7 +1195,13 @@ <h2 class="footer-title secondary-title">About Us</h2>
<div class="email">
<a href="mailto: [email protected]" style="color: 3B3B58;"><i
class="fas fa-envelope text-primary"></i>
<span>[email protected]</span>
<span id="mailhover">[email protected]</span>
<style>
#mailhover:hover{
color: #f44336;
transition: color 0.5s ease-out;
}
</style>
</a>
</div>
<div> <a href="privacy.html" style="color: #520be1e7;">Privacy Policy</a> </div>
Expand Down Expand Up @@ -1268,24 +1277,74 @@ <h2 class="footer-title secondary-title">Popular Tags</h2>

<div class="tags">
<div class="d-flex-gap flex-wrap">
<a href="#" class="nav-link btn bg-light">Travel</a>
<a href="#" class="nav-link btn bg-light">Food</a>
<a href="#" class="nav-link btn bg-light">Lifestyle</a>
<a href="#" class="nav-link btn bg-light">Techonogy</a>
<a href="#" class="nav-link btn bg-light">Fashion</a>
<a href="#" class="nav-link btn bg-light pop-link" style="font-weight: 400;">Travel</a>
<a href="#" class="nav-link btn bg-light pop-link" style="font-weight: 400;">Food</a>
<a href="#" class="nav-link btn bg-light pop-link" style="font-weight: 400;">Lifestyle</a>
<a href="#" class="nav-link btn bg-light pop-link" style="font-weight: 400;">Techonogy</a>
<a href="#" class="nav-link btn bg-light pop-link" style="font-weight: 400;">Fashion</a>
</div>
<style>
.pop-link{
transition: 1.0s ease !important;
}

</style>
</div>

<h2 class="footer-title secondary-title mt-2">Connect with us</h2>

<div class="tags social" id="contact">
<div class="d-flex-gap flex-wrap">
<a href="https://www.facebook.com/" id="facebook" class="nav-link btn bg-light"><i class="fab fa-facebook-f"></i></a>
<a href="https://www.x.com/" id="twitter" class="nav-link btn bg-light"><i class="fa-brands fa-twitter"></i></a>
<a href="https://www.instagram.com/" id="instagram" class="nav-link btn bg-light"><i class="fab fa-instagram"></i></a>
<a href="https://dribbble.com/" id="dribbble" class="nav-link btn bg-light"><i class="fab fa-dribbble"></i></a>
<a href="https://github.com/ANSHIKA-26?tab=overview&from=2022-12-01&to=2022-12-31" id="github" target="_blank" " class="nav-link btn bg-light"
<a href="https://www.facebook.com/" id="facebook" class="nav-link btn bg-light social-link"><i class="fab fa-facebook-f"></i></a>
<a href="https://www.x.com/" id="twitter" class="nav-link btn bg-light social-link"><i class="fa-brands fa-twitter
"></i></a>
<a href="https://www.instagram.com/" id="instagram" class="nav-link btn bg-light social-link"><i class="fab fa-instagram"></i></a>
<a href="https://dribbble.com/" id="dribbble" class="nav-link btn bg-light social-link"><i class="fab fa-dribbble"></i></a>
<a href="https://github.com/ANSHIKA-26?tab=overview&from=2022-12-01&to=2022-12-31" id="github" target="_blank" " class="nav-link btn bg-light social-link"
><i class="fa-brands fa-github"></i></a>
<style>

.social-link{
transition: 0.5s ease-in !important;
}
#facebook {
background-color: #f0f0f0; /* Default light background */
color: #3b5998; /* Default Facebook blue for the icon */
transition: background-color 0.3s ease, color 0.3s ease;
}
#facebook:hover {
background-color: #3b5998; /* Facebook blue on hover */
color: #ffffff; /* White icon on hover */
}

#twitter {
color: #010a10; /* Default X blue for the icon */
transition: background-color 0.3s ease, color 0.3s ease;
}
#instagram {
background-color: #f0f0f0; /* Default light background */
color: #e1306c; /* Default Instagram pink for the icon */
transition: background-color 0.3s ease, color 0.3s ease;
}

#instagram:hover {
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); /* Instagram gradient */
color: #ffffff; /* White icon on hover */
}


#dribbble{
background-color: #f0f0f0; /* Default light background */
color: #ea4c89; /* Default Dribbble pink for the icon */
transition: background-color 0.3s ease, color 0.3s ease;
}

#dribbble:hover {
background-color: #ea4c89; /* Dribbble pink on hover */
color: #ffffff; /* White icon on hover */
}

</style>
</div>
</div>

Expand Down
78 changes: 67 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1158,7 +1158,13 @@ <h2 class="footer-title secondary-title" >About Us</h2>

<div class="email mt-2">
<a href="mailto: [email protected]" style="color: 3B3B58;"><i class="fas fa-envelope text-primary"></i>
<span>[email protected]</span>
<span id="mailhover">[email protected]</span>
<style>
#mailhover:hover{
color: #f44336;
transition: color 0.5s ease-out;
}
</style>
</a>
</div>

Expand Down Expand Up @@ -1232,24 +1238,74 @@ <h2 class="footer-title secondary-title">Popular Tags</h2>

<div class="tags">
<div class="d-flex-gap flex-wrap">
<a href="#" class="nav-link btn bg-light " style="font-weight: 400;">Travel</a>
<a href="#" class="nav-link btn bg-light" style="font-weight: 400;">Food</a>
<a href="#" class="nav-link btn bg-light" style="font-weight: 400;">Lifestyle</a>
<a href="#" class="nav-link btn bg-light" style="font-weight: 400;">Techonogy</a>
<a href="#" class="nav-link btn bg-light" style="font-weight: 400;">Fashion</a>
<a href="#" class="nav-link btn bg-light pop-link" style="font-weight: 400;">Travel</a>
<a href="#" class="nav-link btn bg-light pop-link" style="font-weight: 400;">Food</a>
<a href="#" class="nav-link btn bg-light pop-link" style="font-weight: 400;">Lifestyle</a>
<a href="#" class="nav-link btn bg-light pop-link" style="font-weight: 400;">Techonogy</a>
<a href="#" class="nav-link btn bg-light pop-link" style="font-weight: 400;">Fashion</a>
</div>
<style>
.pop-link{
transition: 1.0s ease !important;
}

</style>
</div>

<h2 class="footer-title secondary-title mt-5">Connect with us</h2>

<div class="tags social" id="contact">
<div class="d-flex-gap flex-wrap">
<a href="https://www.facebook.com/" id="facebook" class="nav-link btn bg-light"><i class="fab fa-facebook-f"></i></a>
<a href="https://www.x.com/" id="twitter" class="nav-link btn bg-light"><i class="fa-brands fa-twitter"></i></a>
<a href="https://www.instagram.com/" id="instagram" class="nav-link btn bg-light"><i class="fab fa-instagram"></i></a>
<a href="https://dribbble.com/" id="dribbble" class="nav-link btn bg-light"><i class="fab fa-dribbble"></i></a>
<a href="https://github.com/ANSHIKA-26?tab=overview&from=2022-12-01&to=2022-12-31" id="github" target="_blank" " class="nav-link btn bg-light"
<a href="https://www.facebook.com/" id="facebook" class="nav-link btn bg-light social-link"><i class="fab fa-facebook-f"></i></a>
<a href="https://www.x.com/" id="twitter" class="nav-link btn bg-light social-link"><i class="fa-brands fa-x-twitter"></i></a>
<a href="https://www.instagram.com/" id="instagram" class="nav-link btn bg-light social-link"><i class="fab fa-instagram"></i></a>
<a href="https://dribbble.com/" id="dribbble" class="nav-link btn bg-light social-link"><i class="fab fa-dribbble"></i></a>
<a href="https://github.com/ANSHIKA-26?tab=overview&from=2022-12-01&to=2022-12-31" id="github" target="_blank" " class="nav-link btn bg-light social-link"
><i class="fa-brands fa-github"></i></a>
<style>

.social-link{
transition: 0.5s ease-in !important;
}
#facebook {
background-color: #f0f0f0; /* Default light background */
color: #3b5998; /* Default Facebook blue for the icon */
transition: background-color 0.3s ease, color 0.3s ease;
}
#facebook:hover {
background-color: #3b5998; /* Facebook blue on hover */
color: #ffffff; /* White icon on hover */
}

#twitter {

color: #010a10; /* Default X blue for the icon */
transition: background-color 0.3s ease, color 0.3s ease;
}
#instagram {
background-color: #f0f0f0; /* Default light background */
color: #e1306c; /* Default Instagram pink for the icon */
transition: background-color 0.3s ease, color 0.3s ease;
}

#instagram:hover {
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); /* Instagram gradient */
color: #ffffff; /* White icon on hover */
}


#dribbble{
background-color: #f0f0f0; /* Default light background */
color: #ea4c89; /* Default Dribbble pink for the icon */
transition: background-color 0.3s ease, color 0.3s ease;
}

#dribbble:hover {
background-color: #ea4c89; /* Dribbble pink on hover */
color: #ffffff; /* White icon on hover */
}

</style>
</div>
</div>

Expand Down

0 comments on commit bc4c1b9

Please sign in to comment.