fixed the hover effect on new pet page akshitagupta15june#1563

Author: RedWing0021

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,43 +82,43 @@ <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>
 
             <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 -->

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;
 }

tailwind.config.js

@@ -34,6 +34,7 @@ module.exports = {
         },
         colors: {
           'light-blue': '#B7DFF8',
+          'hover-choco': '#8b4513',
         }
       },
     },