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

Alfredo 50

@almendev

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?

I tried to use em and rem units for everything to improve accessibility and responsiveness.

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

I would like to fined a better way to define the spaces between the card inner elements.

Community feedback

P

@marjsky

Posted

Your website is perfect match to design requirement. In HTML file, your structure look neat and sense everything. Your implementation in CSS is completed without missing or vague coordinate to HTML document. Good job!

Marked as helpful

1
P
beowulf1958 1,170

@beowulf1958

Posted

Your website looks great; pixel perfect implementation of the design. I particularly liked the BEM variables names in the html; this makes it super easy to read and maintain.

Because your code is so easy to follow, you taught me how to do something I did not know. I spent several days trying to get the <picture> element to work right, but it always ended up with a white strip at the bottom. The img on your page covers the entire left side in desktop view. Outstanding!!!!

Thank you so much for this design, and keep on coding.

1

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