Used Css and Html with responsive design

Hey @rilweezy120, some suggestions to improve you code:

• To center you content to your page, add the following to your Body Element:

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

• You want to increase the size of your component to better match the FEM example.

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

• The statistics section is a list of statistics, so it should be built using an Unordered List along with a List Items Element.

• Implement a Mobile First approach 📱 > 🖥

With mobile devices being the predominant way that people view websites/content. It is more crucial than ever to ensure that your website/content looks presentable on all mobile devices. To achieve this, you start building your website/content for smaller screen first and then adjust your content for larger screens.

Happy Coding! 👻🎃

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