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 sign-up form with success message - HTML / CSS / JS

BT738844 600

@BT453567

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


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

Pleased with how my second JS project has gone.

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

No real major obstacles, however I am still new to JS so it took some time researching a solution.

What specific areas of your project would you like help with?

How my code could be improved and how it compares to professionally written code.

Community feedback

@0xabdulkhaliq

Posted

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have a suggestion regarding your code that I believe will be of great interest to you.

GRADIENT BACKGROUND DURING HOVER :

  • Looks like the component button hover state background got a solid color instead of gradient colors. We need to fix this!
  • Just add the following rules
button {
  transition: background 0.5s ease-out;
  background-image: linear-gradient(90deg,#242742 0%,#242742 50%,#ff477e 85%,#ff6a38 100%);
  background-size: 500%;
  background-position: left;
}

button::hover {
  background-position: right;
}
  • Now your component's button background for hover state has been set properly

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

0

BT738844 600

@BT453567

Posted

Hello @0xabdulkhalid

Thanks for the suggestion, I have now updated the solution with your recommendation.

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