Submitted about 1 year ago

Stats preview card component challenge - Solution using Flexbox

Leo-Code-CA• 60

@Leo-Code-CA

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hey guys!

I'm glad to be back! This time, I added an additional constraint to the challenge: building the project in less than 4 hours. It was a little tricky and I haven't had the time to do everything exactly as I wanted but... I did it!

I chose to give me a time limit because I noticed that I can easily spend hours on details just because I find something not good enough and, it can be a problem! That's why today, my priority was to finish the project on time and not to absolutely nail it!

Except that, I have a question: what would you use to create the image purple overlay?

The image that was given to us was black and white so we needed to add the color. I personally used the pseudo-element ::after but I think there are many ways to do so and I would like to know is one better than the others.

Thanks and have fun while coding :)!

Community feedback

lrobb95• 200

@lrobb95

Posted about 1 year ago

Hello, Leo!

Unbelievable! Job well done.

Here’s a wonderful solution to your question if using background-image:

The overlay feature you may be interested in is something called background-blend-mode. The syntax is straight forward and it is a lot quicker (and easier to do) The syntax is as follows,

background-image: url(‘images/(link to image goes here)’;
background-color: periwinkle;
background-size: cover;
background-position: center;
background-blend-mode: overlay;

Marked as helpful

Leo-Code-CA• 60

@Leo-Code-CA

Posted 12 months ago

Hey @lrobb95 ! So sorry for the late answer, I've been working a lot on projects outside Frontend Mentor lately but... I'm back!

Thank you so much for your answer! Indeed, this feature would have been amazing to use in this project! I'll definitely think about it the next time I need to create an overlay!

Thanks again and happy coding :)!

lrobb95• 200

@lrobb95

Posted 12 months ago

@Leo-Code-CA you are very welcome!

Please log in to post a comment

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