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

Responsive Product Card using flexbox and grid

bialasss 260

@bialasssek

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


What are you most proud of, and what would you do differently next time?

  • the pace i did the challange

What challenges did you encounter, and how did you overcome them?

  • changing the image when changing the size from mobile to destkop (used sources with srcset and media)

What specific areas of your project would you like help with?

.

Community feedback

P
andiaz 150

@andiaz

Posted

Very impressive solution and looks really close to the original, well done!

I however noticed that it seems the image URL doesn't work on mobile / lower resolution ( I just get a 404), so might want to check that. But the design itself looks very good, only thing I think is that the button might be slightly smaller (height / top/bottom-padding) in the implementation than in the design :) keep up the good work!

Marked as helpful

0

bialasss 260

@bialasssek

Posted

@andiaz thank you fixed

0
P

@JoannaBroad

Posted

it looks really good you should be proud of yourself. I love your use on variable even on smaller projects like this

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