In this challenge, you will develop a responsive logo marquee section that repeatedly cycles through customer logos. The marquee should rotate logos automatically in a seamless loop at a steady rate.

Implementation requirements

• Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
• Marquee:
  • Continuous scrolling: Display logos in a continuous auto-scrolling format in a seamless loop.
  • Timing: Implement a smooth, consistent animation cycle for the logos, with a steady pace that allows enough time for each logo to be clearly perused.
• Responsive behavior:
  • Element adaptability: Ensure that the logo images resize appropriately without distortion or loss of quality.
  • Responsive layout: Ensure the marquee adapts fluidly to different screen sizes, showing more logos on wider screen sizes.
• Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox, and Safari.
• [Stretch goal] Performance optimization: Optimize image assets and code for quick load times. Ensure that the marquee's motion is smooth and doesn’t cause layout shifts or impact the website's loading times.
• [Stretch goal] Accessibility and semantics: Follow best practices for web accessibility, such as using semantic HTML and ARIA roles where necessary, using proper alt tags for images and ensuring that the marquee's movement can be paused for users who need more time to view the logos.