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

​

  <!--Section: Content-->

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

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

​

    <!-- Section heading -->

    <h3 class="text-center font-weight-bold text-white mt-5 mb-3">Contact Us</h3>

    <!-- Section description -->

    <h4 class="text-center font-weight-normal text-white mx-auto mb-4 pb-2">We love to hear from you!</h4>

​

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

​

      <div class="row">

        <div class="col-md-4 mb-4">

​

          <!-- Name -->

          <input type="text" id="name" class="form-control" placeholder="Name">

​

        </div>

        <div class="col-md-4 mb-4">

​

          <!-- Email -->

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

​

        </div>

        <div class="col-md-4 mb-4">

​

          <!-- Phone -->

          <input type="number" id="phone" class="form-control" placeholder="Phone (optional)">

​

        </div>

      </div>

​

      <div class="row">

        <div class="col-md-12 mb-4">

​

          <!-- Subject -->

          <input type="text" id="subject" class="form-control" placeholder="Subject">

​

        </div>

      </div>

​

      <div class="row">

        <div class="col-md-12">

​

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

            <textarea class="form-control rounded" id="message" rows="3" placeholder="How can we help?"></textarea>

          </div>

​

          <div class="text-center">

            <button type="submit" class="btn btn-elegant">Submit</button>

          </div>

​

        </div>

      </div>

​

    </form>

​

  </section>

  <!--Section: Content-->

​

​

</div>