Skip to content
Submitted 4 months ago

Product preview card component (HTML & CSS)

Bloxer58•110
@Bloxer58
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Responsive layouts.

What challenges did you encounter, and how did you overcome them?

Creating different layouts for mobiles and desktop. At first I had problems with positionig different divs. But after learning responsive layouts: display: flex etc. I overcame this problem.

Code

Please log in to post a comment

Log in

Community feedback

  • Leo•150
    @Leonardolvq

    Hey,

    Thanks for introducing me to the <picture> element! I didn’t know about it, and it’s a great way to handle responsive images.

    The rest of the code looks solid! Just a heads up about the nested CSS—if it's not SCSS, it won’t work in regular CSS. You might want to either remove the nesting or set up Sass.

    Everything else is great though, nice job! 👍

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