Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 2 years ago

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

gsap
Kirsten ✨•460
@ofthewildfire
A solution to the Intro component with sign-up form challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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 🌟

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Kirsten ✨'s solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License