Frontend Mentor - Four card feature section solution

This is a solution to the Four card feature section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size

Screenshot

Links

• Solution URL: frontendmentor.io/solutions
• Live Site URL: alex-lemos.github.io/four-card-feature-section-master

My process

I have to organize an entire HTML structure, with main, header and section.

To position the cards well, I left two outside a div and two inside a div, where I used flexbox to put the ones inside a div, one on top of the other, which was undoubtedly my biggest challenge and the spacing made with margin.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox

What I learned

I learned to use fexxbox properties in a more efficient way and to better organize my HTML code and, besides, I managed to keep my CSS code organized, using BEM.

Author

• Frontend Mentor - @alex-lemos