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

Using flexbox and grid layout

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


open to sugestions

Community feedback

darryncodes 6,430

@darryncodes

Posted

Hi Antonio,

Really good solution and very responsive.

With a few tweaks i think it could be perfect:

  • i'd remove height: 70%; to .card-container as it's creating a really long card on desktop, you'll need space things out inside the card a little more to match the design
  • it might be cool to look into button styling to help match the desired hover effects to the design
  • you could clear your accssibility/html report if you mad this <section class="container"> a <main class="container"> and this <div class="attribution"> a <footer class="attribution">. semantic html is really important and fundamental

Hope that helps

Marked as 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