Testimonials - Snippets | Front - Multipurpose Responsive Template

Component #1

Preview
HTML

" I'm absolutely floored by the level of care and attention to detail the team at Htmlstream have put into this theme and for one can guarantee that I will be a return customer. "

              
                <!-- Testimonials -->
                <div class="container content-space-2 content-space-lg-3">
                  <div class="row align-items-md-center">
                    <div class="col-md-5 d-none d-md-block">
                      <img class="img-fluid rounded-2" src="../assets/img/400x500/img31.jpg" alt="Image Description">
                    </div>
                    <!-- End Col -->

                    <div class="col-md-7">
                      <!-- Blockquote -->
                      <figure class="pe-md-7">
                        <div class="mb-4">
                          <img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/mailchimp-primary.svg" alt="Image Description">
                        </div>

                        <blockquote class="blockquote blockquote-lg">" I'm absolutely floored by the level of care and attention to detail the team at Htmlstream have put into this theme and for one can guarantee that I will be a return customer. "</blockquote>
                        
                        <figcaption class="blockquote-footer">
                          <div class="d-flex align-items-center">
                            <div class="flex-shrink-0 d-md-none">
                              <img class="avatar avatar-circle" src="../assets/img/160x160/img4.jpg" alt="Image Description">
                            </div>
                            <div class="flex-grow-1 ms-3 ms-md-0">
                              Lewis
                              <span class="blockquote-footer-source">Senior Director of Operations at Mailchimp</span>
                            </div>
                          </div>
                        </figcaption>
                      </figure>
                      <!-- End Blockquote -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Testimonials -->

Component #2

Preview
HTML

With Front, we're able to easily track our performance in full detail. It's become an essential tool for us to grow and engage with our audience.

              
                <!-- Testimonials -->
                <div class="overflow-hidden">
                  <div class="container content-space-b-2">
                    <div class="position-relative">
                      <div class="bg-light text-center rounded-2 p-4 p-md-7">
                        <img class="avatar avatar-lg avatar-4x3 mx-auto mb-4" src="../assets/svg/brands/amazon-primary.svg" alt="SVG Logo">

                        <!-- Blockquote -->
                        <figure class="w-md-80 w-lg-50 mx-md-auto">
                          <blockquote class="blockquote">With Front, we're able to easily track our performance in full detail. It's become an essential tool for us to grow and engage with our audience.</blockquote>
                          
                          <figcaption class="blockquote-footer">
                            Christina Kray
                            <span class="blockquote-footer-source">Social Media Executive, Mailchimp</span>
                          </figcaption>
                        </figure>
                        <!-- End Blockquote -->
                      </div>

                      <!-- SVG Shape -->
                      <div class="position-absolute bottom-0 start-0 w-100" style="max-width: 7rem;">
                        <div class="mb-n7 ms-n7">
                          <img class="img-fluid" src="../assets/svg/components/dots.svg" alt="Image Description">
                        </div>
                      </div>
                      <!-- End SVG Shape -->
                    </div>
                  </div>
                </div>
                <!-- End Testimonials -->

