Skip to content

Hover underline issue resolved for logo and navbar items as well. #1995

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

Open
Jayansh805 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Hover underline issue resolved for logo and navbar items as well. #1995

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
23 changes: 13 additions & 10 deletions blog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,44 +53,45 @@
class="w-[100vw] h-1/2 top-0 right-0 p-8 xl:px-3 mt-12 xl:mt-0 text-center text-base xl:text-[18px] space-y-4 xl:space-y-0 xl:space-x-5 lg:static xl:w-auto flex flex-col rounded-lg items-center xl:items-center xl:bg-transparent xl:border-0 xl:flex-row justify-between">
<li>
<a href="./index.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Home</a>
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item" style="font-size: 1.5rem;">Home</a>
</li>
<li>
<a href="./index.html#meet"
class="xl:p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Meet
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item" style="font-size: 1.5rem;">Meet
Pets</a>
</li>
<li>
<a href="./index.html#About"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">About
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item" style="font-size: 1.5rem;">About
Us</a>
</li>
<li>
<a href="./news.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Pet
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item" style="font-size: 1.5rem;">Pet
News</a>
</li>
<li>
<a href="./blog.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Blogs</a>
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item" style="font-size: 1.5rem;">Blogs</a>
</li>
<li>
<a href="./donate.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Donate</a>
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item" style="font-size: 1.5rem;">Donate</a>
</li>
<li>
<a href="./volunteer.html"
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item">Support Us</a>
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item" style="font-size: 1.5rem;">Support Us</a>
</li>
<li>
<a href="./reportstary.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">SOS
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item" style="font-size: 1.5rem;">SOS
Report</a>
</li>
<li>
<a href="./index.html#contact">
<button
class="inline-flex items-center bg-header-orange-light border-0 py-2 lg:py-2 text-choco text-base px-2 focus:outline-none text_4 font-bold rounded mt-4 md:mt-0 hover:translate-x-2 transition-transform">
class="inline-flex items-center bg-header-orange-light border-0 py-2 lg:py-2 text-choco text-base px-2 focus:outline-none text_4 font-bold rounded mt-4 md:mt-0 hover:translate-x-2 transition-transform"
style="width:120px; height:35px; font-size: 15px; font-weight: bold;">
Contact Us
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-4 h-4 ml-1 transform translate-x-0 transition-transform" viewBox="0 0 24 24">
Expand All @@ -105,10 +106,12 @@
</a>
</li>
<!-- google translate -->
<div id="google_translate_element">

<div id="google_translate_element" style="margin-top: -10px;">
<script type="text/javascript"
src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>

</ul>
</div>
</nav>
Expand Down
14 changes: 7 additions & 7 deletions donate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,19 +139,19 @@ <h1 class="text-4xl text_2 text-center md:text-left md:ml-12 uppercase font-ser
class="w-[100vw] h-1/2 top-0 right-0 p-8 lg:p-4 mt-12 lg:mt-0 text-center text-base lg:text-[18px] space-y-4 lg:space-y-0 lg:space-x-5 lg:static lg:w-auto flex flex-col rounded-lg items-start lg:items-center lg:bg-transparent lg:border-0 lg:flex-row justify-between">
<li>
<a href="./index.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Home</a>
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item">Home</a>
</li>
<a href="./news.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Pet
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item">Pet
News</a>
</li>
<li>
<a href="./blog.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Blogs</a>
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item">Blogs</a>
</li>
<li>
<a href="./donate.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Donate</a>
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item">Donate</a>
</li>
<li>
<a
Expand All @@ -162,7 +162,7 @@ <h1 class="text-4xl text_2 text-center md:text-left md:ml-12 uppercase font-ser
</li>
<li>
<a href="./reportstary.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">SOS
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item">SOS
Report</a>
</li>
<li>
Expand Down Expand Up @@ -354,7 +354,7 @@ <h1 class="sm:text-3xl text-2xl donate-h1 font-medium title-font mb-4 text-amber
</a>
</div>
<div>
<div class="space-y-2">
<div class="space-y-2" style="color:white;">
<h3 class="text-2xl">Adopt a pet</h3>
<div>Give life to an animal in need</div>
</div>
Expand All @@ -363,7 +363,7 @@ <h3 class="text-2xl">Adopt a pet</h3>

<!-- Subscribe column -->
<div class="md:flex flex-col hidden text-center items-center flex-1">
<div class="space-y-2">
<div class="space-y-2" style="color:white;">
<h3 class="text-2xl">Subscribe to our newsletter</h3>
<div class="text-md">
Get the latest news and updates delivered straight to your inbox.
Expand Down
6 changes: 3 additions & 3 deletions navbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
}

#switch{
font-size: 1.5rem;
font-size: 2rem;
cursor: pointer;
transition: color .3s;
}
Expand Down Expand Up @@ -174,7 +174,7 @@ a {
position: relative;
}

