Responsive Stats Preview Card using HTML & CSS(flexbox layout)

Hey @jonexist, some suggestions to improve you code:

• You do not want to have or use empty divs in you HTML code, since this is considered to be bad practice. Instead use the Picture Element

Picture Element will allow your to switch between images in different breakpoints

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/

• The stat numbers are not headings. They should be wrapped in a Paragraph Element.

• The Section Element is being used incorrectly. Instead and Article Element will serve as the component's container and each side should be a simple Div with a class.

• Your content is not fully responsive. Here is a link to Google Developer’s site that will teach you how make it 100% responsive:

https://web.dev/learn/design/

Happy Coding! 👻🎃

👾Hello @jonexist, 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!