+

Signin






PixelzUI provides login/signin module for your web templates and themes.

Types

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

Classes

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

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

How to use

  1. Add .login as class attribute in <div>.
  2. <div class="login"></div>
  3. Add .login-mdl as extra in parent <div>.
  4. <div class="login login-mdl"></div>
  5. Create a panel as illustrated in panel section.
  6. Rename header as Signin/Login in .pnl-hdr.
  7. <div class="pnl-hdr">
     <b class="ftF">Signin</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>
  10. Add email & password input fields in .pnl-bdy as illustrated in input fields section
  11. <div class="pnl-bdy bg-gr t-wt">
     <input class="if if-t if-exp bg-lm t-wt br-wt" type="email" />
     <input class="if if-t if-exp bg-lm t-wt br-wt" type="password" />
    </div>
  12. Add remember me (checkbox), forgot password(link) & login (button) in .pnl-ftr. Choose button from button section.
  13. <div class="pnl-ftr bg-gr t-wt">
     <div class="cntrC ft0 ft-b">
      <a href="#" style="float:left;"><input type="checkbox" /> Remeber me!</a>
      <a href="#" style="float:right;">Forgot Password?</a><br />
     </div>
     <button class="btn btn-o btn-exp btn-psh bg-lm t-wt br-lm bg-gr-hvr t-lm-hvr">Login</button>
    </div>
=>* means (srnd, & rnd).

Demo

Square Signin

Semi-rounded Signin

Module Code

<div class="login login-mdl"> <div class="pnl pnl-srnd"> <div class="pnl-hdr bg-db t-wt"> <b class="ftC">Signin</b> <a href="#" style="float:right;padding:1% 0%;"><button class="btn btn-f btn-rnd bg-gr t-wt br-wt ft-b">Signup!</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="email" /> <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"> <a href="#" style="float:left;"><input type="checkbox" /> Remeber me!</a> <a href="#" style="float:right;">Forgot Password?</a><br /> </div> <button class="btn btn-o btn-exp btn-srnd btn-psh bg-nb t-wt br-nb bg-bl-hvr t-nb-hvr">Login <i class="fa fa-key"></i></button> </div> </div> </div>