I used HTML, CSS , Flexbox and Media queries for completing this task.

Greeting Arun Kumar Singh, Congratulation on completing another frontend mentor project . Your solution looks nice.

• Use an unordered list with 3 items for the stats.

• The number and word have to be read together to make sense so need to be in the same meaningful element. so only a span or maybe strong tag needs to wrap the numbers. (You can set those to be display block via a class).

• You can apply border radius, overflow hidden to the component. So you don't have to set it to individual corners.

• For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. (in this challenge the image is decorative).

• You should use em and rem units .Both em and rem are flexible, scalable units which are translated by the browser into pixel values, depending on the font size settings in your design.

• Never use pixel for font-size.

• no need for any heights on this at all. All you need is a min height on the half of the card containing the image. It's rarely ever a good practice to set heights on elements Let the content dictate how tall something needs to be.

I recommend not to use <h1> on the same page more than once.

I really hope this feedback helps

Hi Arun,

Awesome solution, well done!

You could add mix-blend-mode: multiply; to your img and remove opacity from the img and the parent div to closer match the design to the challenge!

All the best!