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

3 Column Preview Card

P

@kaamiik

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


I would appreciate it if you could take a look at my code and give me feedback.

Community feedback

@tburette

Posted

Nice solution!

Your CSS could follow BEM more. You did <div class="card sedans"> but you could have done <div class="card card--sedans">. See Why the modifier CSS classes are not represented as a combined selector?

When the button becomes active the card moves a little. Is it intentional? It could be a neat effect. If it is not : you add a border on :hover/:focus. It causes the layout to change.

Marked as helpful

0

P

@kaamiik

Posted

Sorry for the late reply. Yes, you’re right about the class name, I changed it. Also, I added a fixed ‍‍height to the button to fix when hover. Thanks for your feedback. @tburette

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