Submitted 10 months ago

Newsletter Sign-up Form With Success Message (CSS Flexbox / JS)

Aykın Sancaklı•680

@aykinsancakli

Preview site View code

This is a solution for...Newsletter sign-up form with success message

HTML
CSS
JS

2junior

Design comparison

SolutionDesign

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

Petrit Nuredini•2,860
@petritnurediniPosted 10 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

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