Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Pod Request Access

drallasβ€’ 375

@Drallas

Desktop design screenshot for the Pod request access landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

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

P
Graceβ€’ 27,650

@grace-snow

Posted

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

drallasβ€’ 375

@Drallas

Posted

@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
P
Graceβ€’ 27,650

@grace-snow

Posted

I 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
Discord logo

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