<section>

  <div class="bg-image"

    style="background-image: url(https://mdbootstrap.com/img/Photos/new-templates/glassmorphism-article/img5.jpg); height: 700px;">

    <div class="mask d-flex align-items-center h-100">

      <div class="container">

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

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

            <div class="card mask-custom-1 py-5 text-white">

              <div class="card-body">

                <img class="rounded-circle shadow-2-strong mb-5"

                  src="https://mdbootstrap.com/img/Photos/Avatars/img%20(4).jpg" alt="avatar" style="width: 100px;"

                  data-mdb-toggle="animation" data-mdb-animation-start="onLoad" data-mdb-animation="slide-in-left"

                  data-mdb-animation-duration="1000" data-mdb-animation-delay="200">

                <h5 class="mb-4" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"

                  data-mdb-animation="slide-in-left" data-mdb-animation-duration="1000"

                  data-mdb-animation-delay="300">

                  Veronica Smith</h5>

                <p class="mb-4" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"

                  data-mdb-animation="slide-in-left" data-mdb-animation-duration="1000"

                  data-mdb-animation-delay="400">

                  Backend Developer</p>

                <ul class="list-unstyled mb-0" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"

                  data-mdb-animation="slide-in-left" data-mdb-animation-duration="1000"

                  data-mdb-animation-delay="500">

                  <a href="#!" class="px-1">

                    <i class="fab fa-github text-white"></i>

                  </a>

                  <a href="#!" class="px-1">

                    <i class="fab fa-twitter text-white"></i>

                  </a>

                  <a href="#!" class="px-1">

                    <i class="fab fa-linkedin-in text-white"></i>

                  </a>

                </ul>

              </div>

            </div>

          </div>

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

            <div class="card mask-custom-1 py-5 text-white">

              <div class="card-body">

                <img class="rounded-circle shadow-2-strong mb-5"

                  src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).jpg" alt="avatar" style="width: 100px;"

                  data-mdb-toggle="animation" data-mdb-animation-start="onLoad" data-mdb-animation="slide-in-left"

                  data-mdb-animation-duration="1000" data-mdb-animation-delay="200">

                <h5 class="mb-4" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"

                  data-mdb-animation="slide-in-left" data-mdb-animation-duration="1000"

                  data-mdb-animation-delay="300">

                  Tom Johnson</h5>

                <p class="mb-4" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"

                  data-mdb-animation="slide-in-left" data-mdb-animation-duration="1000"

                  data-mdb-animation-delay="400">

                  Digital Marketing Analyst</p>

                <ul class="list-unstyled mb-0" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"

                  data-mdb-animation="slide-in-left" data-mdb-animation-duration="1000"

                  data-mdb-animation-delay="500">

                  <a href="#!" class="px-1">

                    <i class="fab fa-facebook-f text-white"></i>

                  </a>

                  <a href="#!" class="px-1">

                    <i class="fab fa-twitter text-white"></i>

                  </a>

                  <a href="#!" class="px-1">

                    <i class="fab fa-linkedin-in text-white"></i>

                  </a>

                </ul>

              </div>

            </div>

          </div>

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

            <div class="card mask-custom-1 py-5 text-white">

              <div class="card-body">

                <img class="rounded-circle shadow-2-strong mb-5"

                  src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg" alt="avatar" style="width: 100px;"

                  data-mdb-toggle="animation" data-mdb-animation-start="onLoad" data-mdb-animation="slide-in-left"

                  data-mdb-animation-duration="1000" data-mdb-animation-delay="200">

                <h5 class="mb-4" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"

                  data-mdb-animation="slide-in-left" data-mdb-animation-duration="1000"

                  data-mdb-animation-delay="300">

                  Emma Lovelace</h5>

                <p class="mb-4" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"

                  data-mdb-animation="slide-in-left" data-mdb-animation-duration="1000"

                  data-mdb-animation-delay="400">

                  Web Designer</p>

                <ul class="list-unstyled mb-0" data-mdb-toggle="animation" data-mdb-animation-start="onLoad"

                  data-mdb-animation="slide-in-left" data-mdb-animation-duration="1000"

                  data-mdb-animation-delay="500">

                  <a href="#!" class="px-1">

                    <i class="fab fa-dribbble text-white"></i>

                  </a>

                  <a href="#!" class="px-1">

                    <i class="fab fa-linkedin-in text-white"></i>

                  </a>

                  <a href="#!" class="px-1">

                    <i class="fab fa-instagram text-white"></i>

                  </a>

                </ul>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</section>