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

Intro w/ Signup || HTML CSS GRID + GSAP on title

#gsap
Kirsten βœ¨β€’ 460

@ofthewildfire

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi-hi, this is my solution for the Intro component with signup form πŸš€

Here is what I did:

  • Used GSAP text animation on the main title.
  • Did my best to remember that base responsiveness of HTMLβ€”no fixed elements.
  • Implemented regex for email validation.
  • Added check marks for successful entries (email, last name, first name, password).
  • Did my best to use Grid as much as possible.
  • I actually also tried to use BEM - not sure if I have done it properly, but, working on using it.

Improvements

  • I have a bunch of if/else statements with a whole load of repeated code in them, I would like to refactor and reduce that.
  • Change the colour of the pink/red on the 'Terms of service' below in the form container, it does not pass colour contrast minimums.

Any and all advice appreciated 🌟

Community feedback

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