Skip to content
Submitted 5 months ago

Product Preview Card Component

Alfredo•50
@almendev
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

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

  • Marcus Daniels•160
    @marjskyPosted 5 months ago

    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
  • beowulf1958•1,450
    @beowulf1958Posted 5 months ago

    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

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