+

Signup






PixelzUI provides register/signup module for your web templates and themes.

Types

Following are the two types of signup module.
  1. Square
  2. Semi-rounded
=>Other types are based on color class(es).

Classes

Following are the classes to use signup in your web-page.

  1. .signup
  2. .signup-mdl
.
=>Other classes are based on color class(es).

How to use

  1. Add .signup as class attribute in <div>.
  2. <div class="signup"></div>
  3. Add .signup-mdl as extra in parent <div>.
  4. <div class="signup signup-mdl"></div>
  5. Create a panel as illustrated in panel section.
  6. Rename header as Signup/Register in .pnl-hdr.
  7. <div class="pnl-hdr">
     <b class="ftF">Signup</b>
    </div>
  8. Add signup button in .pnl-hdr.
  9. <a href="#" style="float:right;padding:1% 0%;">
     <button class="btn btn-f btn-rnd bg-sb t-wt br-wt ft-b">Signup!</button>
    </a>
=>* means (srnd, & rnd).

Demo

Square Signup

Semi-rounded Signup

Module Code

<div class="signup signup-mdl"> <div class="pnl pnl-srnd"> <div class="pnl-hdr bg-db t-wt"> <b class="ftC">Signup</b> <a href="#" style="float:right;padding:1% 0%;"><button class="btn btn-f btn-rnd bg-sb t-wt br-wt ft-b">Login!</button></a> </div> <div class="pnl-bdy bg-bl t-wt"> <input class="if if-t if-exp bg-sb t-wt br-wt" type="text" placeholder="First Name" /> <input class="if if-t if-exp bg-sb t-wt br-wt" type="text" placeholder="Last Name" /> <input class="if if-t if-exp bg-sb t-wt br-wt" type="text" placeholder="date of Birth" /> <div class="cntrC"> <b class="ft5 t-sb">Gender: </b> <label class="tglr tglr-h tglr-rnd"><input type="checkbox"><span class="switch bg-sb"></span></label> </div> <input class="if if-t if-exp bg-sb t-wt br-wt" type="email" /> <input class="if if-t if-exp bg-sb t-wt br-wt" type="password" /> <input class="if if-t if-exp bg-sb t-wt br-wt" type="password" /> </div> <div class="pnl-ftr bg-bl t-wt"> <div class="cntrC ft0 ft-b"> <input type="checkbox" /> I agree to <a href="#" class="t-sb">privacy policy</a> and <a href="#" class="t-sb">terms & condition</a> </div> <button class="btn btn-o btn-exp btn-srnd btn-psh bg-nb t-wt br-nb bg-bl-hvr t-nb-hvr">Register <i class="fa fa-paper-plane-o"></i></button> </div> </div> </div>