Skip to content
Submitted over 3 years ago

Four Card Feature Section

pierre-pellegrino•970
@pierre-pellegrino
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

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 !

Community feedback

  • Anurag Singh•1,265
    @exist08Posted over 3 years ago

    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

    2
    pierre-pellegrino•970
    @pierre-pellegrinoPosted over 3 years ago

    @exist08 I must have done something wrong before, I followed your advice and it's working great ! Thank you ! :)

    0
  • Lucas Pedro•740
    @Lusk1nhaPosted over 3 years ago

    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. 😃👍

    1
    pierre-pellegrino•970
    @pierre-pellegrinoPosted over 3 years ago

    @Lusk1nha I'm kinda scared as I've never used it but I'm definitely giving it a try ! Thank you ! :)

    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