Submitted 2 months ago

Product Preview Card Component using HTML and pure CSS

razanabbas• 100

@razanabbas

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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.

Community feedback

Viniboy17• 150

@Viniboy17

Posted 2 months ago

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.

YADAV0057• 120

@YADAV0057

Posted 2 months ago

@Viniboy17 border-radius: 10px 0 0 10px; put it in your (css img ) match the 10px to your border radius to your card.

YADAV0057• 120

@YADAV0057

Posted 2 months ago

@Viniboy17 Make your price into a flex and set it something like this .price { display: flex; align-items: center; gap: 10px; font-size: 30px; font-family: 'Fraunces', serif; color: #3c8067; }

Please log in to post a comment

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