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

Newsletter signup | Framer-motion, Scss & Nextjs

@sirbiel100

Desktop design screenshot for the Newsletter sign-up form with success message coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello and welcome to my solution!! 👋👋👋

Feel free to give your feedback and help me to improve!!

~Gabriel Crispim

Community feedback

Arne 1,110

@Dudeldups

Posted

Hello! :)

Just some recommendations: The animation on your button is huge! Sometimes a decent design is visually more appealing.

Also you should not declare font-sizes in pixels. Use rem to declare font-sizes (or maybe em if you need to)

Media queries should always be declared with em, not with pixels.

In your email validation it's better to use input type="text" and then programatically check if the user entered a valid email address. The downside of using input type="email" is, you can enter "a@a" and submit the form.

Do not use width: 100vw. It does weird things when a side scrollbar appears.

1

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