3 Column card

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

• Your HTML should have a main element that will assist in identifying the main content of your site.

More Info:📚

MDN Main Element

• The “car images/icons” in this component are purely decorative; They add no value. So their Alt Tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

More Info:📚

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

• The headings in your component are being used incorrectly. Since the h1 heading can only be used once, it is always given to the heading with the highest level of importance. This component has three headings of equal importance, so the best option would be to use an h2 heading since it is reusable and it will give each heading the same level of importance.

• Your "buttons" were created with the incorrect element. When the user clicks on the button they should be directed to a different part of you site. The anchor tag will achieve this.

More Info:📚

MDN The Anchor element

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 to fix the accessibility issue. for more on semantic html visit https://web.dev/learn/html/semantic-html/ There is no need to give the body width:100vw; replace height:100vh with min-height:100vh to center .container on the page.

Give .container a fixed width in the desktop design instead of a percentage width: eg: .container{width:900px}. Give .container a height value of auto. Give each chid div of .container the same padding value for all the sides instead of giving p, .btn and img position: relative and its properties and a width value.

In the media query , there is no need for a width and height value and display: flex; in the body. Give .container a percentage width value of 80 0r 90.

Hope am helpful HAPPY CODING