Newsletter Sign-up Form With Success Message (CSS Flexbox / JS)
Design comparison
Solution retrospective
HTML <picture> tag is very useful when we want to switch the image source according to different screen sizes. We set up different sources, and the first source that fits the preferences is the one being used.
Example ⬇️
<picture>
<source
srcset="assets/images/illustration-sign-up-mobile.svg"
media="(max-width: 600px)"
/>
<img
src="assets/images/illustration-sign-up-desktop.svg"
alt="example"
/>
</picture>
Another one completed 🥳
Community feedback
- @petritnurediniPosted 9 months ago
Congratulations on completing your latest project! 🎉
It's fantastic to see your code so well-structured and your results hitting the mark with such precision. The use of CSS variables and the <picture> HTML element in your project is particularly impressive. These choices not only enhance the design and functionality but also show your commitment to modern, efficient web practices. 👏
Great job on this achievement! Keep up the excellent work, and I'm looking forward to seeing more of your projects in the future. Your progress and dedication are truly inspiring. 🌟 Keep it going!
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