Component #3

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

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

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

              
                <!-- Testimonials -->
                <div class="container content-space-1 content-space-md-3">
                  <!-- Swiper Slider -->
                  <div class="js-swiper-single-testimonials swiper">
                    <div class="swiper-wrapper">
                      <!-- Slide -->
                      <div class="swiper-slide">
                        <!-- Blockquote -->
                        <figure class="w-md-65 text-center mx-md-auto">
                          <div class="mb-3">
                            <img class="avatar avatar-xl avatar-circle" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                          </div>

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

                          <figcaption class="blockquote-footer mb-5">
                            Lida Reidy
                            <span class="blockquote-footer-source">Project Manager</span>
                          </figcaption>
                    
                          <img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/mailchimp-primary.svg" alt="Logo">
                        </figure>
                        <!-- End Blockquote -->
                      </div>
                      <!-- End Slide -->

                      <!-- Slide -->
                      <div class="swiper-slide">
                        <!-- Blockquote -->
                        <figure class="w-md-65 text-center mx-md-auto">
                          <div class="mb-3">
                            <img class="avatar avatar-xl avatar-circle" src="../assets/img/160x160/img4.jpg" alt="Image Description">
                          </div>

                          <blockquote class="blockquote">“ I just wanted to say that I'm very happy with my purchase of Front so far. The documentation is outstanding - clear and detailed. ”</blockquote>

                          <figcaption class="blockquote-footer mb-5">
                            Philip
                            <span class="blockquote-footer-source">Product Manager</span>
                          </figcaption>
                    
                          <img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/mailchimp-primary.svg" alt="Logo">
                        </figure>
                        <!-- End Blockquote -->
                      </div>
                      <!-- End Slide -->

                      <!-- Slide -->
                      <div class="swiper-slide">
                        <!-- Blockquote -->
                        <figure class="w-md-65 text-center mx-md-auto">
                          <div class="mb-3">
                            <img class="avatar avatar-xl avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
                          </div>

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

                          <figcaption class="blockquote-footer mb-5">
                            Christina Kray
                            <span class="blockquote-footer-source">HR Director</span>
                          </figcaption>
                    
                          <img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/capsule-primary.svg" alt="Logo">
                        </figure>
                        <!-- End Blockquote -->
                      </div>
                      <!-- End Slide -->
                    </div>

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

              
                <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', {
                      pagination: {
                        el: '.js-swiper-single-testimonials-pagination',
                        clickable: true,
                      },
                    });
                  })()
                </script>

Case study

"I am absolutely floored by the level of care and attention to detail the team at Htmlstream have put into this theme and for one can guarantee that I will be a return customer. I've had my eye on this for quite some time but I've only recently be able to get hands on, with it."

              
                <!-- Testimonials -->
                <div class="overflow-hidden">
                  <div class="position-relative bg-dark rounded-2 mx-3 mx-md-10">
                    <div class="container content-space-1 content-space-md-2 content-space-lg-3 position-relative zi-2">
                      <!-- Blockquote -->
                      <figure class="w-md-75 text-center mx-md-auto">
                        <div class="mb-3">
                          <span class="text-cap text-white-70">Case study</span>
                          <img class="avatar avatar-xl avatar-4x3 mb-5" src="../assets/svg/brands/mailchimp-white.svg" alt="Logo">
                        </div>

                        <blockquote class="blockquote blockquote-light mb-5">"I am absolutely floored by the level of care and attention to detail the team at Htmlstream have put into this theme and for one can guarantee that I will be a return customer. I've had my eye on this for quite some time but I've only recently be able to get hands on, with it."</blockquote>

                        <img class="avatar avatar-circle" src="../assets/img/160x160/img10.jpg" alt="Image Description">

                        <figcaption class="blockquote-footer blockquote-light">
                          Luisa
                          <span class="blockquote-footer-source">Head of IT department</span>
                        </figcaption>
                      </figure>
                      <!-- End Blockquote -->

                      <!-- SVG Quote -->
                      <figure class="position-absolute top-50 start-50 translate-middle zi-n1 mb-10">
                        <svg width="400" height="400" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M13.5001 5.84998C9.0001 7.64998 5.4001 12.15 5.4001 16.2C5.4001 17.1 5.4001 18 5.8501 18.45C6.7501 17.55 8.1001 17.1 9.9001 17.1C13.5001 17.1 16.6501 19.8 16.6501 23.85C16.6501 27.9 13.5001 30.6 9.9001 30.6C6.3001 31.05 4.5001 29.7 3.1501 27.45C1.8001 25.2 1.3501 22.05 1.3501 20.25C1.3501 13.05 4.9501 7.19998 12.6001 3.59998L13.5001 5.84998ZM31.9501 5.84998C27.4501 7.64998 23.8501 12.15 23.8501 16.2C23.8501 17.1 23.8501 18 24.3001 18.45C25.2001 17.55 26.5501 17.1 28.3501 17.1C31.9501 17.1 35.1001 19.8 35.1001 23.85C35.1001 27.9 31.9501 30.6 28.3501 30.6C25.2001 30.6 23.4001 29.25 22.0501 27C19.8001 25.2 19.8001 22.05 19.8001 20.25C19.8001 13.05 23.4001 7.19998 31.0501 3.59998L31.9501 5.84998Z" fill="white" opacity=".025"/>
                        </svg>
                      </figure>
                      <!-- End SVG Quote -->

                      <!-- SVG Shape -->
                      <figure class="position-absolute top-0 start-0 mt-10 ms-10">
                        <svg width="70" height="70" opacity=".5" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M60.6655 74.9992C80.4557 74.9992 96.4988 58.9561 96.4988 39.1659C96.4988 19.3757 80.4557 3.33252 60.6655 3.33252C40.8753 3.33252 24.8322 19.3757 24.8322 39.1659C24.8322 58.9561 40.8753 74.9992 60.6655 74.9992Z" stroke="white" stroke-width="5" stroke-miterlimit="10"/>
                          <path d="M158.5 197.5C168.165 197.5 176 189.665 176 180C176 170.335 168.165 162.5 158.5 162.5C148.835 162.5 141 170.335 141 180C141 189.665 148.835 197.5 158.5 197.5Z" stroke="white" stroke-width="5" stroke-miterlimit="10"/>
                        </svg>
                      </figure>
                      <!-- End SVG Shape -->

                      <!-- SVG Shape -->
                      <figure class="position-absolute bottom-0 end-0 mb-n7 me-n7" style="width: 10rem;">
                        <img class="img-fluid" src="../assets/svg/components/dots.svg" alt="Image Description">
                      </figure>
                      <!-- End SVG Shape -->
                    </div>
                  </div>
                </div>
                <!-- End Testimonials -->

