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.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- Solution URL: frontendmentor.io/solutions
- Live Site URL: alex-lemos.github.io/four-card-feature-section-master
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.
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
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.
- Frontend Mentor - @alex-lemos