Responsive Stats Preview Card Component

Hey @Iron-Mark

Congrats on completing the challenge 👏🏾 The solution looks really good.

Here's how you could make a few improvements:

• Make sure the title or main heading is contained in the <h1> </h1> tags to get rid of those warnings and improve accessibility then adjust the font size to fit the design.

• As for the overlay, since there's no fancy animation going on in this situation, just put the image in a div, set the background color to that overlay color, and then slightly reduce the opacity of the image.

<div class="ctn-img">
      <img src="./images/image-header-desktop.jpg" alt="people in an office">
</div>

.ctn-img {
       background-color: hsla(277, 100%, 24.5%, 0.57);
}
.ctn-image > img{
       filter:brightness(40%)
       filter:opacity(40%);
}

You could also play around with other filters like brightness and saturation to get closer to the design. This will save you several lines of CSS code and markup. Just make sure the image fits in the div and you should be good.

Hope you find this helpful 🙂

Happy coding