Registration Form

By Rafi

F6
#
form registration
How do I use This?

A stylish registration form that works well in a modal, dropdown or stand-alone.

HTML
<div class="form-registration">

  <figure class="form-registration-img">
    <img src="https://images.pexels.com/photos/221205/pexels-photo-221205.jpeg?h=350&auto=compress&cs=tinysrgb" alt="" />
    <figcaption class="form-registration-img-caption">Experience everything Yeti+ has to offer through Yeti e-shoppe and our related apps.</figcaption>
  </figure>

  <form class="form-registration-group" action="">
    <input class="form-registration-input"  type="email" placeholder="Your email">
    <input class="form-registration-submit-button" type="submit" value="Continue">
    <p class="or-divider"><span>or</span></p>
    <a class="form-registration-social-button" href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i> Sign Up With facebook</a>
    <p class="form-registration-member-signin">Already a member? <a href="#">Sign in</a></p>
    <p class="form-registration-terms"><a href="#">Terms &amp; Conditions</a>|<a href="#">Privacy</a></p>
  </form>

</div>


$form-registration-bg: $white;
$form-registration-highlight-color: $primary-color;
$social-brand-facebook: #3b5998;

.form-registration {
  background: $form-registration-bg;

  .form-registration-img {
    position: relative;

    .form-registration-img-caption {
      position: absolute;
      padding: 0.5rem;
      text-align: center;
      width: 100%;
      bottom: 0;
      background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(1, rgba($white, 0.3)), /* Top */
        color-stop(0, rgba($white, 1.0)) /* Bottom */
      );
    }
  }
}

.form-registration-group {
  padding: $global-padding;

  .form-registration-input {
    border-radius: $global-radius;

    &:focus {
      border: 2px solid $form-registration-highlight-color;
      box-shadow: 0 0 5px $form-registration-highlight-color;
    }
  }

  .form-registration-submit-button {
    text-transform: uppercase;
    margin-bottom: 0;
    @include button(true, $primary-color, auto, auto, solid);
    border-radius: 5000px;
  }

  .form-registration-social-button {
    text-transform: uppercase;
    font-size: 16px;
    @include button(true, $social-brand-facebook, auto, $social-brand-facebook, hollow);
    border-radius: 5000px;

    .fa {
      vertical-align: text-top;
      margin-right: 0.5rem;
    }
  }

  .form-registration-member-signin {
    text-align: center;
    font-weight: bold;
    font-size: 14px;

    a {
      margin-left: 0.25rem;
    }
  }

  .form-registration-terms {
    text-align: center;
    font-size: 12px;

    a:first-child {
      margin-right: 0.25rem;
    }

    a:last-child {
      margin-left: 0.25rem;
    }
  }

  .or-divider {
    position: relative;
    margin: 1.5rem 0px;
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    height: 0px;
    border: 1px solid $light-gray;

    span {
      color: $dark-gray;
      @include horizontal-center;
      top: -12px;
      background-color: $form-registration-bg;
      padding: 0 8px;
    }
  }
}



.form-registration {
  background: #fefefe;
}

.form-registration .form-registration-img {
  position: relative;
}

.form-registration .form-registration-img .form-registration-img-caption {
  position: absolute;
  padding: 0.5rem;
  text-align: center;
  width: 100%;
  bottom: 0;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(1, rgba(254, 254, 254, 0.3)), color-stop(0, #fefefe));
}

.form-registration-group {
  padding: 1rem;
}

.form-registration-group .form-registration-input {
  border-radius: 0;
}

.form-registration-group .form-registration-input:focus {
  border: 2px solid #1779ba;
  box-shadow: 0 0 5px #1779ba;
}

.form-registration-group .form-registration-submit-button {
  text-transform: uppercase;
  margin-bottom: 0;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 1rem 0;
  padding: 0.85em 1em;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  background-color: #1779ba;
  color: #fefefe;
  display: block;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  border-radius: 5000px;
}

[data-whatinput='mouse'] .form-registration-group .form-registration-submit-button {
  outline: 0;
}

.form-registration-group .form-registration-submit-button:hover, .form-registration-group .form-registration-submit-button:focus {
  background-color: #126195;
  color: #fefefe;
}

.form-registration-group .form-registration-social-button {
  text-transform: uppercase;
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 0 1rem 0;
  padding: 0.85em 1em;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: 0;
  transition: background-color 0.25s ease-out, color 0.25s ease-out;
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  border: 1px solid #3b5998;
  color: #3b5998;
  display: block;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  border-radius: 5000px;
}

[data-whatinput='mouse'] .form-registration-group .form-registration-social-button {
  outline: 0;
}

.form-registration-group .form-registration-social-button, .form-registration-group .form-registration-social-button:hover, .form-registration-group .form-registration-social-button:focus {
  background-color: transparent;
}

.form-registration-group .form-registration-social-button:hover, .form-registration-group .form-registration-social-button:focus {
  border-color: #1e2d4c;
  color: #1e2d4c;
}

.form-registration-group .form-registration-social-button .fa {
  vertical-align: text-top;
  margin-right: 0.5rem;
}

.form-registration-group .form-registration-member-signin {
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}

.form-registration-group .form-registration-member-signin a {
  margin-left: 0.25rem;
}

.form-registration-group .form-registration-terms {
  text-align: center;
  font-size: 12px;
}

.form-registration-group .form-registration-terms a:first-child {
  margin-right: 0.25rem;
}

.form-registration-group .form-registration-terms a:last-child {
  margin-left: 0.25rem;
}

.form-registration-group .or-divider {
  position: relative;
  margin: 1.5rem 0px;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  height: 0px;
  border: 1px solid #e6e6e6;
}

.form-registration-group .or-divider span {
  color: #8a8a8a;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  top: -12px;
  background-color: #fefefe;
  padding: 0 8px;
}
JS

Similar Building Blocks

forms

Rounded Input Group

F6
by Rafi
forms

Floating Label Form

F6
by Rafi
forms

Animated Expanding Search Form

F6
by Harry Manchanda