Skip to content
Submitted 3 months ago

Responsive newsletter sign up with success message main with flexbox

Juan122113•90
@Juan122113
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?

I'm proud in the fact this was my first formulary made it in a formal web page, and it was not easy.

I will do different the URL of the images, adding the root folder manually, if not, the images not load.

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

The JS was difficult. I spend time figure out how to fix it.

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

Any comments are welcome.

Community feedback

  • Matt Cope•350
    @MatthewPCopePosted 3 months ago

    Overall it looks great, lots of good stuff going on. One thing.. I used to do the changing of images just like you did in the css but then someone on frontend mentor told me about using the <picture> tag in the html instead. So for my solution I did this:
    <picture> <source media="(min-width: 48em)" srcset="assets/images/illustration-sign-up-desktop.svg"> <img src="assets/images/illustration-sign-up-mobile.svg" alt="main newsletter image" class=""> </picture> Your way still works, just thought I'd throw that out there. Great job!

    Marked as helpful
    1
    Juan122113•90
    @Juan122113Posted 3 months ago

    @MatthewPCope thanks for the kind words and for the advice. Do you know what of the ways is the most efficient?

    0
    Matt Cope•350
    @MatthewPCopePosted 3 months ago

    @Juan122113 For most scenarios where an image is content-based and needs to adapt to different devices, the <picture> tag is more efficient. For background or decorative images that are part of the design, using a <div> with a background image in CSS might be simpler and more appropriate. Hope that helps!

    Marked as helpful
    1

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