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 component + Animations

#animation
Kush🫴 225

@kush-x7

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Edoye 170

@DoyeDesigns

Posted

Hello kush-x7 Your code is very neat and easy to read. And thank you for the resources I’m about to go check them out.

I also like the initiative of adding css animation to your design. It’s cool. I’ll start thinking outside the box too.. nice work

0

@kiran1095

Posted

Hello @kush-x7,'

  • your usage of box-shadow and animation is very good for this design, your references are also useful for me thanks for that.

  • I am a newbie so I am practising few things, so just wanted to let you know where I feel you can improve the code better:

  1. Usage of rem or em would be better instead of px units for responsive designs. Useful link that can help you for better usage: https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/
  2. You can use <picture> tag instead of using two image tags and displaying it based on usage.

Thanks.

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