Responsive stats preview card, using flexbox and mobile first

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  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!

  Marked as helpful

  1

  ---

  

  Martina•150

  @PastoreMartinaPosted over 1 year ago

  @MelvinAguilar Thank you!! I didn't know any of the things you explained, this is very helpful :)

  0