Team

Decorate your website with wide variety of team sections.

Team #1

Maria Muszynska

Lead Designer

Jack Wayley

CEO, Director

Emmely Jackson

Marketer

Mark McManus

Project Manager

<!-- Team Section -->
<div class="container">
  <!-- Team Carousel -->
  <div class="js-slick-carousel u-slick u-slick--gutters-3"
       data-slides-show="4"
       data-slides-scroll="1"
       data-pagi-classes="d-lg-none text-center u-slick__pagination mb-7"
       data-responsive='[{
         "breakpoint": 992,
         "settings": {
           "slidesToShow": 3
         }
       }, {
         "breakpoint": 768,
         "settings": {
           "slidesToShow": 2
         }
       }, {
         "breakpoint": 554,
         "settings": {
           "slidesToShow": 1
         }
       }]'>
    <div class="js-slide pb-4">
      <!-- Team -->
      <img class="img-fluid w-100 rounded" src="../../assets/img/350x400/img1.jpg" alt="Image Description">
      <div class="card border-0 shadow-sm mt-n6 mx-3">
        <div class="card-body text-center p-4">
          <h3 class="h6 mb-1">Maria Muszynska</h3>
          <p class="font-size-1 mb-0">Lead Designer</p>
        </div>
      </div>
      <!-- End Team -->
    </div>

    <div class="js-slide pb-4">
      <!-- Team -->
      <img class="img-fluid w-100 rounded" src="../../assets/img/350x400/img2.jpg" alt="Image Description">
      <div class="card border-0 shadow-sm mt-n6 mx-3">
        <div class="card-body text-center p-4">
          <h3 class="h6 mb-1">Jack Wayley</h3>
          <p class="font-size-1 mb-0">CEO, Director</p>
        </div>
      </div>
      <!-- End Team -->
    </div>

    <div class="js-slide pb-4">
      <!-- Team -->
      <img class="img-fluid w-100 rounded" src="../../assets/img/350x400/img3.jpg" alt="Image Description">
      <div class="card border-0 shadow-sm mt-n6 mx-3">
        <div class="card-body text-center p-4">
          <h3 class="h6 mb-1">Emmely Jackson</h3>
          <p class="font-size-1 mb-0">Marketer</p>
        </div>
      </div>
      <!-- End Team -->
    </div>

    <div class="js-slide pb-4">
      <!-- Team -->
      <img class="img-fluid w-100 rounded" src="../../assets/img/350x400/img4.jpg" alt="Image Description">
      <div class="card border-0 shadow-sm mt-n6 mx-3">
        <div class="card-body text-center p-4">
          <h3 class="h6 mb-1">Mark McManus</h3>
          <p class="font-size-1 mb-0">Project Manager</p>
        </div>
      </div>
      <!-- End Team -->
    </div>
  </div>
  <!-- End Team Carousel -->

  <!-- Hire Us -->
  <div class="text-center">
    <div class="d-sm-inline-flex align-items-center shadow-sm rounded-pill p-2 pr-3">
      <span class="btn btn-xs btn-soft-primary btn-pill mb-2 mb-sm-0 mr-2">New</span>
      <span class="d-block d-sm-inline-block">
        We are hiring.
        <a href="../pages/hire-us.html">Send your application.</a>
      </span>
    </div>
  </div>
  <!-- End Hire Us -->
</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 Implementing Plugins -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>

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

Team #2

Maria Muszynska

#maria

I am an ambitious workaholic, but apart from that, pretty simple person.

Jack Wayley

#jack

I am an ambitious workaholic, but apart from that, pretty simple person.

Emmely Jackson

#emmely

I am an ambitious workaholic, but apart from that, pretty simple person.

Mark McManus

#mark

I am an ambitious workaholic, but apart from that, pretty simple person.

