Skip to content

Commit

Permalink
fix navbar across all pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@Wence17
Wence17 committed Oct 15, 2024
1 parent 4e9b3e7 commit 86c195c
Show file tree
Hide file tree
Showing 4 changed files with 246 additions and 143 deletions.
67 changes: 44 additions & 23 deletions blog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,49 +48,66 @@
</svg>
</button>
<nav class="">
<div class="hidden w-full xl:block z-2" id="navbar">
<div class="hidden w-full lg:block z-2" id="navbar">
<ul
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>
</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
Pets</a>
</li>
class="w-[100vw] h-1/2 top-0 right-0 p-4 lg:p-4 mt-12 lg:mt-0 text-center text-base md:text-md space-y-3 lg:space-y-0 lg:space-x-3 lg:static lg:w-auto flex flex-col rounded-lg items-center lg:items-center lg:bg-transparent lg:border-0 lg:flex-row justify-between">
<div class="nav-item">
<li>
<a href="#meet"
class="lg:p-1 text-custom-heading font-semibold underline-offset-4 turn-red-hover navbar-item">Meet
Pets</a>

</li>
</div>
<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="#About"
class="lg:p-1 text-custom-heading font-semibold 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
class="lg:p-1 text-custom-heading font-semibold 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="lg:p-1 text-custom-heading font-semibold 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="lg:p-1 text-custom-heading font-semibold underline-offset-4 turn-red-hover 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>

<div x-data="{ open: false }" @mouseleave="open = false" class="relative">
<a @mouseover="open = true"
class=" lg:p-0 text-custom-heading flex font-semibold underline-offset-4 turn-red-hover navbar-item">
Support Us
<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" fill="none" viewBox="0 0 24 24"
stroke="currentColor" class="mt-1">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</a>
<div x-show="open"
class="z-20 absolute -left-1 w-[7.5rem] py-2 bg-gray-50 rounded-md shadow-2xl hover:bg-gray-200 ">
<a href="volunteer.html"
class=" remover block px-2 py-2 font-semibold text-gray-700 hover:text-gray-700">Become a Volunteer</a>
</div>
</div>

</li>

<li>
<a href="./reportstary.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">SOS
class="lg:p-1 text-custom-heading font-semibold underline-offset-4 turn-red-hover navbar-item">SOS
Report</a>
</li>
<li>
<a href="./index.html#contact">
<a href="#contact"
class="lg:p-1 text-custom-heading font-semibold underline-offset-4 turn-red-hover navbar-item remover">
<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-semibold rounded mt-4 md:mt-0 hover:bg-hover-choco hover:translate-x-2 transition-transform text-light-mode">
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 @@ -100,15 +117,19 @@
</a>
</li>
<li>
<a id="theme-toggle">
<i class="ri-sun-line turn-yellow-hover light-theme" id="switch"></i>
<a id="theme-toggle" class="remover">
<i class="ri-sun-line light-theme" id="switch"></i>
</a>
</li>
<!-- google translate -->
<div id="google_translate_element">
<script type="text/javascript"
src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>


<!-- google translate -->

</ul>
</div>
</nav>
Expand Down
73 changes: 57 additions & 16 deletions donate.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,45 +136,86 @@ <h1 class="text-4xl text_2 text-center md:text-left md:ml-12 uppercase font-ser
<nav class="">
<div class="hidden w-full lg:block z-2" id="navbar">
<ul
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">
class="w-[100vw] h-1/2 top-0 right-0 p-4 lg:p-4 mt-12 lg:mt-0 text-center text-base md:text-md space-y-3 lg:space-y-0 lg:space-x-3 lg:static lg:w-auto flex flex-col rounded-lg items-center lg:items-center lg:bg-transparent lg:border-0 lg:flex-row justify-between">
<div class="nav-item">
<li>
<a href="#meet"
class="lg:p-1 text-custom-heading font-semibold underline-offset-4 turn-red-hover navbar-item">Meet
Pets</a>

</li>
</div>
<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="#About"
class="lg:p-1 text-custom-heading font-semibold underline-offset-4 turn-red-hover navbar-item">About
Us</a>
</li>
<a href="./news.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Pet
News</a>
<li>
<a href="./news.html"
class="lg:p-1 text-custom-heading font-semibold 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="lg:p-1 text-custom-heading font-semibold 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="lg:p-1 text-custom-heading font-semibold underline-offset-4 turn-red-hover 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
>

<div x-data="{ open: false }" @mouseleave="open = false" class="relative">
<a @mouseover="open = true"
class=" lg:p-0 text-custom-heading flex font-semibold underline-offset-4 turn-red-hover navbar-item">
Support Us
<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" fill="none" viewBox="0 0 24 24"
stroke="currentColor" class="mt-1">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</a>
<div x-show="open"
class="z-20 absolute -left-1 w-[7.5rem] py-2 bg-gray-50 rounded-md shadow-2xl hover:bg-gray-200 ">
<a href="volunteer.html"
class=" remover block px-2 py-2 font-semibold text-gray-700 hover:text-gray-700">Become a Volunteer</a>
</div>
</div>

