BaseWeb

← Back
Download

Sign In

This is an example sign in form that features a reset password link, remember me and create account button.

Forgotten your password?

or

<form>
  <header class="form-header text-center">
    <h2>Sign In</h2>
    <p>This is an example sign in form that features a reset password link, remember me and create account button.</p>
  </header>
  <div class="form-group">
    <label for="input-username" class="hide">Username</label>
    <input type="text" class="input" id="input-username" placeholder="Username">
  </div>
  <div class="form-group">
    <label for="input-password" class="hide">Password</label>
    <input type="password" class="input" id="input-password" placeholder="Password">
  </div>
  <div class="form-group">
    <div class="input-group inline">
      <label class="checkbox"><input type="checkbox"> Remember Me</label>
      <p class="note float-right"><a href="#">Forgotten your password?</a></p>
    </div>
  </div>
  <footer class="form-action text-center">
    <div class="input-group inline">
      <button class="button primary">Sign In</button>
      <span class="note input-align"><em>or</em></span>
      <button class="button default">Create Account</button>
    </div>
  </footer>
</form>

form {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  background: $white;
  background-clip: padding-box;
  border: 3px solid rgba($black, 0.1);
  @include border-radius();
}
form .form-header,
form .form-group,
form .form-action {
  margin: 0;
  padding: 20px;
}
form .form-group,
form .form-action {
  border-top: 1px solid rgba($black, 0.1);
}