Responsive coming soon page using flex & utility classes

Hi there, great work.

I am seeing a couple of issues with your project.

First of all, your HTML has some validation errors. (You can validate your HTML here: https://validator.w3.org/)

The first issue is that we can't use any <section> or <div> inside of the <ul>. In this case, you can remove the <section class='desktop-error'> and it will work fine.

Another issue is that it is better not to use a trailing slash / on a self-closing element. For example, you are using an input tag as

<input type='text' ... />

which can be used as

<input type='text' ... >

You can read the reason here https://github.com/validator/validator/wiki/Markup-%C2%BB-Void-elements#trailing-slashes-in-void-element-start-tags-do-not-mark-the-start-tags-as-self-closing

The third issue is that we can't use <span> as a child of <ul>. Instead, you can put <span> inside the <li> tag.

For example, you are showing an error message as:

    <li>
            <input type="email" id="mail" name="user_email" placeholder="Your email address..."
              class="form-input border-round">
    </li>
    <span role="alert" id="emailError" aria-hidden="true">
              <em>Please provide a valid email address</em>
    </span>

But, it is better to do it this way,

<li>
            <input type="email" id="mail" name="user_email" placeholder="Your email address..."
              class="form-input border-round">
            <span role="alert" id="emailError" aria-hidden="true">
              <em>Please provide a valid email address</em>
            </span>
</li>

The final issue I am seeing is that the image is overflowing on smaller devices and that is because you are setting fixed width using rem unit.

I saw on line 75 of style.css that you are setting max-width: 100%; on img and picture tag. However, I saw no effect of using it.

Instead, you can set width: 100%; so that the image takes full width on the smaller screen and takes maximum 35.45188rem when the device width is larger than 35.45188rem.

This way you can make the image responsive.

Thanks.