From 890fe99fbf44dc8d0b02475294309e3f6b24180e Mon Sep 17 00:00:00 2001
From: Naitik Patel <naitikpatel.np2004@gmail.com>
Date: Tue, 9 Jul 2024 00:35:18 +0530
Subject: [PATCH] fixed the hover effect on new pet page #1563

---
 index.html         | 33 ++++++++++++++++-----------------
 navbar.css         | 10 +++++++++-
 tailwind.config.js |  1 +
 3 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/index.html b/index.html
index 4c5c296a..683be069 100644
--- a/index.html
+++ b/index.html
@@ -31,7 +31,7 @@
     id="header">
     <div class="flex flex-row items-center md:flex-row md:items-center p-2" id="logo">
       <span class="mission-1 mission-dark"> Saving Lives </span>
-      <a class="logo-border" href="index.html">
+      <a class="logo-border remover" href="index.html">
         <img class="rounded-full logo-size" src="./Assets/Images/logo.jpg" alt="logo" />
       </a>
       <span class="mission-2 mission-dark"> Saving Animals </span>
@@ -67,12 +67,12 @@ <h1 class="text-4xl text_2  text-center md:text-left md:ml-12 uppercase font-ser
       </button>
       <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 md:text-md space-y-4 lg:space-y-0 lg:space-x-5 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">
+          <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-4 lg:space-y-0 lg:space-x-5 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-3 text-custom-heading font-bold  underline-offset-4 turn-red-hover navbar-item"
+                class="lg:p-1 text-custom-heading font-bold  underline-offset-4 turn-red-hover navbar-item"
                 >Meet Pets</a
               >
               
@@ -82,28 +82,28 @@ <h1 class="text-4xl text_2  text-center md:text-left md:ml-12 uppercase font-ser
               <a
                  
                 href="#About"
-                class="text-custom-heading font-bold  underline-offset-4 turn-red-hover navbar-item"
+                class="lg:p-1 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  underline-offset-4 turn-red-hover navbar-item"
+                class="lg:p-1 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  underline-offset-4 turn-red-hover navbar-item"
+                class="lg:p-1 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  underline-offset-4 turn-red-hover navbar-item"
+                class="lg:p-1 text-custom-heading font-bold  underline-offset-4 turn-red-hover navbar-item"
                 >Donate</a
               >
             </li>
@@ -111,14 +111,14 @@ <h1 class="text-4xl text_2  text-center md:text-left md:ml-12 uppercase font-ser
             <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">
+              <a @mouseover="open = true" class=" lg:p-1 text-custom-heading flex font-bold 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-100 rounded-md shadow-xl">
-                <a href="volunteer.html" class="block px-4 py-2 text-base 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 hover:bg-gray-400 ">
+                <a href="volunteer.html" class=" remover block px-4 py-2 text-base text-gray-300 text-gray-700 hover:text-white">Become a Volunteer</a>
               </div>
               </div>
 
@@ -127,15 +127,14 @@ <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  underline-offset-4 turn-red-hover navbar-item"
+                class="lg:p-1 text-custom-heading font-bold  underline-offset-4 turn-red-hover navbar-item"
                 >SOS Report</a
               >
             </li>
             <li>
-              <a href="#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"
-                >
+              <a href="#contact"
+              class="lg:p-1 text-custom-heading font-bold  underline-offset-4 turn-red-hover navbar-item remover">
+                <button class="flex 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:bg-hover-choco hover:translate-x-2 transition-transform text-light-mode">
                   Contact Us
                   <svg
                     fill="none"
@@ -152,8 +151,8 @@ <h1 class="text-4xl text_2  text-center md:text-left md:ml-12 uppercase font-ser
               </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 -->
diff --git a/navbar.css b/navbar.css
index b2e88dd2..bb1b4652 100644
--- a/navbar.css
+++ b/navbar.css
@@ -192,7 +192,7 @@ a:hover::after {
 a:hover {
   color: hwb(37 38% 0%);
   cursor: pointer;
-  transform: scale(1.3);
+  
 }
 
 .nav-items div{
@@ -201,4 +201,12 @@ a:hover {
   cursor: pointer;
   transition:  5s;
   
+}
+
+.remover::after{
+  content: none;
+}
+
+.x-text :hover{
+  background-color:#8b4513;
 }
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 7d256fb2..05115616 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -34,6 +34,7 @@ module.exports = {
         },
         colors: {
           'light-blue': '#B7DFF8',
+          'hover-choco': '#8b4513',
         }
       },
     },