Design comparison
SolutionDesign
Solution retrospective
While you develop the card, you will notice the height is not matching. Then you realize that the line-height is important to fill it.
The size of the card for mobile
max-width: 75px;
max-height: 26px;
and desktop
max-width: 82px;
max-height: 30px;
The title, the tag and the avatar name are using
font-family: 'Figtree-ExtraBold';
The image must have
object-fit: cover;
Community feedback
Please log in to post a comment
Log in with GitHub
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