Submitted almost 2 years ago

Responsive Stats preview card component created with CSS Flexbox

Mihael• 260

@mihaelpavlakovic

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

Hii everyone, this is the sixth challenge I have tried to recreate. I'm so happy about how it turned out, but I think I could further improve in writing cleaner code.

It would be helpful for my future growth if you could point me in the right direction. For example, I'm interested in potentially better solutions for this challenge. In which area do I need to improve, and what do you recommend that I should implement? What are some best practices that I haven't got right?

I had problems with creating an overlay for a given image. After half an hour of researching, I found a viable solution that works. I'm interested is there any better solution maybe?

Thanks for your attention and all the future feedback.

Community feedback

Vanza Setia• 27,795

@vanzasetia

Posted almost 2 years ago

Hi, Mihael! 👋

For the image, I recommend using the picture element to control the images. After that, use mix-blend-mode instead of background-blend-mode. Lastly, reduce the opacity of the image to 0.75.

@DarrickFauvel did great on his solution for this challenge. I recommend taking a look at his solution as a reference to improve your solution.

For the statistic, I suggest making it a list. It will make more sense if the content is rendered as a list.

10k+ companies
314 templates
12m+ queries

Hope this helps!

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