Base Apparel Coming Soon page with Grid

Hey kevin , good job on completing the challenge , on reviewing your queries I was able to work on some of them . . . here are the necessary corrections to be made :-

• Reason for whitespace
  • so when you inspect your image-on-1024px vw you'll see that your img is centered inside the <picture> element , this is ok but it is also the reason why you see whitespace despite compartmentalizing your grid through grid-template-areas . . . to solve this issue you can do the following:-

picture img{
margin:auto;
width:100%
}

Literally this single addition of line solves your problem and fixes your layout issues

• Submit btn

  • Not that your approach is wrong but another alternative would have been to use flex on your form element and position it accordingly , this would have been more responsive ig

• Background-image

  • Well can't really help with that 😅😅. . .but you can try setting your background-size to a custom value like 70vw or whatever suits you, won't be perfect but still better than cover ig

• Other Issues

  • you forgot to add alt description in your images , not a big deal but quite a need when there is a problem fetching the image properly.
  • you forgot adding id to your input element which is bad in terms of accessibility , it literally presents itself as an issue in your console . . .now here you have a single input element , but once you start working with a lot of inputs inside a single page , it will become a big issue.

• Regarding JS

Thanks to you I got to know about the checkValidity() method, otherwise up until now I was using JS Regex and using .test method to validate my input values . . .there are still some issues that I would like to address . . . .

Your code really seemed repetitive , especially the constant addition and removal of classes, like you could have used toggle for a shorter and better approach . . . and since you used innerHTML to change the text inside error-message you could have done styling inside it using

errorMessage.innerHTML = !inputField.checkValidity() ?
`<small style="color: red;">Please provide a valid email address</small>`
    : `<small style="color: green;"><b>Success!</b> And immediately shredded.</small>`;

    inputField.style.borderColor = (!inputField.checkValidity()) ? "red" : "green";
    errorIcon.classList.toggle("hidden", inputField.checkValidity());
});
inputField.value = "";

This also avoids need of adding unnecessary classes inside your CSS. Make sure to add the required attribute in your html as well , for the checkValidity() method to work when inputField is empty, something like

<input type="email" placeholder="Email Address" class="input-field" required>

Look , the JS code I provided might not resonate with you very well, but I think its better to write a short , concise and maintainable code when you can . . .

Hope I was able to help, happy coding!! 🥂🥂