Skip to content

Commit

Permalink
Merge pull request akshitagupta15june#603 from mohammadshaad/shaadBranch
Browse files Browse the repository at this point in the history 
Improved the smaller screens navbar UI
  • Loading branch information
@akshitagupta15june
akshitagupta15june authored Jun 11, 2023
2 parents cf9a7d4 + e2f59a0 commit 8358d67
Show file tree
Hide file tree
Showing 6 changed files with 528 additions and 222 deletions.
139 changes: 99 additions & 40 deletions blog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,70 +45,129 @@
</svg>
</button>
<nav class="">
<div class="hidden w-full lg:block z-0" 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-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="w-[100vw] h-1/2 top-0 right-0 p-8 lg:p-4 mt-12 lg:mt-0 text-center text-sm space-y-8 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-center"
>
<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#About"
class="p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">About
Us</a>
<li>
<a
href="#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="p-3 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="p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Blogs</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>
<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="p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Donate
Animals</a></li>
<li>
<div x-data="{ open: false }" @mouseleave="open = false" class="relative">
<a @mouseover="open = true"
class="p-3 text-custom-heading flex font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">
<a
href="./donate.html"
class="text-custom-heading font-bold hover:underline 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="text-custom-heading flex font-bold hover:underline underline-offset-4 turn-red-hover navbar-item w-full"
>
Support Us
<svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" 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
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-100 rounded-md shadow-xl">

<a href="volunteer.html"
class=" block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">Become
a Volunteer</a>

<div
x-show="open"
class="z-20 absolute -left-1 w-[7.5rem] py-2 bg-gray-100 rounded-md shadow-xl"
>
<a
href="volunteer.html"
class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white"
>Become a Volunteer</a
>
</div>
</div>
</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
Report</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="#contact">
<li>
<a href="#contact">
<button
class="inline-flex items-center bg-header-orange-light border-0 py-4 px-2 focus:outline-none text_4 font-bold rounded text-base mt-4 md:mt-0">
class="inline-flex items-center bg-header-orange-light border-0 py-2 lg:py-2 text-sm 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">
<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"><img src="Assets/Images/sun.svg" width="50px" id="switch"></a>
<a id="theme-toggle"
><img src="Assets/Images/sun.svg" width="50px" id="switch"
/></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>
</div>
</ul>
<br>
</div>

</nav>

</header>
Expand Down
138 changes: 99 additions & 39 deletions donate.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,69 +56,129 @@ <h1 class="text-4xl text_2 text-center md:text-left md:ml-12 uppercase font-ser
</svg>
</button>
<nav class="">
<div class="hidden w-full lg:block z-0" 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-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="w-[100vw] h-1/2 top-0 right-0 p-8 lg:p-4 mt-12 lg:mt-0 text-center text-sm space-y-8 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-center"
>
<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#About"
class="p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">About
Us</a>
<li>
<a
href="#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="p-3 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="p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Blogs</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>
<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="p-3 text-custom-heading font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">Donate
Animals</a></li>
<li>
<div x-data="{ open: false }" @mouseleave="open = false" class="relative">
<a @mouseover="open = true"
class="p-3 text-custom-heading flex font-bold hover:underline underline-offset-4 turn-red-hover navbar-item">
<a
href="./donate.html"
class="text-custom-heading font-bold hover:underline 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="text-custom-heading flex font-bold hover:underline underline-offset-4 turn-red-hover navbar-item w-full"
>
Support Us
<svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" 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
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-100 rounded-md shadow-xl">

<a href="volunteer.html"
class=" block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">Become
a Volunteer</a>

<div
x-show="open"
class="z-20 absolute -left-1 w-[7.5rem] py-2 bg-gray-100 rounded-md shadow-xl"
>
<a
href="volunteer.html"
class="block px-4 py-2 text-sm text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white"
>Become a Volunteer</a
>
</div>
</div>
</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
Report</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">
<li>
<a href="#contact">
<button
class="inline-flex items-center bg-header-orange-light border-0 py-4 px-2 focus:outline-none text_4 font-bold rounded text-base mt-4 md:mt-0">
class="inline-flex items-center bg-header-orange-light border-0 py-2 lg:py-2 text-sm 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">
<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"><img src="Assets/Images/sun.svg" width="50px" id="switch"></a>
<a id="theme-toggle"
><img src="Assets/Images/sun.svg" width="50px" id="switch"
/></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>
</div>
</ul>

</div>

</nav>

</header>
Expand Down
Loading

0 comments on commit 8358d67

Please sign in to comment.