stats-preview-card-component

Hi, Achilike! 👋

For the image-header, I recommend for the fallback image (img), the src is the file path for the image-header-mobile.jpg. So, the media condition is using min-width instead of max-width. This way, if the browsers don't support the picture tag, those browsers will render the light version of the image.

For the purple overlay, I recommend using mix-blend-mode property. For your reference, I recommend taking a look at the @DarrickFauvel's solution. He did a great job on creating the overlay (and making the site responsive too).

I have three recommended videos. The first one tells how hard HTML is (HTML is not easy). The other two talk about modern CSS techniques and approaches.

• Manuel Matuzović - Lost in Translation - YouTube
• Andy Bell – Be the browser’s mentor, not its micromanager - YouTube
• Stephanie Eeckles - Scaling CSS Layout Beyond Pixels - YouTube

I hope this helps! Happy coding!