Skip to content
Submitted about 4 years ago

Four Card Feature Section

pierre-pellegrino•970
@pierre-pellegrino
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi. I'm not very proud on this one. I'm facing two issues :

  1. Not responsive. I didn't now how to position the cards this way so I used position: absolute, and flexbox aren't flexible anymore. It just changes the way it displays if screen width is less than 1160px. I'm still wondering how to position it the right way.

  2. I used "::before" to color each box but did not find a way to do it without rewriting the same piece of code four times.

Good luck to everybody on this challenge.

Edit : Changes have been made and everything's working good. Many thanks to you !

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Anurag Singh•1,265
    @exist08

    I saw your code, you could have use ,

    .box::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height:4px; } /***** ^^This code is Common for every card^^ ****/

    and then you could give bgcolor individually one by one to all .box

  • Lucas Pedro da Hora•790
    @Lusk1nha

    Nice work on this challenge.

    I would recommend that you try to use the "display: grid;" to split the cards work better than using the position absolute to position each card. 😃👍

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