Teams

Copy
<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-7 mb-5">
        <div class="icon icon-shape icon-md bg-gradient-primary shadow text-center mb-3">
          <i class="material-icons opacity-10">supervisor_account</i>
        </div>
        <h3>Our Awesome Team</h3>
        <p>This is the paragraph where you can write more details about your team. Keep you user engaged by providing meaningful information.</p>
      </div>
    </div>
    <div class="row mt-5">
      <div class="col-lg-4 col-md-6 mt-md-0 mt-5">
        <div class="card card-profile card-plain">
          <div class="text-start mt-n5 z-index-1">
            <div class="position-relative w-25">
              <div class="blur-shadow-avatar">
                <img class="avatar avatar-xxl border-radius-xl" src="../../assets/img/bruce-mars.jpg">
              </div>
            </div>
          </div>
          <div class="card-body ps-0">
            <h5 class="mb-0">Alec Thompson</h5>
            <p class="text-muted">CEO / Co-Founder</p>
            <p>
              And I love you like Kanye loves Kanye. We need to restart the human foundation.
            </p>
            <button type="button" class="btn-icon-only btn-simple btn btn-lg btn-twitter" data-toggle="tooltip" data-placement="bottom" title="Follow me!">
              <i class="fab fa-twitter"></i>
            </button>
            <button type="button" class="btn-icon-only btn-simple btn btn-lg btn-dribbble" data-toggle="tooltip" data-placement="bottom" title="Follow me!">
              <i class="fab fa-dribbble"></i>
            </button>
            <button type="button" class="btn-icon-only btn-simple btn btn-lg btn-linkedin" data-toggle="tooltip" data-placement="bottom" title="Follow me!">
              <i class="fab fa-linkedin"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 mt-md-0 mt-5">
        <div class="card card-profile card-plain">
          <div class="mt-n5 z-index-1">
            <div class="position-relative w-25">
              <div class="blur-shadow-avatar">
                <img class="avatar avatar-xxl border-radius-xl" src="../../assets/img/team-3.jpg">
              </div>
            </div>
          </div>
          <div class="card-body ps-0">
            <h5 class="mb-0">Alec Thompson</h5>
            <p class="text-muted">CEO / Co-Founder</p>
            <p>
              And I love you like Kanye loves Kanye. We need to restart the human foundation.
            </p>
            <button type="button" class="btn-icon-only btn-simple btn btn-lg btn-twitter" data-toggle="tooltip" data-placement="bottom" title="Follow me!">
              <i class="fab fa-twitter"></i>
            </button>
            <button type="button" class="btn-icon-only btn-simple btn btn-lg btn-dribbble" data-toggle="tooltip" data-placement="bottom" title="Follow me!">
              <i class="fab fa-dribbble"></i>
            </button>
            <button type="button" class="btn-icon-only btn-simple btn btn-lg btn-linkedin" data-toggle="tooltip" data-placement="bottom" title="Follow me!">
              <i class="fab fa-linkedin"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 mx-md-auto mt-md-0 mt-5">
        <div class="card card-profile card-plain">
          <div class="mt-n5 z-index-1">
            <div class="position-relative w-25">
              <div class="blur-shadow-avatar">
                <img class="avatar avatar-xxl border-radius-xl" src="../../assets/img/team-4.jpg">
              </div>
            </div>
          </div>
          <div class="card-body ps-0">
            <h5 class="mb-0">Alec Thompson</h5>
            <p class="text-muted">CEO / Co-Founder</p>
            <p>
              And I love you like Kanye loves Kanye. We need to restart the human foundation.
            </p>
            <button type="button" class="btn-icon-only btn-simple btn btn-lg btn-twitter" data-toggle="tooltip" data-placement="bottom" title="Follow me!">
              <i class="fab fa-twitter"></i>
            </button>
            <button type="button" class="btn-icon-only btn-simple btn btn-lg btn-dribbble" data-toggle="tooltip" data-placement="bottom" title="Follow me!">
              <i class="fab fa-dribbble"></i>
            </button>
            <button type="button" class="btn-icon-only btn-simple btn btn-lg btn-linkedin" data-toggle="tooltip" data-placement="bottom" title="Follow me!">
              <i class="fab fa-linkedin"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Copy
