Clients - Snippets | Unify - Multipurpose Responsive Template

Component #1

              
                <!-- Clients -->
                <div class="container">
                  <!-- Swiper Slider -->
                  <div class="js-swiper-clients swiper text-center">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/mailchimp-dark.svg" alt="Logo">
                      </div>
                      <!-- End Slide -->

                      <div class="swiper-slide">
                        <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/sass-dark.svg" alt="Logo">
                      </div>
                      <!-- End Slide -->

                      <div class="swiper-slide">
                        <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/forbes-dark.svg" alt="Logo">
                      </div>
                      <!-- End Slide -->

                      <div class="swiper-slide">
                        <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/gitlab-dark.svg" alt="Logo">
                      </div>
                      <!-- End Slide -->

                      <div class="swiper-slide">
                        <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/brands/hubspot-dark.svg" alt="Logo">
                      </div>
                      <!-- End Slide -->
                    </div>
                  </div>
                  <!-- End Swiper Slider -->
                </div>
                <!-- End Clients -->

              
                <link rel="stylesheet" href="../node_modules/swiper/swiper-bundle.min.css">

              
                <script src="../node_modules/swiper/swiper-bundle.min.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var swiper = new Swiper('.js-swiper-clients',{
                      slidesPerView: 2,
                      breakpoints: {
                        380: {
                          slidesPerView: 3,
                          spaceBetween: 15,
                        },
                        768: {
                          slidesPerView: 4,
                          spaceBetween: 15,
                        },
                        1024: {
                          slidesPerView: 5,
                          spaceBetween: 15,
                        },
                      },
                    });
                  })()
                </script>

Component #2

Preview
HTML

Trusted by Open Source, enterprise, and more than 37,000 of you

              
                <!-- Clients -->
                <div class="container content-space-1">
                  <!-- Heading -->
                  <div class="w-lg-75 text-center mx-lg-auto mb-10">
                    <h2>Trusted by Open Source, enterprise, and more than 37,000 of you</h2>
                  </div>
                  <!-- End Heading -->

                  <div class="row justify-content-center text-center">
                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/amazon-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/kaplan-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/google-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/airbnb-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/shopify-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/vidados-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/capsule-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/forbes-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/business-insider-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/hubspot-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->

                    <div class="col-4 col-sm-3 col-md-2 py-3">
                      <img class="avatar avatar-lg avatar-4x3 avatar-centered" src="../assets/svg/brands/sass-dark.svg" alt="Logo">
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Clients -->

Component #3

Preview
HTML

Integrate with your favorite tools

Have apps you and your team love and rely on every day? Find them right here. Integrate them in a few clicks.

Jira

Google

Asana

Slack

Dropbox

See all integrations

              
                <!-- Clients -->
                <div class="container content-space-1">
                  <!-- Heading -->
                  <div class="w-lg-65 text-center mx-lg-auto mb-7">
                    <h2>Integrate with your favorite tools</h2>
                    <p>Have apps you and your team love and rely on every day? Find them right here. Integrate them in a few clicks.</p>
                  </div>
                  <!-- End Heading -->
                  
                  <div class="row justify-content-center mb-7">
                    <div class="col-auto">
                      <div class="text-center">
                        <div class="avatar avatar-4x3 shadow-sm rounded-3 p-3 mx-auto mb-3">
                          <img class="avatar-img" src="../assets/svg/brands/jira-icon.svg" alt="Image Description">
                        </div>
                        <h6 class="fw-medium">Jira</h6>
                      </div>
                    </div>
                    <!-- End Col -->

                    <div class="col-auto">
                      <div class="text-center">
                        <div class="avatar avatar-4x3 shadow-sm rounded-3 p-3 mx-auto mb-3">
                          <img class="avatar-img" src="../assets/svg/brands/google-icon.svg" alt="Image Description">
                        </div>
                        <h6 class="fw-medium">Google</h6>
                      </div>
                    </div>
                    <!-- End Col -->

                    <div class="col-auto">
                      <div class="text-center">
                        <div class="avatar avatar-4x3 shadow-sm rounded-3 p-3 mx-auto mb-3">
                          <img class="avatar-img" src="../assets/svg/brands/asana-icon.svg" alt="Image Description">
                        </div>
                        <h6 class="fw-medium">Asana</h6>
                      </div>
                    </div>
                    <!-- End Col -->

                    <div class="col-auto">
                      <div class="text-center">
                        <div class="avatar avatar-4x3 shadow-sm rounded-3 p-3 mx-auto mb-3">
                          <img class="avatar-img" src="../assets/svg/brands/slack-icon.svg" alt="Image Description">
                        </div>
                        <h6 class="fw-medium">Slack</h6>
                      </div>
                    </div>
                    <!-- End Col -->

                    <div class="col-auto">
                      <div class="text-center">
                        <div class="avatar avatar-4x3 shadow-sm rounded-3 p-3 mx-auto mb-3">
                          <img class="avatar-img" src="../assets/svg/brands/dropbox-icon.svg" alt="Image Description">
                        </div>
                        <h6 class="fw-medium">Dropbox</h6>
                      </div>
                    </div>
                    <!-- End Col -->

                    <div class="col-auto">
                      <div class="text-center">
                        <div class="avatar avatar-4x3 shadow-sm rounded-3 p-3 mx-auto">
                          <img class="avatar-img" src="../assets/svg/components/plus-icon.svg" alt="Image Description">
                        </div>
                      </div>
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->

                  <div class="w-lg-65 text-center mx-lg-auto">
                    <a class="btn btn-primary" href="#">See all integrations</a>
                  </div>
                </div>
                <!-- End Clients -->

