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

HTML and CSS with Netlify

Kakeru 265

@adeleke5140

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This was an exciting challenge; I'd appreciate any feedback you might have regarding it.

Community feedback

@pikapikamart

Posted

Hey, great work on this one and that little animation upon loading, points for that.

Layout in desktop is good but while resizing, the layout's size seems get different, referring to the card's height.

  • So instead of using align-items: center in the container selector. You could just make use of align-items: stretch or just omit the align-items. But doing this, you will need to tweak some of the card since the layout sizes will still differ, making the learn more button not aligned with other card as well.

  • Adjusting also the breakpoint will be really good so that the layout won't be narrowed. Making a breakpoint where the layout seems different or destroyed will be really awesome.

  • Adding also a cursor: pointer in the learn more button will be good since it is an interactive element.

Still, you did a good job doing this challenge^

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