<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-8 mx-auto text-center mb-5">
        <h3>The Executive Team</h3>
        <p class="font-weight-normal">This is the paragraph where you can write more details about your team. Keep you user engaged by providing meaningful information.</p>
      </div>
    </div>
    <div class="row mt-lg-5 mt-3">
      <div class="col-md-6">
        <div class="card card-profile card-plain">
          <div class="row">
            <div class="col-lg-5">
              <a href="javascript:;">
                <div class="position-relative">
                  <div class="blur-shadow-image">
                    <img class="w-100 border-radius-lg shadow-lg" src="../../assets/img/examples/studio-5.jpg">
                  </div>
                </div>
              </a>
            </div>
            <div class="col-lg-7 ps-0 my-auto">
              <div class="card-body text-start">
                <div class="p-md-0 pt-3">
                  <h5 class="font-weight-bolder mb-0">Ryan Samuel</h5>
                  <p class="text-uppercase text-sm font-weight-bold mb-2">Financial Examiner</p>
                </div>
                <p class="mb-4">Today you are you! That is truer than true! There is no one alive who is you-er than you!</p>
                <button type="button" class="btn btn-facebook btn-simple btn-lg mb-0 pe-3 ps-2">
                  <i class="fab fa-facebook"></i>
                </button>
                <button type="button" class="btn btn-twitter btn-simple btn-lg mb-0 px-2">
                  <i class="fab fa-twitter"></i>
                </button>
                <button type="button" class="btn btn-github btn-simple btn-lg mb-0 px-2">
                  <i class="fab fa-github"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card card-profile card-plain">
          <div class="row">
            <div class="col-lg-5">
              <a href="javascript:;">
                <div class="position-relative">
                  <div class="blur-shadow-image">
                    <img class="w-100 border-radius-lg shadow-lg" src="../../assets/img/examples/studio-3.jpg" alt="profile image">
                  </div>
                </div>
              </a>
            </div>
            <div class="col-lg-7 ps-0 my-auto">
              <div class="card-body text-start">
                <div class="p-md-0 pt-3">
                  <h5 class="font-weight-bolder mb-0">Jordan Michael</h5>
                  <p class="text-uppercase text-sm font-weight-bold mb-2">UI Designer</p>
                </div>
                <p class="mb-4">Artist is a term applied to a person who engages in an activity deemed to be an art.</p>
                <button type="button" class="btn btn-facebook btn-simple btn-lg mb-0 pe-3 ps-2">
                  <i class="fab fa-facebook"></i>
                </button>
                <button type="button" class="btn btn-twitter btn-simple btn-lg mb-0 px-2">
                  <i class="fab fa-twitter"></i>
                </button>
                <button type="button" class="btn btn-github btn-simple btn-lg mb-0 px-2">
                  <i class="fab fa-github"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row mt-lg-5 mt-3">
      <div class="col-md-6">
        <div class="card card-profile card-plain">
          <div class="row">
            <div class="col-lg-5">
              <a href="javascript:;">
                <div class="position-relative">
                  <div class="blur-shadow-image">
                    <img class="w-100 border-radius-lg shadow-lg" src="../../assets/img/examples/clem-onojegaw.jpg">
                  </div>
                </div>
              </a>
            </div>
            <div class="col-lg-7 ps-0 my-auto">
              <div class="card-body text-start">
                <div class="p-md-0 pt-3">
                  <h5 class="font-weight-bolder mb-0">Nora Hazel</h5>
                  <p class="text-uppercase text-sm font-weight-bold mb-2">Legal Secretary</p>
                </div>
                <p class="mb-4">Do not dwell in the past, do not dream of the future, concentrate the mind...</p>
                <button type="button" class="btn btn-facebook btn-simple btn-lg mb-0 pe-3 ps-2">
                  <i class="fab fa-facebook"></i>
                </button>
                <button type="button" class="btn btn-twitter btn-simple btn-lg mb-0 px-2">
                  <i class="fab fa-twitter"></i>
                </button>
                <button type="button" class="btn btn-github btn-simple btn-lg mb-0 px-2">
                  <i class="fab fa-github"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card card-profile card-plain">
          <div class="row">
            <div class="col-lg-5">
              <a href="javascript:;">
                <div class="position-relative">
                  <div class="blur-shadow-image">
                    <img class="w-100 border-radius-lg shadow-lg" src="../../assets/img/examples/clem-onojeghuou.jpg">
                  </div>
                </div>
              </a>
            </div>
            <div class="col-lg-7 ps-0 my-auto">
              <div class="card-body text-start">
                <div class="p-md-0 pt-3">
                  <h5 class="font-weight-bolder mb-0">Otto Gonzalez</h5>
                  <p class="text-uppercase text-sm font-weight-bold mb-2">Landscape Architect</p>
                </div>
                <p class="mb-4">Success is not final, failure is not fatal: it is the courage to continue that counts...</p>
                <button type="button" class="btn btn-facebook btn-simple btn-lg mb-0 pe-3 ps-2">
                  <i class="fab fa-facebook"></i>
                </button>
                <button type="button" class="btn btn-twitter btn-simple btn-lg mb-0 px-2">
                  <i class="fab fa-twitter"></i>
                </button>
                <button type="button" class="btn btn-github btn-simple btn-lg mb-0 px-2">
                  <i class="fab fa-github"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- END Teams w/ 4 cards w/ image on left & descriptio/social link on right -->
