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 pure css

Mohabexe 190

@Mohabexe

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


What did you find difficult while building the project? the positioning of the text

Community feedback

@devid8642

Posted

Firstly, congratulations on the solution.

I have some considerations about your project:

Regarding the structuring of your page, semantically speaking, all this content could be wrapped in an <article>, which could be inside a <main>. See more about HTML semantic tags here.

Regarding the style, notice that the design predicted that the "add to cart" button has a specific behavior when the mouse passes over it. I don't know if you know it, but it is possible to implement this using the :hover pseudo-class.

Again, congratulations on the solution and I hope you found my comment helpful.

Marked as helpful

1

Mohabexe 190

@Mohabexe

Posted

@devid8642 what difference would using the article tag do?

i didnt notice that it needs a hover effect thank you for pointing that out

0

@devid8642

Posted

@Mohabexe The only benefit of using the article tag is semantic according to the W3C reference.

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