In this challenge, you will develop a responsive features section based on the provided designs for desktop, tablet, and mobile views. The features section will contain a 3-column grid of features, each with an icon, title, and description.
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.
- Responsive behavior:
- Text size: Should be responsive; font size is larger for wider devices, smaller for narrow devices.
- Responsive layout: The layout should reorganize responsively. The content should stack vertically on smaller screens and align horizontally as the screen width increases.
- Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox and Safari.
- [Stretch goal] Performance optimization: Code for fast load times with efficient CSS and JavaScript techniques.
- [Stretch goal] Accessibility and semantics: Follow best practices for web accessibility, such as using semantic HTML and ARIA roles where necessary and using proper
alt
tags for images.