How we thrive

We want to thrive, both at work and in our personal lives. There is a shared understanding of the common threads that help us be our best, and as we continue to invest in them, we continue to grow.

These are the values that drive our daily decisions, develop our relationships, and guide our strategy:

Be sincere
Stronger together
Expect extraordinary

Take intelligent risks
Keep it simple
Pause and play

              
                <!-- Features -->
                <div class="container content-space-1">
                  <div class="row justify-content-lg-between align-items-md-center">
                    <div class="col-md-6 mb-10 mb-md-0">
                      <h2>How we thrive</h2>
                      <p>We want to thrive, both at work and in our personal lives. There is a shared understanding of the common threads that help us be our best, and as we continue to invest in them, we continue to grow.</p>
                      <p>These are the values that drive our daily decisions, develop our relationships, and guide our strategy:</p>

                      <div class="row">
                        <div class="col-md-6">
                          <!-- List Pointer -->
                          <ul class="list-checked list-checked-primary mb-0">
                            <li class="list-checked-item">Be <span class="fw-bold">sincere</span></li>
                            <li class="list-checked-item">Stronger together</li>
                            <li class="list-checked-item">Expect <span class="fw-bold">extraordinary</span></li>
                          </ul>
                          <!-- End List Pointer -->
                        </div>
                        <!-- End Col -->

                        <div class="col-md-6">
                          <!-- List Pointer -->
                          <ul class="list-checked list-checked-primary mb-0">
                            <li class="list-checked-item">Take intelligent risks</li>
                            <li class="list-checked-item">Keep it <span class="fw-bold">simple</span></li>
                            <li class="list-checked-item"><span class="fw-bold">Pause</span> and play</li>
                          </ul>
                          <!-- End List Pointer -->
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                    <!-- End Col -->

                    <div class="col-md-6 col-lg-5">
                      <div class="row justify-content-end">
                        <div class="col-3 mb-4">
                          <!-- Logo -->
                          <div class="d-block avatar avatar-lg rounded-circle shadow-sm p-3 mt-n3 ms-5">
                            <img class="avatar-img" src="../assets/svg/brands/google-icon.svg" alt="Image Description">
                          </div>
                          <!-- End Logo -->
                        </div>
                        <!-- End Col -->

                        <div class="col-4 mb-4">
                          <!-- Logo -->
                          <div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 mx-auto mt-5">
                            <img class="avatar-img" src="../assets/svg/brands/dropbox-icon.svg" alt="Image Description">
                          </div>
                          <!-- End Logo -->
                        </div>
                        <!-- End Col -->

                        <div class="col-4 mb-4">
                          <!-- Logo -->
                          <div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 ms-auto">
                            <img class="avatar-img" src="../assets/svg/brands/google-icon.svg" alt="Image Description">
                          </div>
                          <!-- End Logo -->
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->

                      <div class="row">
                        <div class="col-3 offset-1 my-4">
                          <!-- Logo -->
                          <div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 ms-auto">
                            <img class="avatar-img" src="../assets/svg/brands/jira-icon.svg" alt="Image Description">
                          </div>
                          <!-- End Logo -->
                        </div>
                        <!-- End Col -->

                        <div class="col-3 offset-2 my-4">
                          <!-- Logo -->
                          <div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 ms-auto">
                            <img class="avatar-img" src="../assets/svg/brands/slack-icon.svg" alt="Image Description">
                          </div>
                          <!-- End Logo -->
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->

                      <div class="row">
                        <div class="col-6">
                          <!-- Logo -->
                          <div class="d-block avatar avatar-lg rounded-circle shadow-sm p-3 ms-auto">
                            <img class="avatar-img" src="../assets/svg/brands/google-adz-icon.svg" alt="Image Description">
                          </div>
                          <!-- End Logo -->
                        </div>
                        <!-- End Col -->

                        <div class="col-6 mt-6">
                          <!-- Logo -->
                          <div class="d-block avatar avatar-xl rounded-circle shadow-sm p-4 ms-auto">
                            <img class="avatar-img" src="../assets/svg/brands/behance-icon.svg" alt="Image Description">
                          </div>
                          <!-- End Logo -->
                        </div>
                        <!-- End Col -->
                      </div>
                      <!-- End Row -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Features -->