Testimonials - Snippets | Space - Multipurpose Responsive Template

Component #1

Preview
HTML

“ I just wanted to say that I'm very happy with my purchase of Space so far. The documentation is outstanding - clear and detailed. ”

Philip

              
                <!-- Testimonials -->
                <div class="container content-space-1">
                  <div class="text-center">
                    <img class="mb-5" src="../assets/svg/illustrations/oc-review.svg" alt="Illustration" style="width: 15rem;">
                  </div>

                  <!-- Blockquote -->
                  <figure class="w-md-75 text-center mx-md-auto">
                    <blockquote class="blockquote">“ I just wanted to say that I'm very happy with my purchase of Space so far. The documentation is outstanding - clear and detailed. ”</blockquote>

                    <figcaption class="blockquote-footer text-center mb-7">
                      Philip
                      <span class="blockquote-footer-source">Product Manager | Mailchimp</span>
                    </figcaption>

                    <img class="avatar avatar-xxl avatar-4x3" src="../assets/svg/brands/mailchimp-primary.svg" alt="Logo">
                  </figure>
                  <!-- End Blockquote -->
                </div>
                <!-- End Testimonials -->

Component #2

“ Truly great template and great costumer support. Very precise documentation with many features well explained. ”

              
                <!-- Testimonials -->
                <div class="container content-space-1">
                  <div class="row align-items-md-center">
                    <div class="col-md-6 order-md-2 mb-10 mb-md-0">
                      <a href="https://www.youtube.com/watch?v=0qisGSwZym4" role="button" data-fslightbox="youtube-video">
                        <div class="banner-bottom-end-n3rem">
                          <img class="img-fluid" src="../assets/img/950x950/img6.jpg" alt="Image Description">

                          <div class="position-absolute bottom-0 start-0 p-5">
                            <!-- Fancybox -->
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0">
                                <span class="btn btn-icon btn-white text-primary">
                                  <i class="bi-play-circle-fill"></i>
                                </span>
                              </div>
                              <div class="flex-grow-1 ms-3">
                                <span class="text-white">Watch Andrea’s story</span>
                              </div>
                            </div>
                            <!-- End Fancybox -->
                          </div>
                        </div>
                      </a>
                    </div>
                    <!-- End Col -->

                    <div class="col-md-6">
                      <div class="pe-md-5">
                        <!-- Blockquote -->
                        <figure class="mb-7">
                          <blockquote class="blockquote">“ Truly great template and great costumer support. Very precise documentation with many features well explained. ”</blockquote>

                          <figcaption class="blockquote-footer">
                            Andrea
                            <span class="blockquote-footer-source">Director of Sales | MailChimp</span>
                          </figcaption>
                        </figure>
                        <!-- End Blockquote -->

                        <img class="avatar avatar-xxl avatar-4x3" src="../assets/svg/brands/mailchimp-primary.svg" alt="Logo">
                      </div>
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Testimonials -->

              
                <!-- JS Implementing Plugins -->
                <script src="../node_modules/fslightbox/index.js"></script>

Component #3

Space powers ambitious entrepreneurs all over the world

“ This is a beautiful template with exciting components and endless features. ”

Andrea

Product Manager | Mailchimp

“ I plan to use Space in many more projects, and almost want to keep it to myself ”

John

Director of Sales | Vidados

“ Great design and thorough documentation, all backed with amazing support. ”

Alex

Product Designer | Capsule

“ It has many landing page variations to choose from, which one is always a big advantage. ”

Marcel

HR | Shopify

“ It is a breeze to work with and really love the snippets to pick out what you want in your design. ”

Sebastien

