Team

<!-- Team Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
    <span class="d-block small font-weight-bold text-cap mb-2">Our Team</span>
    <h2>Trust the professionals</h2>
  </div>
  <!-- End Title -->

  <!-- Team Carousel -->
  <div class="js-slick-carousel slick slick-gutters-3 mb-5 mb-lg-3"
       data-hs-slick-carousel-options='{
         "slidesToShow": 4,
         "dots": true,
         "dotsClass": "slick-pagination d-lg-none",
         "responsive": [{
           "breakpoint": 1200,
             "settings": {
               "slidesToShow": 3
             }
           }, {
           "breakpoint": 992,
           "settings": {
             "slidesToShow": 2
             }
           }, {
           "breakpoint": 768,
           "settings": {
             "slidesToShow": 2
             }
           }, {
           "breakpoint": 554,
           "settings": {
             "slidesToShow": 1
           }
         }]
       }'>
    <div class="js-slide pb-6">
      <!-- Team -->
      <img class="img-fluid w-100 rounded" src="../../assets/img/400x500/img28.jpg" alt="Image Description">
      <div class="card mt-n7 mx-3">
        <div class="card-body text-center">
          <h4 class="mb-1">Christina Kray</h4>
          <p class="font-size-1 mb-0">Project Manager</p>
        </div>
      </div>
      <!-- End Team -->
    </div>

    <div class="js-slide pb-6">
      <!-- Team -->
      <img class="img-fluid w-100 rounded" src="../../assets/img/400x500/img29.jpg" alt="Image Description">
      <div class="card mt-n7 mx-3">
        <div class="card-body text-center">
          <h4 class="mb-1">Jeff Fisher</h4>
          <p class="font-size-1 mb-0">CEO, Director</p>
        </div>
      </div>
      <!-- End Team -->
    </div>

    <div class="js-slide pb-6">
      <!-- Team -->
      <img class="img-fluid w-100 rounded" src="../../assets/img/400x500/img30.jpg" alt="Image Description">
      <div class="card mt-n7 mx-3">
        <div class="card-body text-center">
          <h4 class="mb-1">Lida Reidy</h4>
          <p class="font-size-1 mb-0">Marketer</p>
        </div>
      </div>
      <!-- End Team -->
    </div>

    <div class="js-slide pb-6">
      <!-- Team -->
      <img class="img-fluid w-100 rounded" src="../../assets/img/400x500/img27.jpg" alt="Image Description">
      <div class="card mt-n7 mx-3">
        <div class="card-body text-center">
          <h4 class="mb-1">Amy Forren</h4>
          <p class="font-size-1 mb-0">Lead Designer</p>
        </div>
      </div>
      <!-- End Team -->
    </div>
  </div>
  <!-- End Team Carousel -->

  <!-- Info -->
  <div class="position-relative z-index-2 text-center">
    <div class="d-inline-block font-size-1 border bg-white text-center rounded-pill py-3 px-4">
      Want to work with us? <a class="font-weight-bold ml-3" href="#">We are hiring <span class="fas fa-angle-right ml-1"></span></a>
    </div>
  </div>
  <!-- End Info -->
</div>
<!-- End Team Section -->

<link rel="stylesheet" href="../../assets/vendor/slick-carousel/slick/slick.css">

<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/slick-carousel/slick/slick.js"></script>

<!-- JS Front -->
<script src="../../assets/js/hs.slick-carousel.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of slick carousel
    $('.js-slick-carousel').each(function() {
      var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
    });
  });
</script>

