Stats preview card component

Replace <div class="container"> with the main tag and <h2> with <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html

To center .container on the page using flexbox only instead of flexbox and margin, add justify-content: center to the body and remove the margin value in .container.

For the color of image, give .image a background-color of soft violet and add mix-blend-mode: multiply and opacity: 0.8 to the img .

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

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hello there 👋. You did a good job!

There are a few changes you can make to your solution to be better.

• Wrap "Improve Your Front-End Skills By Building Projects" with an <h1> instead of <h2> element. Each page should have at one <h1>.

• To improve your skills in the responsive layout you have to begin with Mobile-first.

• To color the image : Go to your HTML file and add a div at the bottom of the image

<div class="color"></div>

And in your CSS file

img{
    height: 100%;
    mix-blend-mode: multiply;
}
.img{
    background-color: hsl(277, 64%, 61%);
    position: relative;
}
.color{
    background-color: hsl(277, 64%, 61%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.2;
}

To understand better go to my solution maybe you can find it useful here is the 🌐 link.

I hope you find this helpful.