Component #5

Preview
HTML

" The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you! "

              
                <!-- Testimonials -->
                <div class="overflow-hidden">
                  <div class="container content-space-2 content-space-lg-3">
                    <div class="row justify-content-lg-between align-items-md-center">
                      <div class="col-md-6 order-md-2 mb-10 mb-md-0">
                        <div class="position-relative">
                          <img class="img-fluid rounded-2" src="../assets/img/900x900/img5.jpg" alt="Image Description">

                          <!-- SVG Shape -->
                          <figure class="position-absolute top-0 start-0 zi-n1 mt-n7 ms-n7" style="width: 12rem;">
                            <img class="img-fluid" src="../assets/svg/components/dots-lg.svg" alt="SVG">
                          </figure>
                          <!-- End SVG Shape -->
                          
                          <!-- SVG Shape -->
                          <figure class="position-absolute bottom-0 end-0 zi-n1 mb-n7 me-n7" style="width: 12rem;">
                            <img class="img-fluid" src="../assets/svg/components/dots-lg.svg" alt="SVG">
                          </figure>
                          <!-- End SVG Shape -->
                        </div>
                      </div>

                      <div class="col-md-6 col-lg-5 order-md-1">
                        <div class="mb-4">
                          <img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/hubspot-primary.svg" alt="Image Description">
                        </div>

                        <!-- Blockquote -->
                        <figure>
                          <blockquote class="blockquote blockquote-lg">" The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you! "</blockquote>
                          
                          <figcaption class="blockquote-footer">
                            Tom Lowry
                            <span class="blockquote-footer-source">CEO | Hubspot</span>
                          </figcaption>
                        </figure>
                        <!-- End Blockquote -->
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Testimonials -->

Component #6

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-2 content-space-lg-3">
                  <div class="text-center mb-5">
                    <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/illustrations/oc-person-3.svg" alt="Illustration">
                  </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">
                      Philip
                      <span class="blockquote-footer-source">Product Manager | Mailchimp</span>
                    </figcaption>
                  </figure>
                  <!-- End Blockquote -->
                </div>
                <!-- End Testimonials -->