<!-- Team Section -->
<div class="container">
  <!-- Slick Carousel -->
  <div class="js-slick-carousel u-slick u-slick--gutters-3"
       data-slides-show="2"
       data-slides-scroll="1"
       data-pagi-classes="text-center u-slick__pagination mt-7 mb-0"
       data-responsive='[{
         "breakpoint": 992,
         "settings": {
           "slidesToShow": 1
         }
       }, {
         "breakpoint": 768,
         "settings": {
           "slidesToShow": 1
         }
       }, {
         "breakpoint": 554,
         "settings": {
           "slidesToShow": 1
         }
       }]'>
    <div class="js-slide px-3">
      <!-- Team -->
      <div class="row">
        <div class="col-sm-6 d-sm-flex align-content-sm-start flex-sm-column text-center text-sm-left mb-7 mb-sm-0">
          <div class="w-100">
            <h3 class="h5 mb-4">Maria Muszynska</h3>
          </div>
          <div class="d-inline-block">
            <span class="badge badge-primary badge-pill badge-bigger mb-3">#maria</span>
          </div>
          <p class="font-size-1">I am an ambitious workaholic, but apart from that, pretty simple person.</p>

          <!-- Social Networks -->
          <ul class="list-inline mt-auto mb-0">
            <li class="list-inline-item mx-0">
              <a class="btn btn-sm btn-icon btn-soft-secondary" href="#">
                <span class="fab fa-facebook-f btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item mx-0">
              <a class="btn btn-sm btn-icon btn-soft-secondary" href="#">
                <span class="fab fa-google btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item mx-0">
              <a class="btn btn-sm btn-icon btn-soft-secondary" href="#">
                <span class="fab fa-twitter btn-icon__inner"></span>
              </a>
            </li>
          </ul>
          <!-- End Social Networks -->
        </div>
        <div class="col-sm-6">
          <img class="img-fluid rounded mx-auto" src="../../assets/img/350x400/img1.jpg" alt="Image Description">
        </div>
      </div>
      <!-- End Team -->
    </div>

    <div class="js-slide px-3">
      <!-- Team -->
      <div class="row">
        <div class="col-sm-6 d-sm-flex align-content-sm-start flex-sm-column text-center text-sm-left mb-7 mb-sm-0">
          <div class="w-100">
            <h3 class="h5 mb-4">Jack Wayley</h3>
          </div>
          <div class="d-inline-block">
            <span class="badge badge-primary badge-pill badge-bigger mb-3">#jack</span>
          </div>
          <p class="font-size-1">I am an ambitious workaholic, but apart from that, pretty simple person.</p>

          <!-- Social Networks -->
          <ul class="list-inline mt-auto mb-0">
            <li class="list-inline-item mx-0">
              <a class="btn btn-sm btn-icon btn-soft-secondary" href="#">
                <span class="fab fa-facebook-f btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item mx-0">
              <a class="btn btn-sm btn-icon btn-soft-secondary" href="#">
                <span class="fab fa-google btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item mx-0">
              <a class="btn btn-sm btn-icon btn-soft-secondary" href="#">
                <span class="fab fa-twitter btn-icon__inner"></span>
              </a>
            </li>
          </ul>
          <!-- End Social Networks -->
        </div>
        <div class="col-sm-6">
          <img class="img-fluid rounded mx-auto" src="../../assets/img/350x400/img2.jpg" alt="Image Description">
        </div>
      </div>
      <!-- End Team -->
    </div>

    <div class="js-slide px-3">
      <!-- Team -->
      <div class="row">
        <div class="col-sm-6 d-sm-flex align-content-sm-start flex-sm-column text-center text-sm-left mb-7 mb-sm-0">
          <div class="w-100">
            <h3 class="h5 mb-4">Emmely Jackson</h3>
          </div>
          <div class="d-inline-block">
            <span class="badge badge-primary badge-pill badge-bigger mb-3">#emmely</span>
          </div>
          <p class="font-size-1">I am an ambitious workaholic, but apart from that, pretty simple person.</p>

          <!-- Social Networks -->
          <ul class="list-inline mt-auto mb-0">
            <li class="list-inline-item mx-0">
              <a class="btn btn-sm btn-icon btn-soft-secondary" href="#">
                <span class="fab fa-facebook-f btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item mx-0">
              <a class="btn btn-sm btn-icon btn-soft-secondary" href="#">
                <span class="fab fa-google btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item mx-0">
              <a class="btn btn-sm btn-icon btn-soft-secondary" href="#">
                <span class="fab fa-twitter btn-icon__inner"></span>
              </a>
            </li>
          </ul>
          <!-- End Social Networks -->
        </div>
        <div class="col-sm-6">
          <img class="img-fluid rounded mx-auto" src="../../assets/img/350x400/img3.jpg" alt="Image Description">
        </div>
      </div>
      <!-- End Team -->
    </div>

    <div class="js-slide px-3">
      <!-- Team -->
      <div class="row">
        <div class="col-sm-6 d-sm-flex align-content-sm-start flex-sm-column text-center text-sm-left mb-7 mb-sm-0">
          <div class="w-100">
            <h3 class="h5 mb-4">Mark McManus</h3>
          </div>
          <div class="d-inline-block">
            <span class="badge badge-primary badge-pill badge-bigger mb-3">#mark</span>
          </div>
          <p class="font-size-1">I am an ambitious workaholic, but apart from that, pretty simple person.</p>

          <!-- Social Networks -->
          <ul class="list-inline mt-auto mb-0">
            <li class="list-inline-item mx-0">
              <a class="btn btn-sm btn-icon btn-soft-secondary" href="#">
                <span class="fab fa-facebook-f btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item mx-0">
              <a class="btn btn-sm btn-icon btn-soft-secondary" href="#">
                <span class="fab fa-google btn-icon__inner"></span>
              </a>
            </li>
            <li class="list-inline-item mx-0">
              <a class="btn btn-sm btn-icon btn-soft-secondary" href="#">
                <span class="fab fa-twitter btn-icon__inner"></span>
              </a>
            </li>
          </ul>
          <!-- End Social Networks -->
        </div>
        <div class="col-sm-6">
          <img class="img-fluid rounded mx-auto" src="../../assets/img/350x400/img4.jpg" alt="Image Description">
        </div>
      </div>
      <!-- End Team -->
    </div>
  </div>
  <!-- End Slick Carousel -->
</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 Implementing Plugins -->
<script src="../../assets/js/components/hs.slick-carousel.js"></script>

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