<!-- Team Section -->
<div class="container space-2">
  <!-- Title -->
  <div class="w-md-80 w-lg-60 text-center mx-md-auto mb-5 mb-md-9">
    <span class="d-block small font-weight-bold text-cap mb-2">Our team</span>
    <h2>Creative mind by people like you</h2>
  </div>
  <!-- End Title -->

  <div class="row mx-n2 mb-5">
    <div class="col-sm-6 col-lg-3 px-2 mb-3">
      <!-- Team -->
      <div class="card h-100 transition-3d-hover">
        <div class="card-body">
          <div class="avatar avatar-lg avatar-circle mb-4">
            <img class="avatar-img" src="../../assets/img/100x100/img1.jpg" alt="Image Description">
          </div>

          <span class="d-block small font-weight-bold text-cap mb-1">Founder / CEO</span>
          <h4 class="text-lh-sm">Christina Kray</h4>
          <p class="font-size-1">I am an ambitious workaholic, but apart from that, pretty simple person.</p>
        </div>

        <div class="card-footer border-0 pt-0">
          <!-- Social Networks -->
          <ul class="list-inline mb-0">
            <li class="list-inline-item">
              <a class="btn btn-xs btn-icon btn-soft-secondary rounded" href="#">
                <i class="fab fa-facebook-f"></i>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-xs btn-icon btn-soft-secondary rounded" href="#">
                <i class="fab fa-google"></i>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-xs btn-icon btn-soft-secondary rounded" href="#">
                <i class="fab fa-twitter"></i>
              </a>
            </li>
          </ul>
          <!-- End Social Networks -->
        </div>
      </div>
      <!-- End Team -->
    </div>

    <div class="col-sm-6 col-lg-3 px-2 mb-3">
      <!-- Team -->
      <div class="card h-100 transition-3d-hover">
        <div class="card-body">
          <div class="avatar avatar-lg avatar-circle mb-4">
            <img class="avatar-img" src="../../assets/img/100x100/img3.jpg" alt="Image Description">
          </div>

          <span class="d-block small font-weight-bold text-cap mb-1">Project Manager</span>
          <h4 class="text-lh-sm">Jeff Fisher</h4>
          <p class="font-size-1">I am an ambitious workaholic, but apart from that, pretty simple person.</p>
        </div>

        <div class="card-footer border-0 pt-0">
          <!-- Social Networks -->
          <ul class="list-inline mb-0">
            <li class="list-inline-item">
              <a class="btn btn-xs btn-icon btn-soft-secondary rounded" href="#">
                <i class="fab fa-facebook-f"></i>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-xs btn-icon btn-soft-secondary rounded" href="#">
                <i class="fab fa-google"></i>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-xs btn-icon btn-soft-secondary rounded" href="#">
                <i class="fab fa-twitter"></i>
              </a>
            </li>
          </ul>
          <!-- End Social Networks -->
        </div>
      </div>
      <!-- End Team -->
    </div>

    <div class="col-sm-6 col-lg-3 px-2 mb-3">
      <!-- Team -->
      <div class="card h-100 transition-3d-hover">
        <div class="card-body">
          <div class="avatar avatar-lg avatar-circle mb-4">
            <img class="avatar-img" src="../../assets/img/100x100/img11.jpg" alt="Image Description">
          </div>

          <span class="d-block small font-weight-bold text-cap mb-1">Product Designer</span>
          <h4 class="text-lh-sm">Amy Forren</h4>
          <p class="font-size-1">I am an ambitious workaholic, but apart from that, pretty simple person.</p>
        </div>

        <div class="card-footer border-0 pt-0">
          <!-- Social Networks -->
          <ul class="list-inline mb-0">
            <li class="list-inline-item">
              <a class="btn btn-xs btn-icon btn-soft-secondary rounded" href="#">
                <i class="fab fa-facebook-f"></i>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-xs btn-icon btn-soft-secondary rounded" href="#">
                <i class="fab fa-google"></i>
              </a>
            </li>
            <li class="list-inline-item">
              <a class="btn btn-xs btn-icon btn-soft-secondary rounded" href="#">
                <i class="fab fa-twitter"></i>
              </a>
            </li>
          </ul>
          <!-- End Social Networks -->
        </div>
      </div>
      <!-- End Team -->
    </div>

    <div class="col-sm-6 col-lg-3 px-2 mb-3">
      <!-- Team -->
      <div class="card h-100 transition-3d-hover">
        <div class="card-body">
          <div class="avatar avatar-lg avatar-circle mb-4">
            <img class="avatar-img" src="../../assets/img/100x100/img12.jpg" alt="Image Description">
          </div>

          <span class="d-block small font-weight-bold text-cap mb-1">Want a new challenge?</span>
          <h4 class="text-lh-sm">Join us</h4>
          <p class="font-size-1">Browse through our job opportunities and become a member of the family!</p>
        </div>

        <div class="card-footer border-0 pt-0">
          <a class="btn btn-xs btn-soft-secondary" href="#">View Open Jobs</a>
        </div>
      </div>
      <!-- End Team -->
    </div>
  </div>

  <!-- Info -->
  <div class="text-center">
    <div class="d-inline-block font-size-1 border bg-white text-center rounded-pill py-3 px-4">
      Wanna work with us? <a class="font-weight-bold ml-3" href="hire-us.html">We are hiring <span class="fas fa-angle-right fa-sm ml-1"></span></a>
    </div>
  </div>
  <!-- End Info -->
</div>
<!-- End Team Section -->