<div class="container my-5">

​

​

  <!--Section: Content-->

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

​

    <!-- Section heading -->

    <h3 class="font-weight-bold pb-2 mb-4">Our amazing team</h3>

    <!-- Section description -->

    <p class="text-muted w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit.

      Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam

      eum porro a pariatur veniam.</p>

​

    <!-- Grid row -->

    <div class="row text-center">

​

      <!-- Grid column -->

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

        <div class="avatar mx-auto">

          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).jpg" class="rounded z-depth-1-half" alt="Sample avatar">

        </div>

        <h4 class="font-weight-bold dark-grey-text my-4">Maria Kate</h4>

        <h6 class="text-uppercase grey-text mb-3"><strong>Photographer</strong></h6>

        <!-- Facebook-->

        <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-fb">

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

        </a>

        <!--Dribbble -->

        <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-dribbble">

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

        </a>

        <!-- Twitter -->

        <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-tw">

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

        </a>

      </div>

      <!-- Grid column -->

​

      <!-- Grid column -->

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

        <div class="avatar mx-auto">

          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" class="rounded z-depth-1-half" alt="Sample avatar">

        </div>

        <h4 class="font-weight-bold dark-grey-text my-4">John Doe</h4>

        <h6 class="text-uppercase grey-text mb-3"><strong>Front-end Developer</strong></h6>

        <!--Email-->

        <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-email">

          <i class="fas fa-envelope"></i>

        </a>

        <!-- Facebook-->

        <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-fb">

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

        </a>

        <!-- GitHub-->

        <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-git">

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

        </a>

      </div>

      <!-- Grid column -->

​

      <!-- Grid column -->

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

        <div class="avatar mx-auto">

          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).jpg" class="rounded z-depth-1-half" alt="Sample avatar">

        </div>

        <h4 class="font-weight-bold dark-grey-text my-4">Sarah Melyah</h4>

        <h6 class="text-uppercase grey-text mb-3"><strong>Web Developer</strong></h6>

        <!--Linkedin -->

        <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-li">

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

        </a>

        <!-- Twitter -->

        <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-tw">

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

        </a>

        <!--Pinterest -->

        <a type="button" class="btn-floating btn-sm mx-1 mb-0 btn-pin">

          <i class="fab fa-pinterest "></i>

        </a>

      </div>

      <!-- Grid column -->

​

    </div>

    <!-- Grid row -->

​

  </section>

  <!--Section: Content-->

​

​

</div>