Responsive stats preview card, using flexbox and mobile first

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

• You can use the <picture> tag when you have different versions of the same image 🖼. Using the <picture> tag will help you to load the correct image for the user's device. You can read more about this here 📘.

• To recreate the exact purple color of the image you can do the following:

  .image-container {
      background-color: var(--violet);
      . . . 
  }
  
  img {
      mix-blend-mode: multiply;
      opacity: 0.75;    
  }
  

  Explanation:

  • The first style sets the background color of the container element to a specific shade of purple.
  • The second style applies a blending effect to the image by setting the mix-blend-mode property to multiply. This means that the image will blend with the background color in a way that multiplies the color values of each pixel.
  • Finally, the opacity property is set to 0.75, which means that the image is slightly transparent, allowing some of the background color to show through.

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!