Stats preview card component

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 space

and it will helpful when you make responsive solutions

Hope that was helpful 😊

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 a picture one. You can make the picture with a background-color of soft violet and for the img use mix-blend-mode with value multiply. 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. 😃