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

aulia 70

@powreze

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


Hello everyone! I'm Aulia 👋 and this is my solution for Product Preview Card Component.

Please give me some feedbacks to improve or remove unnecessary code in my task.

Thank you 😁👍

Community feedback

Joachim 840

@Thewatcher13

Posted

You have to rewrite you HTML!

HTML is a markup language and is important to use semantic html.

  • get rit of that div container
  • the perfume text should be written in non capitalized letters, you should style this in css
  • gabrielle essence eau de parfum is the important thing, this hould be an H1
  • on the old price tag, you should use the S tag and on the new price just a span
  • on the button, don't use p tags, just add to cart, bcs this is the label text for you button so it don't need any tag

Marked as helpful

0
hitmorecode 6,230

@hitmorecode

Posted

nice, well done. Two things you can add to the page.

  • When hovering over the button the pointer doesn't change, so there is no way to know that you can click on it.
  • Change the background color of the button on hover

Marked as helpful

0

aulia 70

@powreze

Posted

@hitmorecode OH GOD my bad, I will fix it now. Thank you for the feedback 🙏

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