a::after {
.navbar-item::after {
content: '';
position: absolute;
width: 0;
Expand All @@ -185,7 +185,7 @@ a::after {
transition: width 0.3s ease-in-out;
}

a:hover::after {
.navbar-item:hover::after {
width: 100%;
}

Expand Down
33 changes: 11 additions & 22 deletions news.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<link rel="stylesheet" href="./mobileView.css">

<link rel="icon" type="image/x-icon" href="logo.png" />




Expand Down Expand Up @@ -65,41 +65,30 @@
class="w-[100vw] h-1/2 top-0 right-0 p-8 xl:px-3 mt-12 xl:mt-0 text-center text-base xl:text-lg space-y-4 xl:space-y-0 xl:space-x-5 lg:static xl:w-auto flex flex-col rounded-lg items-center xl:items-center xl:bg-transparent xl:border-0 xl:flex-row justify-between">

<li>
<a href="./index.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Home</a>
<a href="./index.html" class="text-custom-heading font-bold navbar-item">Home</a>
</li>
<li>
<a href="index.html#meet"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Meet
<a href="index.html#meet" class="text-custom-heading font-bold navbar-item">Meet
Pets</a>
</li>
<li>
<a href="index.html#About"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">About
<a href="index.html#About" class="text-custom-heading font-bold navbar-item">About
Us</a>
</li>
<li>
<a href="./news.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Pet News</a>
<a href="./news.html" class="text-custom-heading font-bold navbar-item">Pet News</a>
</li>
<li>
<a href="./blog.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Blogs</a>
<a href="./blog.html" class="text-custom-heading font-bold navbar-item">Blogs</a>
</li>
<li>
<a href="./donate.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Donate</a>
<a href="./donate.html" class="text-custom-heading font-bold navbar-item">Donate</a>
</li>
<li>
<a
href="./volunteer.html"
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item"
>Support Us</a
>
<a href="./volunteer.html" class="text-custom-heading font-bold navbar-item">Support Us</a>
</li>
<li>
<a href="./reportstary.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">SOS
<a href="./reportstary.html" class="text-custom-heading font-bold navbar-item">SOS
Report</a>
</li>
<li>
Expand Down Expand Up @@ -259,7 +248,7 @@ <h1 class="text-3xl mt-28 ml-10" style="color:white;"><strong>Dog rescued after
</a>
</div>
<div>
<div class="space-y-2">
<div class="space-y-2" style="color:white;">
<h3 class="text-2xl">Adopt a pet</h3>
<div>Give life to an animal in need</div>
</div>
Expand All @@ -268,7 +257,7 @@ <h3 class="text-2xl">Adopt a pet</h3>

<!-- Subscribe column -->
<div class="md:flex flex-col hidden text-center items-center flex-1">
<div class="space-y-2">
<div class="space-y-2" style="color:white;">
<h3 class="text-2xl">Subscribe to our newsletter</h3>
<div class="text-md">
Get the latest news and updates delivered straight to your inbox.
Expand Down
14 changes: 7 additions & 7 deletions reportstary.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,28 +59,28 @@ <h1 class="text-4xl text_2 text-center md:text-left md:ml-12 uppercase font-ser
<li>
<a
href="./index.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item"
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item"
>Home</a
>
</li>
<li>
<a
href="./news.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item"
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item"
>Pet News</a
>
</li>
<li>
<a
href="./blog.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item"
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item"
>Blogs</a
>
</li>
<li>
<a
href="./donate.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item"
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item"
>Donate</a
>
</li>
Expand All @@ -94,7 +94,7 @@ <h1 class="text-4xl text_2 text-center md:text-left md:ml-12 uppercase font-ser
<li>
<a
href="./reportstary.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item"
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item"
>SOS Report</a
>
</li>
Expand Down Expand Up @@ -257,7 +257,7 @@ <h2 class="subHead text-xl italic font-light text-gray-600 mt-4">Search a city n
</a>
</div>
<div>
<div class="space-y-2">
<div class="space-y-2" style="color:white;">
<h3 class="text-2xl">Adopt a pet</h3>
<div>Give life to an animal in need</div>
</div>
Expand All @@ -267,7 +267,7 @@ <h3 class="text-2xl">Adopt a pet</h3>
<!-- Subscribe column -->
<div class="md:flex flex-col hidden text-center items-center flex-1">
<form id="subscription-form">
<div class="space-y-2">
<div class="space-y-2" style="color:white;">
<h3 class="text-2xl">Subscribe to our newsletter</h3>
<div class="text-md">
Get the latest news and updates delivered straight to your inbox.
Expand Down
16 changes: 8 additions & 8 deletions volunteer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,23 +69,23 @@
<ul
class="w-[100vw] h-1/2 lg:text-[18px] top-0 right-0 p-4 text-center space-y-8 lg:space-y-0 lg:space-x-3 lg:static lg:w-auto flex flex-col rounded-lg border border-gray-100 items-center lg:bg-transparent lg:border-0 lg:flex-row justify-center">
<li><a href="index.html"
class="p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Home</a>
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item">Home</a>
</li>

<li><a
href="./index.html#About"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">About Us</a>
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item">About Us</a>
</li>
<li><a
href="./news.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Pet News</a>
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item">Pet News</a>
</li>

<li><a href="blog.html"
class="p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Blogs</a>
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item">Blogs</a>
</li>
<li><a href="donate.html"
class="p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Donate
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item">Donate
Animals</a></li>
<li>
<a
Expand All @@ -94,7 +94,7 @@
>Support Us</a>
</li>
<li><a href="reportstary.html"
class="p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">SOS
class="text-custom-heading font-bold underline-offset-4 turn-red-hover navbar-item">SOS
Report</a>
</li>

Expand Down Expand Up @@ -244,7 +244,7 @@ <h1 class="sm:text-3xl text-2xl donate-h1 font-medium title-font mb-4 text-gray-
</a>
</div>
<div>
<div class="space-y-2">
<div class="space-y-2" style="color:white;">
<h3 class="text-2xl">Adopt a pet</h3>
<div>Give life to an animal in need</div>
</div>
Expand All @@ -253,7 +253,7 @@ <h3 class="text-2xl">Adopt a pet</h3>

<!-- Subscribe column -->
<div class="md:flex flex-col hidden text-center items-center flex-1">
<div class="space-y-2">
<div class="space-y-2" style="color:white;">
<h3 class="text-2xl">Subscribe to our newsletter</h3>
<div class="text-md">
Get the latest news and updates delivered straight to your inbox.
Expand Down