Lead Developer | amazon

              
                <!-- Testimonials -->
                <div class="bg-soft-warning">
                  <div class="container content-space-1 content-space-md-3">
                    <!-- Heading -->
                    <div class="w-lg-65 text-center mx-lg-auto mb-7">
                      <h3>Space powers ambitious entrepreneurs all over the world</h3>
                    </div>
                    <!-- End Heading -->

                    <!-- Swiper Slider -->
                    <div class="js-swiper swiper swiper-equal-height">
                      <div class="swiper-wrapper">
                        <!-- Slide -->
                        <div class="swiper-slide">
                          <!-- Card -->
                          <div class="card">
                            <div class="card-body">
                              <img class="avatar avatar-lg avatar-4x3 mb-4" src="../assets/svg/brands/mailchimp-primary.svg" alt="Logo">
                              <blockquote class="blockquote blockquote-sm">“ This is a beautiful template with exciting components and endless features. ”</blockquote>
                            </div>

                            <div class="card-footer">
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                  <img class="avatar avatar-circle" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                                </div>
                                <div class="flex-grow-1 ms-3">
                                  <h6 class="mb-0">Andrea</h6>
                                  <span class="d-block">Product Manager | Mailchimp</span>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Card -->
                        </div>
                        <!-- End Slide -->

                        <!-- Slide -->
                        <div class="swiper-slide">
                          <!-- Card -->
                          <div class="card">
                            <div class="card-body">
                              <img class="avatar avatar-lg avatar-4x3 mb-4" src="../assets/svg/brands/vidados-primary.svg" alt="Logo">
                              <blockquote class="blockquote blockquote-sm">“ I plan to use Space in many more projects, and almost want to keep it to myself ”</blockquote>
                            </div>

                            <div class="card-footer">
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                  <img class="avatar avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                                </div>
                                <div class="flex-grow-1 ms-3">
                                  <h6 class="mb-0">John</h6>
                                  <span class="d-block">Director of Sales | Vidados</span>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Card -->
                        </div>
                        <!-- End Slide -->

                        <!-- Slide -->
                        <div class="swiper-slide">
                          <!-- Card -->
                          <div class="card">
                            <div class="card-body">
                              <img class="avatar avatar-lg avatar-4x3 mb-4" src="../assets/svg/brands/capsule-primary.svg" alt="Logo">
                              <blockquote class="blockquote blockquote-sm">“ Great design and thorough documentation, all backed with amazing support. ”</blockquote>
                            </div>

                            <div class="card-footer">
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                  <img class="avatar avatar-circle" src="../assets/img/160x160/img6.jpg" alt="Image Description">
                                </div>
                                <div class="flex-grow-1 ms-3">
                                  <h6 class="mb-0">Alex</h6>
                                  <span class="d-block">Product Designer | Capsule</span>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Card -->
                        </div>
                        <!-- End Slide -->

                        <!-- Slide -->
                        <div class="swiper-slide">
                          <!-- Card -->
                          <div class="card">
                            <div class="card-body">
                              <img class="avatar avatar-lg avatar-4x3 mb-4" src="../assets/svg/brands/shopify-primary.svg" alt="Logo">
                              <blockquote class="blockquote blockquote-sm">“ It has many landing page variations to choose from, which one is always a big advantage. ”</blockquote>
                            </div>

                            <div class="card-footer">
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                  <img class="avatar avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
                                </div>
                                <div class="flex-grow-1 ms-3">
                                  <h6 class="mb-0">Marcel</h6>
                                  <span class="d-block">HR | Shopify</span>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Card -->
                        </div>
                        <!-- End Slide -->

                        <!-- Slide -->
                        <div class="swiper-slide">
                          <!-- Card -->
                          <div class="card">
                            <div class="card-body">
                              <img class="avatar avatar-lg avatar-4x3 mb-4" src="../assets/svg/brands/amazon-primary.svg" alt="Logo">
                              <blockquote class="blockquote blockquote-sm">“ It is a breeze to work with and really love the snippets to pick out what you want in your design. ”</blockquote>
                            </div>

                            <div class="card-footer">
                              <div class="d-flex align-items-center">
                                <div class="flex-shrink-0">
                                  <img class="avatar avatar-circle" src="../assets/img/160x160/img5.jpg" alt="Image Description">
                                </div>
                                <div class="flex-grow-1 ms-3">
                                  <h6 class="mb-0">Sebastien</h6>
                                  <span class="d-block">Lead Developer | amazon</span>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Card -->
                        </div>
                        <!-- End Slide -->
                      </div>

                      <!-- Pagination -->
                      <div class="js-swiper-pagination swiper-pagination"></div>

                      <!-- Preloader -->
                      <div class="js-swiper-preloader swiper-preloader">
                        <div class="spinner-border text-primary" role="status">
                          <span class="visually-hidden">Loading...</span>
                        </div>
                      </div>
                      <!-- End Preloader -->
                    </div>
                    <!-- End Swiper Slider -->
                  </div>
                </div>
                <!-- End Testimonials -->

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

              
                <!-- JS Implementing Plugins -->
                <script src="../node_modules/swiper/swiper-bundle.min.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var swiper = new Swiper('.js-swiper', {
                      mousewheel: true,
                      pagination: {
                        el: '.js-swiper-pagination',
                        clickable: true,
                      },
                      breakpoints: {
                        580: {
                          slidesPerView: 1,
                          spaceBetween: 15,
                        },
                        768: {
                          slidesPerView: 2,
                          spaceBetween: 15,
                        },
                        1024: {
                          slidesPerView: 3,
                          spaceBetween: 15,
                        },
                      },
                      on: {
                        'imagesReady': function (swiper) {
                          const preloader = swiper.el.querySelector('.js-swiper-preloader')
                          preloader.parentNode.removeChild(preloader)
                        }
                      }
                    });
                  })()
                </script>

