Added hover effect and onClick event for marquee text (#264)

Description:
This PR introduces the following changes to the marquee text component:
1.Hover Effect: A hover effect has been added to the marquee text to
improve user interaction. The text changes its appearance when hovered
over, providing a more dynamic user experience.
2.onClick Event with Anchor Tag: The marquee text is now wrapped inside
an anchor () tag. When clicked, the user is redirected to the cart.html
page. The anchor tag also triggers the generation of a coupon code,
which is displayed on the cart page.

Changes Made:
1.Added CSS to apply a hover effect on the marquee text.
2.Used an anchor () tag to handle the click event, redirecting the user
to cart.html and generating a coupon code.

Screenshots/Recordings:

Uploading Added Hover Effect.mp4…

Please review the changes and let me know if there are any additional
improvements or adjustments required.

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
 
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5502
 }

index.html

@@ -478,9 +478,9 @@ <h1 class="retro-heading" style="font-family: var(--ff-philosopher);color: brown
     <section class="about_us">
         <div class="move">
             <div id="marque">
-                <h1 class="poppins-light"  style="font-family: var(--ff-philosopher);">Get <span> 30% OFF </span> on your first order!</h1>
-                <h1 class="poppins-light" style="font-family: var(--ff-philosopher);">Get <span> 30% OFF </span> on your first order!</h1>
-                <h1 class="poppins-light" style="font-family: var(--ff-philosopher);">Get <span> 30% OFF </span> on your first order!</h1>
+                 <a href="Html-files/cart.html"> <h1 class="poppins-light"  style="font-family: var(--ff-philosopher);">Get <span> 30% OFF </span> on your first order!</h1></a>
+                 <a href="Html-files/cart.html"><h1 class="poppins-light" style="font-family: var(--ff-philosopher);">Get <span> 30% OFF </span> on your first order!</h1></a>
+                 <a href="Html-files/cart.html"><h1 class="poppins-light" style="font-family: var(--ff-philosopher);">Get <span> 30% OFF </span> on your first order!</h1></a>
             </div>
         </div>
 

style.css

@@ -38,8 +38,11 @@ body {
   color: #fff;
   border-bottom: 1px solid #fff;
 }
+<<<<<<< HEAD
 */
 
+=======
+>>>>>>> feature/marquee-hover
 .navbar.fixed-top {
   position: fixed; 
   top: 0;
@@ -323,9 +326,8 @@ body {
   border-radius: 15px;
   display: inline-block;
   color: white;
-  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
-}
-*/
+  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; 
+}*/
 
 /*
 .service .box a:hover {
@@ -997,6 +999,14 @@ padding-left:2px;
   -webkit-text-fill-color: transparent;
 }
 
+#marque h1:hover {
+  animation: marquee 10s linear infinite;
+  color: brown;;
+  -webkit-text-fill-color: brown;;
+  cursor: pointer;
+} 
+
+
 @keyframes marquee {
   0% {
       transform: translateX(0);