Responsive newsletter sign up with success message main with flexbox
Design comparison
Solution retrospective
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
- @MatthewPCopePosted 4 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 helpful1@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@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 helpful1
Please log in to post a comment
Log in with GitHubJoin 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