<!--Main Navigation-->

  <header>

    <div class="py-4 text-left"

      style="background-color: white;

              height:120px;">

      <a role="button"  href="https://mdbootstrap.com/docs/standard/" target="_blank">

        <img src="https://postfiles.pstatic.net/MjAyMTA1MzFfMjA2/MDAxNjIyNDQxNzEwOTUy.jAzS89uJAvgjJX3Cw-vFGXT834ZG7oOfUMys_9pimBUg.KVTqY4DZcK_ePlJ2y3wP1f4gt_b8s4l4HPEAy_7vofcg.PNG.grace0119kds/Pacility.png?type=w966" 

             alt=""

             style="width:80px; height:80px;">

      </a>

​

    </div>

    <style>

      #intro {

        background-image: url(https://mumbrella.com.au/wp-content/uploads/2019/06/iStock-949190756-e1561510622966-800x450.jpg);

        height: 100vh;

      }

​

      /* Height for devices larger than 576px */

      @media (min-width: 992px) {

        #intro {

          margin-top: -58.59px;

        }

      }

​

      .navbar .nav-link {

        color: #fff !important;

      }

    </style>

​

    <!-- Background image -->

    <div id="intro" class="bg-image shadow-2-strong">

      <div class="mask d-flex align-items-center h-100" style="background-color: rgba(0, 0, 0, 0.8);">

        <div class="container">

          <div class="row justify-content-center">

            <div class="col-xl-5 col-md-8">

              <form class="bg-white rounded shadow-5-strong p-5">

                <!-- manager_id input -->

                <div class="form-outline mb-4">

                  <input type="ID" id="form1Example1" class="form-control" />

                  <label class="form-label" for="form1Example1">manager_id</label>

                </div>

​

                <!-- Password input -->

                <div class="form-outline mb-4">

                  <input type="password" id="form1Example2" class="form-control" />

                  <label class="form-label" for="form1Example2">password</label>

                </div>

                <button type="submit" class="btn btn-primary btn-block">Sign in</button>

              </form>

            </div>

          </div>

        </div>

      </div>

    </div>

    <!-- Background image -->

  </header>

  <!--Main Navigation-->

​

  <!--Footer-->

  <footer class="bg-light text-lg-start">

​

    <hr class="m-0" />

    <!-- Copyright -->

    <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">

      © 2020 Copyright Pacility

    </div>

    <!-- Copyright -->

  </footer>

  <!--Footer-->