<div class="container my-5 px-0 z-depth-1">

​

  <!--Section: Content-->

  <section class="p-5 my-md-5 text-center" 

    style="background-image: url(https://mdbootstrap.com/img/Photos/Others/background.jpg); background-size: cover; background-position: center center;">

​

    <form class="my-5 mx-md-5" action="">

​

      <div class="row">

        <div class="col-md-6 mx-auto">

          <!-- Material form login -->

          <div class="card">

​

            <!--Card content-->

            <div class="card-body">

​

              <!-- Form -->

              <form class="text-center" style="color: #757575;" action="#!">

​

                <h3 class="font-weight-bold my-4 pb-2 text-center dark-grey-text">Log In</h3>

​

                <!-- Name -->

                <input type="email" id="defaultSubscriptionFormPassword" class="form-control mb-4" placeholder="Email">

​

                <!-- Email -->

                <input type="password" id="defaultSubscriptionFormEmail" class="form-control" placeholder="Password">

                <small id="passwordHelpBlock" class="form-text text-right blue-text">

                  <a href="">Recover Password</a>

                </small>

​

                <div class="text-center">

                  <button type="button" class="btn btn-outline-orange btn-rounded my-4 waves-effect">Warning</button>

                </div>

​

              </form>

              <!-- Form -->

​

            </div>

​

          </div>

          <!-- Material form login -->

        </div>

      </div>

​

    </form>

​

  </section>

  <!--Section: Content-->

​

​

</div>

​

​