Skip to content
Submitted about 4 years ago

Stats Card Component

Shahin NJ•1,190
@SJ-Nosrat
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

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!

Code

Please log in to post a comment

Log in

Community feedback

  • Kainã Mazim•115
    @KaMazim

    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
  • Dawid Kuczer•110
    @dadko44

    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

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