Skip to content
Submitted over 1 year ago

Product Preview Card using HTML, CSS

Rajdeep Shrivastava•110
@Rajdeep1999GitHub
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

The part when we needed to switch between the two images for responsiveness was kinda difficult, rest your feedbacks are welcomed!

Community feedback

  • Deepak•190
    @itsdevdeepakPosted over 1 year ago

    Hi Rajdeep, how you doing? I would like to provide some feedback on your project.

    1. you can save your time and hassle by using <picture> tag or srcset attribute with image, instead of manually defining different img tag and swiping them with CSS.
    2. you could set overflow: hidden property on .card with border radius, it hide the any that is sticking out of your card including images.

    Hope you find my feedback helpful.

    Marked as helpful
    1
    Rajdeep Shrivastava•110
    @Rajdeep1999GitHubPosted over 1 year ago

    @itsdevdeepak thanks a lot, I will surely do the picture method.

    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