Skip to content
Submitted almost 2 years ago

Responsive product card using plain CSS and HTML

Liam Malby•20
@liammalby
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I have combined flex and grid to create this card, however perhaps there is a simpler way? I also feel there is probably a more efficient way to write the CSS, as I have duplicated basically the entire page for the two media queries for the screen sizes.

Community feedback

  • Tux3er•780
    @Tux3er-IsmaPosted almost 2 years ago

    Hi Liam

    Congrats for completing this challenge and have a nice code 😉🎉

    I will give you some tips for your next challenge 💡:

    • I recomend you to use a css reset like the normalize.css 📖

    • In hover states use cursor: pointer; to get a better user experience. You have to add this in the btn

    You have done it very well for combining grid and flexbox, great job 😉👍🏻

    I hope this tips will help you a little in the future 🖐🏻⌨️

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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