Stats preview card component

👾Hello Anshul,congratulations on your first solution!

Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

To get closer to overlay effect on the photo as the Figma Design its better you use mix-blend-mode. All you need is the div under the image with this background-color: hsl(277, 64%, 61%); and apply mix-blend-mode: multiply and opacity: 80% on the img or picture selector to activate the overlay blending the image with the color of the div. See the code bellow:

img {
mix-blend-mode: multiply;
opacity: 80%;
}

✌️ I hope this helps you and happy coding!

Hey @kriShnanshu-saini, some suggestions to improve you code:

• You have to go back and recode this.Your layout is needs work.

• The Background Image Property is only to be used on decorative images. NOT images that add value and serve a purpose. For this challenge you want to use the Picture Element. By using this element not are able to use different size images, you can also save on bandwidth, meaning your content loads faster.

• By using this element not are able to use different size images, you can also save on bandwidth, meaning your content loads faster.

Syntax:

  <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture>

Source:

https://www.w3schools.com/html/html_images_picture.asp

https://web.dev/learn/design/picture-element/

• Your image isnt responsive, here's a link to show how to that:

https://web.dev/learn/design/responsive-images/

• The statics shouldn't be wrapped in a section element, instead they need be created using an Unordered Lists.

• Your CSS Reset is extremely bare. You want to add more to it.

Here are few CSS Resets that you can look at and use to create your own CSS Reset or just copy and paste one that already prebuilt.

https://www.joshwcomeau.com/css/custom-css-reset/

https://meyerweb.com/eric/tools/css/reset/

http://html5doctor.com/html-5-reset-stylesheet/

Happy Coding!