Copy
<section class="py-7 position-relative" style="background-image: url(&#39;../../assets/img/examples/city.jpg&#39;); background-size:cover;">
  <span class="mask bg-gradient-dark"></span>
  <div class="container position-relative mb-4">
    <div class="row">
      <div class="col-md-6 mb-5">
        <div class="icon icon-shape icon-md bg-gradient-info shadow-info mb-3 text-center">
          <i class="material-icons opacity-10">people</i>
        </div>
        <h3 class="text-white z-index-1 position-relative">The Executive Team</h3>
        <p class="text-white opacity-8">There’s nothing I really wanted to do in life that I wasn’t able to get good at. That’s my skill.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6 col-12">
        <div class="card card-profile mt-4">
          <div class="row">
            <div class="col-lg-4 col-md-6 col-12 mt-n5">
              <a href="javascript:;">
                <div class="p-3 pe-md-0">
                  <img class="w-100 border-radius-md shadow-lg" src="../../assets/img/team-5.jpg" alt="image">
                </div>
              </a>
            </div>
            <div class="col-lg-8 col-md-6 col-12 my-auto">
              <div class="card-body ps-lg-0">
                <h5 class="mb-0">Emma Roberts</h5>
                <h6 class="text-info">UI Designer</h6>
                <p class="mb-0">Artist is a term applied to a person who engages in an activity deemed to be an art.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-6 col-12">
        <div class="card card-profile mt-lg-4 mt-5">
          <div class="row">
            <div class="col-lg-4 col-md-6 col-12 mt-n5">
              <a href="javascript:;">
                <div class="p-3 pe-md-0">
                  <img class="w-100 border-radius-md shadow-lg" src="../../assets/img/bruce-mars.jpg" alt="image">
                </div>
              </a>
            </div>
            <div class="col-lg-8 col-md-6 col-12 my-auto">
              <div class="card-body ps-lg-0">
                <h5 class="mb-0">William Pearce</h5>
                <h6 class="text-info">Boss</h6>
                <p class="mb-0">Artist is a term applied to a person who engages in an activity deemed to be an art.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row mt-4">
      <div class="col-lg-6 col-12">
        <div class="card card-profile mt-4 z-index-2">
          <div class="row">
            <div class="col-lg-4 col-md-6 col-12 mt-n5">
              <a href="javascript:;">
                <div class="p-3 pe-md-0">
                  <img class="w-100 border-radius-md shadow-lg" src="../../assets/img/ivana-squares.jpg" alt="image">
                </div>
              </a>
            </div>
            <div class="col-lg-8 col-md-6 col-12 my-auto">
              <div class="card-body ps-lg-0">
                <h5 class="mb-0">Ivana Flow</h5>
                <h6 class="text-info">Athlete</h6>
                <p class="mb-0">Artist is a term applied to a person who engages in an activity deemed to be an art.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-6 col-12">
        <div class="card card-profile mt-lg-4 mt-5 z-index-2">
          <div class="row">
            <div class="col-lg-4 col-md-6 col-12 mt-n5">
              <a href="javascript:;">
                <div class="p-3 pe-md-0">
                  <img class="w-100 border-radius-md shadow-lg" src="../../assets/img/ivana-square.jpg" alt="image">
                </div>
              </a>
            </div>
            <div class="col-lg-8 col-md-6 col-12 my-auto">
              <div class="card-body ps-lg-0">
                <h5 class="mb-0">Marquez Garcia</h5>
                <h6 class="text-info">JS Developer</h6>
                <p class="mb-0">Artist is a term applied to a person who engages in an activity deemed to be an art.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Copy
