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_section - made with pure html & css-grid, flexbox & medQuery

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


This is my version, any constructive comments and tips for improvement are welcome.

Community feedback

P
Ken 4,915

@kens-visuals

Posted

Hey @Dfcuevas 👋🏻

I just have a couple of suggestion for the project.

  • The icons, should have aria-hidden="true”, because they're for decoration. You can read more about aria-hidden here.
  • Although it works fine in this small project, but in general, avoid using floats, since they can cause some unwanted bugs and are pretty hard to debug. Here's an alternative approach:
.container-box {
    background: white;
    padding: 35px;
    border-radius: 10px;
    box-shadow: 1px 9px 10px 3px #D8D8D8;
    display: flex;
    flex-direction: column;
}

I added the last two lines to .container-box and you should add this line align-self: flex-end; to .container-box img;

I hope this was helpful 👨🏻‍💻 all in all, you did a great job with responsiveness, well done. Cheers 👾

Marked as helpful

0

P
Ken 4,915

@kens-visuals

Posted

@Dfcuevas you're welcome, glad to be helpful 😇

0

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