Newsletter sign-up form with success message

Hey there, you did a fantastic work! 😄

Consider these fixes to make it even better

1 - Use data attributes to display the form or the thank-you modal

<form class='sign-up' data-hidden=false>...</ form>
<section class='thank-you-modal' data-hidden=true>...</section>

[data-hidden=false] {
     display: none;
}

[data-hidden=true] {
      display: flex;
}

signUpForm.setAttribute('data-hidden', 'false');
thankYouForm.setAttribute('data-hidden', 'true');

2 - Use the picture tag to change the image depending the screen size

<picture>
    <source src="./assets/images/illustration-sign-up-desktop.svg" media="(min-width: 600px) />
     <img class="modal-img" src="./assets/images/illustration-sign-up-mobile.svg" alt="Form Illustration"/>
</picture>

3 - Look at your span tags. Most of them are paragraphs and should be a p tag.

<p class="description">
   Join 60,000+ product managers receiving monthly updates on:
</p>

If you find this useful, please mark it as helpful

Have an amazing day 😁

Namaste Namrata congratulations on completing this challenge🎉🎉

Your solution looks pretty good. But you can improve your code a little bit

body {
display: grid;
place-content: center;
min-height: 100vh;
}

This will center your newsletter perfectly and then you can remove

.sign-up-form, thank-you-form {
/*   width: 100%;  by default it will get a width of 100% so you don't need it  */
 /*   margin: 6rem auto 0;   We've centered the body so you don't need to use margins anymore🙂*/
}

And I'd also recommend to use the form tag instead of a .form div this will give you some additional keyboard functionality and will help with the pages accessibility.

I hope you found this helpful👍

Keep up the good work and have a very nice day🙂😄