“ Truly great template and great costumer support. Very precise documentation with many features well explained. ”

              
                <!-- Testimonials -->
                <div class="bg-soft-success">
                  <div class="container py-3">
                    <div class="row">
                      <div class="col-sm-4">
                        <!-- Images -->
                        <div class="d-none d-sm-block bg-img-center h-100" style="background-image: url(../assets/img/900x700/img3.jpg);"></div>
                        <div class="d-sm-none">
                          <img class="img-fluid" src="../assets/img/900x700/img3.jpg" alt="Image Description">
                        </div>
                        <!-- End Images -->
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-8">
                        <!-- Blockquote -->
                        <figure class="ps-md-5 py-5 content-space-md-3">
                          <img class="mb-5" src="../assets/svg/brands/forbes-primary.svg" alt="Logo" style="max-width: 7rem;">

                          <blockquote class="blockquote">“ Truly great template and great costumer support. Very precise documentation with many features well explained. ”</blockquote>

                          <figcaption class="blockquote-footer">
                            Matt Powers
                            <span class="blockquote-footer-source">Director of Sales | Forbes</span>
                          </figcaption>
                        </figure>
                        <!-- End Blockquote -->
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                </div>
                <!-- End Testimonials -->

Component #5

“ Truly great template and great costumer support. Very precise documentation with many features well explained. ”

“ This is a beautiful template with exciting components and endless features. ”

“ I plan to use Space in many more projects, and almost want to keep it to myself ”

