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

fr4nbtt 100

@fr4nbtt

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 challenges did you encounter, and how did you overcome them?

Content overflow was the main problem at the beginning.

The first lessons of the recommended course at the start of this Learning Path, Conquering Responsive Layouts by Kevin Powell, helped me a lot in defining more responsive widths and heights to avoid overflow as much as possible.

I also struggled quite a bit to make the product image span from edge to edge of the card; in the end, I decided to use it as the background image of a div.

Community feedback

@Deng-Abuoi

Posted

It's cool

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