CSS Styling (styles.css): CSS /* Container for the banner - the "plate" */ .banner-container { width: 100%; overflow: hidden; /* Hides the content that is outside the container */ background-color: #00A651; /* A bright, promotional green */ color: white; /* White text for high contrast */ padding: 10px 0; white-space: nowrap; /* Ensures the text stays on a single line */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); font-family: Arial, sans-serif; font-size: 24px; font-weight: bold; } /* Text element that will be animated */ .banner-text { display: inline-block; animation: scroll-left 15s linear infinite; /* 15s duration, linear speed, loops forever */ } .banner-text span { margin-right: 40px; /* Spacing between the repeated sections */ } /* Keyframes for the scrolling animation */ @keyframes scroll-left { 0% { transform: translateX(0%); /* Start position */ } 100% { transform: translateX(-50%); /* End position (moves half of the total width) */ } }