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

product-preview-card-component-v2

@souza-vitor

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Thanks to the Frontend Mentor lessons, I could work much better with media queries, which made me solve the exercise faster.

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

I managed to maintain the aspect ratio of the image using padding-bottom with percentages. This way it occupies all the space in both layouts. I was having a lot of difficulty doing this and with the help of Copilot, I arrived at this solution.

What specific areas of your project would you like help with?

I used a div without content to manipulate the images with CSS. I would like to know if this affects the semantics of the code and alternative ways of achieving the same result.

Community feedback

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