---
title: Lockscreen
body_class: page-locked layout-full page-dark
---

{{#extend "layout-blank"}}

  {{#content "css" mode="prepend"}}
    <link rel="stylesheet" href="{{assets}}/examples/css/pages/lockscreen.css">
  {{/content}}


  {{#content "js_vendor" mode="append"}}
    <script src="{{global}}/vendor/jquery-placeholder/jquery.placeholder.js"></script>
  {{/content}}

  {{#content "js" mode="append"}}
    <script src="{{global}}/js/Plugin/jquery-placeholder.js"></script>
    <script src="{{global}}/js/Plugin/animate-list.js"></script>
  {{/content}}


  {{#content "body"}}

    <!-- Page -->
    <div class="page vertical-align text-center" data-animsition-in="fade-in" data-animsition-out="fade-out">
      <div class="page-content vertical-align-middle">
        <div class="avatar avatar-lg">
          <img src="{{global}}/portraits/3.jpg" alt="...">
        </div>
        <p class="locked-user">Machi</p>
        <form method="post" role="form">
          <div class="input-group">
            <input type="password" class="form-control last" id="inputPassword" name="password"
              placeholder="Enter password">
            <span class="input-group-btn">
              <button type="submit" class="btn btn-primary"><i class="icon md-lock-open" aria-hidden="true"></i>
                <span class="sr-only">unLock</span>
              </button>
            </span>
          </div>
        </form>
        <p>Enter your password to retrieve your session</p>
        <p><a href="login.html">Or sign in as a different user</a></p>

        <footer class="page-copyright page-copyright-inverse">
          <p>WEBSITE BY Creation Studio</p>
          <p>© 2018. All RIGHT RESERVED.</p>
          <div class="social">
            <a href="javascript:void(0)">
          <i class="icon bd-twitter" aria-hidden="true"></i>
        </a>
            <a href="javascript:void(0)">
          <i class="icon bd-facebook" aria-hidden="true"></i>
        </a>
            <a href="javascript:void(0)">
          <i class="icon bd-dribbble" aria-hidden="true"></i>
        </a>
          </div>
        </footer>
      </div>
    </div>
    <!-- End Page -->

  {{/content}}
{{/extend}}