This was built with mostly Vanilla HTML/CSS and JS. I think I covered all viewports from 320px to 2560px screen width. Added little animations on the incorrect email and correct email, I think the accepted email animation could be better but I couldn't think of anything simple that would make sense.
Let me know if you would do anything differently ✌
Fixed the label and added some animations to it if anyone wants to check it out, tried getting the website perfect the screenshot stops being a few pixels off but after checking I matched the figma, idk why its still off?
your github pages is showing the readme instead of the index.html, I assume the reason is your files are inside a doc folder but you didn't link the github pages setup to that folder.
The SVG images could be linked with an <img> tag instead of using the raw SVG code.
like below:
In this example we use "./" in the beginning of the link to say current directory then the normal folder structure after that. This is called the relative path, its relative to the index.html file location.
Also look into semantic HTML, the accessibility report is yelling at you because it expects to find a <main> tag which defines the main content on the page for people that use screen readers.