#DailyUI - 001 Sign Up Form

#DailyUI - 001 Sign Up Form.markdown

#DailyUI - 001 Sign Up Form

Daily UI #001 -Sign Up Hint: Design a sign up page, modal, form, app screen, etc. (It's up to you!) Don't forget to share on Dribbble and/or Twitter when you're done.

A Pen by Ryan Trimble on CodePen.

License.

index.html

<div>
  <form action="submit">
    <h1>Sign Up</h1>
    <label for="name">Name</label>
    <input type="text" autofocus name="name" />
    <label for="email">Email</label>
    <input type="email" name="email" />
    <label for="password1">Password</label>
    <input type="password" name="password1" />
    <label for="password2">Confirm Password</label>
    <input type="password" name="password2" />
    <button>Join</button>
  </form>
</div>

style.css

/*colors*/
$background-color:#333;
$font-color: #FFF;
$focus-accent: lighten(#333, 10%);
$button: #27ae60;

/*other variables*/
$width: 90%;
$desktop-width:$width * (2/3);
$font-size: 1.25rem;
$h1-size: 3*$font-size;

body{
  background-color: $background-color;
  background-image: url(http://www.transparenttextures.com/patterns/argyle.png);
  font-family: 'Lato', sans-serif;
  color:$font-color;
}
div{
  width:$width;
  margin:0 auto;
  font-size:$font-size;
  form{
    display:flex;
    flex-direction:column;
    h1{
      font-size:$h1-size;
      text-align:center;
    }
    input, label, button, h1{
      margin:10px 0 0 0;
    }
    input, button{
      outline:none;
      font-size:$font-size;
    }
    input{
      border:5px solid #FFF;
      transition:border .3s;
      padding:10px;
    }
    input:focus{
      border: 5px solid $focus-accent;
      transition:border .3s;
    }
    button{
      margin-top:30px;
      padding:15px;
      color:$font-color;
      background: $button;
      border:none;
    }
    button:hover{
      background:lighten($button, 5%);
    }
    button:active{
      background:darken($button, 5%);
      outline:none;
    }
  }
}

@media screen and (min-width:800px){
  div{
    width:$desktop-width;
  }
}