Skip to content
Submitted about 1 year ago

Product Preview Card Component using HTML and pure CSS

razanabbas•150
@razanabbas
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I think this is the most semantic html I have written so far. It is also my first responsive website.

What challenges did you encounter, and how did you overcome them?

At first I had difficulty making the site responsive but I resorted to some external help and worked stuff out.

What specific areas of your project would you like help with?

I applied border radius to the card but it did not apply to the borders of the image. I would like to know how to fix that. Any other comments are also welcome.

Code

Please log in to post a comment

Log in

Community feedback

  • Viniboy17•150
    @Viniboy17

    In the css inside the product class add ''overflow: hidden;''. When you apply overflow: hidden; to an element, any content that exceeds the defined dimensions of that element will be hidden and will not be visible.

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