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 Preview Card using HTML, CSS

@Rajdeep1999GitHub

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@itsdevdeepak

Posted

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

@Rajdeep1999GitHub

Posted

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

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