This is a solution to the Newsletter sign-up form with success message challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- Add their email and submit the form
- See a success message with their email after successfully submitting the form
- See form validation messages if:
- The field is left empty
- The email address is not formatted correctly
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Solution URL: Invailable
- Live Site URL: http://newsletter-sign-up-with-success-message.surge.sh
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Css Animation
- BEM (custom) convention
The event fired when an text input field is being filled is "input" and not "change". To learn more
I add a small slide up animation on page load
@keyframes slide-up {
0% {
transform: translate(0, 4rem);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}