Component #7

Preview
HTML

Front worklfow is loved by users worldwide

With Front Pay, you can check out across the web and in apps without having to enter any payment information.

Christina Kray

Business Manager

From boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.

Andrea Gardy

CEO at Slack

I love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.

Philip Williams

Front Pay user

              
                <!-- Testimonials -->
                <div class="container content-space-2 content-space-lg-3">
                  <!-- Heading -->
                  <div class="w-lg-50 mb-5 mb-md-9">
                    <h2>Front worklfow is loved by users worldwide</h2>
                  </div>
                  <!-- End Heading -->

                  <div class="row">
                    <div class="col-sm-6 col-lg-4 mb-4 mb-lg-0">
                      <!-- Card -->
                      <div class="card h-100">
                        <div class="card-body">
                          <!-- Rating -->
                          <div class="d-flex gap-1 mb-2">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                          </div>
                          <!-- End Rating -->

                          <div class="mb-auto">
                            <p class="card-text">With Front Pay, you can check out across the web and in apps without having to enter any payment information.</p>
                          </div>
                        </div>

                        <div class="card-footer pt-0">
                          <!-- Media -->
                          <div class="d-flex align-items-center">
                            <div class="flex-shrink-0">
                              <img class="avatar avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
                            </div>
                            <div class="flex-grow-1 ms-3">
                              <h5 class="card-title mb-0">Christina Kray</h5>
                              <p class="card-text small">Business Manager</p>
                            </div>
                          </div>
                          <!-- End Media -->
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-lg-4 mb-4 mb-lg-0">
                      <!-- Card -->
                      <div class="card h-100">
                        <div class="card-body">
                          <!-- Rating -->
                          <div class="d-flex gap-1 mb-2">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="16">
                          </div>
                          <!-- End Rating -->

                          <div class="mb-auto">
                            <p class="card-text">From boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.</p>
                          </div>
                        </div>

                        <div class="card-footer pt-0">
                          <!-- Media -->
                          <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">
                              <h5 class="card-title mb-0">Andrea Gardy</h5>
                              <p class="card-text small">CEO at Slack</p>
                            </div>
                          </div>
                          <!-- End Media -->
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->

                    <div class="col-sm-6 col-lg-4">
                      <!-- Card -->
                      <div class="card h-100">
                        <div class="card-body">
                          <!-- Rating -->
                          <div class="d-flex gap-1 mb-2">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                          </div>
                          <!-- End Rating -->

                          <div class="mb-auto">
                            <p class="card-text">I love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.</p>
                          </div>
                        </div>

                        <div class="card-footer pt-0">
                          <!-- Media -->
                          <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">
                              <h5 class="card-title mb-0">Philip Williams</h5>
                              <p class="card-text small">Front Pay user</p>
                            </div>
                          </div>
                          <!-- End Media -->
                        </div>
                      </div>
                      <!-- End Card -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Testimonials -->

Component #8

Preview
HTML

Loved by business and individuals across the globe.

With Front Pay, you can check out across the web and in apps without having to enter any payment information.

Christina Kray

Business Manager

From boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.

Andrea Gardy

CEO at Slack

I love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.

Philip Williams

