Responsive, Accessible and Mobile First Stats Preview Card

Hello Favour, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

To get closer to the photo overlay effect, you'd better use mix-blend-mode. All you need is the div under the image with this background color: hsl(277, 64%, 61%); and position mix-blend-mode: multiply and opacity: 80% on the image or apply image to activate the overlay by blending the image with the div's color. See the code below:

img {
    mix-blend mode: multiply;
    opacity: 80%;
}

You can read this content which is explaining these effects with mix-blend-mode: click here

To improve the structure of the html document, prefer to wrap all the content with the main tag, since this challenge is just a component, it needs a main tag to know what the main content of the page is!

The remainder is excellent.

I hope it's useful. 👍

For the purple on the image, You can do it with mix-blend-mode like this mix-blend-mode: luminosity; MDN

Hello!

About "getting the purple background on the image", if I understand correctly, it can be done with a semi transparent purple overlay.

See how overlays can be achieved here: How to Overlay

Hope I understood your question and that this helps!

For the image, I did something like this, I hope that helps:

            <div class="image-container">
                <img class="main-image" src="images/image-header-mobile.jpg" alt="">
            </div>

.image-container {
  display: inherit;
  position: relative;
  width: 100%;
  border-radius: 0 10px 10px 0;
  background-color: hsl(277, 64%, 61%);
}
.main-image {
  width: 100%;
  height: 100%;
  position: relative;
  background-size: cover;
  border-radius: 0 10px 10px 0;
  mix-blend-mode: multiply;
  opacity: 0.75;
}