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 with Success Message

nicky 100

@nicky202

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

Community feedback

yamen 190

@YamenAlzeiter

Posted

great job your solution looks nice but have some problems need to be fix:

  1. when click dismiss message, the user should be able to go back to sign-up page
  2. email is not displayed in success message, you can get the input value and put in the span that should display the email. Something like this: span.textContent = email.value;
  3. the approach you took to get to success message is creating another page, but you can actually create the message inside your index.html in another div with setting the display style to display: none, when the user click on it, the style should swap between the card and your new div. suggestions . if you want to display something in the middle of screen, you can style the body as display: flex; align-items: center; justify-content: center; instead of using position: absolute . you can use max-width: 365px as the card width instead of width: 72%, this will prevent the card from stretching in big screens.

hopefully these suggestion help you creating more stunning UI

Marked as helpful

0

@Sidd5arth

Posted

nice UI almost similar but you had not implemented you modal logic correctly, you must revert back to register page as you click on dismiss button also you have to show the entered email on the subscribed modal.

Marked as helpful

0

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