Front Pay user

              
                <!-- Testimonials -->
                <div class="border-top">
                  <div class="container content-space-2 content-space-lg-3">
                    <!-- Heading -->
                    <div class="w-lg-50 mb-5 mb-md-9">
                      <h2>Loved by business and individuals across the globe.</h2>
                    </div>
                    <!-- End Heading -->

                    <div class="row">
                      <div class="col-sm-6 col-lg-4">
                        <!-- Card -->
                        <div class="card shadow-none">
                          <div class="card-body">
                            <!-- Rating -->
                            <div class="d-flex gap-1 mb-2">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            </div>
                            <!-- End Rating -->

                            <div class="mb-auto">
                              <p class="card-text">With Front Pay, you can check out across the web and in apps without having to enter any payment information.</p>
                            </div>
                          </div>

                          <div class="card-footer pt-0">
                            <!-- Media -->
                            <div class="d-flex align-items-center">
                              <div class="flex-shrink-0">
                                <img class="avatar avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
                              </div>
                              <div class="flex-grow-1 ms-3">
                                <h5 class="card-title mb-0">Christina Kray</h5>
                                <p class="card-text small">Business Manager</p>
                              </div>
                            </div>
                            <!-- End Media -->
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-6 col-lg-4">
                        <!-- Card -->
                        <div class="card bg-primary">
                          <div class="card-body">
                            <!-- Rating -->
                            <div class="d-flex gap-1 mb-2">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="16">
                            </div>
                            <!-- End Rating -->

                            <div class="mb-auto">
                              <p class="card-text text-white">From boarding passes to transit and movie tickets, there's pretty much nothing you can't store with Front Pay.</p>
                            </div>
                          </div>

                          <div class="card-footer pt-0">
                            <!-- Media -->
                            <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">
                                <h5 class="card-title text-white mb-0">Andrea Gardy</h5>
                                <p class="card-text small text-white-70">CEO at Slack</p>
                              </div>
                            </div>
                            <!-- End Media -->
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->

                      <div class="col-sm-6 col-lg-4">
                        <!-- Card -->
                        <div class="card shadow-none">
                          <div class="card-body">
                            <!-- Rating -->
                            <div class="d-flex gap-1 mb-2">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                              <img src="../assets/svg/illustrations/star.svg" alt="Review rating" width="16">
                            </div>
                            <!-- End Rating -->

                            <div class="mb-auto">
                              <p class="card-text">I love Front Pay for cash back, reward points and fraud protection – just like when you're swiping your card.</p>
                            </div>
                          </div>

                          <div class="card-footer pt-0">
                            <!-- Media -->
                            <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">
                                <h5 class="card-title mb-0">Philip Williams</h5>
                                <p class="card-text small">Front Pay user</p>
                              </div>
                            </div>
                            <!-- End Media -->
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                </div>
                <!-- End Testimonials -->

Component #9

Preview
HTML

" The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you! "

              
                <!-- Testimonials -->
                <div class="overflow-hidden">
                  <div class="container content-space-2 content-space-lg-3">
                    <div class="row justify-content-lg-center align-items-md-center">
                      <div class="col-md-5 mb-10 mb-md-0">
                        <div class="position-relative">
                          <img class="img-fluid rounded-2" src="../assets/img/800x900/img1.jpg" alt="Image Description">

                          <!-- SVG Shape -->
                          <div class="position-absolute bottom-0 start-0 zi-n1 mb-n7 ms-n7" style="width: 12rem;">
                            <img class="img-fluid" src="../assets/svg/components/dots-lg.svg" alt="Image Description">
                          </div>
                          <!-- End SVG Shape -->
                        </div>
                      </div>
                      <!-- End Col -->

                      <div class="col-md-6 col-lg-5">
                        <div class="ps-md-6">
                          <div class="mb-4">
                            <img class="avatar avatar-xl avatar-4x3" src="../assets/svg/brands/hubspot-dark.svg" alt="Image Description">
                          </div>

                          <!-- Blockquote -->
                          <figure>
                            <blockquote class="blockquote blockquote-lg">" The template is really nice and offers quite a large set of options. It's beautiful and the coding is done quickly and seamlessly. Thank you! "</blockquote>
                            
                            <figcaption class="blockquote-footer">
                              Christina Kray
                              <span class="blockquote-footer-source">CEO | Hubspot</span>
                            </figcaption>
                          </figure>
                          <!-- End Blockquote -->
                        </div>
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                </div>
                <!-- End Testimonials -->

Component #10

Preview
HTML

Reviews

Over 40,000 happy customers. Be the next one.

" With Front Real Estate we can be self-reliant, like cooking for ourselves rather than eating out every night. You feel like part of the community rather than a visitor. "

See what other people are saying

4.85 / 5.0 (2,594)

Component #11

