Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

four-card-feature-section with Flexbox

Hachiβ€’ 155

@hachi-ops

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone. I've just completed this challenge and would welcome feedback from you:)

Community feedback

drallasβ€’ 375

@Drallas

Posted

Hello Hachi

Well done Hachi mostly it looks pretty much like the design, but 'the devil is in the details'! It's also recommended to use rem and not px value for accessibility On my 38" screen the card grow really big when I take it fullscreen. Perhaps limit the max size of the cards a bit..

Greetings... Drallas

1

Hachiβ€’ 155

@hachi-ops

Posted

@Drallas thank you for pointing this out. I didn't think of it. You are absolutely right, applying relative units for fonts and/or max-width for the cards would make much more sense for big screens.

0
Raymart Pamplonaβ€’ 16,090

@pikapikamart

Posted

Hey great work there, the layout seems fine just the widths of the card right. Also, upon seeing your code

    border-top: 4px solid;
    border-right: 1px solid none;
    border-left: 1px solid none;
    border-bottom: 1px solid none;

instead of multiple assignment, you could make use of just border: 1px solid transparent none does not work in there, and I suppose you are making it invisible right so transparent is the value. Then after that you could just override the border-top via a declaration in their respective color coded card like in your .cyan class, border-top: 4px solid cyan something like that just to avoid multiple declarations^

1

Please log in to post a comment

Log in with GitHub
Discord logo

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