Skip to content
Submitted 9 months ago

Responsive & Animated Newsletter Sign-Up Form

accessibility, animation, bem
Martin Liesche•590
@marliedev
A solution to the Newsletter sign-up form with success message challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

smooth animations (display-property animation now works!)

What challenges did you encounter, and how did you overcome them?

i first tried to set up the success-message container as part of the form-container. My idea was to make a smooth animation from the bigger form-container to the smaller succes-message container. But i failed and couldn't manage to get a smooth width/height animation, because of the paddings of hidden containers. This cost me a lot of time...

Code

Please log in to post a comment

Log in

Community feedback

  • Csaba Hell•220
    @hellcsaba

    Hi Martin,

    I checked your solution and you did a great job! I really like the smooth animations and responsiveness. I saw that you also used semantic HTML, BEM notation and SCSS.

    The only thing I don't understand that in your solution tags you gave #react but it didn't seem like you used it.

    Happy coding!

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