Stats Preview

Do not give your images a fixed height. This will warp them, which is very unattractive. height: auto keeps the correct aspect ratio when zooming in/out. And yes ;-) I see that this correction breaks the layout. But I also made a compromise with my solution here, which I think is ok from my point of view.

Hey there! 👋 Here are some suggestions to help improve your code:

• The only heading in this component is the “Get insights that help your business grow” everything else will be wrapped in a paragraph element.

• The statistics at the bottom are a list, so it should be built using an unordered List element.

More Info:📚

MDN <ul>: The Unordered List element

• The images serve no other purpose than to be decorative; It adds no value. The alt tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

More Info:📚

https://www.w3.org/WAI/tutorials/images/

• To get the image to look like the FEM example, you are going to want to use the mix-blend-mode along with the multiply value and include a opacity with the value of 0.8.

Code:

img {
  opacity: 0.8;
  mix-blend-mode: multiply;
}

• 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.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding!🎄🎁

Replace <div class="container"> with the main tag and <h3> with <p> to fix the accessibility issue. give the p a class for the styling.

To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body. instead of giving .container position: absolute and its properties.

There is no need to give .container a fixed max-width value and a percentage width, instead give .container a fixed width value and give each flex-item a width of 50% . e.g: .container{ width:800px;} .section-body{ width: 50%} .section-img{width:50%;}

In the media query reduce the width of .container and give each flex-item a width of 100% e.g. .container{width: 330px} .section-body{width:100%}

Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To

Hope am helpful HAPPY CODING