I should do a mobile-first site - Stats Preview Card Component

👾Hello @weakiam, congratulations on your solution!

Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

To get closer to overlay effect on the photo as the Figma Design its better you use mix-blend-mode. All you need is the div under the image with this background-color: hsl(277, 64%, 61%); and apply mix-blend-mode: multiply and opacity: 80% on the img or picture selector to activate the overlay blending the image with the color of the div. See the code bellow:

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

Here's a good article explaining these effects with mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

✌️ I hope this helps you and happy coding!

Hey @, Congratulations on completing this challenge!

Here is my feedback:

1. To avoid the design going below the page, add this min-height: 100vh; to the body.

i.e. body { min-height: 100vh; background-color: hsl(233, 47%, 7%); display: block; color: white; font-family: 'Inter', sans-serif; }

Keep doing a good job!

I would like to suggest you few thing on this solutions if you don't mind.

1. It's not a good practice to use a fixed unit value such as "px". You can use the "rem" and "em" unites instead. When users zoom in into page, fixed values like px doesn't increase, and it gives weird results sometimes. So, convert all the px values to rem.

2. When you use media queries, try to use "em" unit instead of px on your breakpoints. It is very important for making your page more responsive to all kinds of devices.

3. You could use the (mix-blend-mode: multiply) instead of an overlay with opacity which made the image grayish.

Overall, you did a great job finishing this challenge.

Thanks!