Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Stats preview card component solution using Flexbox

@henrikkudesu

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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!

Community feedback

@rafdidact

Posted

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

1

@henrikkudesu

Posted

@rafdidact Thank you very much! I didn't noticed that i had duplicated the same tag. I fixed it.

1

@chicaboom-73

Posted

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

1

@henrikkudesu

Posted

@chicaboom-73 Wow! Thank you very much, man. It worked! You can take a look and see how it is now. Thank you so much!

0

@chicaboom-73

Posted

@henrikkudesu yeah thats great!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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