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

​

    <!--Section: Content-->

    <section class="dark-grey-text">

​

     <div class="text-center font-weight-bold">About the author</div>

​

      <div class="media mt-4 px-1">

        <img class="card-img-100 rounded d-flex z-depth-1 mr-3"

          src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg" alt="Generic placeholder image">

        <div class="media-body">

​

          <div class="d-block">

            <p class="font-weight-bold my-0">

              <a href="" class="black-text">John Doe</a>

            </p>

            <div class="my-2">

              <a class="mr-1" role="button"><i class="fab  fa-facebook-f"></i></a>

              <a class="mr-1" role="button"><i class="fab fa-twitter"></i></a>

              <a class="mr-1" role="button"><i class="fab fa-linkedin-in"></i></a>

            </div>

          </div>

​

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod consectetur accusamus velit nostrum

            et

            magnam.</p>

        </div>

      </div>

​

​

    </section>

    <!--Section: Content-->

​

​

  </div>