Skip to content
Submitted 7 months ago

responsive mobile-first newsletter design using flexbox and js

Ah-med007•40
@Ah-med007
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

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

Proud I did this with little or no help this time, unlike the previous project, next time I would want to work on my speed.

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

I struggle with the media query, I still don't understand what the style guide mean by saying the specifications are created to mobile - 375 desktop 1440

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted 7 months ago

    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 has not been set yet. 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!

    0
    Ah-med007•40
    @Ah-med007Posted 7 months ago

    Thanks, this was helpful and it's a morale boost@0xabdulkhalid

    0
  • Ah-med007•40
    @Ah-med007Posted 7 months ago

    checkout my project, any form of help and suggestion will be appreciated

    0

Please log in to post a comment

Log in with GitHub

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