Responsive Stats Preview card using HTML and CSS

Hello Igu! I found myself in a little bit of a struggle to finish this challenge too, but the closest solution that i had found to color the image, is to set your container background color to the light purple given in the style.guide, and use the "mix-blend-mode: multiply;" property together with "opacity: 0.8;". Hope this helped you out, here you can find the documentation to the property quoted: https://www.w3schools.com/cssref/pr_mix-blend-mode.asp

Both of the suggestions 👆 in the feedback above are great ways to sort the image color

I also recommend you

• try to address the sizings, alignment and line height to get closer to the design
• place the stats (each number and word pair) inside a meaningful element like paragraph or list item. Test should never be in a span or div only
• fix the error in your report (no do type)
• remove the font size off the root, or if you have it on there set it in %. If places on the body instead (more usual practice) put it in rem/em. Font sizes must never be in px
• remove 100vw off the body. That isn't needed (body is 100% wide anyway) and will introduce issues because viewport units don't account for things like scrollbars

Good luck

I colored the image by adding a css pseudo element and positioning it absolutely over the image, then I added a HSLA background color to the pseudo element.

A quick example.(not complete code) .hero-image { position: relative background-image: url(“path to image file”) }

.hero-image:before { position: absolute height: 100% width: 100% background-color: hsla(“insert hsla values here”) }