Preview
HTML

" Save time and effort in your hiring journey. Front's simple and powerful tools let you source, screen, and hire faster. "

59%

in budget saved on unconverting ads

27%

in time saved on campaign management

2.1x

more split tests and experiments

              
                <!-- Testimonials -->
                <div class="overflow-hidden gradient-x-three-sm-primary rounded-2 mx-md-10">
                  <div class="container content-space-2 content-space-lg-3">
                    <div class="row justify-content-center align-items-lg-center">
                      <div class="col-10 col-sm-8 col-lg-5 mb-10 mb-lg-0">
                        <div class="position-relative">
                          <img class="img-fluid rounded-2" src="../assets/img/900x900/img24.jpg" alt="Image Description">

                          <!-- SVG Shape -->
                          <div class="position-absolute top-0 start-0 zi-n1 mt-n6 ms-n7" style="width: 10rem;">
                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 335.2 335.2" width="100" height="100">
                              <circle fill="#FFC107" opacity=".7" cx="167.6" cy="167.6" r="130.1"/>
                            </svg>
                          </div>
                          <!-- End SVG Shape -->

                          <!-- SVG Shape -->
                          <div class="position-absolute bottom-0 end-0 zi-n1 mb-n6 me-n10" style="width: 10rem;">
                            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 335.2 335.2" width="120" height="120">
                              <circle fill="none" stroke="#377dff" stroke-width="75" cx="167.6" cy="167.6" r="130.1"/>
                            </svg>
                          </div>
                          <!-- End SVG Shape -->
                        </div>
                      </div>
                      <!-- End Col -->

                      <div class="col-lg-7">
                        <div class="ps-lg-6">
                          <div class="mb-3">
                            <img class="avatar" src="../assets/svg/brands/capsule-icon.svg" alt="Image Description">
                          </div>
                          
                          <!-- Blockquote -->
                          <figure class="mb-5">
                            <blockquote class="blockquote blockquote-lg">" Save time and effort in your hiring journey. Front's simple and powerful tools let you source, screen, and hire faster. "</blockquote>
                            
                            <figcaption class="blockquote-footer">
                              Anna Lowry
                              <span class="blockquote-footer-source">HR Director | Capsule</span>
                            </figcaption>
                          </figure>
                          <!-- End Blockquote -->

                          <div class="row">
                            <div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
                              <h2 class="text-primary mb-1">59%</h2>
                              <p class="small mb-0">in budget saved on unconverting ads</p>
                            </div>
                            <!-- End Col -->

                            <div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
                              <h2 class="text-primary mb-1">27%</h2>
                              <p class="small mb-0">in time saved on campaign management</p>
                            </div>
                            <!-- End Col -->

                            <div class="col-sm-6 col-md-4">
                              <h2 class="text-primary mb-1">2.1x</h2>
                              <p class="small mb-0">more split tests and experiments</p>
                            </div>
                            <!-- End Col -->
                          </div>
                          <!-- End Row -->
                        </div>
                      </div>
                      <!-- End Col -->
                    </div>
                    <!-- End Row -->
                  </div>
                </div>
                <!-- End Testimonials -->

Component #12

Preview
HTML

What candidates say about the interview process at Capsule

" My personal details, like, full name, location, and phone numbers. "

" What my skills are and what I can offer to them. "

