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
- Live Site URL: live site URL
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
-
using BEM methdology (block,element,modifier)
-
using linear gradient and hover on it with pesudo element
-
know that hover effect with gradient won't work on
<input type="submit">
but it work with<a>
write more clean and orgnaized code
- regex101 - This helped me for email validation using regEx
- css transiton with linear gradient
- LinkedIn - Ali AbdElbagi
- Frontend Mentor - @AliAbdElbagi