Clients

Display the clients of your business that will make your site stand out on the web.

Simple #1

Image Description
Image Description
Image Description
              
                <!-- Clients Section -->
                <div class="d-flex justify-content-center">
                  <div class="mx-4">
                    <img class="u-clients" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
                  </div>
                  <div class="mx-4">
                    <img class="u-clients" src="../../assets/svg/clients-logo/google.svg" alt="Image Description">
                  </div>
                  <div class="mx-4">
                    <img class="u-clients" src="../../assets/svg/clients-logo/spotify.svg" alt="Image Description">
                  </div>
                </div>
                <!-- End Clients Section -->
              
            

Simple #2

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
99.9%

Believe basic computer skills are all you need to plan projects with Front Pay.

              
                <!-- Clients Section -->
                <div class="container">
                  <div class="row align-items-lg-center">
                    <div class="col-md-7 col-lg-8 mb-5 mb-md-0">
                      <!-- Clients Section -->
                      <div class="row justify-content-center border-top space-top-2">
                        <div class="col-4 col-lg-2 mb-4 mb-lg-0">
                          <div class="mx-2">
                            <img class="u-clients" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
                          </div>
                        </div>
                        <div class="col-4 col-lg-2 mb-4 mb-lg-0">
                          <div class="mx-2">
                            <img class="u-clients" src="../../assets/svg/clients-logo/google.svg" alt="Image Description">
                          </div>
                        </div>
                        <div class="col-4 col-lg-2 mb-4 mb-lg-0">
                          <div class="mx-2">
                            <img class="u-clients" src="../../assets/svg/clients-logo/spotify.svg" alt="Image Description">
                          </div>
                        </div>
                        <div class="col-4 col-lg-2 mb-4 mb-lg-0">
                          <div class="mx-2">
                            <img class="u-clients" src="../../assets/svg/clients-logo/airbnb.svg" alt="Image Description">
                          </div>
                        </div>
                        <div class="col-4 col-lg-2 mb-4 mb-lg-0">
                          <div class="mx-2">
                            <img class="u-clients" src="../../assets/svg/clients-logo/shopify.svg" alt="Image Description">
                          </div>
                        </div>
                        <div class="col-4 col-lg-2 mb-4 mb-lg-0">
                          <div class="mx-2">
                            <img class="u-clients" src="../../assets/svg/clients-logo/netflix.svg" alt="Image Description">
                          </div>
                        </div>
                      </div>
                      <!-- End Clients Section -->
                    </div>

                    <div class="col-md-5 col-lg-4">
                      <div class="pl-md-4">
                        <span class="d-block display-3 text-primary font-weight-medium text-lh-sm">99.9%</span>
                        <p>Believe basic computer skills are all you need to plan projects with Front Pay.</p>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Clients Section -->
              
            

Simple #3

Trusted by the world's best

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
              
                <!-- Clients Section -->
                <div class="container space-1">
                  <div class="w-lg-75 mx-lg-auto">
                    <div class="text-center mb-4">
                      <h2 class="u-divider u-divider--text">Trusted by the world's best</h2>
                    </div>

                    <div class="row justify-content-between text-center">
                      <div class="col-4 col-lg-2 mb-5 mb-lg-0">
                        <div class="mx-4">
                          <img class="u-clients" src="../../assets/svg/clients-logo/amazon.svg" alt="Image Description">
                        </div>
                      </div>
                      <div class="col-4 col-lg-2 mb-5 mb-lg-0">
                        <div class="mx-4">
                          <img class="u-clients" src="../../assets/svg/clients-logo/netflix.svg" alt="Image Description">
                        </div>
                      </div>
                      <div class="col-4 col-lg-2 mb-5 mb-lg-0">
                        <div class="mx-4">
                          <img class="u-clients" src="../../assets/svg/clients-logo/paypal.svg" alt="Image Description">
                        </div>
                      </div>
                      <div class="col-4 col-lg-2">
                        <div class="mx-4">
                          <img class="u-clients" src="../../assets/svg/clients-logo/slack.svg" alt="Image Description">
                        </div>
                      </div>
                      <div class="col-4 col-lg-2">
                        <div class="mx-4">
                          <img class="u-clients" src="../../assets/svg/clients-logo/samsung.svg" alt="Image Description">
                        </div>
                      </div>
                      <div class="col-4 col-lg-2">
                        <div class="mx-4">
                          <img class="u-clients" src="../../assets/svg/clients-logo/stripe.svg" alt="Image Description">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Clients Section -->
              
            

White #1

