insure landing page

Hey, great work on this one. Desktop layout looks fine but the hero-text on my end is being on top of the hero-image. I am using a 1366x768 monitor. The site at the moment is not responsive because if you go for like 530px upwards, the content on the site is not responding well, thus being hidden by the screen and creating horizontal scrollbar. Mobile layout looks fine but there is still a horizontal scroll and your breakpoint of 375px is too little for a mobile phone. Some phones have higher width on that one, the 375px on the design is not related to the breakpoint, adjusting it would be really great.

Some other suggestions on the site would be:

• For this, the preferred markup would be:

<header />
<main />
<footer />

This way, all content of your page will be inside their own respective landmark element. Using header and footer inside the main tag does not renders it as a primary landmark so using them outside it would be really great.

• Remember that a website-logo is one of the meaningful images on a site so use proper alt for it. Use the website's name as the value like alt="insure".
• Those 4 links could have been wrapped inside a nav since those are your primary navigational links:

<nav aria-label="primary">
  <ul>
    list of links in here, 4 links
  <ul>
</nav>

I used aria-label="primary" on this nav since I prefer to use another nav on the footer as well. Using the attribute makes the landmark unique.

• The hero-image could have used a more descriptive alt since it looks like a meaningful image on the site. Always be descriptive when you are using alt text on an image.
• Also, when using img tag, you don't need to add words that relates to "graphic" such as "image" and others, since img is already an image so no need to describe it as one.
• Those lines-images, you could have used them as a value for background property instead of using an img tag for it. This way, markup will be much clearer since there are no extra tags.
• When using a tag, always add the href attribute on it otherwise the a tag will not function properly. Check your usage of a tag on the site.
• Those 3 icons that you used could have used an extra aria-hidden="true" attribute alongside the alt="" so that they will be totally hidden for screen-reader users.

FOOTER

• Same with the company logo, use a more proper alt value.
• Those social-media links could be inside a ul element since those are "list" of links.
• Each a tag that wraps the social-media icon should have either aria-label attribute or sr-only text inside it, defining where the link would take them. For example, you should use facebook as the value if the link would take the user to facebook.
• Social-media image should be hidden since it is only a decorative image so use alt="" and aria-hidden="true".
• On those 4 columns of links, I would suggest to use nav instead of div for the .footer-nav-list selector since those links are still the website's navigational links and there no external links that are used in there as well so it is fine to use nav.

MOBILE

• Hamburger menu should be using a button since it is an interactive component.

SUPPOSING BUTTON IS USED

• The hamburger button should have a default attribute of aria-expanded="false" and it will be set to true when the users toggles it and vice-versa.

• The hamburger button should have either aria-label attribute or sr-only text inside it which defines what the button does. You could use aria-label="navigation dropdown menu"

• The img inside the hamburger-menu should have been hidden since it is only a decorative image.

• Lastly, just making the site more responsive for all sizes :>

Aside from those, great job still on this one.

WOW...! I think you are the best instructor in this whole website. I learn a lot from your advice and try to apply it to next project (but I have a little slow understanding so sometime I am not fully understand all you said)

Thank you a lot, you make me feel like I am doing a real project with real leader