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 by Kikino

Kikino02 160

@Kikino02

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?

.

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

Form validation…

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

.

Community feedback

P

@Jomagene

Posted

You've done a great job aiming for pixel-perfect accuracy. I especially like the gradient background color on hover, whith a nice shadow. However, on mobile devices, there is a significant gap between the paragraph content and the dismiss button that seems to be missing in your implementation. I also noticed that the container height is larger than in the design. For better responsiveness, consider using min-height instead of a fixed height, like this:

article {
    min-height: 67.5rem;
}

This approach, along with using percentages and padding for internal elements, will help maintain responsiveness. Your use of the <picture> element with <source> to handle image responsiveness is excellent too.

Keep up the great work, and let me know if this was helpful or if you'd like to discuss further topics!

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