Skip to content
Submitted about 2 years ago

Responsive Stats preview card component created with CSS Flexbox

Mihael•260
@mihaelpavlakovic
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

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,775
    @vanzasetiaPosted about 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!

    0

Please log in to post a comment

Log in with GitHub

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