Submitted almost 2 years ago

Stats preview card component challenge - Solution using Flexbox

animation

Leo-Code-CA•60

@Leo-Code-CA

A solution to the Stats preview card component challenge

Preview Code

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 :)!

Code

Please log in to post a comment

Community feedback

lrobb95•200
@lrobb95
Posted almost 2 years 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

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