Stats Preview Card

Hi Benjamin, try using the property background-blend-mode,

https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode.

https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

I used soft light for the value, and it was the closest I got to be satisfied with a replication of the purple hue of the image. I wanted to make the darks darker without making the whole image dark, as you will probably see when using hard light value. I would think there are additional tips and best practices to improve color saturation, but at least using background-blend-mode achieved getting the image purple to specifications.

Replace <div class="wrapper"> with the main tag to fix the accessibility issue.

To center .wrapper on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

for the color over the image, wrap the img tag in a div and give it a class for the styling. e.g <div class=" sftviolet"><img class="splash-image"></div> in the CSS give .sftviolet a background-color of soft violet and display: block. Give .splash-image width of100%, mix-blend-mode: multiply and opacity: 0.8 or 0.7 you can try this out.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING