Frontend Mentor - Four card feature section solution

This project is a solution to the Resource Section of Four Cards Challenge FrontendMentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

Users must be able to:

• See the ideal layout for your website depending on your device's screen size;
• View hover states for interactive elements;
• Understand the structure and content of each resource;
• View the optimal layout for the site depending on their device's screen size

Screenshot

Links

• Solution URL: [https://github.com/Ataize/four-card-feature-section/tree/main]
• Live Site URL: [(https://ataize.github.io/four-card-feature-section/)]

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Using grid and flexbox together for more control over the layout.
• Fine-tuning responsive design using media
• Simplifying Color Management Using CSS Variables

What I learned

This project helped solidify my understanding of CSS Grid and Flexbox, especially when creating complex layouts that need to respond well to different screen sizes. I also improved my ability to use CSS variables.

Author

• Frontend Mentor - [https://www.frontendmentor.io/profile/Ataize]
• Linkedin - [https://www.linkedin.com/in/ataizefeitosa/]