Design comparison
Solution retrospective
I'm happy about the process of 'hacking' this one together.
Getting the button inside the text field (and stay inside) was a nice challenge. I avoided almost all absolute values. Just working top down applying values from Figma seems to work for me.
Feedback is welcome
- The 32 dots block is absolute positioned, it look good on mobile / tablet / desktop but is outside the flow of the document; should and how can i do this different!?
Community feedback
- @grace-snowPosted over 3 years ago
Hi @Drallas
This looks a bit broken on mobile because of height 100vh instead of min-height. You always want backgrounds to be able to grow just like anything else when working responsively.
In the html
- logo image alt should just be the company/product name, not say logo
- the other company logos are communicating valuable information so should not be aria hidden and should have alt descriptions. I would also add a visually hidden (screenreader only) heading above them to say something like 'companies that use Pod'
- the input needs a label
Positioning decorative motifs like those dots absolutely is ideal, I don't think they need to be in the document flow unless you're having trouble with the positioning in some way. Not sure I get the problem (if there is one)
Keep going though, it's looking good overall
1@DrallasPosted over 3 years ago@grace-snow Hello Grace
Thank you for the review. As always i will look into the remarks, trying to make it a bit better and learning for next one. :)
0@grace-snowPosted over 3 years agoI see you've added the validation. Nice
Just make sure there's a way to proceed with success and to remove the error message when the email is valid ☺
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord