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 Solution

@m-stavrakov

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

devusexu 130

@devusexu

Posted

For better semantics of HTML, here's my suggestion and links to docs on MDN

  1. You may want to use main instead of section
  2. You can use picture for RWD image instead of using CSS
  3. You can use figure and figcaption to contain the image and the info
  4. Use button instead of a for the button or let button contain a. You can still make the button interactive without a link using
button:hover,
button:focus {
  cursor: pointer;
}
0

@DanonymousCoder

Posted

Great work Bruh, keep grinding. Your work is awesome but there are some few glitches you still need to fix. Firstly, the image width should be increased to give it a more befitting look. Secondly, the element 'PERFUME' should have a color: hsl(228, 12%, 48%) not black and also increase the word spacing. Thirdly, the text 'Essence' should be on the same line with 'Gabrielle'. Fourthly, your slashed price should be up beside the actual price not directly beside it.

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