Responsive Stats Preview Card Component Main using HTML and CSS

Hey @irfanhfzh,

ongratulation on completing the challenges. I noticed an issue in your project.

• add align-items: center; justify-content: space-evenly; and replace padding: 78px 121px 64px 70px; with padding: 0 30px; in the .card__content class.
• remove height: 180px; from the .card__summary class
• replace width: 350px; with width: 100%; and remove margin-top: auto; from the .card__socials class

Hi, Irfan!

One suggestion I have is to use <picture> element for the image. You will write less code if you make the image as an actual image element on the HTML than making it as background image.

I also recommend writing the CSS using the mobile-first approach (or using min-width media queries). The mobile layout is simple. So, you only need to add more complex styling for larger screen sizes.

The mobile-first approach often results in smaller CSS. As a result, the website loads faster.

Read more — Responsive design ground rules | Polypane

I hope this helps. Happy coding!