### Login

- Login page has a more compact structure and generally needs fewer scripts and stylesheets unless you want to include some extra plugins for some form fields.
  For more info about this please see Login Layout
- Basically it consists of three optional widget boxes for login, signup and password sections.
- You should add `.login-layout` class to
  body element:

      <body class="login-layout">
      or
      <body class="login-layout blur-login">
      or
      <body class="login-layout light-login">

- There are three optional background styles:
  1. `.login-layout` default login background
  2. `.login-layout.blur-login` blurred image background
  3. `.login-layout.light-login` light login background
- The (optionally) three boxes are inside `.login-container`:

- Inside login box, there are the optional social login buttons inside `.social-or-login` and `.social-login` container:

         Or Login Using

- The bottom links that are used to move between boxes and are inside `.toolbar` which have a class only used to color them:

           Back to login

      or

              I forgot my password

              I want to register

  Each link has a `data-target` attribute.
- `data-target` is the selector of target. The following code should also be included in your page for switching between pages:

      jQuery(function($) {
       $(document).on('click', '.toolbar a[data-target]', function(e) {
          e.preventDefault();
          var target = $(this).data('target');
          $('.widget-box.visible').removeClass('visible');//hide others
          $(target).addClass('visible');//show target
       })
      })