Skip to content
Submitted over 3 years ago

Stats Card Component

Shahin NJ•1,190
@SJ-Nosrat
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

In the mobile design I've wrapped my images in a <figure> tag and applied a background-color to the tag. The reason is the use of the "mix-blend-mode: multiply" in CSS to the <img> tag to obtain the overlay effect, since the <img> tag will use the parent's container background-color to achieve this effect.

However, you'll notice that the <figure> height is much taller than the actual image, and I get the horizontal pink/purple line.

How to I overcome this?

Thanks in advance!

Community feedback

  • Kainã Mazim•115
    @KaMazimPosted over 3 years ago

    Hi, to make the figure's height fit into the image height you could add the display:flex property in the .flex-item class.

    Marked as helpful
    1
    Shahin NJ•1,190
    @SJ-NosratPosted over 3 years ago

    @KaMazim

    Thanks a lot! That fixed it! Grateful that you went through my code and provided the feedback!

    0
  • Dawid Kuczer•110
    @dadko44Posted over 3 years ago

    Hello, your solution looks great. I'm not really in the position to give feedback as I'm still learning a lot of basics but the only thing that I would change would be:

    • Give the picture a little bit less contrast so that it looks like an instagram filter
    • Use CSS text-transform: uppercase to make 'companies', 'templates', 'queries' be displayed in caps.

    Great work, keep up the good work :)

    Marked as helpful
    1
    Shahin NJ•1,190
    @SJ-NosratPosted over 3 years ago

    @dadko44

    Thank you for taking the time to review my code and make your suggestions.

    I did try to give the picture a little less contrast however, I think the mix-blend-mode: multiply; property increases it.

    Let me know if the modified version improved it in anyway?

    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