Intro Component with Signup Form

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @kateneilsen, great job on this project!

  To help keep your CSS code organized and easier to use, I suggest implementing CSS Variables. This will come in handy when building large websites, using light/dark mode, etc…

  It’ll look something like this:

  :root {
    --primary-color: value;
    --secondary-color: value;
    --tertiary-color: value;
  }
  

  And to use the variables you’ll use the var() function. So it’ll look like this.

  h1 {
  color: var(—primary-color);
  }
  

  Heres are some articles regarding CSS Variables.

  You can also take a look at my projects and see how I use it.

  https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

  https://www.w3schools.com/css/css3_variables.asp

  Happy Coding!

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello @kateneilsen, Congratulations on completing this challenge!

  👨‍💻 Here are some tips to improve your solution code:

  Remove the flex: 1 to make the mobile version have the title near the form and avoid a huge gap:

  .intro-container {
      /* flex: 1; */
      color: white;
      text-align: center;
      align-items: center;
      justify-content: center;
      margin: 70px 20px 0px 20px;
  }
  

  Add a hover effect for the button to stylize it and make it more interactive:

  .blue-box:hover {
      filter: saturate(1.5);
      transition: ease 0.3s;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0