fylo-dark-theme using CSS Grid

Hey, awesome work on this one. Layout in desktop seems fine, it is responsive and the mobile state looks fine as well.

Some suggestions would be:

• The nav element could have been wrapped inside a header element. Also, a typical structure of a site looks like:

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

This way, all contents are being wrapped by a landmark element.

• Lose the word logo on the website-logo, use only alt="fylo" avoid using words that relates to "graphic" such as "logo, icon, images.." it is already an image, no need to describe it as one.
• The list of links on the right side of the logo should only be the one inside the nav element since those are your site's navigational links.
• Hero-image alt could have been left empty alt="" since it is only decorative image.
• The text after the h1 shouldn't be a heading tag, it is only a regular text so use p tag on it.
• For the four icons after the hero-section, use alt="" on it, when using img don't forger to include the alt attribute. If you don't add this, screen-reader will announce something, usually it says the the image source is.. I forgot, but always include alt.
• Again, the text on each of the icon after its heading tag should not be a heading tag, just use p tag on it. Only use heading tag, if you think the text gives an overview to what is the content of the section it is being wrapped.
• informations__img selector should have used alt="" as an attribute on its img inside since it is only decorative.
• Avoid using multiple h1 on a webpage, only use at least 1 per page.
• Again, on this same section, change the heading tag to use p tag.
• see how fylo works link's img for the arrow-icon should have alt="" and aria-hidden="true" on it as well, again it is only decorative images.
• The alt for each of the testimonial person's image should be using their name as the value like alt="Satish Patel".
• Good choice for using heading tag for each of the person's name, but, when using heading tag, always make sure that you are using them incrementally. If you use h5 make sure h1, h2, h3, h4 are present before it.
• input for the mail section should have either a label which has sr-only class or an aria-label, the value for both defines what the input does.
• For the error-message, avoid using only opacity to show the error message. It is invisible for sighted users yes, but screen-reader will still pick them up, instead, use visibility property as the transition styling. This hides to all user and will only show if it has visibility: visible.
• The error-message should have an id attribute. The id will be referenced by the input element. For example, when the input is wrong, your javascript should add aria-invalid="true" on the input element, this informs a user that their input is wrong, then same, if the input is wrong, you add aria-describedBy attribute, and the value of that attribute refers to the id of the error-message this way, users will know what kind of error they had made, based on the text of that error-message. I have this simple snippet where you can look on how those arias could be used. If you want to make it even more accessible, look up aria-live.

FOOTER

• Website-logo-img should have alt="fylo as the attribute.
• The alt for the location icon should have used alt="" since it is decoration only same as for the other 2 icons.
• The links on the right side could be wrapped inside a nav element, since those are still your navigational links. Using ul as well inside it would be really great.
• Social-media-links should be using a tag for each, since it is a "link".
• Using ul as well for the social media links would be great.
• On the a tag what will wrap the social-media, it should have either aria-label attribute or an sr-only text inside it, describing where this link would take the user, on the facebook, the value should be "facebook".