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 list made with html and css.

@Dev-saeedAli

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

faizan 2,420

@afaiz-space

Posted

Hey @Dev-saeedAli,

  • add the border radius to the card.

Marked as helpful

1

@Dev-saeedAli

Posted

@afaiz-space done thank you.

0
Lucas 👾 104,420

@correlucas

Posted

👾Hello Mohammed, congratulations for your solution!

You component is too small, take a look in the comparison slide and you see that. This container has the widthvalue around 900px, so to solve that you need to add it to the .card class.

Note that in this case you don't need so may div to manage the content, you need only two divs under the <section> one for the img and other for the text content. Removing this unnecessary elements you'll have a clean code. Don't forget to replace the section with <main> for a better semantic.

Hope it helps Mohammed, keep it up!

Marked as helpful

0

@Dev-saeedAli

Posted

@correlucas thanks for your feedback ♡♡♡ I am not a pro member so I dont have access to the figma files but I will change the div part thank you..

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