Stats preview card component main
Design comparison
Solution retrospective
I'll appreciate any feedback. It took me some days to do this one actually.
Community feedback
- @PhilalePosted about 2 years ago
Hello! Congratulations on completing the challenge! Even if it took days to complete, the result is very beautiful! It shows that you learned a lot in the process, because now you managed to do it!
I just recognized two things you could improve:
-
Use padding instead of margin on the
.content
div, because for adding some space around an elements content padding is used. Otherwise it could interfere with the box model. Margin is the outermost part of the box model, if you want to add a border later on for example, that would cause unwanted results. -
You used quite many flex container to position the card in the center of the screen. For these challenges you could just use absolute positioning, like so:
.card{ position: absolute; left: 50%; top: 50%; transform: translate(-50% -50%); }
Then you don't need the
display: flex
property on thebody
and.container
.By the way I love the hovering effect on the card, simple but very pretty! Keep up the work!
Marked as helpful0@Cyrus-Akwaboah-EmmanuelPosted about 2 years ago@Philale thanks for the feedback 👍
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