Image Description
Image Description
Image Description
              
                <!-- Clients Section -->
                <div class="d-flex justify-content-center bg-primary p-5">
                  <div class="mx-4">
                    <img class="u-clients" src="../../assets/svg/clients-logo/slack-white.svg" alt="Image Description">
                  </div>
                  <div class="mx-4">
                    <img class="u-clients" src="../../assets/svg/clients-logo/google-white.svg" alt="Image Description">
                  </div>
                  <div class="mx-4">
                    <img class="u-clients" src="../../assets/svg/clients-logo/spotify-white.svg" alt="Image Description">
                  </div>
                </div>
                <!-- End Clients Section -->
              
            

Colorful #1

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
              
                <!-- Clients Section -->
                <div class="row justify-content-center text-center">
                  <div class="col-4 col-md-2 mb-8">
                    <img class="u-clients" src="../../assets/svg/clients-logo/amazon-original.svg" alt="Image Description">
                  </div>
                  <div class="col-4 col-md-2 mb-8">
                    <img class="u-clients" src="../../assets/svg/clients-logo/alphabet-original.svg" alt="Image Description">
                  </div>
                  <div class="col-4 col-md-2 mb-8">
                    <img class="u-clients" src="../../assets/svg/clients-logo/paypal-original.svg" alt="Image Description">
                  </div>
                  <div class="col-4 col-md-2 mb-8">
                    <img class="u-clients" src="../../assets/svg/clients-logo/slack-original.svg" alt="Image Description">
                  </div>
                  <div class="col-4 col-md-2 mb-8">
                    <img class="u-clients" src="../../assets/svg/clients-logo/samsung-original.svg" alt="Image Description">
                  </div>

                  <div class="w-100"></div>

                  <div class="col-4 col-md-2 mb-8">
                    <img class="u-clients" src="../../assets/svg/clients-logo/google-original.svg" alt="Image Description">
                  </div>
                  <div class="col-4 col-md-2 mb-8">
                    <img class="u-clients" src="../../assets/svg/clients-logo/fitbit-original.svg" alt="Image Description">
                  </div>
                  <div class="col-4 col-md-2 mb-8">
                    <img class="u-clients" src="../../assets/svg/clients-logo/shopify-original.svg" alt="Image Description">
                  </div>
                  <div class="col-4 col-md-2 mb-8">
                    <img class="u-clients" src="../../assets/svg/clients-logo/stripe-original.svg" alt="Image Description">
                  </div>

                  <div class="w-100"></div>

                  <div class="col-4 col-md-2 mb-8">
                    <img class="u-clients" src="../../assets/svg/clients-logo/mapbox-original.svg" alt="Image Description">
                  </div>
                  <div class="col-4 col-md-2 mb-8">
                    <img class="u-clients" src="../../assets/svg/clients-logo/spotify-original.svg" alt="Image Description">
                  </div>
                  <div class="col-4 col-md-2 mb-8">
                    <img class="u-clients" src="../../assets/svg/clients-logo/uber-original.svg" alt="Image Description">
                  </div>
                  <div class="col-4 col-md-2 mb-8 mb-md-0">
                    <img class="u-clients" src="../../assets/svg/clients-logo/airbnb-original.svg" alt="Image Description">
                  </div>
                  <div class="col-4 col-md-2 mb-8 mb-md-0">
                    <img class="u-clients" src="../../assets/svg/clients-logo/netflix-original.svg" alt="Image Description">
                  </div>

                  <div class="w-100"></div>

                  <div class="col-4 col-md-2 mb-8 mb-md-0">
                    <img class="u-clients" src="../../assets/svg/clients-logo/embark-original.svg" alt="Image Description">
                  </div>
                  <div class="col-4 col-md-2 mb-8 mb-md-0">
                    <img class="u-clients" src="../../assets/svg/clients-logo/lenovo-original.svg" alt="Image Description">
                  </div>
                  <div class="col-4 col-md-2">
                    <img class="u-clients" src="../../assets/svg/clients-logo/boring-company-original.svg" alt="Image Description">
                  </div>
                  <div class="col-4 col-md-2">
                    <img class="u-clients" src="../../assets/svg/clients-logo/hubspot-original.svg" alt="Image Description">
                  </div>
                </div>
                <!-- End Clients Section -->
              
            

Parallax #1

Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description
Image Description

Our branding works

