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

Responsive stat preview card with flexbox

Kobinamd• 110

@Kobinamd

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


How do you achieve the color overlay without using the process that I used? Any simple way of doing it rather than using position properties?

Community feedback

@mateuscgoncalves

Posted

Hello Kobinamd's, congratulations on your project!

You can achieve the same result using another approach : Instead of two image tags you can use an empty div (or a more semantic tag) and set the background image (use media query to set the right image and size to each screen). Then you set the background-color to violet - hsl(277, 64%, 61%) and use background-blend-mode: multiply to achieve this effect.

I use this approach to solve the challenge, take a look at my code if you have any doubt.

Best,

Mateus

Marked as helpful

0

Kobinamd• 110

@Kobinamd

Posted

Hi Mateus, I have seen your approach but it requires specifying a height for the div which I am trying to avoid as much as possible. But your idea is good since there are two images involved. Thank you.

0
CyrusKabir• 1,885

@CyrusKabir

Posted

hello my dear friend ♥ you did good and clean but here some advice :

  • actually in your stat-para "m" and "k" it's upper case in main design
  • try make close as possible the white space in your card like in main design like padding , margin , etc
0

Kobinamd• 110

@Kobinamd

Posted

@CyrusKabir Ok. Didn't notice that. Thank you.

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