Blocks - Team

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row mb-3">
      <div class="col-md-10 col-lg-12 col-xl-10 col-xxl-9 mx-auto text-center">
        <h2 class="fs-15 text-uppercase text-muted mb-3">Our Team</h2>
        <h3 class="display-4 mb-7 px-lg-19 px-xl-18">Think unique and be innovative. Make a difference with Sandbox.</h3>
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
    <div class="row grid-view gx-md-8 gx-xl-10 gy-8 gy-lg-0">
      <div class="col-md-6 col-lg-3">
        <div class="position-relative">
          <div class="shape rounded bg-soft-blue rellax d-md-block" data-rellax-speed="0" style="bottom: -0.75rem; right: -0.75rem; width: 98%; height: 98%; z-index:0"></div>
          <div class="card">
            <figure class="card-img-top"><img class="img-fluid" src="./assets/img/avatars/t1.jpg" srcset="./assets/img/avatars/t1@2x.jpg 2x" alt="" /></figure>
            <div class="card-body px-6 py-5">
              <h4 class="mb-1">Coriss Ambady</h4>
              <p class="mb-0">Financial Analyst</p>
            </div>
            <!--/.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /div -->
      </div>
      <!--/column -->
      <div class="col-md-6 col-lg-3">
        <div class="position-relative">
          <div class="shape rounded bg-soft-red rellax d-md-block" data-rellax-speed="0" style="bottom: -0.75rem; right: -0.75rem; width: 98%; height: 98%; z-index:0"></div>
          <div class="card">
            <figure class="card-img-top"><img class="img-fluid" src="./assets/img/avatars/t2.jpg" srcset="./assets/img/avatars/t2@2x.jpg 2x" alt="" /></figure>
            <div class="card-body px-6 py-5">
              <h4 class="mb-1">Cory Zamora</h4>
              <p class="mb-0">Marketing Specialist</p>
            </div>
            <!--/.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /div -->
      </div>
      <!--/column -->
      <div class="col-md-6 col-lg-3">
        <div class="position-relative">
          <div class="shape rounded bg-soft-green rellax d-md-block" data-rellax-speed="0" style="bottom: -0.75rem; right: -0.75rem; width: 98%; height: 98%; z-index:0"></div>
          <div class="card">
            <figure class="card-img-top"><img class="img-fluid" src="./assets/img/avatars/t3.jpg" srcset="./assets/img/avatars/t3@2x.jpg 2x" alt="" /></figure>
            <div class="card-body px-6 py-5">
              <h4 class="mb-1">Nikolas Brooten</h4>
              <p class="mb-0">Sales Manager</p>
            </div>
            <!--/.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /div -->
      </div>
      <!--/column -->
      <div class="col-md-6 col-lg-3">
        <div class="position-relative">
          <div class="shape rounded bg-soft-violet rellax d-md-block" data-rellax-speed="0" style="bottom: -0.75rem; right: -0.75rem; width: 98%; height: 98%; z-index:0"></div>
          <div class="card">
            <figure class="card-img-top"><img class="img-fluid" src="./assets/img/avatars/t4.jpg" srcset="./assets/img/avatars/t4@2x.jpg 2x" alt="" /></figure>
            <div class="card-body px-6 py-5">
              <h4 class="mb-1">Jackie Sanders</h4>
              <p class="mb-0">Investment Planner</p>
            </div>
            <!--/.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /div -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row mb-3">
      <div class="col-md-10 col-xl-9 col-xxl-7 mx-auto text-center">
        <img src="./assets/img/icons/team.svg" class="svg-inject icon-svg icon-svg-md mb-4" alt="" />
        <h2 class="display-4 mb-3 px-lg-14">Save your time and money by choosing our professional team.</h2>
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
    <div class="position-relative">
      <div class="shape rounded-circle bg-soft-yellow rellax w-16 h-16" data-rellax-speed="1" style="bottom: 0.5rem; right: -1.7rem;"></div>
      <div class="shape rounded-circle bg-line red rellax w-16 h-16" data-rellax-speed="1" style="top: 0.5rem; left: -1.7rem;"></div>
      <div class="carousel owl-carousel gap-small" data-margin="0" data-dots="true" data-autoplay="false" data-autoplay-timeout="5000" data-responsive='{"0":{"items": "1"}, "768":{"items": "2"}, "992":{"items": "3"}, "1400":{"items": "4"}}'>
        <div class="item">
          <div class="item-inner">
            <div class="card">
              <div class="card-body">
                <img class="rounded-circle w-15 mb-4" src="./assets/img/avatars/te1.jpg" srcset="./assets/img/avatars/te1@2x.jpg 2x" alt="" />
                <h4 class="mb-1">Coriss Ambady</h4>
                <div class="meta mb-2">Financial Analyst</div>
                <p class="mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
                <nav class="nav social mb-0">
                  <a href="#"><i class="uil uil-twitter"></i></a>
                  <a href="#"><i class="uil uil-facebook-f"></i></a>
                  <a href="#"><i class="uil uil-dribbble"></i></a>
                </nav>
                <!-- /.social -->
              </div>
              <!--/.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.item-inner -->
        </div>
        <!-- /.item -->
        <div class="item">
          <div class="item-inner">
            <div class="card">
              <div class="card-body">
                <img class="rounded-circle w-15 mb-4" src="./assets/img/avatars/te2.jpg" srcset="./assets/img/avatars/te2@2x.jpg 2x" alt="" />
                <h4 class="mb-1">Cory Zamora</h4>
                <div class="meta mb-2">Marketing Specialist</div>
                <p class="mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
                <nav class="nav social mb-0">
                  <a href="#"><i class="uil uil-twitter"></i></a>
                  <a href="#"><i class="uil uil-facebook-f"></i></a>
                  <a href="#"><i class="uil uil-dribbble"></i></a>
                </nav>
                <!-- /.social -->
              </div>
              <!--/.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.item-inner -->
        </div>
        <!-- /.item -->
        <div class="item">
          <div class="item-inner">
            <div class="card">
              <div class="card-body">
                <img class="rounded-circle w-15 mb-4" src="./assets/img/avatars/te3.jpg" srcset="./assets/img/avatars/te3@2x.jpg 2x" alt="" />
                <h4 class="mb-1">Nikolas Brooten</h4>
                <div class="meta mb-2">Sales Manager</div>
                <p class="mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
                <nav class="nav social mb-0">
                  <a href="#"><i class="uil uil-twitter"></i></a>
                  <a href="#"><i class="uil uil-facebook-f"></i></a>
                  <a href="#"><i class="uil uil-dribbble"></i></a>
                </nav>
                <!-- /.social -->
              </div>
              <!--/.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.item-inner -->
        </div>
        <!-- /.item -->
        <div class="item">
          <div class="item-inner">
            <div class="card">
              <div class="card-body">
                <img class="rounded-circle w-15 mb-4" src="./assets/img/avatars/te4.jpg" srcset="./assets/img/avatars/te4@2x.jpg 2x" alt="" />
                <h4 class="mb-1">Jackie Sanders</h4>
                <div class="meta mb-2">Investment Planner</div>
                <p class="mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
                <nav class="nav social mb-0">
                  <a href="#"><i class="uil uil-twitter"></i></a>
                  <a href="#"><i class="uil uil-facebook-f"></i></a>
                  <a href="#"><i class="uil uil-dribbble"></i></a>
                </nav>
                <!-- /.social -->
              </div>
              <!--/.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.item-inner -->
        </div>
        <!-- /.item -->
        <div class="item">
          <div class="item-inner">
            <div class="card">
              <div class="card-body">
                <img class="rounded-circle w-15 mb-4" src="./assets/img/avatars/te5.jpg" srcset="./assets/img/avatars/te5@2x.jpg 2x" alt="" />
                <h4 class="mb-1">Laura Widerski</h4>
                <div class="meta mb-2">Sales Specialist</div>
                <p class="mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
                <nav class="nav social mb-0">
                  <a href="#"><i class="uil uil-twitter"></i></a>
                  <a href="#"><i class="uil uil-facebook-f"></i></a>
                  <a href="#"><i class="uil uil-dribbble"></i></a>
                </nav>
                <!-- /.social -->
              </div>
              <!--/.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.item-inner -->
        </div>
        <!-- /.item -->
        <div class="item">
          <div class="item-inner">
            <div class="card">
              <div class="card-body">
                <img class="rounded-circle w-15 mb-4" src="./assets/img/avatars/te6.jpg" srcset="./assets/img/avatars/te6@2x.jpg 2x" alt="" />
                <h4 class="mb-1">Tina Geller</h4>
                <div class="meta mb-2">Financial Analyst</div>
                <p class="mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
                <nav class="nav social mb-0">
                  <a href="#"><i class="uil uil-twitter"></i></a>
                  <a href="#"><i class="uil uil-facebook-f"></i></a>
                  <a href="#"><i class="uil uil-dribbble"></i></a>
                </nav>
                <!-- /.social -->
              </div>
              <!--/.card-body -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.item-inner -->
        </div>
        <!-- /.item -->
      </div>
      <!-- /.owl-carousel -->
    </div>
    <!-- /.position-relative -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->

