Skip to content
Submitted over 2 years ago

Stats preview card component solution using Flexbox

Leonardo Henrique•220
@henrikkudesu
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

HTML part was easy. The problem started when i decided to make desktop version first. The CSS Code is a mess and incomplete; note that i need to add an overlay over the image, but i couldn't make it. Any help is welcome!

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • Adán Estévez•320
    @rafdidact

    Hey, Leonardo! I did the same as @chicaboom-73 for the overlay, you should check that documentation out.

    I see you're almost there, but I got a suggestion that would make your code even better:

    • There's no need for two source elements inside of your picture element. You can just add the source of the image of the first layout your working on to the img element, and then add the remaining one in a source element to display only if it meets the condition you declare.

    You can check my solution for reference. Hope it helps.

    Marked as helpful
  • chicaboom-73•50
    @chicaboom-73

    Hi Leonardo

    I'm new to this also - but when I did this challenge I set the background of the image div to the light purple colour and then used mix-blend-mode:multiply; in CSS to get the tint in the image. Here is a resource for you explaining mix-blend for you. https://www.w3schools.com/cssref/pr_mix-blend-mode.php

    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