Base Apparel coming soon Responsive page

You need to fix the html in this

• header goes above main, not within it
• section cannot only hold a background image. Use div, or I guess you could make it a pseudo element
• you don't need to use a section to wrap the rest of the content when it is the only content. It's already in main. Again, div should be used there.
• the alt text on chevron image should not include the word "button". It's already within a button. Just the word submit would be better
• add a required attribute on the input and a pattern attribute (with email regex) if you want to use html default validation

What is it exactly you're struggling with in the validation? It's good practice to have a go at your own custom validation if you can. All this would need to do is

• get the form and add event listener on submit that runs a function What that function does:
• get the input value
• make an email regex variable
• If input value matches regex, return true
• If not, toggle class on form like "has-error"
• over in css, if has-error class is present, style the input differently, display block on error message etc

If you do include custom validation, you will need to

• add aria-desciribedby on the input pointing to the id of the error message element
• give error message element an aria live attribute
• fill the error message in js, or change the display from none to block when has-error is present

I hope that helps

Do your own validation with JS using regex, you need very little code for that. Tip: 1. google email validation regex string. 2. use match function/method for regex. 3. use DOM for displaying errors.

@Rohitgour03 Hi Rohit, that's a nice try! It seems your image part is a bit narrower than the challenge design. And your title text is a bit smaller. But overall it's looking good :)