Submitted over 2 years ago

Stats - card

od•80

@oguerid

A solution to the Stats preview card component challenge

Solution retrospective

Hi, completed the challenge but had a small problem with the purple filter overlay as it seems to overlap a the bottom on both the mobile and the desktop due this i can see the darkness of the section underneath. i know this because of using the position absolute but i cant workout how to fix.

Code

Please log in to post a comment

Community feedback

J.D. Browne•870
@PeshwariNaan
Posted over 2 years ago
Hello OD - Nice work on completing the challenge.

I don't think you need to use absolute positioning for this, it would be better to use just a flexbox for the overall layout. The flexbox can have two divs - one for the image and one for the text. This is a great resource to help you learn about flexbox HERE

In the div for the image you can set the background-color: hsl(277, 64%, 61%) and then for the image itself you can use something like this. The mix-blend-mode: multiply will give you the purple effect.
```
.card-img {
  mix-blend-mode: multiply;
  min-width: 100%;
  min-height: 100%;
}
```
I did this project a while ago and I could have done some things better but you are welcome to take a look at my solution here

I hope this helps - Happy coding!
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