Submitted almost 2 years ago

Stats preview card component (made with html and css only).

Mouad P7• 50

@mouad-P7

Preview site View code

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Feel free to check my solution and give me some advice to improve my coding skills.

Community feedback

Marie Pascale Brunelle• 230

@mpbrunelle

Posted almost 2 years ago

Hello Moad,

To change the color of the image, you could explore <blend-mode> (used with the properties mix-blend-mode and background-blend-mode).

MDN documentation

Here is what worked for me :

.img {
	mix-blend-mode: multiply;
	opacity: 0.75;
}

Marked as helpful

Mouad P7• 50

@mouad-P7

Posted almost 2 years ago

@mpbrunelle Thanks, that's work.

Peter Hannell• 200

@peterhannell

Posted almost 2 years ago

Hi Mouad, good job with your solution. I have a couple of suggestions:

your <html> tag is missing a language attribute. You can correct this by using <html lang="en">
in regards to your question about changing the colour of the image: you first need to apply a background colour to your image wrapper, then you can reduce the opacity of your image element with the opacity: property in your CSS file.

Hope this helps!

Marked as helpful

Mouad P7• 50

@mouad-P7

Posted almost 2 years ago

@peterhannell Just reducing the opacity didn't give the result that I was looking for. But I found the answer, thanks anyway for your suggestions.

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