Update index.html

swaraj-das · Oct 27, 2024 · f21d184 · f21d184
1 parent 8194620
commit f21d184
Showing 1 changed file with 41 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -27,6 +27,40 @@
     <link rel="stylesheet" href="./popup/popup.css" />
     <link rel ="stylesheet" href="./Loader/Loader.css"/>
     <link rel="manifest" href="/manifest.json">
+    <style>
+        .marquee-container {
+            width: 100%;
+            background-color: black; /* Original bgcolor */
+            overflow: hidden;
+            white-space: nowrap;
+            padding: 10px 0 5px 0; /* Original padding */
+            font-family: "Book Antiqua", sans-serif;
+            font-weight: bold;
+            color: #FFFFFF;
+            z-index: 999;
+            padding-top: 25px;
+            padding-bottom: 25px;
+            position: relative;
+        }
+        .marquee {
+          font-size: medium;
+            display: inline-block;
+            white-space: nowrap;
+            padding-left: 100%; /* Start the marquee off-screen */
+            animation: scroll-left 10s linear infinite; /* Scroll effect */
+        }
+        .marquee:hover {
+            animation-play-state: paused; /* Pause on hover */
+        }
+        @keyframes scroll-left {
+            0% {
+                transform: translateX(100%);
+            }
+            100% {
+                transform: translateX(-100%);
+            }
+        }
+    </style>
 </head>
 
 <body>
@@ -86,7 +120,13 @@
             <!-- Hamburger Menu Icon -->
             <img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
         </nav>
-
+        <!-- Marquee container -->
+    <div class="marquee-container">
+        <div class="marquee">
+            Latest offers: 50% off on selected products! | Free shipping on orders over $100! | Check out our new arrivals!
+        </div>
+    </div>
+
         <section class="hero">
             <div class="overlay"></div>
             <div class="hero-content">