Skip to content
Submitted over 2 years ago

stats preview card using grid layout

f5rcbh•190
@f5rcbh
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

to be honest it was difficult one and i do not know how i got that image color or how there is a little gap between the image or how responsive didn't work but at least i get it .. any information will help me thanks <3

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Hi there! 👋

    For the image overlay (it's actually an overlay not changing the color of the image itself), you can try using mix-blend-mode after that adjusting the opacity of the img element. For your reference, you can see @DarrickFauvel's solution. He had done an amazing job on making the overlay.

    Other things that you can improve.

    • The statistic numbers are not headings. I would recommend thinking of headings like title on the text document. Also, I recommend by the time you write the HTML markup, make sure there's no custom CSS. This will help you decide the HTML markup better.
    • For the little whitespace below the img element, you can remove it by making the img element as a block element. Next time, I suggest making the img as block element and setting max-width: 100% to make it easier to work with img element.

    That's it! Hope you find this useful! 😁

    Marked as helpful
    1

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