Learn More
              
                <!-- Works Section -->
                <div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll bg-light" data-options='{direction: "reverse"}'>
                  <div class="dzsparallaxer--target">
                    <div class="container-fluid px-lg-6">
                      <div class="row justify-content-center">
                        <div class="col-3 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"15", mid:"0", final:"-15"}]'>
                          <!-- Logo -->
                          <div class="d-none d-md-block bg-white u-lg-avatar shadow-sm rounded-circle p-4 mx-auto">
                            <img class="img-fluid" src="../../assets/img/160x160/img17.png" alt="Image Description">
                          </div>
                          <!-- End Logo -->
                        </div>
                        <div class="col-3 mb-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"5", mid:"0", final:"-5"}]'>
                          <!-- Logo -->
                          <div class="bg-white u-lg-avatar shadow-sm rounded-circle p-4 mx-auto">
                            <img class="img-fluid" src="../../assets/img/160x160/img12.png" alt="Image Description">
                          </div>
                          <!-- End Logo -->
                        </div>
                        <div class="col-3 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"11", mid:"0", final:"-11"}]'>
                          <!-- Logo -->
                          <div class="d-none d-md-block bg-white u-lg-avatar shadow-sm rounded-circle p-4 mx-auto">
                            <img class="img-fluid" src="../../assets/img/160x160/img13.png" alt="Image Description">
                          </div>
                          <!-- End Logo -->
                        </div>
                      </div>

                      <div class="row justify-content-between">
                        <div class="col-3 mb-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"7", mid:"0", final:"-7"}]'>
                          <!-- Logo -->
                          <div class="bg-white u-lg-avatar shadow-sm rounded-circle p-4">
                            <img class="img-fluid" src="../../assets/img/160x160/img14.png" alt="Image Description">
                          </div>
                          <!-- End Logo -->
                        </div>
                        <div class="col-3 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"7", mid:"0", final:"-7"}]'>
                          <!-- Logo -->
                          <div class="bg-white u-lg-avatar shadow-sm rounded-circle p-4 ml-auto">
                            <img class="img-fluid" src="../../assets/img/160x160/img15.png" alt="Image Description">
                          </div>
                          <!-- End Logo -->
                        </div>
                      </div>

                      <div class="row">
                        <div class="col-3 offset-1 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"15", mid:"0", final:"-15"}]'>
                          <!-- Logo -->
                          <div class="d-none d-md-block bg-white u-lg-avatar shadow-sm rounded-circle p-4 ml-auto">
                            <img class="img-fluid" src="../../assets/img/160x160/img8.jpg" alt="Image Description">
                          </div>
                          <!-- End Logo -->
                        </div>
                        <div class="col-3 offset-2 my-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"11", mid:"0", final:"-11"}]'>
                          <!-- Logo -->
                          <div class="d-none d-md-block bg-white u-lg-avatar shadow-sm rounded-circle p-4 ml-auto">
                            <img class="img-fluid" src="../../assets/img/160x160/img6.jpg" alt="Image Description">
                          </div>
                          <!-- End Logo -->
                        </div>
                      </div>

                      <div class="row justify-content-between">
                        <div class="col-4" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"11", mid:"0", final:"-11"}]'>
                          <!-- Logo -->
                          <div class="bg-white u-lg-avatar shadow-sm rounded-circle p-4 mx-auto">
                            <img class="img-fluid" src="../../assets/img/160x160/img16.png" alt="Image Description">
                          </div>
                          <!-- End Logo -->
                        </div>
                        <div class="col-4 mt-6" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"5", mid:"0", final:"-5"}]'>
                          <!-- Logo -->
                          <div class="d-none d-sm-block bg-white u-lg-avatar shadow-sm rounded-circle p-4 mx-auto">
                            <img class="img-fluid" src="../../assets/img/160x160/img10.jpg" alt="Image Description">
                          </div>
                          <!-- End Logo -->
                        </div>
                        <div class="col-4 mt-6" data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"15", mid:"0", final:"-15"}]'>
                          <!-- Logo -->
                          <div class="bg-white u-lg-avatar shadow-sm rounded-circle p-4 mx-auto">
                            <img class="img-fluid" src="../../assets/img/160x160/img11.jpg" alt="Image Description">
                          </div>
                          <!-- End Logo -->
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="container space-3 space-sm-4">
                    <!-- Title -->
                    <div class="w-md-80 w-lg-50 text-center mx-md-auto">
                      <h2 class="h1 font-weight-medium mb-5">Our branding works</h2>
                      <a class="btn btn-primary btn-pill btn-wide transition-3d-hover" href="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/" target="_blank">Learn More</a>
                    </div>
                    <!-- End Title -->
                  </div>
                </div>
                <!-- End Works Section -->
              
            
              
                <link rel="stylesheet" href="../../assets/vendor/dzsparallaxer/dzsparallaxer.css">
              
            
              
                <!-- JS Implementing Plugins -->
                <script src="../../assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>