Skip to content
Submitted 4 months ago

Product Preview Card Component using HTML and pure CSS

razanabbas•100
@razanabbas
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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
    @Viniboy17Posted 4 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.

    0
    YADAV0057•120
    @YADAV0057Posted 4 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.

    0
    YADAV0057•120
    @YADAV0057Posted 4 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; }

    0

Please log in to post a comment

Log in with GitHub

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