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

Flexbox and Media queries

John 210

@gt78x

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


Anything that should be changed or improve/small feedback will be appreciated!

Community feedback

Hassia Issah 50,670

@Hassiai

Posted

For the font-size , border-radius , width padding use rem or em instead of vw, percentage and pexels , 1rem= 16px ; For the font-weight use the figures like 700 0r 400. For the font-color of your paragraph and any other color, use the color in the style.guide in the starter folder, for lighter color, give the font-color an opacity. In class product-price use display flex to center the canceled price. Give the first paragraph in product-info a padding-top. Hope you find this helpful. You did a great job. Happy Coding

1
jack 160

@jackl92

Posted

hey John, the green for the price and the cart button could be a bit lighter for people hard of sight, when hovering over the cart it's easier to tell the element can be interacted with also when in mobile view the cart button is a little to the left. other than that your solutions great keep it up.

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