HTML/CSS
JavaScript

Scrolling Banner for Promotions

The product details continuously scroll from right to left in an infinite loop. The central branding message remains fixed while the content scrolls behind it. Uses CSS animations for smooth, non-jittery movement.

 
								<head>
								<style>
									body {
								margin: 0px;
							}
									@keyframes infiniteScroll {
									   0% { transform: translateX(0); }
									   100% { transform: translateX(-50%); }
									}
									</style>
							</head>
							<body>
								<div style="width: 100%; height: 96px; background: #f04038; overflow: hidden; position: relative; border-bottom: 1px solid rgba(255,255,255,0.1);">
									<!-- Center Message -->
									<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(255,255,255,0.71); padding: 0 30px; z-index: 2; text-align: center; border-left: 1px solid rgba(255,255,255,0.1); border-right: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(5px);">
										<div style="font-family: monospace; font-size: 14px; color: #4D8AF8; text-transform: uppercase; letter-spacing: 2px;">
										   <img src="https://plaeto.in/cdn/shop/files/Logo_Red_1.png?v=1729659275&width=80">
										</div>
									   
									</div>
									<!-- Scrolling Content -->
									<div style="height: 100%; display: flex; align-items: center;">
										<div style="display: flex; align-items: center; gap: 60px; animation: infiniteScroll 35s linear infinite; white-space: nowrap;">
											<!-- First Set -->
											<span style="font-family: monospace; font-size: 15px; color: #E5E8ED; letter-spacing: 2px; font-weight: 400; padding: 0 30px;">Ace Sports Shoes For Men- Navy Blue / Grey  price₹ 1,899</span>
											<span style="font-family: monospace; font-size: 15px; color: #E5E8ED; letter-spacing: 2px; font-weight: 400; padding: 0 30px;">EZPlay Slip Ons for Men - All Black price₹ 1,399</span>
											<span style="font-family: monospace; font-size: 15px; color: #E5E8ED; letter-spacing: 2px; font-weight: 400; padding: 0 30px;">EZPlay Premium Slip Ons for Men - Dark Grey / Grey price₹ 1,399</span>
											<span style="font-family: monospace; font-size: 15px; color: #E5E8ED; letter-spacing: 2px; font-weight: 400; padding: 0 30px;">Ace Kids Sports Shoes - Navy Blue / Grey Sale price₹ 999 </span>
											<!-- Duplicated Set -->
											<span style="font-family: monospace; font-size: 15px; color: #E5E8ED; letter-spacing: 2px; font-weight: 400; padding: 0 30px;">EZPlay Slip Ons for Kids - Grey price₹ 999</span>
											<span style="font-family: monospace; font-size: 15px; color: #E5E8ED; letter-spacing: 2px; font-weight: 400; padding: 0 30px;">Block 5 Women's Sports Shoes - Beige / Blue price₹ 1,999 Regular price/span>
											<span style="font-family: monospace; font-size: 15px; color: #E5E8ED; letter-spacing: 2px; font-weight: 400; padding: 0 30px;">Classic Sneakers for Men - Black / Honey price₹ 2,299</span>
										</div>
									</div>
								 </div>
							</body>
Note: In the console, type 'allow pasting,' and then you can paste the code below. 
 
							Not Required