@Alex-Archer-I
Posted
Hi!
Neat work! I like that you manage to match design almost perfectly. And that's cool that you are practicing such thing like localStorage - it could be very useful =)
But I need to warn you that in real project it'll be a bit of bad UE if the page have to reload just to show modal window. So, better approach will be to switch display between two windows via JS.
Error message takes another line for two reasons. At first, it's a block element, so it tends to get all the line width, and second - the parent element of label, input and error message have a display: flex with a flex-directuion: column. To fix it you can put error message into the span inside label and set label to flex.
<label for="email">A label <span>An error message</span></label>
Or you can wrap label and error in the flexbox.
Oh, and a couple of semantic tips - you should use main tag for every page, and .benefits element is a list, so it's better to use ul and li here.
Hope that could help, good luck =)
P.S. I too began to understand benefits of mobile-first when I started bigger projects. That's one thing which come with exp =)
