Team 1
<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-dark shadow text-center mb-3">
<i class="material-symbols-rounded 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>Team 2
<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 -->Team 3
<section class="py-7 position-relative" style="background-image: url('../../assets/img/examples/city.jpg'); 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-symbols-rounded 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>Team 4
<!-- 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-2 mx-2 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-2 mx-2 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-2 mx-2 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-2 mx-2 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 -->Team 5
<!-- 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-->Team 6
<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-2 mx-2 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-2 mx-2 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-2 mx-2 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>