stats-preview-card-component

To center .main-container on the page using flexbox, replace the height in the main with min-height: 100vh.

For the color of the image , give image-container a background-color of soft violet and the img a width and height of 100% , mix-blend-mode: multiply , object-fit: cover and opacity: 0.8.

.image-container{
background-color: hsl();
}
img{
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: multiply;
opacity: 0.8;
}

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hey there,

good work overall! Regarding background filter, you can use this instead of filter to get better results and match the design more:

• Remove this: filter: sepia(80%) hue-rotate(225deg) brightness(80%) saturate(420%);
• Then just give that container of the img a background color like hsl(277, 64%, 61%),
• then apply this css rules to the img: mix-blend-mode: multiply; opacity: .75;
• finally add display:block to the img to get rid of little space below it.

Hope you find my feedback helpful!