
Design comparison
SolutionDesign
Community feedback
- @arthur-scheveyPosted about 2 months ago
A lovely solution. It looks like your card is noticeably smaller, I used the mobile width in the style guide to get a little closer.
My notes:
- I'm not sure if the transition property on
.image
does anything. - Great use of
border-box
, however you didn't take advantage of it for the.image
because you specified awidth
andheight
when you could have given itwidth: 100%
andpadding
which would preserve the image dimensions and just size it based on the parent container. - The general layout of some elements like the
.image
div and.background
seems a little redundant for this project, although in others it would be totally valid. - Great use of flex boxes.
What I did differently:
- Made css variables from the styleguide (not necessary, but nice sometimes)
- I didn't specify a height for the card since I figured I'd let the content handle the rest, but don't know if that's good or not.
Marked as helpful0@BaghelDhruv40Posted about 2 months ago@arthur-schevey Thank you for your helpful suggestions. I will keep them in mind and will improve!!
0 - I'm not sure if the transition property on
Please log in to post a comment
Log in with GitHubJoin 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