Skip to content
Submitted over 2 years ago

Four card section using CSS Grid

Sebastian Fuentes•170
@sfuentes-dev
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

Hello Frontend Mentor community, this is my solution to this challenge. I hope you like it and any comment to improve my code is welcome, every feedback is very appreciated.

Community feedback

  • NadiaFr•310
    @NadiaFrShLmPosted over 2 years ago

    Hi, I just finished the same challenge. And I noticed on your screenshot that the colour of the borders at the top of each cards are rounded at the ends. They have the same curve as rounded corners of each card. But at the exemple they are straight.

    I resolved this isue by adding the empty component to the card component

    <span class="border green-border"></span>

    and in css gave an absolute position : .border { position: absolute; top: 0; left: 0; width: 100%; height: 4px; }

    Marked as helpful
    0
  • Sebastian Fuentes•170
    @sfuentes-devPosted over 2 years ago

    Hi, thank you for your feedback Nadia. I will implement your advice to improve this exercise.

    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