Skip to content
Submitted about 3 years ago

Four Card Feature Section with CSS Flexbox, CSS Grid, SCSS, and BEM

Ken•4,915
@kens-visuals
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I've had a lot of fun building this project, and here is why 👇🏻

I've wanted to work on a project that will allow me to use both CSS Flexbox and CSS Grid at the same time, that will fit to the needs of the project harmonically. This project was the perfect candidate to achieve what I've wanted to do for a while. Moreover, this was a perfect project to use BEM convention. There are a lot of pieces that are technically the same, so BEM helped me to use its power to shorten my CSS, and of course BEM + SCSS makes both of them even more powerful.

P. S. I just wanted to spice things up a bit, so I added some hover effects 🙃

Feel free to leave some feedback 👨🏻‍💻

Community feedback

  • Orlando Guevara•220
    @coding-tomatoPosted about 3 years ago

    That hover effect is sick! Love how a very simple use of transform properties can give a page so much charm.

    0
    Ken•4,915
    @kens-visualsPosted about 3 years ago

    Thanks, @VeryEvilTomato. Yes, absolutely, :hover effects can make the page more interactive, if used correctly.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord