Testimonials

Component #1 (with parallax)

Image Description
Image Description
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.
Image Description
Lewis — happy customer

3,500+

Leaders use Front to build a startup, ecommerce, portfolio and many more websites.

Read the case studies
                    
                      <!-- Testimonials Section -->
                      <div class="bg-light rounded-lg mx-3 mx-md-11">
                        <div class="container space-1 space-md-2">
                          <div class="card bg-transparent shadow-none">
                            <div class="row">
                              <div class="col-lg-3 d-none d-lg-block">
                                <div class="dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll bg-light" data-options='{direction: "reverse"}' style="overflow: visible;">
                                  <div data-parallaxanimation='[{property: "transform", value:" translate3d(0,{{val}}rem,0)", initial:"4", mid:"0", final:"-4"}]'>
                                    <img class="img-fluid rounded-lg shadow-lg" src="../assets/img/400x500/img31.jpg" alt="Image Description">

                                    <!-- SVG Shapes -->
                                    <figure class="max-w-15rem w-100 position-absolute bottom-0 left-0 z-index-n1">
                                      <div class="mb-n7 ml-n7">
                                        <img class="img-fluid" src="../assets/svg/components/dots-5.svg" alt="Image Description">
                                      </div>
                                    </figure>
                                    <!-- End SVG Shapes -->
                                  </div>
                                </div>
                              </div>

                              <div class="col-lg-9">
                                <!-- Card Body -->
                                <div class="card-body h-100 rounded-lg p-0 p-md-4">
                                  <!-- SVG Quote -->
                                  <figure class="mb-3">
                                    <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="36" height="36" viewBox="0 0 8 8">
                                      <path fill="#377dff" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
                                        C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
                                        c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
                                        C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
                                    </svg>
                                  </figure>
                                  <!-- End SVG Quote -->

                                  <div class="row">
                                    <div class="col-lg-8 mb-3 mb-lg-0">
                                      <div class="pr-lg-5">
                                        <blockquote class="h3 font-weight-normal mb-4">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>
                                        <div class="media">
                                          <div class="avatar avatar-xs avatar-circle d-lg-none mr-2">
                                            <img class="avatar-img" src="../assets/img/100x100/img19.jpg" alt="Image Description">
                                          </div>
                                          <div class="media-body">
                                            <span class="text-dark font-weight-bold">Lewis</span>
                                            <span class="font-size-1">— happy customer</span>
                                          </div>
                                        </div>
                                      </div>
                                    </div>

                                    <div class="col-lg-4 column-divider-lg">
                                      <hr class="d-lg-none">

                                      <div class="pl-lg-5">
                                        <span class="h1 text-primary">3,500+</span>
                                        <p class="font-size-1">Leaders use Front to build a startup, ecommerce, portfolio and many more websites.</p>
                                        <a class="font-size-1 text-nowrap" href="#">Read the case studies <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <!-- End Card Body -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Testimonials Section -->
                    
                  
                    
                      <link rel="stylesheet" href="./assets/vendor/dzsparallaxer/dzsparallaxer.css">
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
                    
                  

Component #2

SVG Logo
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.

Christina Kray

Social Media Executive, Airbnb
Image Description
                    
                      <!-- Testimonials Section -->
                      <div class="overflow-hidden">
                        <div class="container space-bottom-2">
                          <div class="position-relative">
                            <div class="bg-light text-center rounded-lg p-4 p-md-7">
                              <div class="mb-4">
                                <img class="max-w-11rem max-w-md-13rem mx-auto" src="../assets/svg/clients-logo/airbnb-original.svg" alt="SVG Logo">
                              </div>

                              <!-- Blockquote -->
                              <div class="w-md-80 w-lg-50 mx-md-auto mb-6">
                                <blockquote class="lead text-dark">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>
                              </div>
                              <!-- End Blockquote -->

                              <!-- Reviewer -->
                              <div class="w-lg-50 mx-lg-auto">
                                <h4 class="mb-0">Christina Kray</h4>
                                <small>Social Media Executive, Airbnb</small>
                              </div>
                              <!-- End Reviewer -->
                            </div>

                            <!-- SVG Element -->
                            <figure class="max-w-15rem w-100 position-absolute bottom-0 left-0">
                              <div class="mb-n7 ml-n7">
                                <img class="img-fluid" src="../assets/svg/components/dots-1.svg" alt="Image Description">
                              </div>
                            </figure>
                            <!-- End SVG Element -->
                          </div>
                        </div>
                      </div>
                      <!-- End Testimonials Section -->
                    
                  

Component #3

Case study SVG Logo
"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."
Image Description

Luisa

Head of IT department
SVG
Image Description
                    
                      <!-- Testimonials Section -->
                      <div class="overflow-hidden space-2">
                        <div class="position-relative bg-dark text-center rounded-lg mx-3 mx-md-11">
                          <div class="container space-1 space-md-2 space-lg-3 position-relative z-index-2">
                            <!-- Title -->
                            <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-7">
                              <span class="d-block small text-white-70 font-weight-bold text-cap mb-2">Case study</span>
                              <img class="max-w-15rem" src="../assets/svg/clients-logo/uber-white.svg" alt="SVG Logo">
                            </div>
                            <!-- End Title -->

                            <!-- Blockquote -->
                            <div class="w-md-75 mx-md-auto mb-6">
                              <blockquote class="h3 text-white font-weight-normal text-lh-lg">"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>
                            </div>
                            <!-- End Blockquote -->

                            <!-- Reviewer -->
                            <div class="w-lg-50 mx-lg-auto">
                              <div class="avatar avatar-circle mb-3">
                                <img class="avatar-img" src="../assets/img/100x100/img10.jpg" alt="Image Description">
                              </div>
                              <h4 class="text-white mb-0">Luisa</h4>
                              <span class="d-block text-white-70">Head of IT department</span>
                            </div>
                            <!-- End Reviewer -->

                            <!-- SVG Quote -->
                            <figure class="position-absolute bottom-0 right-0 left-0 z-index-n1 mb-11">
                              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25rem" height="25rem"
                                 viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
                                <path fill="#fff" opacity=".025" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
                                  C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
                                  c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
                                  C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
                              </svg>
                            </figure>
                            <!-- End SVG Quote -->

                            <!-- SVG Shapes -->
                            <figure class="position-absolute top-0 left-0 mt-10 ml-10">
                              <img src="../assets/svg/components/abstract-shapes-11.svg" alt="SVG">
                            </figure>
                            <figure class="max-w-15rem w-100 position-absolute bottom-0 right-0">
                              <div class="mb-n7 mr-n7">
                                <img class="img-fluid" src="../assets/svg/components/dots-4.svg" alt="Image Description">
                              </div>
                            </figure>
                            <!-- End SVG Shapes -->
                          </div>
                        </div>
                      </div>
                      <!-- End Testimonials Section -->
                    
                  

Component #4

Image Description
Image Description
Image Description
Image Description
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!

Tom Lowry

CEO

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

                                <!-- SVG Elements -->
                                <figure class="max-w-19rem w-100 position-absolute top-0 left-0 z-index-n1">
                                  <div class="mt-n7 ml-n7">
                                    <img class="img-fluid" src="../assets/svg/components/dots-2.svg" alt="Image Description">
                                  </div>
                                </figure>
                                <figure class="max-w-19rem w-100 position-absolute bottom-0 right-0 z-index-n1">
                                  <div class="mb-n7 mr-n7">
                                    <img class="img-fluid" src="../assets/svg/components/dots-2.svg" alt="Image Description">
                                  </div>
                                </figure>
                                <!-- End SVG Elements -->
                              </div>
                            </div>

                            <div class="col-md-6 col-lg-5 order-md-1">
                              <img class="max-w-15rem mb-4" src="../assets/svg/clients-logo/hubspot-original.svg" alt="Image Description">

                              <div class="mb-6">
                                <blockquote class="font-size-2 text-dark text-lh-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>
                              </div>

                              <h4 class="h3 mb-0">Tom Lowry</h4>
                              <p class="small">CEO</p>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Testimonials Section -->
                    
                  

Component #5

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!
Image Description

Charlotte Moore

Director Business Planning, Amazon
                    
                      <!-- Testimonials Section -->
                      <div class="container space-2">
                        <!-- SVG Quote -->
                        <figure class="mx-auto text-center mb-3">
                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px"
                             viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
                            <path fill="#bdc5d1" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
                              C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
                              c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
                              C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
                          </svg>
                        </figure>
                        <!-- End SVG Quote -->

                        <!-- Blockquote -->
                        <div class="w-md-75 text-center mx-md-auto mb-6">
                          <blockquote class="h3 text-lh-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>
                        </div>
                        <!-- End Blockquote -->

                        <!-- Reviewer -->
                        <div class="d-flex justify-content-center align-items-center w-lg-50 mx-auto">
                          <div class="avatar avatar-circle">
                            <img class="avatar-img" src="../assets/img/100x100/img2.jpg" alt="Image Description">
                          </div>
                          <div class="ml-3">
                            <h4 class="mb-0">Charlotte Moore</h4>
                            <small class="text-muted">Director Business Planning, Amazon</small>
                          </div>
                        </div>
                        <!-- End Reviewer -->
                      </div>
                      <!-- End Testimonials Section -->
                    
                  

Component #6

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.

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

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

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

                        <!-- Testimonials Section -->
                        <div class="row">
                          <!-- Testimonials -->
                          <div class="col-md-6 col-lg-4 mb-3 mb-md-5 mb-lg-0">
                            <div class="card h-100">
                              <div class="card-body">
                                <ul class="list-inline text-warning">
                                  <li class="list-inline-item mx-0">
                                    <i class="fas fa-star"></i>
                                  </li>
                                  <li class="list-inline-item mx-0">
                                    <i class="fas fa-star"></i>
                                  </li>
                                  <li class="list-inline-item mx-0">
                                    <i class="fas fa-star"></i>
                                  </li>
                                  <li class="list-inline-item mx-0">
                                    <i class="fas fa-star"></i>
                                  </li>
                                  <li class="list-inline-item mx-0">
                                    <i class="fas fa-star"></i>
                                  </li>
                                </ul>
                                <div class="mb-auto">
                                  <p class="text-dark mb-0">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 border-0 bg-transparent pt-0 px-5 pb-5">
                                <div class="media align-items-center">
                                  <div class="avatar avatar-circle mr-3">
                                    <img class="avatar-img" src="../assets/img/100x100/img2.jpg" alt="Image Description">
                                  </div>
                                  <div class="media-body">
                                    <h4 class="mb-0">Christina Kray</h4>
                                    <small class="d-block text-body">Business Manager</small>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Testimonials -->

                          <!-- Testimonials -->
                          <div class="col-md-6 col-lg-4 mb-3 mb-md-5 mb-lg-0">
                            <div class="card h-100">
                              <div class="card-body">
                                <ul class="list-inline text-warning">
                                  <li class="list-inline-item mx-0">
                                    <i class="fas fa-star"></i>
                                  </li>
                                  <li class="list-inline-item mx-0">
                                    <i class="fas fa-star"></i>
                                  </li>
                                  <li class="list-inline-item mx-0">
                                    <i class="fas fa-star"></i>
                                  </li>
                                  <li class="list-inline-item mx-0">
                                    <i class="fas fa-star"></i>
                                  </li>
                                  <li class="list-inline-item mx-0">
                                    <i class="fas fa-star"></i>
                                  </li>
                                </ul>
                                <div class="mb-auto">
                                  <p class="text-dark mb-0">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 border-0 bg-transparent pt-0 px-5 pb-5">
                                <div class="media align-items-center">
                                  <div class="avatar avatar-circle mr-3">
                                    <img class="avatar-img" src="../assets/img/100x100/img11.jpg" alt="Image Description">
                                  </div>
                                  <div class="media-body">
                                    <h4 class="mb-0">Massalha Shady</h4>
                                    <small class="d-block text-body">CEO at Slack</small>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Testimonials -->

                          <!-- Testimonials -->
                          <div class="col-md-6 col-lg-4">
                            <div class="card h-100">
                              <div class="card-body">
                                <ul class="list-inline text-warning">
                                  <li class="list-inline-item mx-0">
                                    <i class="fas fa-star"></i>
                                  </li>
                                  <li class="list-inline-item mx-0">
                                    <i class="fas fa-star"></i>
                                  </li>
                                  <li class="list-inline-item mx-0">
                                    <i class="fas fa-star"></i>
                                  </li>
                                  <li class="list-inline-item mx-0">
                                    <i class="fas fa-star"></i>
                                  </li>
                                  <li class="list-inline-item mx-0">
                                    <i class="fas fa-star"></i>
                                  </li>
                                </ul>
                                <div class="mb-auto">
                                  <p class="text-dark mb-0">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 border-0 bg-transparent pt-0 px-5 pb-5">
                                <div class="media align-items-center">
                                  <div class="avatar avatar-circle mr-3">
                                    <img class="avatar-img" src="../assets/img/100x100/img4.jpg" alt="Image Description">
                                  </div>
                                  <div class="media-body">
                                    <h4 class="mb-0">Mark McManus</h4>
                                    <small class="d-block text-body">Front Pay user</small>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Testimonials -->
                        </div>
                      </div>
                      <!-- End Testimonials Section -->
                    
                  

Component #7

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.

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

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

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

                        <!-- Testimonials -->
                        <div class="card-deck d-block d-lg-flex card-lg-gutters-2">
                          <!-- Testimonials -->
                          <div class="card shadow-none bg-transparent">
                            <div class="card-body">
                              <ul class="list-inline text-warning small">
                                <li class="list-inline-item mx-0">
                                  <i class="fas fa-star"></i>
                                </li>
                                <li class="list-inline-item mx-0">
                                  <i class="fas fa-star"></i>
                                </li>
                                <li class="list-inline-item mx-0">
                                  <i class="fas fa-star"></i>
                                </li>
                                <li class="list-inline-item mx-0">
                                  <i class="fas fa-star"></i>
                                </li>
                                <li class="list-inline-item mx-0">
                                  <i class="fas fa-star"></i>
                                </li>
                              </ul>
                              <div class="mb-auto">
                                <p class="mb-0">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 border-0 bg-transparent pt-0 px-5 pb-5">
                              <div class="media">
                                <div class="avatar avatar-circle mr-3">
                                  <img class="avatar-img" src="../assets/img/100x100/img2.jpg" alt="Image Description">
                                </div>
                                <div class="media-body">
                                  <h4 class="mb-1">Christina Kray</h4>
                                  <small class="d-block text-body">Business Manager</small>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Testimonials -->

                          <!-- Testimonials -->
                          <div class="card bg-primary text-white shadow-primary-lg">
                            <div class="card-body">
                              <ul class="list-inline text-warning small">
                                <li class="list-inline-item mx-0">
                                  <i class="fas fa-star"></i>
                                </li>
                                <li class="list-inline-item mx-0">
                                  <i class="fas fa-star"></i>
                                </li>
                                <li class="list-inline-item mx-0">
                                  <i class="fas fa-star"></i>
                                </li>
                                <li class="list-inline-item mx-0">
                                  <i class="fas fa-star"></i>
                                </li>
                                <li class="list-inline-item mx-0">
                                  <i class="fas fa-star"></i>
                                </li>
                              </ul>
                              <div class="mb-auto">
                                <p class="text-white mb-0">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 border-0 bg-primary text-white pt-0 px-5 pb-5">
                              <div class="media">
                                <div class="avatar avatar-circle mr-3">
                                  <img class="avatar-img" src="../assets/img/100x100/img11.jpg" alt="Image Description">
                                </div>
                                <div class="media-body">
                                  <h4 class="text-white mb-1">Massalha Shady</h4>
                                  <small class="d-block text-light">CEO at Slack</small>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Testimonials -->

                          <!-- Testimonials -->
                          <div class="card shadow-none bg-transparent">
                            <div class="card-body">
                              <ul class="list-inline text-warning small">
                                <li class="list-inline-item mx-0">
                                  <i class="fas fa-star"></i>
                                </li>
                                <li class="list-inline-item mx-0">
                                  <i class="fas fa-star"></i>
                                </li>
                                <li class="list-inline-item mx-0">
                                  <i class="fas fa-star"></i>
                                </li>
                                <li class="list-inline-item mx-0">
                                  <i class="fas fa-star"></i>
                                </li>
                                <li class="list-inline-item mx-0">
                                  <i class="fas fa-star"></i>
                                </li>
                              </ul>
                              <div class="mb-auto">
                                <p class="mb-0">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 border-0 bg-transparent pt-0 px-5 pb-5">
                              <div class="media">
                                <div class="avatar avatar-circle mr-3">
                                  <img class="avatar-img" src="../assets/img/100x100/img4.jpg" alt="Image Description">
                                </div>
                                <div class="media-body">
                                  <h4 class="mb-1">Mark McManus</h4>
                                  <small class="d-block text-body">Front Pay user</small>
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- End Testimonials -->
                        </div>
                        <!-- End Testimonials -->
                      </div>
                      <!-- End Testimonials Section -->
                    
                  

Component #8

Image Description
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!
- Victoria, Product designer
                    
                      <!-- Testimonials Section -->
                      <div class="container space-2">
                        <div class="w-lg-65 text-center mx-auto">
                          <div class="avatar avatar-lg avatar-circle mx-auto mb-5">
                            <img class="avatar-img" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                          </div>

                          <blockquote class="text-dark font-size-2 font-weight-bold text-lh-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>

                          <div class="mt-5">
                            <span class="text-dark font-weight-bold">- Victoria,</span>
                            Product designer
                          </div>
                        </div>
                      </div>
                      <!-- End Testimonials Section -->
                    
                  

Component #9

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!

Christina Kray

Head of IT department
                    
                      <!-- Testimonials -->
                      <div class="bg-light">
                        <div class="container space-1 space-md-2">
                          <div class="w-lg-75 mx-lg-auto">
                            <!-- SVG Quote -->
                            <figure class="mx-auto text-center mb-3">
                              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px"
                                 viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
                                <path fill="#377dff" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
                                  C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
                                  c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
                                  C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
                              </svg>
                            </figure>
                            <!-- End SVG Quote -->

                            <!-- Blockquote -->
                            <div class="text-center mb-5">
                              <blockquote class="h2 font-weight-normal">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>
                            </div>
                            <!-- End Blockquote -->

                            <!-- Reviewer -->
                            <div class="w-lg-50 text-center mx-lg-auto">
                              <h4 class="mb-0">Christina Kray</h4>
                              <small class="text-muted">Head of IT department</small>
                            </div>
                            <!-- End Reviewer -->
                          </div>
                        </div>
                      </div>
                      <!-- Testimonials -->
                    
                  

Component #10

Our daily routines would not merely serve purposes of utility or quick-fixes, but involve an exploration of our creative and spiritual lives.
Bryan Chung Co-Founder
                    
                      <!-- Testimonials Section -->
                      <div class="container space-2 text-center">
                        <div class="w-md-80 w-lg-50 position-relative mx-md-auto">
                          <blockquote class="lead text-dark font-weight-bold text-lh-lg mb-6">Our daily routines would not merely serve purposes of utility or quick-fixes, but involve an exploration of our creative and spiritual lives.</blockquote>

                          <span class="d-block h4 mb-0">Bryan Chung</span>
                          <small>Co-Founder</small>

                          <figure class="position-absolute top-0 left-0 z-index-n1 mt-n10 ml-n10">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px"
                               viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
                              <path fill="#e7eaf3" opacity=".3" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
                                C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
                                c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
                                C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
                            </svg>
                          </figure>
                        </div>
                      </div>
                      <!-- End Testimonials Section -->
                    
                  

Component #11

"I love Front! I love the ease of use, I love the fact that I have total creative freedom..." - Adrian Teh
                    
                      <div class="container">
                        <blockquote class="bg-soft-primary border-0 rounded-lg text-center text-dark font-size-2 font-weight-bold text-lh-lg p-5 my-5">
                          "I love Front! I love the ease of use, I love the fact that I have total creative freedom..."
                          <span class="d-block text-muted font-size-1 mt-2">- Adrian Teh</span>
                        </blockquote>
                      </div>
                    
                  

Component #12

Image Description 4.8
37,500+ reviews
"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. I really enjoyed and now I work as a front-end developer."
Image Description
Christina Kray
Satisfied user
SVG
Image Description
                    
                      <!-- Testimonials Section -->
                      <div class="overflow-hidden space-2">
                        <div class="position-relative bg-light text-center rounded-lg z-index-2 mx-3 mx-md-11">
                          <div class="container space-2">
                            <!-- Title -->
                            <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-6">
                              <div class="mb-3">
                                <div class="position-relative max-w-13rem mx-auto mb-2">
                                  <img class="img-fluid" src="../assets/svg/illustrations/review-rating-shield.svg" alt="Image Description">
                                  <span class="position-absolute top-0 right-0 left-0 z-index-2 text-white font-size-2 font-weight-bold mt-2">4.8</span>
                                </div>
                                <span>37,500+ reviews</span>
                              </div>
                            </div>
                            <!-- End Title -->

                            <!-- Blockquote -->
                            <div class="w-md-80 mx-md-auto mb-6">
                              <blockquote class="font-size-2 text-dark">"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. I really enjoyed and now I work as a front-end developer."</blockquote>
                            </div>
                            <!-- End Blockquote -->

                            <!-- Reviewer -->
                            <div class="w-lg-50 mx-lg-auto">
                              <div class="avatar avatar-circle mb-3">
                                <img class="avatar-img" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                              </div>
                              <h5 class="mb-0">Christina Kray</h5>
                              <small>Satisfied user</small>
                            </div>
                            <!-- End Reviewer -->
                          </div>

                          <!-- SVG Shapes -->
                          <figure class="position-absolute top-0 left-0 mt-10 ml-10">
                            <img src="../assets/svg/components/abstract-shapes-11.svg" alt="SVG">
                          </figure>
                          <figure class="max-w-15rem w-100 position-absolute bottom-0 right-0">
                            <div class="mb-n7 mr-n7">
                              <img class="img-fluid" src="../assets/svg/components/dots-1.svg" alt="Image Description">
                            </div>
                          </figure>
                          <!-- End SVG Shapes -->
                        </div>
                      </div>
                      <!-- End Testimonials Section -->
                    
                  

Component #13 (with slider)

                    
                      <!-- Testimonials Section -->
                      <div class="container space-2 space-lg-3">
                        <div class="w-md-80 w-lg-60 mx-md-auto">
                          <!-- Quote -->
                          <figure class="mx-auto text-center mb-5">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="48px" height="48px"
                               viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
                              <path fill="#bdc5d1" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
                                C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
                                c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
                                C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
                            </svg>
                          </figure>
                          <!-- End Quote -->

                          <div class="js-slick-carousel slick"
                               data-hs-slick-carousel-options='{
                                 "fade": true,
                                 "autoplay": true,
                                 "autoplaySpeed": 7000,
                                 "dots": true,
                                 "dotsClass": "slick-pagination mt-7"
                               }'>
                            <!-- Testimonial -->
                            <div class="js-slide">
                              <div class="text-center mb-5">
                                <blockquote class="h3 text-lh-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>
                              </div>
                              <div class="d-flex justify-content-center align-items-center w-lg-50 mx-auto">
                                <div class="avatar avatar-circle">
                                  <img class="avatar-img" src="../assets/img/100x100/img11.jpg" alt="Image Description">
                                </div>
                                <div class="ml-3">
                                  <h4 class="mb-0">Christina Kray</h4>
                                  <small class="text-muted">Head of IT department at Google</small>
                                </div>
                              </div>
                            </div>
                            <!-- End Testimonial -->

                            <!-- Testimonial -->
                            <div class="js-slide">
                              <div class="text-center mb-5">
                                <blockquote class="h3 text-lh-lg">It's beautiful and the coding is done quickly and seamlessly. Keep it up!</blockquote>
                              </div>
                              <div class="d-flex justify-content-center align-items-center w-lg-50 mx-auto">
                                <div class="avatar avatar-circle">
                                  <img class="avatar-img" src="../assets/img/100x100/img8.jpg" alt="Image Description">
                                </div>
                                <div class="ml-3">
                                  <h4 class="mb-0">James Austin</h4>
                                  <small class="text-muted">CEO of Slack</small>
                                </div>
                              </div>
                            </div>
                            <!-- End Testimonial -->
                          </div>
                        </div>
                      </div>
                      <!-- End Testimonials Section -->
                    
                  
                    
                      <link rel="stylesheet" href="./assets/vendor/slick-carousel/slick/slick.css">
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./assets/vendor/slick-carousel/slick/slick.js"></script>

                      <!-- JS Front -->

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF SLICK CAROUSEL
                          // =======================================================
                          $('.js-slick-carousel').each(function() {
                            var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
                          });
                        });
                      </script>
                    
                  

Component #14 (with slider)

                    
                      <!-- Testimonials Section -->
                      <div class="clearfix space-bottom-1 px-3 px-md-5">
                        <div class="bg-img-hero rounded-lg" style="background-image: url(../assets/img/1920x800/img4.jpg);">
                          <div class="container">
                            <div class="row">
                              <div class="col-md-6 col-lg-5 col-xl-4 space-2">
                                <div class="card">
                                  <div class="card-body p-5">
                                    <div class="js-slick-carousel slick"
                                         data-hs-slick-carousel-options='{
                                           "fade": true,
                                           "dots": true,
                                           "dotsClass": "slick-pagination mt-5"
                                         }'>
                                      <!-- Testimonials -->
                                      <div class="js-slide">
                                        <!-- SVG Quote -->
                                        <figure class="mb-4">
                                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
                                             viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
                                            <path fill="#377dff" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
                                              C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
                                              c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
                                              C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
                                          </svg>
                                        </figure>
                                        <!-- End SVG Quote -->

                                        <!-- Text -->
                                        <blockquote class="text-dark text-lh-lg mb-4">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>
                                        <!-- End Text -->

                                        <!-- Author -->
                                        <div class="media">
                                          <div class="avatar avatar-circle mr-3">
                                            <img class="avatar-img" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                                          </div>
                                          <div class="media-body">
                                            <h4 class="mb-0">Christina Kray</h4>
                                            <p class="small">Google</p>
                                          </div>
                                        </div>
                                        <!-- End Author -->
                                      </div>
                                      <!-- End Testimonials -->

                                      <!-- Testimonials -->
                                      <div class="js-slide">
                                        <!-- SVG Quote -->
                                        <figure class="mb-4">
                                          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
                                             viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
                                            <path fill="#377dff" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
                                              C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
                                              c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
                                              C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
                                          </svg>
                                        </figure>
                                        <!-- End SVG Quote -->

                                        <!-- Text -->
                                        <blockquote class="text-dark text-lh-lg mb-4">If you can design one thing you can design everything with Front. Just believe it.</blockquote>
                                        <!-- End Text -->

                                        <!-- Author -->
                                        <div class="media">
                                          <div class="avatar avatar-circle mr-3">
                                            <img class="avatar-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
                                          </div>
                                          <div class="media-body">
                                            <h4 class="mb-0">Alex Pottorf</h4>
                                            <p class="small">Github</p>
                                          </div>
                                        </div>
                                        <!-- End Author -->
                                      </div>
                                      <!-- End Testimonials -->
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Testimonials Section -->
                    
                  
                    
                      <link rel="stylesheet" href="./assets/vendor/slick-carousel/slick/slick.css">
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./assets/vendor/slick-carousel/slick/slick.js"></script>

                      <!-- JS Front -->

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF SLICK CAROUSEL
                          // =======================================================
                          $('.js-slick-carousel').each(function() {
                            var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
                          });
                        });
                      </script>
                    
                  

Component #15 (with slider)

Front partners
Image Description Image Description Image Description
                    
                      <!-- Form -->
                      <div class="d-flex align-items-center position-relative vh-lg-100">
                        <div class="col-lg-5 col-xl-4 d-none d-lg-flex align-items-center bg-dark vh-lg-100 px-0" style="background-image: url(../assets/svg/components/abstract-shapes-20.svg);">
                          <div class="w-100 p-5">
                            <!-- SVG Quote -->
                            <figure class="text-center mb-5 mx-auto">
                              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
                                 viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
                                <path fill="#fff" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
                                  C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
                                  c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
                                  C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
                              </svg>
                            </figure>
                            <!-- End SVG Quote -->

                            <!-- Testimonials Carousel Main -->
                            <div id="testimonialsNavMain" class="js-slick-carousel slick mb-4"
                                 data-hs-slick-carousel-options='{
                                   "autoplay": true,
                                   "autoplaySpeed": 5000,
                                   "fade": true,
                                   "infinite": true,
                                   "asNavFor": "#testimonialsNavPagination"
                                 }'>
                              <div class="js-slide">
                                <!-- Testimonials -->
                                <div class="w-md-80 w-lg-60 text-center mx-auto">
                                  <blockquote class="h3 text-white font-weight-normal mb-4">The template is really nice and offers quite a large set of options. Thank you!</blockquote>
                                  <span class="d-block text-white-70">Christina Kray, Google</span>
                                </div>
                                <!-- End Testimonials -->
                              </div>

                              <div class="js-slide">
                                <!-- Testimonials -->
                                <div class="w-md-80 w-lg-60 text-center mx-auto">
                                  <blockquote class="h3 text-white font-weight-normal mb-4">It's beautiful and the coding is done quickly and seamlessly. Keep it up!</blockquote>
                                  <span class="d-block text-white-70">James Austin, Slack</span>
                                </div>
                                <!-- End Testimonials -->
                              </div>

                              <div class="js-slide">
                                <!-- Testimonials -->
                                <div class="w-md-80 w-lg-60 text-center mx-auto">
                                  <blockquote class="h3 text-white font-weight-normal mb-4">I love Front! I love the ease of use, I love the fact that I have total creative freedom...</blockquote>
                                  <span class="d-block text-white-70">Charlotte Moore, Amazon</span>
                                </div>
                                <!-- End Testimonials -->
                              </div>
                            </div>
                            <!-- End Testimonials Carousel Main -->

                            <!-- Testimonials Carousel Pagination -->
                            <div id="testimonialsNavPagination" class="js-slick-carousel slick slick-transform-off slick-pagination-modern mx-auto"
                                 data-hs-slick-carousel-options='{
                                   "infinite": true,
                                   "slidesToShow": 3,
                                   "centerMode": true,
                                   "isThumbs": true,
                                   "asNavFor": "#testimonialsNavMain"
                                 }'>
                              <div class="js-slide">
                                <div class="avatar avatar-circle mx-auto">
                                  <img class="avatar-img" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                                </div>
                              </div>

                              <div class="js-slide">
                                <div class="avatar avatar-circle mx-auto">
                                  <img class="avatar-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
                                </div>
                              </div>

                              <div class="js-slide">
                                <div class="avatar avatar-circle mx-auto">
                                  <img class="avatar-img" src="../assets/img/100x100/img2.jpg" alt="Image Description">
                                </div>
                              </div>
                            </div>
                            <!-- End Testimonials Carousel Pagination -->

                            <!-- Clients -->
                            <div class="position-absolute right-0 bottom-0 left-0 text-center p-5">
                              <span class="d-block text-white-70 mb-3">Front partners</span>
                              <div class="d-flex justify-content-center">
                                <img class="max-w-10rem mx-auto" src="../assets/svg/clients-logo/slack-white.svg" alt="Image Description">
                                <img class="max-w-10rem mx-auto" src="../assets/svg/clients-logo/google-white.svg" alt="Image Description">
                                <img class="max-w-10rem mx-auto" src="../assets/svg/clients-logo/spotify-white.svg" alt="Image Description">
                              </div>
                            </div>
                            <!-- End Clients -->
                          </div>
                        </div>
                      </div>
                      <!-- End Form -->
                    
                  
                    
                      <link rel="stylesheet" href="./assets/vendor/slick-carousel/slick/slick.css">
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./assets/vendor/slick-carousel/slick/slick.js"></script>

                      <!-- JS Front -->

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF SLICK CAROUSEL
                          // =======================================================
                          $('.js-slick-carousel').each(function() {
                            var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
                          });
                        });
                      </script>
                    
                  

Component #16

Success stories

See how Front is helping teams get organized and work smarter

                    
                      <!-- Features Section -->
                      <div class="bg-dark rounded-lg mx-3 mx-xl-10" style="background-image: url(../assets/svg/components/abstract-shapes-20.svg);">
                        <div class="container-xl container-fluid space-1 space-md-2 px-4 px-md-8 px-lg-10">
                          <div class="px-3">
                            <!-- Title -->
                            <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
                              <span class="d-block small text-white-70 font-weight-bold text-cap mb-2">Success stories</span>
                              <h2 class="text-white">See how Front is helping teams get organized and work smarter</h2>
                            </div>
                            <!-- End Title -->

                            <!-- Slick Carousel -->
                            <div class="js-slick-carousel slick slick-equal-height ie-slick-equal-height slick-gutters-3"
                                data-hs-slick-carousel-options='{
                                   "prevArrow": "<span class=\"fas fa-arrow-left slick-arrow slick-arrow-primary-white slick-arrow-left slick-arrow-centered-y shadow-soft rounded-circle ml-n2\"></span>",
                                   "nextArrow": "<span class=\"fas fa-arrow-right slick-arrow slick-arrow-primary-white slick-arrow-right slick-arrow-centered-y shadow-soft rounded-circle mr-n2\"></span>",
                                   "slidesToShow": 3,
                                   "infinite": true,
                                   "dots": true,
                                   "dotsClass": "slick-pagination slick-pagination-white d-none mt-5",
                                   "responsive": [{
                                     "breakpoint": 992,
                                     "settings": {
                                       "slidesToShow": 2
                                       }
                                     }, {
                                     "breakpoint": 768,
                                     "settings": {
                                       "slidesToShow": 2
                                       }
                                     }, {
                                     "breakpoint": 554,
                                     "settings": {
                                       "slidesToShow": 1
                                     }
                                   }]
                                 }'>
                              <div class="js-slide mb-4">
                                <!-- Card Info -->
                                <div class="card h-100">
                                  <img class="card-img-top" src="../assets/img/480x320/img7.jpg" alt="Image Description">
                                  <div class="card-body">
                                    <div class="max-w-13rem w-100 mb-3">
                                      <img class="img-fluid" src="../assets/svg/clients-logo/airbnb-original.svg" alt="Logo">
                                    </div>
                                    <p class="mb-0">Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.</p>
                                  </div>
                                  <div class="card-footer border-0 pt-0">
                                    <a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                                  </div>
                                </div>
                                <!-- End Card Info -->
                              </div>

                              <div class="js-slide mb-4">
                                <!-- Card Info -->
                                <div class="card h-100">
                                  <img class="card-img-top" src="../assets/img/480x320/img6.jpg" alt="Image Description">
                                  <div class="card-body">
                                    <div class="max-w-13rem w-100 mb-3">
                                      <img class="img-fluid" src="../assets/svg/clients-logo/slack-original.svg" alt="Logo">
                                    </div>
                                    <p class="mb-0">Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.</p>
                                  </div>
                                  <div class="card-footer border-0 pt-0">
                                    <a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                                  </div>
                                </div>
                                <!-- End Card Info -->
                              </div>

                              <div class="js-slide mb-4">
                                <!-- Card Info -->
                                <div class="card h-100">
                                  <img class="card-img-top" src="../assets/img/480x320/img14.jpg" alt="Image Description">
                                  <div class="card-body">
                                    <div class="max-w-13rem w-100 mb-3">
                                      <img class="img-fluid" src="../assets/svg/clients-logo/paypal-original.svg" alt="Logo">
                                    </div>
                                    <p class="mb-0">Front Projects has proved to be most efficient cloud based project tracking and bug tracking tool.</p>
                                  </div>
                                  <div class="card-footer border-0 pt-0">
                                    <a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                                  </div>
                                </div>
                                <!-- End Card Info -->
                              </div>

                              <div class="js-slide mb-4">
                                <!-- Card Info -->
                                <div class="card h-100">
                                  <img class="card-img-top" src="../assets/img/480x320/img12.jpg" alt="Image Description">
                                  <div class="card-body">
                                    <div class="max-w-13rem w-100 mb-3">
                                      <img class="img-fluid" src="../assets/svg/clients-logo/fitbit-original.svg" alt="Logo">
                                    </div>
                                    <p class="mb-0">Google is an innovator in public safety technology. First-to-market with TASER conducted energy weapons (CEWs).</p>
                                  </div>
                                  <div class="card-footer border-0 pt-0">
                                    <a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                                  </div>
                                </div>
                                <!-- End Card Info -->
                              </div>

                              <div class="js-slide mb-4">
                                <!-- Card Info -->
                                <div class="card h-100">
                                  <img class="card-img-top" src="../assets/img/480x320/img27.jpg" alt="Image Description">
                                  <div class="card-body">
                                    <div class="max-w-13rem w-100 mb-3">
                                      <img class="img-fluid" src="../assets/svg/clients-logo/hubspot-original.svg" alt="Logo">
                                    </div>
                                    <p class="mb-0">Visitors can build a form or survey before signing up, but in order to save and share it.</p>
                                  </div>
                                  <div class="card-footer border-0 pt-0">
                                    <a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                                  </div>
                                </div>
                                <!-- End Card Info -->
                              </div>
                            </div>
                            <!-- End Slick Carousel -->
                          </div>
                        </div>
                      </div>
                      <!-- End Features Section -->
                    
                  
                    
                      <link rel="stylesheet" href="./assets/vendor/slick-carousel/slick/slick.css">
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./assets/vendor/slick-carousel/slick/slick.js"></script>

                      <!-- JS Front -->

                      <!-- JS Plugins Init. -->
                      <script>
                        // INITIALIZATION OF SLICK CAROUSEL
                        // =======================================================
                        $('.js-slick-carousel').each(function() {
                          var slickCarousel = $.HSCore.components.HSSlickCarousel.init($(this));
                        });
                      </script>
                    
                  

Component #17

Success stories

See how Front is helping teams get organized and work smarter

Image Description
Logo

Amazon launched their enterprise platform and built a powerful user experience.

Image Description
Logo

Mapbox empowers marketers to create digital marketing dashboards easily and share them with their team.

Image Description
Logo

Netflix's mission is to create a planet run by the sun. In order to achieve this goal, they needed to find a way to make solar simple.

                    
                      <!-- Stories Section -->
                      <div class="container space-2">
                        <!-- Title -->
                        <div class="w-md-80 w-lg-50 text-center mx-md-auto mb-5 mb-md-9">
                          <span class="d-block small font-weight-bold text-cap mb-2">Success stories</span>
                          <h2>See how Front is helping teams get organized and work smarter</h2>
                        </div>
                        <!-- End Title -->

                        <div class="row">
                          <div class="col-sm-6 col-md-4 mb-5">
                            <!-- Card Info -->
                            <div class="card h-100">
                              <img class="card-img-top" src="../assets/img/480x320/img13.jpg" alt="Image Description">
                              <div class="card-body">
                                <div class="max-w-13rem w-100 mb-3">
                                  <img class="img-fluid" src="../assets/svg/clients-logo/amazon-original.svg" alt="Logo">
                                </div>
                                <p class="mb-0">Amazon launched their enterprise platform and built a powerful user experience.</p>
                              </div>
                              <div class="card-footer">
                                <a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                              </div>
                            </div>
                            <!-- End Card Info -->
                          </div>

                          <div class="col-sm-6 col-md-4 mb-5">
                            <!-- Card Info -->
                            <div class="card h-100">
                              <img class="card-img-top" src="../assets/img/480x320/img17.jpg" alt="Image Description">
                              <div class="card-body">
                                <div class="max-w-13rem w-100 mb-3">
                                  <img class="img-fluid" src="../assets/svg/clients-logo/mapbox-original.svg" alt="Logo">
                                </div>
                                <p class="mb-0">Mapbox empowers marketers to create digital marketing dashboards easily and share them with their team.</p>
                              </div>
                              <div class="card-footer">
                                <a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                              </div>
                            </div>
                            <!-- End Card Info -->
                          </div>

                          <div class="col-sm-6 col-md-4 mb-5">
                            <!-- Card Info -->
                            <div class="card h-100">
                              <img class="card-img-top" src="../assets/img/480x320/img16.jpg" alt="Image Description">
                              <div class="card-body">
                                <div class="max-w-13rem w-100 mb-3">
                                  <img class="img-fluid" src="../assets/svg/clients-logo/netflix-original.svg" alt="Logo">
                                </div>
                                <p class="mb-0">Netflix's mission is to create a planet run by the sun. In order to achieve this goal, they needed to find a way to make solar simple.</p>
                              </div>
                              <div class="card-footer">
                                <a class="font-weight-bold" href="#">Read story <i class="fas fa-angle-right fa-sm ml-1"></i></a>
                              </div>
                            </div>
                            <!-- End Card Info -->
                          </div>
                        </div>
                      </div>
                      <!-- End Stories Section -->
                    
                  

Component #18

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.
Image Description

Christina Kray

Amsterdam, Netherlands
Review rating Review rating Review rating Review rating Review rating
Image Description

See what other people are saying

Review rating Review rating Review rating Review rating Review rating 4.85 / 5.0 (2,594)
Read more reviews
                    
                      <!-- Testimonials Section -->
                      <div class="overflow-hidden space-bottom-2 space-bottom-lg-3">
                        <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 z-index-2 mb-5 mb-md-0 mr-md-n9">
                              <!-- Card -->
                              <div class="card">
                                <div class="card-body">
                                  <!-- SVG Quote -->
                                  <figure class="mb-4">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
                                       viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
                                      <path fill="#377dff" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
                                        C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
                                        c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
                                        C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
                                    </svg>
                                  </figure>
                                  <!-- End SVG Quote -->

                                  <blockquote class="blockquote mb-4">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>

                                  <!-- Author -->
                                  <div class="media">
                                    <div class="avatar avatar-circle mr-3">
                                      <img class="avatar-img" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                                    </div>
                                    <div class="media-body">
                                      <h4 class="mb-0">Christina Kray</h4>
                                      <small class="d-block mb-1">Amsterdam, Netherlands</small>

                                      <div class="d-flex">
                                        <img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
                                        <img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
                                        <img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
                                        <img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
                                        <img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
                                      </div>
                                    </div>
                                  </div>
                                  <!-- End Author -->
                                </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="Image Description">
                            </div>
                          </div>

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

                            <div class="d-flex justify-content-center align-items-center mb-4">
                              <img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
                              <img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
                              <img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
                              <img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
                              <img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">

                              <span class="h4 ml-2 mb-0">4.85 / 5.0 <small class="text-body">(2,594)</small></span>
                            </div>

                            <a class="btn btn-primary px-5" href="#">Read more reviews <i class="fas fa-angle-right ml-1"></i></a>
                          </div>
                        </div>
                      </div>
                      <!-- End Testimonials Section -->
                    
                  

Component #19

Image Description
Image Description
Save time and effort in your hiring journey. Front's simple and powerful tools let you source, screen, and hire faster.
Anna Lowry
HR Director

59%

in budget saved on unconverting ads

27%

in time saved on campaign management

2.1x

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

                                <!-- SVG Elements -->
                                <figure class="max-w-15rem w-100 position-absolute top-0 left-0 z-index-n1">
                                  <div class="mt-n6 ml-n5">
                                    <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>
                                </figure>

                                <figure class="max-w-15rem w-100 position-absolute bottom-0 right-0 z-index-n1">
                                  <div class="mb-n6 ml-4">
                                    <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="#134ba4" stroke-width="75" cx="167.6" cy="167.6" r="130.1"/>
                                    </svg>
                                  </div>
                                </figure>
                                <!-- End SVG Elements -->
                              </div>
                            </div>

                            <div class="col-lg-7">
                              <div class="pl-lg-6">
                                <img class="avatar mb-3" src="../assets/svg/brands/capsule.svg" alt="Image Description">
                                
                                <blockquote class="h2 mb-5">Save time and effort in your hiring journey. Front's simple and powerful tools let you source, screen, and hire faster.</blockquote>

                                <div class="mb-5">
                                  <h5 class="mb-0">Anna Lowry</h5>
                                  <small class="d-block">HR Director</small>
                                </div>

                                <div class="row">
                                  <div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
                                    <h2 class="mb-1">59%</h2>
                                    <small class="d-block">in budget saved on unconverting ads</small>
                                  </div>

                                  <div class="col-sm-6 col-md-4 mb-3 mb-sm-0">
                                    <h2 class="mb-1">27%</h2>
                                    <small class="d-block">in time saved on campaign management</small>
                                  </div>

                                  <div class="col-sm-6 col-md-4">
                                    <h2 class="mb-1">2.1x</h2>
                                    <small class="d-block">more split tests and experiments</small>
                                  </div>
                                </div>
                                <!-- End Row -->
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Testimonials Section -->
                    
                  

Component #20

Below is a static sidebar example without hs-sticky-block.js plugin. But the plugin's code included in the code snippets.

Reviews

4.5
Review rating Review rating Review rating Review rating Review rating
2,391 reviews
90%
of customers
recommend this company
  • Image Description
    Christina Kray
    5.0 Review rating on November 12, 2020
    Fun place to work at
    You work at your own time. No stress. Although finding jobs are really hard as an entry-level individual with no experience. But I have found 2 jobs without needing any experience.
  • Image Description
    Brian Ortega
    3.0 Review rating on October 25, 2020
    Capsule is for contracted freelance writers
    It was difficult getting the person I was reporting to to explain what it was they wanted me to do. Trello board was all over the place. Some use word, some use Google docs. There was more time spent *hours* researching and minimal pay for articles. 1 cent per word is not acceptable compared to the research behind it. Applying for jobs costs "contacts" and it's very difficult to get anyone who posts jobs to answer you once you apply, therefore you waste contacts applying. There are alot of unverified payments from people searching for writing help. Be leery and watch what you apply for.
  • Image Description
    Maria Williams
    5.0 Review rating on October 19, 2020
    Excellent Company
    They have a great training program, I felt very comfortable with my day to day tasks. Very low turn over, management always is available if you have any questions.
  • Image Description
    Alex Walters
    4.0 Review rating on October 17, 2020
    Productive and fun Workplace
    I'm Diplomatic, personable, and adept at managing sensitive situations. Highly organized, self-motivated, with computers. I'm likeable delecated student of Software Engineering.
  • Image Description
    Kurtis Blade
    5.0 Review rating on October 1, 2020
    Nice place
    I learned a lot of things while working at this job. A decent workplace to be. Managment is okay and my coworkers we just fine. Very good for beginners.
View all reviews

What would you say about your employer?

Help fellow job seekers by sharing your unique experience.

Write a review Image Description
                    
                      <!-- Reviews Section -->
                      <div class="container">
                        <div class="mb-4">
                          <h3>Reviews</h3>
                        </div>

                        <div class="row">
                          <div class="col-lg-8 mb-7 mb-lg-0">
                            <div class="row mb-6">
                              <div class="col-sm-6 mb-3 mb-sm-0">
                                <div class="media align-items-center">
                                  <span class="display-4 text-dark mr-4">4.5</span>
                                
                                  <div class="media-body">
                                    <!-- Rating List -->
                                    <div class="d-flex align-items-center mb-2">
                                      <img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
                                      <img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
                                      <img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
                                      <img class="mr-1" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="12">
                                      <img class="mr-1" src="../assets/svg/illustrations/star-half.svg" alt="Review rating" width="12">
                                    </div>
                                    <!-- End Rating List -->
                                    
                                    <span class="font-size-1">2,391 reviews</span>
                                  </div>
                                </div>
                              </div>

                              <div class="col-sm-6">
                                <div class="media align-items-center">
                                  <span class="display-4 text-dark mr-4">90%</span>
                                
                                  <div class="media-body">
                                    <span class="font-size-1">of customers<br>recommend this company</span>
                                  </div>
                                </div>
                              </div>
                            </div>
                            <!-- End Row -->

                            <!-- Testimonials -->
                            <ul class="list-unstyled list-lg-article">
                              <li>
                                <!-- Media -->
                                <div class="media">
                                  <div class="avatar avatar-circle mr-3">
                                    <img class="avatar-img" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                                  </div>
                                  <div class="media-body">
                                    <h5 class="mb-0">Christina Kray</h5>
                                    
                                    <div class="d-flex align-items-center mb-3">
                                      <span class="font-weight-bold text-dark mr-1">5.0</span>
                                      <img class="mr-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                                      <small class="d-block">on November 12, 2020</small>
                                    </div>

                                    <h5>Fun place to work at</h5>
                                    <blockquote class="blockquote mb-4">You work at your own time. No stress. Although finding jobs are really hard as an entry-level individual with no experience. But I have found 2 jobs without needing any experience.</blockquote>
                                  </div>
                                </div>
                                <!-- End Media -->
                              </li>

                              <li>
                                <!-- Media -->
                                <div class="media">
                                  <div class="avatar avatar-circle mr-3">
                                    <img class="avatar-img" src="../assets/img/100x100/img12.jpg" alt="Image Description">
                                  </div>
                                  <div class="media-body">
                                    <h5 class="mb-0">Brian Ortega</h5>
                                    
                                    <div class="d-flex align-items-center mb-3">
                                      <span class="font-weight-bold text-dark mr-1">3.0</span>
                                      <img class="mr-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                                      <small class="d-block">on October 25, 2020</small>
                                    </div>

                                    <h5>Capsule is for contracted freelance writers</h5>
                                    <blockquote class="blockquote mb-4">It was difficult getting the person I was reporting to to explain what it was they wanted me to do. Trello board was all over the place. Some use word, some use Google docs. There was more time spent *hours* researching and minimal pay for articles. 1 cent per word is not acceptable compared to the research behind it. Applying for jobs costs "contacts" and it's very difficult to get anyone who posts jobs to answer you once you apply, therefore you waste contacts applying. There are alot of unverified payments from people searching for writing help. Be leery and watch what you apply for.</blockquote>
                                  </div>
                                </div>
                                <!-- End Media -->
                              </li>

                              <li>
                                <!-- Media -->
                                <div class="media">
                                  <div class="avatar avatar-circle mr-3">
                                    <img class="avatar-img" src="../assets/img/100x100/img10.jpg" alt="Image Description">
                                  </div>
                                  <div class="media-body">
                                    <h5 class="mb-0">Maria Williams</h5>
                                    
                                    <div class="d-flex align-items-center mb-3">
                                      <span class="font-weight-bold text-dark mr-1">5.0</span>
                                      <img class="mr-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                                      <small class="d-block">on October 19, 2020</small>
                                    </div>

                                    <h5>Excellent Company</h5>
                                    <blockquote class="blockquote mb-4">They have a great training program, I felt very comfortable with my day to day tasks. Very low turn over, management always is available if you have any questions.</blockquote>
                                  </div>
                                </div>
                                <!-- End Media -->
                              </li>

                              <li>
                                <!-- Media -->
                                <div class="media">
                                  <div class="avatar avatar-circle mr-3">
                                    <img class="avatar-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
                                  </div>
                                  <div class="media-body">
                                    <h5 class="mb-0">Alex Walters</h5>
                                    
                                    <div class="d-flex align-items-center mb-3">
                                      <span class="font-weight-bold text-dark mr-1">4.0</span>
                                      <img class="mr-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                                      <small class="d-block">on October 17, 2020</small>
                                    </div>

                                    <h5>Productive and fun Workplace</h5>
                                    <blockquote class="blockquote mb-4">I'm Diplomatic, personable, and adept at managing sensitive situations. Highly organized, self-motivated, with computers. I'm likeable delecated student of Software Engineering.</blockquote>
                                  </div>
                                </div>
                                <!-- End Media -->
                              </li>

                              <li>
                                <!-- Media -->
                                <div class="media">
                                  <div class="avatar avatar-circle mr-3">
                                    <img class="avatar-img" src="../assets/img/100x100/img12.jpg" alt="Image Description">
                                  </div>
                                  <div class="media-body">
                                    <h5 class="mb-0">Kurtis Blade</h5>
                                    
                                    <div class="d-flex align-items-center mb-3">
                                      <span class="font-weight-bold text-dark mr-1">5.0</span>
                                      <img class="mr-2" src="../assets/svg/illustrations/star.svg" alt="Review rating" width="14">
                                      <small class="d-block">on October 1, 2020</small>
                                    </div>

                                    <h5>Nice place</h5>
                                    <blockquote class="blockquote mb-4">I learned a lot of things while working at this job. A decent workplace to be. Managment is okay and my coworkers we just fine. Very good for beginners.</blockquote>
                                  </div>
                                </div>
                                <!-- End Media -->
                              </li>
                            </ul>
                            <!-- End Testimonials -->

                            <a class="btn btn-link" href="#">View all reviews <i class="fas fa-angle-right ml-1"></i></a>

                            <!-- Sticky Block End Point -->
                            <div id="stickyBlockEndPoint"></div>
                          </div>

                          <div class="col-lg-4">
                            <div id="stickyBlockStartPoint" class="pl-lg-4">
                              <!-- Card -->
                              <div class="js-sticky-block card card-bordered"
                                   data-hs-sticky-block-options='{
                                     "parentSelector": "#stickyBlockStartPoint",
                                     "breakpoint": "lg",
                                     "startPoint": "#stickyBlockStartPoint",
                                     "endPoint": "#stickyBlockEndPoint",
                                     "stickyOffsetTop": 20,
                                     "stickyOffsetBottom": 20
                                   }'>
                                <div class="card-body p-5">
                                  <div class="mb-5">
                                    <h3>What would you say about your employer?</h3>
                                    <p>Help fellow job seekers by sharing your unique experience.</p>
                                  </div>
                                  <a class="btn btn-sm btn-block btn-primary" href="#">Write a review</a>
                                  <img class="card-img-bottom mt-7" src="../assets/svg/illustrations/knowledgebase-community-1.svg" alt="Image Description">
                                </div>
                              </div>
                              <!-- End Card -->
                            </div>
                          </div>
                        </div>
                        <!-- End Row -->
                      </div>
                      <!-- Reviews Section -->
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./assets/vendor/hs-sticky-block/dist/hs-sticky-block.min.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF STICKY BLOCKS
                          // =======================================================
                          $('.js-sticky-block').each(function () {
                            var stickyBlock = new HSStickyBlock($(this)).init();
                          });
                        });
                      </script>
                    
                  

Component #21

Image Description
My personal details, like, full name, location, and phone numbers
Shared on September 9, 2020
Christina Kray
Image Description
What my skills are and what I can offer to them
Shared on March 24, 2020
Brian McManus
Image Description
If I know how to do certain job functions
Shared on June 2, 2020
Max Walters
                    
                      <div class="row">
                        <div class="col-md-6 col-lg-4 mb-5">
                          <!-- Media -->
                          <div class="media">
                            <div class="avatar avatar-sm avatar-circle mr-3">
                              <img class="avatar-img" src="../assets/img/100x100/img1.jpg" alt="Image Description">
                            </div>
                            <div class="media-body">
                              <blockquote class="blockquote">My personal details, like, full name, location, and phone numbers</blockquote>
                              <footer class="blockquote-footer">Shared on September 9, 2020</footer>
                              <h6 class="font-weight-normal">Christina Kray</h6>
                            </div>
                          </div>
                          <!-- End Media -->
                        </div>

                        <div class="col-md-6 col-lg-4 mb-5">
                          <!-- Media -->
                          <div class="media">
                            <div class="avatar avatar-sm avatar-circle mr-3">
                              <img class="avatar-img" src="../assets/img/100x100/img3.jpg" alt="Image Description">
                            </div>
                            <div class="media-body">
                              <blockquote class="blockquote">What my skills are and what I can offer to them</blockquote>
                              <footer class="blockquote-footer">Shared on March 24, 2020</footer>
                              <h6 class="font-weight-normal">Brian McManus</h6>
                            </div>
                          </div>
                          <!-- End Media -->
                        </div>

                        <div class="col-md-6 col-lg-4 mb-5">
                          <!-- Media -->
                          <div class="media">
                            <div class="avatar avatar-sm avatar-circle mr-3">
                              <img class="avatar-img" src="../assets/img/100x100/img12.jpg" alt="Image Description">
                            </div>
                            <div class="media-body">
                              <blockquote class="blockquote">If I know how to do certain job functions</blockquote>
                              <footer class="blockquote-footer">Shared on June 2, 2020</footer>
                              <h6 class="font-weight-normal">Max Walters</h6>
                            </div>
                          </div>
                          <!-- End Media -->
                        </div>
                      </div>
                      <!-- End Row -->