stats-preview-card-component-main using basic HTML and css

Hi there! 👋

The most important thing is the quality not the quantity. So, I don't think you need to think about the code length of this project.

Here are some suggestions for improvements.

• The image is a decorative image. So, leave the alternative text empty (alt="").
• Swap the img aside with a div. aside should be used to wrap any content that is not the main content.
• All the page content should live inside the main element.
• The statistic numbers are not headings. You can wrap each of them with span instead.
• Never use 100vw on the body as it doesn't account for scrollbars when present. It may only ever introduce potential overflow/scroll bugs.
• Never limit the height of the body element. It will not allow the users to scroll the page if the page content needs more height. You can see the issue by looking at the site on a mobile landscape view. So, my recommendation is to use min-height instead.
• I highly recommend writing the styling using the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.

I hope this helps! Happy coding!

👾Hello , congratulations on your 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%;
}

Here's a good article explaining these effects with mix-blend-mode: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

✌️ I hope this helps you and happy coding!