Logo Marquee Section

Build a responsive marquee that displays customer logos in a constant looping fashion
+300 rep
Loading...
1/3

Project brief

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.

Resources provided

Design files for desktop, tablet and mobile
High resolution image assets
README file
Starter code with content copy
Style guide for typography, colors and spacing

Support you can expect

Official guides & resources
Development guides written & curated by Sr engineers at Big tech, such as:
Learn from good code
We recommend well-rated submissions using the same stack for your reference
Ask any questions in community
Have any doubts or need help? Ask in the community and discuss with others.

FAQ

General