Design comparison
Solution retrospective
I don't have the exact font sizes so judge the design only pls
Community feedback
- @correlucasPosted about 2 years ago
๐พHello Omar, congratulations for your new solution!
Great solution again, there are two things you can improve about the component image.
1.The border radius are only in the right size you can fix that adding to the image
border-radius: 12px 12px 0 0;
About the image color, to have the exact same purple overlay effect for the image, matching the design files you can use,
filter
ormix-blend-mode
. See the code belowimg { mix-blend-mode: multiply; opacity: 70%;}
๐ I hope this helps you and happy coding!
Marked as helpful0 - @cacostedPosted over 2 years ago
Hello @omarsaleh11 don't worry about the fonts your solution looks very nice, but if you want the actual size, in the starter files in
style-guide.md
there is afont-size
recommended.Testing your solution I found that there is no padding in the
grid__desc
is important to set some padding to give the content some space to breathe. This is more clear when the width of the screen is around748px
, the content is alongside the border because there is no padding.0
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