Skip to content
Submitted almost 3 years ago

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

Mouad P7•50
@mouad-P7
A solution to the Stats preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

Code

Please log in to post a comment

Log in

Community feedback

  • Marie Pascale Brunelle•230
    @mpbrunelle

    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
  • Peter Hannell•200
    @peterhannell

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

    1. your <html> tag is missing a language attribute. You can correct this by using <html lang="en">
    2. 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

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