Hi Frontend Mentor community!👋
This is my take on the stats preview card challenge. Overall a pretty nice one, everything went smoothly. Except the color on the image, I didn't get quite right and don't know how to do it properly, any tips regarding the image color?
Thanks in advance for any tips and help😄
Hi Alexandre, good work!
Regarding the image you could set a background color of its parent (the header element in your case). You should use soft violet (one of the colors from the style guide). Then you can add a property mix-blend-mode to the image and set it to multiply. It would then cause the image to blend with the color of its parent. Last thing is lowering the opacity level of the image to match the design. I used opacity: 0.75.
Feel free to check my solution and happy coding 😄
What is the best way to put the purple color over the image? I tried many things but could not get i exactly right.
Any feedback is welcome!
Hi Lucas, nice work!
One of the options to put the color over the image is using a mix-blend-mode property. You can set it on the image with a value of multiply and lower the opacity level like you already did. This will cause the image to blend in with the background.
Happy coding 😄
