Submitted about 3 years ago

Stats preview card component solution

Julien• 20

@julienbenincasa

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello ! This is my solution for this challenge. I'm quite satisfied of the result but I have the feeling that I made I difficult for no reasons. I think that there are way easier ways to display the main container. I used px (I thought it was easier for the img) which I think isn't the best way to do it, maybe I should have used % or vh or I don't know what. I think the responsive side is ok but my method ****ed me a bit for Ipad widths (I cut a very very little bit of content).

If you have any tips on html/css manners that I should avoid or things that could save me time and make the responsive side easier and cleaner, let me know !

Community feedback

Vanza Setia• 27,795

@vanzasetia

Posted about 3 years ago

👋Hi Julien! My name is Vanza!

My tips to create the overlay, try to use background-blend-mode: multiply, on picture-container and also add background-image on that too. That way, you don't extra html markup to do it.

Also, last but not least, you can try to add padding on body to prevent the big-container touching the edges of the screen(you can see this issue on 980px screen size or breakpoint).

That's it! Hopefully this is helpful!

Happy Coding!

Marked as helpful

Jose Berrios• 215

@surphury

Posted about 3 years ago

It looks very good, ¡keep coding!

Julien• 20

@julienbenincasa

Posted about 3 years ago

@surphury Thanks!

Please log in to post a comment

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