Intro component with sign up form

Community feedback

• 

  Ovidiu-Antonio•3,125

  @ovidiuantonioPosted almost 4 years ago

  Hello Chris,

  Very nice solution! You did a very good job!

  I have a few tips that can help you making this solution even better:

  • add a max-width and margin: 0 auto; to the main container, because on a bigger screen the text and the card are not anymore in the center of the page
  • you can add cursor: pointer; to the "Terms and services" too, for a better UX
  • and don't forget to add the shadows to the purple container and the form

  Happy coding and keep going!

  2

  ---

  

  Chris•240

  @Chris94LeePosted almost 4 years ago

  @ovidiuantonio Thank you.

  I completely forgot to check for bigger screens than 1440. What would the best way to center the main container vertically? As I added in your suggestion with margin and max width, but I'm unsure on the best way to center it vertically. The way I'd usually do this is just set height:100vh. Is this bad practice, or is there a better way to do it?

  0

  

  Ovidiu-Antonio•3,125

  @ovidiuantonioPosted almost 4 years ago

  @twister896 if you want to center it horizontally and vertically at the same time you can use position absolute.

  On the body you can add min-height: 100vh; and position: relative; On the mainContainer you can add position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

  (and forgot about th max-width and the margins you applied on the mainContainer)

  1
• Account deleted

  Great job on this challenge i suggest to add (cursor: pointer;) for the button it will make better in my opinion , overall it's fantastic.

  2

  ---

  

  Chris•240

  @Chris94LeePosted almost 4 years ago

  @limtedtorni000 Thank you, I'll add that in now!

  1