Skip to content
Submitted about 1 year ago

Stay updated! The hardest challenge i did

EExoduss•110
@EExoduss
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Newsletter sign-up form with success message
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

The hardest challenge i did so far.

Maybe it's not the best way to do it. I think i abused with javascript.

Community feedback

  • Nadun Dhananjaya•210
    @nadun-dhananjayaPosted about 1 year ago

    Hello 👋. Congratulations on successfully completing the challenge! 🎉

    I have other recommendations regarding your code that I believe will greatly interest you.

    HTML and CSS

    • I recommend enhancing the structure of your HTML document by incorporating a div tag to encapsulate the card content within a container, allowing for better organization and improved browser understanding. This can be achieved by creating a container div with a class of "container" to house the entire content.
    <html lang="en">
  <head>
    <-- Your head content here -->
  </head>
  <body>
      <-- container -->
      <div class="container">
         
     </div>
 </body>
</html>
    • Within this container, you can include your a header section and main section of your newsletter card.
    <html lang="en">
  <head>
    <-- Your head content here -->
  </head>
  <body>
      <-- container -->
      <div class="container">
          <header>
                <-- Your head content here -->
          </header>
         <main>
                <-- Your main content here -->
          </main>
     </div>
 </body>
</html>
    • To ensure a visually appealing layout, apply the following CSS styles to the container class.
    .container {
    display: flex;
    flex-direction: row-reverse;
}

    Additionally, style the body tag with CSS to ensure the container is positioned at the center of the screen.

    body {
    min-height: 100vh;
    padding: 2rem;
    background-color: var(--DarkSlateGrey);
    display: flex;
    justify-content: center;
    align-items: center;
}

    I hope it was helpful, you are great, keep up the good work 👍

    Happy coding! 😎😎😎

    Marked as helpful
    0
    EExoduss•110
    @EExodussPosted 12 months ago

    @nadun-dhananjaya Hi,

    Thank you really much for your help. I appreciate it so much.

    I'll try to fix all this project following your suggestions (i see that the screenshot of the solution is far from the design).

    Anyway, thank you!

    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