Design comparison
Solution retrospective
I'm happy i can get the styling as close to the design including the mobile design. I was able to make this using single page HTML. making the form validation was also pretty easy.
What challenges did you encounter, and how did you overcome them?I was thinking about whether to make this as a single page or make another page for success message. but i decided to make it single page by changing the form and success message display on CSS.
What specific areas of your project would you like help with?I wonder if you can use backend like php to display the success message and how to do it.
Community feedback
- @ePauloPosted 5 months ago
Looks very good. Both desktop and mobile designs are very similar to the designs provided... well done.
Only one suggestion: you could have set the newletter image in your mobile-first CSS styling (instead of in your HTML) then reset the link to the desktop image in the media query for the desktop styling updates.
This is my CSS code for the newsletter image in my mobile styling: img.main-image { content: url('./assets/images/illustration-sign-up-mobile.svg'); width: 375px; height: 284px; object-fit: cover; }
Marked as helpful0@Vanillatte68Posted 5 months ago@ePaulo
Thanks for the suggestion, I'll try it the next time I do another challenge
0
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