Stats-preview-card-component with html, css.

👾Hello Maksim, Congratulations on completing this challenge!

You did a good work putting everything together in this challenge, something you can do to improve the image that needs to change between mobile and desktop is to use <picture> instead of <img> wrapped in a div. You can manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Here’s a guide about how to use picture: https://www.w3schools.com/tags/tag_picture.asp

To make the image have a better fit inside of it, make the component image responsive with display: block and max-width: 100% (this makes the image fit the column/div size) and respect the component size while it scales down. To make it crop while scaling use object-fit: cover.

img {
    display: block;
    object-fit: cover;
    max-width: 100%;
}

The way you’ve applied the purple color is fine, but if you want the exact color tone of color of the challenge designs, you need to use mix-blend-mode to make the color blend between the image and the background-color of the container. See the steps below to apply to the img or picture selector:

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

✌️ I hope this helps you and happy coding!

Hello

Try to get this closer to the design if you can

• border radius
• image doesn't need the pseudo at all, you can give that side of the card a background color. Use mix-blend mode and opacity to make it more like the design
• image display block (the pseudo and image are misaligned atm)
• center text properly on all mobiles - it is off center on my phone

I think you need to lose all the percentages you're using in your css too. You're making it very difficult for yourself using % for things like padding and margin. Rem would give much better control. You don't want these spacings to all shift so much and in a full webpage you'd struggle to create the designs vertical rythym

Good luck