Hi I'd recommend that you go back and spend a little more time on this to get it as close to the design as possible. Particularly:
- adding the background image
- vertically centering content on desktop (min height 100vh and some grid rows should help, or outer wrapper like body could be a flex item)
- reducing space at the top a little on mobile
- reducing heading line height
- getting font sizes closer on desktop
- giving form consistent padding
- making it accessible (labels can't be blank)
- reducing padding in the try it free block
- not using large pixel values on things like margin - use other methods for positioning if possible.
I know it sounds like a long list, but most are just small attention to detail things. If you nail the small stuff now your later work will really shine.
Good luck with it! ☺
@frankiefab100
Posted
@grace-snow thanks for the feedback.
@yustinayasin
Posted
@grace-snow why the label can't be blank? which part of the code represents that?
@yustinayasin you have things like <label for="firstname"></label>. If you include a label element like that it needs to have text inside. This allows search engines and assistive technology to know what the input is for.
If the design has no visual label either you need to include the label element with text but make it visually hidden with a class like <label for="firstname" class="sr-only" >First name</label> (look up what that class does to accessibility hide elements)
OR You don't include the label elements, but you include aria-label attribute on the input itself.
Every input needs a label so assistive tech users know what they are expected to enter. With your current code they have no way of knowing
@yustinayasin
Posted
@grace-snow thanks for the explanation
