In this challenge, you will develop 2 simple, responsive features sections based on the provided designs for desktop, tablet, and mobile views. Each section will showcase three primary features, represented by compact icons, alongside an accompanying image for balanced visual appeal — one with the image on the left and the other with the image on the right.

Each section variant should be displayed on different paths, for example:

• https://yoursite.com: Renders the section with the image on the left.
• https://yoursite.com/right: Renders the section with the image on the right.

You are free to decide on the paths, during submission you will be required to enter the full URLs for each of the two pages.

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.
  • Image size: The image resizes to fill the available width on tablets and mobile viewports.
  • Element adaptability: Ensure that text elements and images resize appropriately without distortion or loss of quality.
• 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.

Tips

• Try to reuse as much CSS as possible between the left image and right image variants.