客户评价 - Snippets | Front - 基于Boostrap5的多用途响应式模板库

Component #1

预览
HTML

" Htmlstream 团队对这个主题的关注程度和对细节的关注完全让我感到震惊，因为可以保证我将成为回头客。"

              
                <!-- 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="图片描述内容">
                    </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="图片描述内容">
                        </div>

                        <blockquote class="blockquote blockquote-lg">" Htmlstream 团队对这个主题的关注程度和对细节的关注完全让我感到震惊，因为可以保证我将成为回头客。"</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="图片描述内容">
                            </div>
                            <div class="flex-grow-1 ms-3 ms-md-0">
                              Lewis
                              <span class="blockquote-footer-source">邮递员高级主管</span>
                            </div>
                          </div>
                        </figcaption>
                      </figure>
                      <!-- End Blockquote -->
                    </div>
                    <!-- End Col -->
                  </div>
                  <!-- End Row -->
                </div>
                <!-- End Testimonials -->

Component #2

预览
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">
                            法外狂徒-张三
                            <span class="blockquote-footer-source">Social Media Executive, 邮递员</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="图片描述内容">
                        </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="图片描述内容">
                          </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">项目经理</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="图片描述内容">
                          </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="图片描述内容">
                          </div>

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

                          <figcaption class="blockquote-footer mb-5">
                            法外狂徒-张三
                            <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="../assets/vendor/swiper/swiper-bundle.min.css">

              
                <!-- JS Implementing Plugins -->
                <script src="../assets/vendor/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="图片描述内容">

                        <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="图片描述内容">
                      </figure>
                      <!-- End SVG Shape -->
                    </div>
                  </div>
                </div>
                <!-- End Testimonials -->

Component #5

预览
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. 谢谢！ "

              
                <!-- 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="图片描述内容">

                          <!-- 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="图片描述内容">
                        </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. 谢谢！ "</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

预览
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 | 邮递员</span>
                    </figcaption>
                  </figure>
                  <!-- End Blockquote -->
                </div>
                <!-- End Testimonials -->

Component #7

预览
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.

法外狂徒-张三

企业贸易 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.

菲利普·威廉姆斯

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="图片描述内容">
                            </div>
                            <div class="flex-grow-1 ms-3">
                              <h5 class="card-title mb-0">法外狂徒-张三</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="图片描述内容">
                            </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="图片描述内容">
                            </div>
                            <div class="flex-grow-1 ms-3">
                              <h5 class="card-title mb-0">菲利普·威廉姆斯</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

预览
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.

法外狂徒-张三

企业贸易 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.

菲利普·威廉姆斯

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="图片描述内容">
                              </div>
                              <div class="flex-grow-1 ms-3">
                                <h5 class="card-title mb-0">法外狂徒-张三</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="图片描述内容">
                              </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="图片描述内容">
                              </div>
                              <div class="flex-grow-1 ms-3">
                                <h5 class="card-title mb-0">菲利普·威廉姆斯</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

预览
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. 谢谢！ "

              
                <!-- 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="图片描述内容">

                          <!-- 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="图片描述内容">
                          </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="图片描述内容">
                          </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. 谢谢！ "</blockquote>
                            
                            <figcaption class="blockquote-footer">
                              法外狂徒-张三
                              <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

预览
HTML

Over 40,000 满意的客户. 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)

阅读更多评论

              
                <!-- Testimonials -->
                <div class="overflow-hidden content-space-2 content-space-lg-3">
                  <!-- Heading -->
                  <div class="w-md-75 w-lg-50 text-center mx-md-auto mb-7">
                    <h2>Reviews</h2>
                    <p>Over 40,000 满意的客户. Be the next one.</p>
                  </div>
                  <!-- End Heading -->

                  <div class="container">
                    <div class="row justify-content-center align-items-md-center mb-7">
                      <div class="col-11 col-md-6 col-lg-4 mb-5 mb-md-0 me-md-n9">
                        <!-- Card -->
                        <div class="card">
                          <div class="card-body">
                            <span class="svg-icon text-primary mb-3">
                              

                            </span>

                            <!-- Blockquote -->
                            <figure>
                              <blockquote class="blockquote blockquote-sm blockquote-left-border">" 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. "</blockquote>
                              
                              <figcaption class="blockquote-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="图片描述内容">
                                  </div>
                                  <div class="flex-grow-1 ms-3">
                                    法外狂徒-张三
                                    <span class="blockquote-footer-source">快乐的客户</span>
                                  </div>
                                </div>
                              </figcaption>
                            </figure>
                            <!-- End Blockquote -->
                          </div>
                        </div>
                        <!-- End Card -->
                      </div>

                      <div class="col-md-6 mt-n9 mt-md-0">
                        <img class="img-fluid" src="../assets/img/900x900/img21.jpg" alt="图片描述内容">
                      </div>
                    </div>

                    <div class="text-center">
                      <h3>See what other people are saying</h3>

                      <!-- Rating -->
                      <div class="d-flex justify-content-center align-items-center gap-1 mb-4">
                        <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">
                        <h4 class="ms-2 mb-0">4.85 / 5.0 <span class="text-body small">(2,594)</span></h4>
                      </div>
                      <!-- End Rating -->

                      <a class="btn btn-primary px-5" href="#">阅读更多评论 <i class="bi-chevron-right small ms-1"></i></a>
                    </div>
                  </div>
                </div>
                <!-- End Testimonials -->

Component #11

预览
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="图片描述内容">

                          <!-- 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="图片描述内容">
                          </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 | 胶囊</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

预览
HTML

What candidates say about the interview process at 胶囊

" 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 胶囊</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="图片描述内容">
                        </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>
                            法外狂徒-张三
                          </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="图片描述内容">
                        </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="图片描述内容">
                        </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

预览
HTML

“ Front Course最好的部分是选择。你可以找到任何你想学的课程!谢谢你!您让我重新燃起了学习的热情，也让我重新燃起了成为一名网页开发人员的梦想。 ”

              
                <!-- 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">“ Front Course最好的部分是选择。你可以找到任何你想学的课程!谢谢你!您让我重新燃起了学习的热情，也让我重新燃起了成为一名网页开发人员的梦想。 ”</blockquote>

                        <figcaption class="blockquote-footer mt-2">
                          Martin
                          <span class="blockquote-footer-source">快乐的客户</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="图片描述内容">
                    </figure>
                    <!-- End SVG Shape -->
                  </div>
                </div>
                <!-- End Testimonials -->