Skip to content
Submitted 8 months ago

Four Card Feature Section - grid-based

Stefan Holmgren•220
@stefan-holmgren
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

What are you most proud of, and what would you do differently next time?

The grid system was a bit complicated to get right for the desktop view... Managed it, but feels like it could probably be done in a more efficient way.

But it's cool to be able to do so much stuff with it.

What challenges did you encounter, and how did you overcome them?

The grid system, figuring out how to merge two cells together.

What specific areas of your project would you like help with?

Well, becoming more fluent with css :D

Community feedback

  • Noel Hoppe•350
    @noelhoppePosted 8 months ago

    Hi,

    1. Make your HTML cleaner:
    <h1>
Reliable, efficient delivery
<span>Powered by Technology</span>
</h1>
    1. Nice use of CSS variables
    2. Nice idea to get this color lines on top of the cards
    3. Use grid-template-areas property to simplify your code and use flexbox instead of grid in the cards
    Marked as helpful
    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