<section class="wrapper bg-light">
  <div class="container py-14 py-md-16">
    <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
      <div class="col-lg-4">
        <h2 class="fs-15 text-uppercase text-line text-primary text-center mb-3">Meet the Team</h2>
        <h3 class="display-5 mb-5">Save your time and money by choosing our professional team.</h3>
        <p>Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros tempus porttitor.</p>
        <a href="#" class="btn btn-primary rounded-pill mt-3">See All Members</a>
      </div>
      <!--/column -->
      <div class="col-lg-8">
        <div class="carousel owl-carousel text-center" data-margin="30" data-dots="true" data-autoplay="false" data-autoplay-timeout="5000" data-responsive='{"0":{"items": "1"}, "768":{"items": "2"}, "992":{"items": "2"}, "1200":{"items": "3"}}'>
          <div class="item">
            <img class="rounded-circle w-20 mx-auto mb-4" src="./assets/img/avatars/t1.jpg" srcset="./assets/img/avatars/t1@2x.jpg 2x" alt="" />
            <h4 class="mb-1">Cory Zamora</h4>
            <div class="meta mb-2">Marketing Specialist</div>
            <p class="mb-2">Etiam porta sem magna malesuada mollis.</p>
            <nav class="nav social justify-content-center text-center mb-0">
              <a href="#"><i class="uil uil-twitter"></i></a>
              <a href="#"><i class="uil uil-slack"></i></a>
              <a href="#"><i class="uil uil-linkedin"></i></a>
            </nav>
            <!-- /.social -->
          </div>
          <!-- /.item -->
          <div class="item">
            <img class="rounded-circle w-20 mx-auto mb-4" src="./assets/img/avatars/t2.jpg" srcset="./assets/img/avatars/t2@2x.jpg 2x" alt="" />
            <h4 class="mb-1">Coriss Ambady</h4>
            <div class="meta mb-2">Financial Analyst</div>
            <p class="mb-2">Aenean eu leo quam. Pellentesque ornare lacinia.</p>
            <nav class="nav social justify-content-center text-center mb-0">
              <a href="#"><i class="uil uil-youtube"></i></a>
              <a href="#"><i class="uil uil-facebook-f"></i></a>
              <a href="#"><i class="uil uil-dribbble"></i></a>
            </nav>
            <!-- /.social -->
          </div>
          <!-- /.item -->
          <div class="item">
            <img class="rounded-circle w-20 mx-auto mb-4" src="./assets/img/avatars/t3.jpg" srcset="./assets/img/avatars/t3@2x.jpg 2x" alt="" />
            <h4 class="mb-1">Nikolas Brooten</h4>
            <div class="meta mb-2">Sales Manager</div>
            <p class="mb-2">Donec ornare elit quam porta gravida at eget.</p>
            <nav class="nav social justify-content-center text-center mb-0">
              <a href="#"><i class="uil uil-linkedin"></i></a>
              <a href="#"><i class="uil uil-tumblr-square"></i></a>
              <a href="#"><i class="uil uil-facebook-f"></i></a>
            </nav>
            <!-- /.social -->
          </div>
          <!-- /.item -->
          <div class="item">
            <img class="rounded-circle w-20 mx-auto mb-4" src="./assets/img/avatars/t4.jpg" srcset="./assets/img/avatars/t4@2x.jpg 2x" alt="" />
            <h4 class="mb-1">Jackie Sanders</h4>
            <div class="meta mb-2">Investment Planner</div>
            <p class="mb-2">Nullam risus eget urna mollis ornare vel eu leo.</p>
            <nav class="nav social justify-content-center text-center mb-0">
              <a href="#"><i class="uil uil-twitter"></i></a>
              <a href="#"><i class="uil uil-facebook-f"></i></a>
              <a href="#"><i class="uil uil-dribbble"></i></a>
            </nav>
            <!-- /.social -->
          </div>
          <!-- /.item -->
          <div class="item">
            <img class="rounded-circle w-20 mx-auto mb-4" src="./assets/img/avatars/t5.jpg" srcset="./assets/img/avatars/t5@2x.jpg 2x" alt="" />
            <h4 class="mb-1">Tina Geller</h4>
            <div class="meta mb-2">Assistant Buyer</div>
            <p class="mb-2">Vivamus sagittis lacus vel augue laoreet rutrum.</p>
            <nav class="nav social justify-content-center text-center mb-0">
              <a href="#"><i class="uil uil-facebook-f"></i></a>
              <a href="#"><i class="uil uil-slack"></i></a>
              <a href="#"><i class="uil uil-dribbble"></i></a>
            </nav>
            <!-- /.social -->
          </div>
          <!-- /.item -->
        </div>
        <!-- /.owl-carousel -->
      </div>
      <!--/column -->
    </div>
    <!--/.row -->
  </div>
  <!-- /.container -->
</section>
<!-- /section -->