Submitted over 2 years ago

Stat review 1st attempt

@Lozzek

A solution to the Stats preview card component challenge

Solution retrospective

This is my first attempt at this project. I uploaded the way it was because I was having a hard time trying to figure somethings out and was hoping someone can check this out for me and give me some tips. I could not figure out the color over the image, that was one of the main issues, also felt like I could have done the bottom section of the card better(the numbers with companies, queries, and templates part).

I will definitely go at this again to complete it.

Code

Please log in to post a comment

Community feedback

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

If you want the effect for the image try making a separate div that you can put the image in. Then set the background of the div to the color background-color: hsl(277, 64%, 61%)

You don't want to set the image as the background because you lose the ability to have an alt description which isn't good for accessibility. You want to use an img element inside the div I described above.

Then for the image element you can do something like this:
```
.card-img {
  mix-blend-mode: multiply;
  min-width: 100%;
  min-height: 100%;
}
```
The mix-blend-mode: multiply; will get you the color effect you are looking for.

I did this project a while ago and could have done some things better but you can check my solution out HERE if you it helps.

Cheers and happy coding.

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