<!-- START Teams w/ 4 cards in a row w/ image & name & function -->
<section class="py-5">
  <div class="container">
    <div class="row">
      <div class="col-md-8 mx-auto text-center">
        <h6 class="text-gradient text-warning">The Executive Team</h6>
        <h2>Building the future</h2>
      </div>
    </div>
    <div class="row mt-5">
      <div class="col-lg-3 col-6 mb-lg-0 mb-4">
        <div class="card shadow-lg">
          <div class="card-header mt-n4 mx-3 p-0 bg-transparent position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="https://images.unsplash.com/photo-1536321115970-5dfa13356211?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
            </a>
          </div>
          <div class="card-body text-center bg-white border-radius-lg p-3 pt-0">
            <h5 class="mt-3 mb-1 d-md-block d-none">Miriam Lendra</h5>
            <p class="mb-1 d-md-none d-block text-sm font-weight-bold text-darker">Miriam Lendra</p>
            <p class="mb-0 text-xs font-weight-bolder text-warning text-gradient text-uppercase">Desktop Publisher</p>
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-6 mb-lg-0 mb-4">
        <div class="card shadow-lg">
          <div class="card-header mt-n4 mx-3 p-0 bg-transparent position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
            </a>
          </div>
          <div class="card-body text-center bg-white border-radius-lg p-3 pt-0">
            <h5 class="mt-3 mb-1 d-md-block d-none">Natalie Paisley</h5>
            <p class="mb-1 d-md-none d-block text-sm font-weight-bold text-darker">Natalie Paisley</p>
            <p class="mb-0 text-xs font-weight-bolder text-warning text-gradient text-uppercase">Credit Analyst</p>
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-6 mb-lg-0 mb-4">
        <div class="card shadow-lg">
          <div class="card-header mt-n4 mx-3 p-0 bg-transparent position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="https://images.unsplash.com/photo-1546215364-12f3fff5d578?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=934&q=80" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
            </a>
          </div>
          <div class="card-body text-center bg-white border-radius-lg p-3 pt-0">
            <h5 class="mt-3 mb-1 d-md-block d-none">Mark Audrey</h5>
            <p class="mb-1 d-md-none d-block text-sm font-weight-bold text-darker">Bella Audrey</p>
            <p class="mb-0 text-xs font-weight-bolder text-warning text-gradient text-uppercase">Economist</p>
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-6 mb-lg-0 mb-4">
        <div class="card shadow-lg">
          <div class="card-header mt-n4 mx-3 p-0 bg-transparent position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="https://images.unsplash.com/photo-1519058082700-08a0b56da9b4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80" alt="img-blur-shadow" class="img-fluid shadow border-radius-lg">
            </a>
          </div>
          <div class="card-body text-center bg-white border-radius-lg p-3 pt-0">
            <h5 class="mt-3 mb-1 d-md-block d-none">Wang Skylar</h5>
            <p class="mb-1 d-md-none d-block text-sm font-weight-bold text-darker">Mila Skylar</p>
            <p class="mb-0 text-xs font-weight-bolder text-warning text-gradient text-uppercase">Aviation Inspector</p>
          </div>
        </div>
      </div>
    </div>

    <div class="row mt-5">
      <div class="col-lg-6">
        <h2>Get your own app</h2>
        <p>The Arctic Ocean freezes every winter and much of the sea-ice then thaws every summer, and that process will continue whatever.</p>
      </div>
      <div class="col-lg-6 text-end d-flex flex-column justify-content-center">
        <button type="button" class="btn bg-gradient-warning mb-0 ms-lg-auto me-lg-0 me-auto mt-lg-0 mt-2">Join Team</button>
      </div>
    </div>
  </div>