</li>

<li>
<a href="./reportstary.html"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">SOS
class="lg:p-1 text-custom-heading font-semibold underline-offset-4 turn-red-hover navbar-item">SOS
Report</a>
</li>
<li>
<a id="theme-toggle">
<i class="ri-sun-line turn-yellow-hover light-theme" id="switch"></i>
<a href="#contact"
class="lg:p-1 text-custom-heading font-semibold underline-offset-4 turn-red-hover navbar-item remover">
<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-semibold rounded mt-4 md:mt-0 hover:bg-hover-choco hover:translate-x-2 transition-transform text-light-mode">
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">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</a>
</li>
<li>
<a id="theme-toggle" class="remover">
<i class="ri-sun-line light-theme" id="switch"></i>
</a>
</li>
<!-- google translate -->
<div id="google_translate_element">
<script type="text/javascript"
src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>


<!-- google translate -->

</ul>
</div>
</nav>
Expand Down
148 changes: 83 additions & 65 deletions news.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,73 +60,91 @@
</svg>
</button>
<nav class="">
<div class="hidden w-full mb-5 xl:mb-0 xl:block z-2" id="navbar">
<ul
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>
</li>
<li>
<a href="index.html#meet"
class="text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover 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
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>
</li>
<li>
<a href="./blog.html"
class="text-custom-heading font-bold hover:underline 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>
</li>
<li>
<a
href="./volunteer.html"
class="text-custom-heading font-bold underline-offset-4 turn-red-hover 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
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 px-2 focus:outline-none text_4 font-bold rounded text-base mt-4 md:mt-0">
Contact Us
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</a>
</li>
<li>
<a id="theme-toggle">
<i class="ri-sun-line turn-yellow-hover light-theme" id="switch"></i>
</a>
</li>
<!-- google translate -->
<div id="google_translate_element">
<script type="text/javascript"
src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<div class="hidden w-full lg:block z-2" id="navbar">
<ul
class="w-[100vw] h-1/2 top-0 right-0 p-4 lg:p-4 mt-12 lg:mt-0 text-center text-base md:text-md space-y-3 lg:space-y-0 lg:space-x-3 lg:static lg:w-auto flex flex-col rounded-lg items-center lg:items-center lg:bg-transparent lg:border-0 lg:flex-row justify-between">
<div class="nav-item">
<li>
<a href="#meet"
class="lg:p-1 text-custom-heading font-semibold underline-offset-4 turn-red-hover navbar-item">Meet
Pets</a>

</li>
</div>
<li>
<a href="#About"
class="lg:p-1 text-custom-heading font-semibold underline-offset-4 turn-red-hover navbar-item">About
Us</a>
</li>
<li>
<a href="./news.html"
class="lg:p-1 text-custom-heading font-semibold underline-offset-4 turn-red-hover navbar-item">Pet
News</a>
</li>
<li>
<a href="./blog.html"
class="lg:p-1 text-custom-heading font-semibold underline-offset-4 turn-red-hover navbar-item">Blogs</a>
</li>
<li>
<a href="./donate.html"
class="lg:p-1 text-custom-heading font-semibold underline-offset-4 turn-red-hover navbar-item">Donate</a>
</li>

<li>

<div x-data="{ open: false }" @mouseleave="open = false" class="relative">
<a @mouseover="open = true"
class=" lg:p-0 text-custom-heading flex font-semibold underline-offset-4 turn-red-hover navbar-item">
Support Us
<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" fill="none" viewBox="0 0 24 24"
stroke="currentColor" class="mt-1">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</a>
<div x-show="open"
class="z-20 absolute -left-1 w-[7.5rem] py-2 bg-gray-50 rounded-md shadow-2xl hover:bg-gray-200 ">
<a href="volunteer.html"
class=" remover block px-2 py-2 font-semibold text-gray-700 hover:text-gray-700">Become a Volunteer</a>
</div>
</ul>
</div>

</li>

<li>
<a href="./reportstary.html"
class="lg:p-1 text-custom-heading font-semibold underline-offset-4 turn-red-hover navbar-item">SOS
Report</a>
</li>
<li>
<a href="#contact"
class="lg:p-1 text-custom-heading font-semibold underline-offset-4 turn-red-hover navbar-item remover">
<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-semibold rounded mt-4 md:mt-0 hover:bg-hover-choco hover:translate-x-2 transition-transform text-light-mode">
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">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</a>
</li>
<li>
<a id="theme-toggle" class="remover">
<i class="ri-sun-line light-theme" id="switch"></i>
</a>
</li>
<!-- google translate -->
<div id="google_translate_element">
<script type="text/javascript"
src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>


<!-- google translate -->

</ul>
</div>
</nav>
</nav>

</header>

Expand Down
Loading

0 comments on commit 86c195c

Please sign in to comment.