Html ad Css

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

• Your CSS Reset is extremely bare and being underutilized. To fully maximize your CSS reset, you want to add more to it.

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

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

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

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

• 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

• This challenges requires the use of two images 🎑 for different breakpoints. The picture element will facilitate this.

Here is an example of how it works: EXAMPLE

Syntax:

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

More Info:📚

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

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, <h2> with <p> and <div class="attribution"> with the footer tag to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/

Give .main a fixed width value instead of a percentage width value. e.g.: .main{width: 800px;} give the img a max-width of 100% and display: block.

Add a background-color of soft-violet , background-blend-mode: multiply and opacity: 0.7 to .image, there is no need for .overlay when you apply this.

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

Hope am helpful HAPPY CODING