</section>
<!-- END Teams w/ 4 cards w/ image on left & descriptio/social link on right -->
Copy
<!-- START Teams w/ 4 cards in a row w/ avatar on bottom end-->
<section class="py-8">
  <div class="container">
    <div class="row">
      <div class="col-md-8 mx-auto text-center">
        <h4 class="text-gradient text-primary">Join our awesome team</h4>

      </div>
    </div>
    <div class="row mt-lg-5 mt-4">
      <div class="col-lg-4 col-sm-6 mb-4">
        <div class="card card-body">
          <div class="row">
            <div class="col-lg-5 text-end my-auto">
              <img class="avatar avatar-xxl border-radius-lg mt-n5" src="../../assets/img/team-2.jpg">
            </div>
            <div class="col-lg-7">
              <h5 class="mb-2">Michael Frisen</h5>
              <span class="badge badge-sm rounded-pill text-dark">PHP Developer</span>
              <br/>
              <button type="button" class="btn btn-twitter btn-simple px-2 mb-0">
                <i class="fab fa-twitter text-lg"></i>
              </button>
              <button type="button" class="btn btn-dribbble btn-simple px-2 mb-0">
                <i class="fab fa-dribbble text-lg"></i>
              </button>
              <button type="button" class="btn btn-slack btn-simple px-2 mb-0">
                <i class="fab fa-slack text-lg"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-sm-6 mb-4">
        <div class="card card-body">
          <div class="row">
            <div class="col-lg-5 text-end my-auto">
              <img class="avatar avatar-xxl border-radius-lg mt-n5" src="../../assets/img/team-3.jpg">
            </div>
            <div class="col-lg-7">
              <h5 class="mb-2">Laurent Shaun</h5>
              <span class="badge badge-sm rounded-pill text-dark">Laravel Senior</span>
              <br/>
              <button type="button" class="btn btn-facebook btn-simple px-2 mb-0">
                <i class="fab fa-facebook-f text-lg"></i>
              </button>
              <button type="button" class="btn btn-dribbble btn-simple px-2 mb-0">
                <i class="fab fa-dribbble text-lg"></i>
              </button>
              <button type="button" class="btn btn-slack btn-simple px-2 mb-0">
                <i class="fab fa-slack text-lg"></i>
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-sm-6 mb-4">
        <div class="card card-body">
          <div class="row">
            <div class="col-lg-5 text-end my-auto">
              <img class="avatar avatar-xxl border-radius-lg mt-n5" src="../../assets/img/team-2.jpg">
            </div>
            <div class="col-lg-7">
              <h5 class="mb-2">Ramon Siente</h5>
              <span class="badge badge-sm rounded-pill text-dark">Vue.js Specialist</span>
              <br/>
              <button type="button" class="btn btn-twitter btn-simple px-2 mb-0">
                <i class="fab fa-twitter text-lg"></i>
              </button>
              <button type="button" class="btn btn-dribbble btn-simple px-2 mb-0">
                <i class="fab fa-dribbble text-lg"></i>
              </button>
              <button type="button" class="btn btn-github btn-simple px-2 mb-0">
                <i class="fab fa-github text-lg"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- END Teams w/ 4 cards in a row w/ avatar on bottom end-->
Copy
<section class="py-5 bg-gray-100">
  <div class="container">
    <div class="row">
      <div class="col-md-7 mx-auto text-center mb-5">
        <h3>You are into a great company</h3>
        <p>This is the paragraph where you can write more details about your team. Keep you user engaged by providing meaningful information.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4 col-md-6">
        <div class="card card-profile">
          <div class="card-header mt-n4 mx-3 p-0 bg-transparent position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="../../assets/img/examples/card-profile1.jpg" alt="img-blur-shadow" class="img-fluid border-radius-lg">
            </a>
          </div>
          <div class="card-body text-center">
            <h4 class="mb-0">Hattie McKenzie</h4>
            <p>Montreal, QC</p>
            <div class="row justify-content-center text-center">
              <div class="col-lg-4 col-4">
                <h5 class="text-info mb-0">323</h5>
                <small>Projects</small>
              </div>
              <div class="col-lg-4 col-4">
                <h5 class="text-info mb-0">500+</h5>
                <small>Hours</small>
              </div>
              <div class="col-lg-4 col-4">
                <h5 class="text-info mb-0">24/7</h5>
                <small>Support</small>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div class="card card-profile mt-md-0 mt-5">
          <div class="card-header mt-n4 mx-3 p-0 bg-transparent position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="../../assets/img/examples/card-profile7.jpg" alt="img-blur-shadow" class="img-fluid border-radius-lg">
            </a>
          </div>
          <div class="card-body text-center">
            <h4 class="mb-0">Annie Spratt</h4>
            <p>Bucharest, RO</p>
            <div class="row justify-content-center text-center">
              <div class="col-lg-4 col-4">
                <h5 class="text-info mb-0">450</h5>
                <small>Projects</small>
              </div>
              <div class="col-lg-4 col-4">
                <h5 class="text-info mb-0">400+</h5>
                <small>Hours</small>
              </div>
              <div class="col-lg-4 col-4">
                <h5 class="text-info mb-0">24/7</h5>
                <small>Support</small>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 mx-md-auto">
        <div class="card card-profile mt-md-0 mt-5">
          <div class="card-header mt-n4 mx-3 p-0 bg-transparent position-relative z-index-2">
            <a class="d-block blur-shadow-image">
              <img src="../../assets/img/examples/card-profile2.jpg" alt="img-blur-shadow" class="img-fluid border-radius-lg">
            </a>
          </div>
          <div class="card-body text-center">
            <h4 class="mb-0">Bruce Mars</h4>
            <p>Atlanta, U.S.</p>
            <div class="row justify-content-center text-center">
              <div class="col-lg-4 col-4">
                <h5 class="text-info mb-0">750</h5>
                <small>Projects</small>
              </div>
              <div class="col-lg-4 col-4">
                <h5 class="text-info mb-0">800+</h5>
                <small>Hours</small>
              </div>
              <div class="col-lg-4 col-4">
                <h5 class="text-info mb-0">24/7</h5>
                <small>Support</small>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>