" If I know how to do certain job functions. "

              
                <!-- Card Grid -->
                <div id="interview-section" class="container">
                  <div class="mb-4">
                    <h4>What candidates say about the interview process at Capsule</h4>
                  </div>

                  <div class="row">
                    <div class="col-md-6 col-lg-4 mb-5">
                      <!-- Blockquote -->
                      <div class="d-flex">
                        <div class="flex-shrink-0">
                          <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img9.jpg" alt="Image Description">
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <blockquote class="blockquote-left-border blockquote-sm">" My personal details, like, full name, location, and phone numbers. "</blockquote>
                          <div class="blockquote-footer blockquote-sm">
                            <span class="blockquote-footer-source">Shared on September 9, 2020</span>
                            Christina Kray
                          </div>
                        </div>
                      </div>
                      <!-- End Blockquote -->
                    </div>
                    <!-- End Col -->

                    <div class="col-md-6 col-lg-4 mb-5">
                      <!-- Blockquote -->
                      <div class="d-flex">
                        <div class="flex-shrink-0">
                          <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img1.jpg" alt="Image Description">
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <blockquote class="blockquote-left-border blockquote-sm">" What my skills are and what I can offer to them. "</blockquote>
                          <div class="blockquote-footer blockquote-sm">
                            <span class="blockquote-footer-source">Shared on March 24, 2020</span>
                            Brian McManus
                          </div>
                        </div>
                      </div>
                      <!-- End Blockquote -->
                    </div>
                    <!-- End Col -->

                    <div class="col-md-6 col-lg-4 mb-5">
                      <!-- Blockquote -->
                      <div class="d-flex">
                        <div class="flex-shrink-0">
                          <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img1.jpg" alt="Image Description">
                        </div>
                        <div class="flex-grow-1 ms-3">
                          <blockquote class="blockquote-left-border blockquote-sm">" If I know how to do certain job functions. "</blockquote>
                          <div class="blockquote-footer blockquote-sm">
                            <span class="blockquote-footer-source">Shared on June 2, 2020</span>
                            Max Walters
                          </div>
                        </div>
                      </div>
                      <!-- End Blockquote -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- Card Grid -->

Component #13

Preview
HTML

“ The best part about Front Course is the selection. You can find a course for anything you want to learn! Thank you Front Course! You've renewed my passion for learning and my dream of becoming a web developer. ”

              
                <!-- Testimonials -->
                <div class="overflow-hidden content-space-2">
                  <div class="position-relative bg-light text-center rounded-2 zi-2 mx-3 mx-md-10">
                    <div class="container content-space-2">
                      <div class="text-center mb-5">
                        <img class="avatar avatar-lg avatar-4x3" src="../assets/svg/illustrations/oc-person-2.svg" alt="Illustration">
                      </div>
                      
                      <!-- Blockquote -->
                      <figure class="w-md-75 text-center mx-md-auto">
                        <blockquote class="blockquote mb-7">“ The best part about Front Course is the selection. You can find a course for anything you want to learn! Thank you Front Course! You've renewed my passion for learning and my dream of becoming a web developer. ”</blockquote>

                        <figcaption class="blockquote-footer mt-2">
                          Martin
                          <span class="blockquote-footer-source">Happy customer</span>
                        </figcaption>
                      </figure>
                      <!-- End Blockquote -->
                    </div>

                    <!-- SVG Shape -->
                    <figure class="position-absolute top-0 start-0 mt-10 ms-10">
                      <svg width="70" height="70" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M60.6655 74.9992C80.4557 74.9992 96.4988 58.9561 96.4988 39.1659C96.4988 19.3757 80.4557 3.33252 60.6655 3.33252C40.8753 3.33252 24.8322 19.3757 24.8322 39.1659C24.8322 58.9561 40.8753 74.9992 60.6655 74.9992Z" stroke="#97a4af" stroke-width="5" stroke-miterlimit="10"/>
                        <path d="M158.5 197.5C168.165 197.5 176 189.665 176 180C176 170.335 168.165 162.5 158.5 162.5C148.835 162.5 141 170.335 141 180C141 189.665 148.835 197.5 158.5 197.5Z" stroke="#97a4af" stroke-width="5" stroke-miterlimit="10"/>
                      </svg>
                    </figure>
                    <!-- End SVG Shape -->

                    <!-- SVG Shape -->
                    <figure class="position-absolute bottom-0 end-0 mb-n7 me-n7" style="width: 10rem;">
                      <img class="img-fluid" src="../assets/svg/components/dots.svg" alt="Image Description">
                    </figure>
                    <!-- End SVG Shape -->
                  </div>
                </div>
                <!-- End Testimonials -->