Stats preview card component

Please log in to post a comment
Log in with GitHubCommunity feedback
- Account deleted
Hello Coder 😊
Your solution is great✨ and congratulations for successfully completing an another newbie challenge🎉
and there is a small suggestion that might be helpful for you
min-height :
You can use min-height instead of height
because height will put your element to a size of 100% of it's container. min-height will put the element to min 100% of the container size.
if we set
min-height: 100vh
then the main will start at 100vh, if the content pushes the main beyond 100vh it will continue growing. However if you have content that takes less than 100vh it will still take 100vh in spaceand it will helpful when you make responsive solutions
Hope that was helpful 😊
Marked as helpful - @murilomcabral
Hey, Jarlei Sassi! I'm still learning, don't even work with this yet, but I hope one day, soon, I'll be able to start my career. 🥳
What I've notice, at first, was the reset settings that you made using many selectors. What I do and maybe could be better in that case, is to use a selector like this:
*, ::before, ::after { margin: 0; padding: 0; box-sizing: border-box; }
The
*
selector here, is used to select all elements at once.💡 You can see more about selectors in W3Schools - CSS Selector Reference and more about combinators in W3Schools - CSS Combinators.
About the image, you can use it in a
img
element inside apicture
one. You can make thepicture
with abackground-color
of soft violet and for theimg
usemix-blend-mode
with valuemultiply
. That well you also can adjust the image opacity so it can better match the original design.About picture in W3Schools - HTML <picture> Tag.
mix-blend-mode: multiply;
Again, I'm still learning! I hope this can help with something. 😃
Marked as helpful
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