<div class="container-fluid mt-3 mb-5">

​

  <!-- Section -->

  <section style="background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/Work/full%20page/img%20(2).jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;">

​

    <style>

      .input-grey .input-group-lg>.input-group-prepend>.input-group-text {

        border-radius: .125rem;

      }

​

      .input-grey .form-control {

        border-radius: .125rem;

      }

​

      .input-grey .form-control.form-control-lg {

        font-size: 1rem;

      }

      .form-control:focus {

        background-color: rgba(255,255,255,.3);

      }

​

      .input-grey input::placeholder {

        color: #fff;

      }

​

      .input-grey .input-group-lg>.form-control:not(textarea) {

        height: calc(1.5em + 1rem + 6px);

      }

​

      .social .fab {

        width: 30px;

        height: 30px;

      }

    </style>

    <div class="mask rgba-black-strong py-5">

​

      <div class="container text-center my-5">

​

        <h3 class="font-weight-bold text-center white-text pb-2">News and Updates</h3>

        <p class="lead text-center white-text pt-2 mb-5">Subscribe to our newsletter and receive the latest news

          from MDB.</p>

​

        <form class="input-grey mb-5" action="" method="post" target="_blank">

          <div class="form-row">

            <div class="col-md-4 ml-auto">

              <div class="input-group input-group-lg z-depth-1">

                <div class="input-group-prepend">

                  <span class="input-group-text rgba-white-light border-0"><i class="fa fa-envelope white-text"></i></span>

                </div>

                <input type="email" name="EMAIL" class="form-control form-control-lg rgba-white-light white-text border-0 z-depth-0" placeholder="Email Address">

              </div>

            </div>

​

            <div class="col-md-2 mr-auto">

              <button class="btn btn-block btn-primary">Subscribe</button>

            </div>

          </div>

        </form>

​

        <div class="social text-center">

          <a class="mx-1" href="#"><i class="fab fa-facebook-f p-2 rounded rgba-white-light white-text"></i></a>

          <a class="mx-1" href="#"><i class="fab fa-twitter p-2 rounded rgba-white-light white-text"></i></a>

          <a class="mx-1" href="#"><i class="fab fa-linkedin-in p-2 rounded rgba-white-light white-text"></i></a>

          <a class="mx-1" href="#"><i class="fab fa-instagram p-2 rounded rgba-white-light white-text"></i></a>

        </div>

​

      </div>

​

    </div>

​

  </section>

  <!-- Section -->

</div>