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 Card

P
pavocados 60

@pavocados

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P

@NikitaVologdin

Posted

@pavocados you did a great job! Want to highlight a few things:

  1. It looks you have higher letter spacing for 'parfume' paragraph then in design, yours is 0.4 rem in design is 0.3125rem. I also suggest to use some meta-tag like strong or em to highlight this information for search engines and screen readers. Also your font-size here looks a bit bigger than it should be 0.875rem against 0.75 rem in design and need to add font-weight: 500.
  2. Great job with the title and description paragraph. Just want to suggest to add line-height for description paragraph of 1.43rem.
  3. Nice work with pixel perfection of main price. I noticed sliced difference of font-size for old price here it should be 0.8125rem in my opinion.
  4. Add-to-cart-button`s border radius slightly bigger than in design, i would suggest to put 0.5rem. Transition delay makes this button look outstanding.

Great job with right side paddings and percentage proportion. Thank you for reading. With respect, Nikita.

Marked as helpful

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