“ It has many landing page variations to choose from, which one is always a big advantage. ”

              
                <!-- Testimonials -->
                <div class="container content-space-1">
                  <!-- Swiper Slider -->
                  <div class="js-swiper-single-testimonials swiper">
                    <div class="swiper-wrapper">
                      <!-- Slide -->
                      <div class="swiper-slide">
                        <div class="row">
                          <div class="col-md-4">
                            <!-- Images -->
                            <div class="d-none d-md-block bg-img-center h-100" style="background-image: url(../assets/img/900x700/img4.jpg);"></div>
                            <div class="d-md-none">
                              <img class="img-fluid" src="../assets/img/900x700/img4.jpg" alt="Image Description">
                            </div>
                            <!-- End Images -->
                          </div>
                          <!-- End Col -->

                          <div class="col-md-8">
                            <!-- Blockquote -->
                            <figure class="ps-md-5 py-5 content-space-md-3">
                              <img class="mb-5" src="../assets/svg/brands/forbes-primary.svg" alt="Logo" style="max-width: 7rem;">

                              <blockquote class="blockquote">“ Truly great template and great costumer support. Very precise documentation with many features well explained. ”</blockquote>

                              <figcaption class="blockquote-footer">
                                Matt Powers
                                <span class="blockquote-footer-source">Director of Sales | Forbes</span>
                              </figcaption>
                            </figure>
                            <!-- End Blockquote -->
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                      <!-- End Slide -->

                      <!-- Slide -->
                      <div class="swiper-slide">
                        <div class="row">
                          <div class="col-md-4">
                            <!-- Images -->
                            <div class="d-none d-md-block bg-img-center h-100" style="background-image: url(../assets/img/900x700/img1.jpg);"></div>
                            <div class="d-md-none">
                              <img class="img-fluid" src="../assets/img/900x700/img1.jpg" alt="Image Description">
                            </div>
                            <!-- End Images -->
                          </div>
                          <!-- End Col -->

                          <div class="col-md-8">
                            <!-- Blockquote -->
                            <figure class="ps-md-5 py-5 content-space-md-3">
                              <img class="mb-5" src="../assets/svg/brands/vidados-primary.svg" alt="Logo" style="max-width: 7rem;">

                              <blockquote class="blockquote">“ This is a beautiful template with exciting components and endless features. ”</blockquote>

                              <figcaption class="blockquote-footer">
                                Christina Kray
                                <span class="blockquote-footer-source">Product Designer | Vidados</span>
                              </figcaption>
                            </figure>
                            <!-- End Blockquote -->
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                      <!-- End Slide -->

                      <!-- Slide -->
                      <div class="swiper-slide">
                        <div class="row">
                          <div class="col-md-4">
                            <!-- Images -->
                            <div class="d-none d-md-block bg-img-center h-100" style="background-image: url(../assets/img/900x700/img3.jpg);"></div>
                            <div class="d-md-none">
                              <img class="img-fluid" src="../assets/img/900x700/img3.jpg" alt="Image Description">
                            </div>
                            <!-- End Images -->
                          </div>
                          <!-- End Col -->

                          <div class="col-md-8">
                            <!-- Blockquote -->
                            <figure class="ps-md-5 py-5 content-space-md-3">
                              <img class="mb-5" src="../assets/svg/brands/capsule-primary.svg" alt="Logo" style="max-width: 7rem;">

                              <blockquote class="blockquote">“ I plan to use Space in many more projects, and almost want to keep it to myself ”</blockquote>

                              <figcaption class="blockquote-footer">
                                Jeff Fisher
                                <span class="blockquote-footer-source">HR Director | Capsule</span>
                              </figcaption>
                            </figure>
                            <!-- End Blockquote -->
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                      <!-- End Slide -->

                      <!-- Slide -->
                      <div class="swiper-slide">
                        <div class="row">
                          <div class="col-md-4">
                            <!-- Images -->
                            <div class="d-none d-md-block bg-img-center h-100" style="background-image: url(../assets/img/900x700/img5.jpg);"></div>
                            <div class="d-md-none">
                              <img class="img-fluid" src="../assets/img/900x700/img5.jpg" alt="Image Description">
                            </div>
                            <!-- End Images -->
                          </div>
                          <!-- End Col -->

                          <div class="col-md-8">
                            <!-- Blockquote -->
                            <figure class="ps-md-5 py-5 content-space-md-3">
                              <img class="mb-5" src="../assets/svg/brands/mailchimp-primary.svg" alt="Logo" style="max-width: 7rem;">

                              <blockquote class="blockquote">“ It has many landing page variations to choose from, which one is always a big advantage. ”</blockquote>

                              <figcaption class="blockquote-footer">
                                Lida Reidy
                                <span class="blockquote-footer-source">Project Manager | MailChimp</span>
                              </figcaption>
                            </figure>
                            <!-- End Blockquote -->
                          </div>
                          <!-- End Col -->
                        </div>
                        <!-- End Row -->
                      </div>
                      <!-- End Slide -->
                    </div>

                    <!-- Pagination -->
                    <div class="js-swiper-pagination swiper-pagination"></div>
                  </div>
                  <!-- End Swiper Slider -->
                </div>
                <!-- End Testimonials -->

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

              
                <!-- JS Implementing Plugins -->
                <script src="../node_modules/swiper/swiper-bundle.min.js"></script>

                <!-- JS Plugins Init. -->
                <script>
                  (function() {
                    // INITIALIZATION OF SWIPER
                    // =======================================================
                    var swiper = new Swiper('.js-swiper-single-testimonials', {
                      mousewheel: true,
                      pagination: {
                        el: '.js-swiper-pagination',
                        clickable: true,
                      },
                    });
                  })()
                </script>