stats preview component

Hello!

Good job!

To improve your project, I think you should:

1. Add a background color for the body tag, then the white bar at the bottom of the screen will disappear.

2. Pay attention, the image goes beyond the parent block. To avoid this, you should set the image height and width, in this case

object-fit: cover; 
max-width: 100%; 
height: 100%;

The object-fit property is necessary so that the aspect ratio of the image is not distorted.

1. The color of the picture as on the layout can be done using the mix-blend-mode property .

You can also use a pseudo-element for the image's parent container with position absolute and the opacity property.

I hope my comment was helpful!

Success in learning!

👾Hello რეზი კარანაძე, congratulations for your solution!

I saw your live site solution and I've to say you that your component is really good done, you've two fixes only 3 little things, the background, the alignment and the image color overlay.

You've add the background-color to the container and for this reason the background is not filling all the screen because it respect the container properties, so delete the background from the container and add it to the body.

The you can use min-height and display: flex to give an aligment to the container using its parent (the body). See the code below:

`` body { min-height: 100vh; font-size: 15px; font-family: 'Inter', sans-serif; display: flex; align-items: center; justify-content: center; background-color: hsl(233, 47%, 7%); }

To give it a final touch, add the proper overlay effect with `mix-blend-mode`.

img { mix-blend-mode: multiply; opacity: 0.8;}

Hope it helps and happy coding!