Sandbox Jekyll documentation
Testimonials
Copy any custom block snippet below and paste it on your page to build your website easily.
Example 1
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
<div class="col-lg-7">
<div class="row gx-md-5 gy-5">
<div class="col-md-6 col-xl-5 align-self-end">
<div class="card bg-pale-grape">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Vel augue laoreet rutrum faucibus dolor auctor "</p>
<div class="blockquote-details">
<div class="info p-0">
<h5 class="mb-1">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="col-md-6 align-self-end">
<div class="card bg-pale-leaf">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."</p>
<div class="blockquote-details">
<div class="info p-0">
<h5 class="mb-1">Cory Zamora</h5>
<p class="mb-0">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="col-md-6 col-xl-5 offset-xl-1 align-self-start">
<div class="card bg-pale-orange">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. "</p>
<div class="blockquote-details">
<div class="info p-0">
<h5 class="mb-1">Nikolas Brooten</h5>
<p class="mb-0">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="col-md-6 align-self-start">
<div class="card bg-pale-pink">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien."</p>
<div class="blockquote-details">
<div class="info p-0">
<h5 class="mb-1">Coriss Juker</h5>
<p class="mb-0">Market Analyst</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="col-md-6 align-self-start">
<div class="card bg-pale-blue">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus."</p>
<div class="blockquote-details">
<div class="info p-0">
<h5 class="mb-1">Jackie Sanders</h5>
<p class="mb-0">Investment Planner</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="col-md-6 align-self-start">
<div class="card bg-pale-yellow">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue."</p>
<div class="blockquote-details">
<div class="info p-0">
<h5 class="mb-1">Laura Widerski</h5>
<p class="mb-0">Sales Specialist</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5">
<h2 class="display-4 mb-3">Our Community</h2>
<p class="lead fs-lg">Customer satisfaction is our major goal. See what our customers are saying about us.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper.</p>
<a href="#" class="btn btn-navy rounded-pill mt-3">All Testimonials</a>
</div>
</div>
</div>
</section>testimonials1:
enable: true
title: "Our Community"
description: "Customer satisfaction is our major goal. See what our customers are saying about us."
content: "Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper."
button_text: "All Testimonials"
button_url: "#"Example 2
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row position-relative">
<figure class="rounded position-absolute d-none d-lg-block" style="top: 50%; right:0; width: 45%; height: auto; transform: translateY(-50%); z-index:2">
<img src="/assets/img/photos/tei1.webp" srcset="/assets/img/photos/[email protected] 2x" alt="">
</figure>
<div class="col-lg-9 text-center">
<div class="card bg-gray">
<div class="card-body p-md-10 py-xxl-16">
<div class="row gx-0">
<div class="col-lg-8 ps-xl-10">
<span class="ratings 5 fs-20 mb-3"></span>
<blockquote class="border-0 fs-lg mb-0">
<p>"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Vel augue laoreet rutrum faucibus dolor auctor "</p>
<div class="blockquote-details justify-content-center text-center">
<div class="info p-0">
<h4 class="mb-1">Coriss Ambady</h4>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>testimonials2:
enable: true
image: "tei1.webp"
image2x: "[email protected]"
background_color: "gray"Example 3
<section class="wrapper bg-light wrapper-border">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row gx-xl-12 gy-10">
<div class="col-xl-4">
<h2 class="display-4 mt-10 mb-3">Our Community</h2>
<p class="lead fs-lg mb-6">Customer satisfaction is our major goal. See what our clients are saying about our services.</p>
<a href="#" class="btn btn-primary rounded-pill">All Testimonials</a>
</div>
<!-- /column -->
<div class="col-xl-8">
<div class="position-relative">
<div class="shape rounded-circle bg-soft-yellow rellax w-16 h-16" data-rellax-speed="1" style="top: -0.7rem; right: -1.7rem;"></div>
<div class="shape rounded-circle bg-soft-red rellax w-16 h-16" data-rellax-speed="1" style="bottom: -0.5rem; left: -1.4rem;"></div>
<div class="swiper-container dots-closer mb-6" data-margin="0" data-dots="true" data-items-md="2" data-items-xs="1">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="item-inner">
<div class="card shadow-none rounded-xl">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Vel augue laoreet rutrum faucibus dolor auctor "</p>
<div class="blockquote-details">
<img class="rounded-circle w-12" src="/assets/img/avatars/te1.webp"
srcset="/assets/img/avatars/[email protected] 2x" alt="Coriss Ambady" />
<div class="info">
<h5 class="mb-1">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="item-inner">
<div class="card shadow-none rounded-xl">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."</p>
<div class="blockquote-details">
<img class="rounded-circle w-12" src="/assets/img/avatars/te2.webp"
srcset="/assets/img/avatars/[email protected] 2x" alt="Cory Zamora" />
<div class="info">
<h5 class="mb-1">Cory Zamora</h5>
<p class="mb-0">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="item-inner">
<div class="card shadow-none rounded-xl">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. "</p>
<div class="blockquote-details">
<img class="rounded-circle w-12" src="/assets/img/avatars/te3.webp"
srcset="/assets/img/avatars/[email protected] 2x" alt="Nikolas Brooten" />
<div class="info">
<h5 class="mb-1">Nikolas Brooten</h5>
<p class="mb-0">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="item-inner">
<div class="card shadow-none rounded-xl">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien."</p>
<div class="blockquote-details">
<img class="rounded-circle w-12" src="/assets/img/avatars/te4.webp"
srcset="/assets/img/avatars/[email protected] 2x" alt="Coriss Juker" />
<div class="info">
<h5 class="mb-1">Coriss Juker</h5>
<p class="mb-0">Market Analyst</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="item-inner">
<div class="card shadow-none rounded-xl">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus."</p>
<div class="blockquote-details">
<img class="rounded-circle w-12" src="/assets/img/avatars/te5.webp"
srcset="/assets/img/avatars/[email protected] 2x" alt="Jackie Sanders" />
<div class="info">
<h5 class="mb-1">Jackie Sanders</h5>
<p class="mb-0">Investment Planner</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="item-inner">
<div class="card shadow-none rounded-xl">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue."</p>
<div class="blockquote-details">
<img class="rounded-circle w-12" src="/assets/img/avatars/te6.webp"
srcset="/assets/img/avatars/[email protected] 2x" alt="Laura Widerski" />
<div class="info">
<h5 class="mb-1">Laura Widerski</h5>
<p class="mb-0">Sales Specialist</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /.position-relative -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>testimonials3:
enable: true
title: "Our Community"
description: "Customer satisfaction is our major goal. See what our clients are saying about our services."
button_text: "All Testimonials"
button_url: "#"
shapes:
- color: "yellow"
position: "top: -0.7rem; right: -1.7rem;"
- color: "red"
position: "bottom: -0.5rem; left: -1.4rem;"Example 4
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row gx-lg-8 gx-xl-12 gy-6 align-items-center">
<div class="col-lg-7 order-lg-2">
<figure>
<img class="w-auto" src="/assets/img/illustrations/i4.webp"
srcset="/assets/img/illustrations/[email protected] 2x" alt="" />
</figure>
</div>
<div class="col-lg-5 mt-12">
<div class="swiper-container dots-closer mb-6" data-margin="30"
data-dots="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<blockquote class="icon icon-top fs-lg text-center">
<p>"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Vel augue laoreet rutrum faucibus dolor auctor "</p>
<div class="blockquote-details justify-content-center text-center">
<div class="info ps-0">
<h5 class="mb-1">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="icon icon-top fs-lg text-center">
<p>"Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."</p>
<div class="blockquote-details justify-content-center text-center">
<div class="info ps-0">
<h5 class="mb-1">Cory Zamora</h5>
<p class="mb-0">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="icon icon-top fs-lg text-center">
<p>"Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. "</p>
<div class="blockquote-details justify-content-center text-center">
<div class="info ps-0">
<h5 class="mb-1">Nikolas Brooten</h5>
<p class="mb-0">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="icon icon-top fs-lg text-center">
<p>"Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien."</p>
<div class="blockquote-details justify-content-center text-center">
<div class="info ps-0">
<h5 class="mb-1">Coriss Juker</h5>
<p class="mb-0">Market Analyst</p>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="icon icon-top fs-lg text-center">
<p>"Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus."</p>
<div class="blockquote-details justify-content-center text-center">
<div class="info ps-0">
<h5 class="mb-1">Jackie Sanders</h5>
<p class="mb-0">Investment Planner</p>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="icon icon-top fs-lg text-center">
<p>"Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue."</p>
<div class="blockquote-details justify-content-center text-center">
<div class="info ps-0">
<h5 class="mb-1">Laura Widerski</h5>
<p class="mb-0">Sales Specialist</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>testimonials4:
enable: true
image: "i4.webp"
image2x: "[email protected]"
swiper:
margin: 30
dots: trueExample 5
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<h2 class="display-4 mb-3 text-center">Happy Customers</h2>
<p class="lead text-center mb-6 px-md-16 px-lg-0">Customer satisfaction is our major goal. See what our customers are saying about us.</p>
<div class="position-relative">
<div class="shape rounded-circle bg-soft-yellow rellax w-16 h-16"
data-rellax-speed="1"
style="bottom: 0.5rem; right: -1.7rem;"></div>
<div class="shape bg-dot primary rellax w-16 h-16"
data-rellax-speed="1"
style="top: -1rem; left: -1.7rem;"></div>
<div class="swiper-container dots-closer mb-6"
data-margin="0"
data-dots="true"
data-items-xl="3"
data-items-md="2"
data-items-xs="1">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="item-inner">
<div class="card shadow-none rounded-xl">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Vel augue laoreet rutrum faucibus dolor auctor "</p>
<div class="blockquote-details">
<img class="rounded-circle w-12"
src="/assets/img/avatars/te1.webp"
srcset="/assets/img/avatars/[email protected] 2x"
alt="Coriss Ambady" />
<div class="info">
<h5 class="mb-1">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="item-inner">
<div class="card shadow-none rounded-xl">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."</p>
<div class="blockquote-details">
<img class="rounded-circle w-12"
src="/assets/img/avatars/te2.webp"
srcset="/assets/img/avatars/[email protected] 2x"
alt="Cory Zamora" />
<div class="info">
<h5 class="mb-1">Cory Zamora</h5>
<p class="mb-0">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="item-inner">
<div class="card shadow-none rounded-xl">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. "</p>
<div class="blockquote-details">
<img class="rounded-circle w-12"
src="/assets/img/avatars/te3.webp"
srcset="/assets/img/avatars/[email protected] 2x"
alt="Nikolas Brooten" />
<div class="info">
<h5 class="mb-1">Nikolas Brooten</h5>
<p class="mb-0">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="item-inner">
<div class="card shadow-none rounded-xl">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien."</p>
<div class="blockquote-details">
<img class="rounded-circle w-12"
src="/assets/img/avatars/te4.webp"
srcset="/assets/img/avatars/[email protected] 2x"
alt="Coriss Juker" />
<div class="info">
<h5 class="mb-1">Coriss Juker</h5>
<p class="mb-0">Market Analyst</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="item-inner">
<div class="card shadow-none rounded-xl">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus."</p>
<div class="blockquote-details">
<img class="rounded-circle w-12"
src="/assets/img/avatars/te5.webp"
srcset="/assets/img/avatars/[email protected] 2x"
alt="Jackie Sanders" />
<div class="info">
<h5 class="mb-1">Jackie Sanders</h5>
<p class="mb-0">Investment Planner</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="item-inner">
<div class="card shadow-none rounded-xl">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue."</p>
<div class="blockquote-details">
<img class="rounded-circle w-12"
src="/assets/img/avatars/te6.webp"
srcset="/assets/img/avatars/[email protected] 2x"
alt="Laura Widerski" />
<div class="info">
<h5 class="mb-1">Laura Widerski</h5>
<p class="mb-0">Sales Specialist</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>testimonials5:
enable: true
title: "Happy Customers"
description: "Customer satisfaction is our major goal. See what our customers are saying about us."
shapes:
- color: "yellow"
type: "rounded-circle"
position: "bottom: 0.5rem; right: -1.7rem;"
- color: "primary"
type: "bg-dot"
position: "top: -1rem; left: -1.7rem;"
swiper:
margin: 0
dots: true
items_xl: 3
items_md: 2
items_xs: 1Example 6
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row gx-lg-8 gx-xl-12 gy-6 align-items-center">
<div class="col-lg-7 position-relative">
<div class="shape bg-dot primary rellax w-18 h-18"
data-rellax-speed="1"
style="top: 0; left: -1.4rem; z-index: 0;"></div>
<div class="row gx-md-5 gy-5">
<div class="col-md-6">
<figure class="rounded mt-md-10 position-relative">
<img src="/assets/img/photos/g5.webp"
srcset="/assets/img/photos/[email protected] 2x"
alt="">
</figure>
</div>
<div class="col-md-6">
<div class="row gx-md-5 gy-5">
<div class="col-md-12 order-md-2">
<figure class="rounded">
<img src="/assets/img/photos/g6.webp"
srcset="/assets/img/photos/[email protected] 2x"
alt="">
</figure>
</div>
<div class="col-md-10">
<div class="card bg-pale-primary text-center">
<div class="card-body py-11 counter-wrapper">
<h3 class="counter text-nowrap">5000+</h3>
<p class="mb-0">Satisfied Customers</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5 mt-5">
<div class="swiper-container dots-closer mb-6"
data-margin="30"
data-dots="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<blockquote class="icon icon-top fs-lg text-center">
<p>"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Vel augue laoreet rutrum faucibus dolor auctor "</p>
<div class="blockquote-details justify-content-center text-center">
<div class="info ps-0">
<h5 class="mb-1">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="icon icon-top fs-lg text-center">
<p>"Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."</p>
<div class="blockquote-details justify-content-center text-center">
<div class="info ps-0">
<h5 class="mb-1">Cory Zamora</h5>
<p class="mb-0">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="icon icon-top fs-lg text-center">
<p>"Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. "</p>
<div class="blockquote-details justify-content-center text-center">
<div class="info ps-0">
<h5 class="mb-1">Nikolas Brooten</h5>
<p class="mb-0">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>testimonials6:
enable: true
shape:
color: "primary"
type: "bg-dot"
position: "top: 0; left: -1.4rem; z-index: 0;"
images:
- src: "g5.webp"
src2x: "[email protected]"
classes: "rounded mt-md-10 position-relative"
- src: "g6.webp"
src2x: "[email protected]"
classes: "rounded"
counter:
number: "5000+"
text: "Satisfied Customers"
swiper:
margin: 30
dots: trueExample 7
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row">
<div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2 mx-auto text-center">
<h2 class="fs-15 text-uppercase text-muted mb-3">Happy Customers</h2>
<h3 class="display-4 mb-10 px-xl-10 px-xxl-15">Don't take our word for it. See what customers are saying about us.</h3>
</div>
</div>
<div class="grid">
<div class="row isotope gy-6">
<div class="item col-md-6 col-xl-4">
<div class="card shadow-none rounded-xl">
<div class="card-body">
<span class="ratings five mb-3"></span>
<blockquote class="icon mb-0">
<p>"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Vel augue laoreet rutrum faucibus dolor auctor "</p>
<div class="blockquote-details">
<img class="rounded-circle w-12"
src="/assets/img/avatars/te1.webp"
srcset="/assets/img/avatars/[email protected] 2x"
alt="Coriss Ambady" />
<div class="info">
<h5 class="mb-1">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="item col-md-6 col-xl-4">
<div class="card shadow-none rounded-xl">
<div class="card-body">
<span class="ratings five mb-3"></span>
<blockquote class="icon mb-0">
<p>"Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."</p>
<div class="blockquote-details">
<img class="rounded-circle w-12"
src="/assets/img/avatars/te2.webp"
srcset="/assets/img/avatars/[email protected] 2x"
alt="Cory Zamora" />
<div class="info">
<h5 class="mb-1">Cory Zamora</h5>
<p class="mb-0">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="item col-md-6 col-xl-4">
<div class="card shadow-none rounded-xl">
<div class="card-body">
<span class="ratings five mb-3"></span>
<blockquote class="icon mb-0">
<p>"Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. "</p>
<div class="blockquote-details">
<img class="rounded-circle w-12"
src="/assets/img/avatars/te3.webp"
srcset="/assets/img/avatars/[email protected] 2x"
alt="Nikolas Brooten" />
<div class="info">
<h5 class="mb-1">Nikolas Brooten</h5>
<p class="mb-0">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="item col-md-6 col-xl-4">
<div class="card shadow-none rounded-xl">
<div class="card-body">
<span class="ratings five mb-3"></span>
<blockquote class="icon mb-0">
<p>"Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien."</p>
<div class="blockquote-details">
<img class="rounded-circle w-12"
src="/assets/img/avatars/te4.webp"
srcset="/assets/img/avatars/[email protected] 2x"
alt="Coriss Juker" />
<div class="info">
<h5 class="mb-1">Coriss Juker</h5>
<p class="mb-0">Market Analyst</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="item col-md-6 col-xl-4">
<div class="card shadow-none rounded-xl">
<div class="card-body">
<span class="ratings five mb-3"></span>
<blockquote class="icon mb-0">
<p>"Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus."</p>
<div class="blockquote-details">
<img class="rounded-circle w-12"
src="/assets/img/avatars/te5.webp"
srcset="/assets/img/avatars/[email protected] 2x"
alt="Jackie Sanders" />
<div class="info">
<h5 class="mb-1">Jackie Sanders</h5>
<p class="mb-0">Investment Planner</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="item col-md-6 col-xl-4">
<div class="card shadow-none rounded-xl">
<div class="card-body">
<span class="ratings five mb-3"></span>
<blockquote class="icon mb-0">
<p>"Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue."</p>
<div class="blockquote-details">
<img class="rounded-circle w-12"
src="/assets/img/avatars/te6.webp"
srcset="/assets/img/avatars/[email protected] 2x"
alt="Laura Widerski" />
<div class="info">
<h5 class="mb-1">Laura Widerski</h5>
<p class="mb-0">Sales Specialist</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</section>testimonials7:
enable: true
title: "Happy Customers"
subtitle: "Don't take our word for it. See what customers are saying about us."
grid:
columns_md: 6
columns_xl: 4
spacing: 6
card:
ratings: true
rating_value: "five"
icon: true
rounded_image: true
image_width: "w-12"Example 8
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row gx-lg-8 gx-xl-0 align-items-center">
<div class="col-lg-5 col-xl-4 offset-xl-1 d-none d-lg-flex position-relative">
<div class="shape rounded-circle bg-soft-primary rellax w-21 h-21"
data-rellax-speed="1"
style="top: 7rem; left: 1rem"></div>
<figure>
<img src="/assets/img/photos/co1.webp"
srcset="/assets/img/photos/[email protected] 2x"
alt="">
</figure>
</div>
<div class="col-lg-6 col-xl-6 col-xxl-5 offset-xl-1">
<div class="swiper-container dots-start dots-closer mt-6 mb-6"
data-margin="30"
data-dots="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<blockquote class="icon fs-lg">
<p>"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Vel augue laoreet rutrum faucibus dolor auctor "</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="icon fs-lg">
<p>"Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Cory Zamora</h5>
<p class="mb-0">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="icon fs-lg">
<p>"Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. "</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Nikolas Brooten</h5>
<p class="mb-0">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>testimonials8:
enable: true
shape:
color: "primary"
type: "rounded-circle"
classes: "bg-soft-primary rellax w-21 h-21"
position: "top: 7rem; left: 1rem"
image:
src: "co1.webp"
src2x: "[email protected]"
swiper:
margin: 30
dots: true
classes: "dots-start dots-closer mt-6 mb-6"Example 9
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="card bg-soft-primary">
<div class="card-body p-md-10 py-xxl-16 position-relative">
<div class="position-absolute d-none d-lg-block" style="bottom:0; left:10%; width: 28%; z-index:2">
<figure>
<img src="/assets/img/photos/co2.webp"
srcset="/assets/img/photos/[email protected] 2x"
alt="">
</figure>
</div>
<div class="row gx-md-0 gx-xl-12 text-center">
<div class="col-lg-7 offset-lg-5 col-xl-6">
<span class="ratings five mb-3"></span>
<blockquote class="border-0 fs-lg mb-0">
<p>"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Vel augue laoreet rutrum faucibus dolor auctor "</p>
<div class="blockquote-details justify-content-center text-center">
<div class="info p-0">
<h5 class="mb-1">Coriss Ambady</h5>
<div class="meta mb-0">Financial Analyst</div>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</section>testimonials9:
enable: true
image:
src: "co2.webp"
src2x: "[email protected]"
position: "bottom:0; left:10%; width: 28%; z-index:2"
card:
background: "bg-soft-primary"
padding: "p-md-10 py-xxl-16"
ratings: true
rating_value: "five"Example 10
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="position-relative">
<div class="shape rounded-circle bg-line primary rellax w-18 h-18"
data-rellax-speed="1"
style="top: -2rem; right: -2.7rem; z-index:0;"></div>
<div class="shape rounded-circle bg-soft-primary rellax w-18 h-18"
data-rellax-speed="1"
style="bottom: -1rem; left: -3rem; z-index:0;"></div>
<div class="card shadow-lg">
<div class="row gx-0">
<div class="col-lg-6 image-wrapper bg-image bg-cover rounded-top rounded-lg-start"
data-image-src="/assets/img/photos/tm1.webp">
</div>
<div class="col-lg-6">
<div class="p-10 p-md-11 p-lg-13">
<div class="swiper-container dots-closer mb-6"
data-margin="30"
data-dots="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<blockquote class="icon icon-top fs-lg text-center">
<p>"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Vel augue laoreet rutrum faucibus dolor auctor "</p>
<div class="blockquote-details justify-content-center text-center">
<div class="info ps-0">
<h5 class="mb-1">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="icon icon-top fs-lg text-center">
<p>"Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."</p>
<div class="blockquote-details justify-content-center text-center">
<div class="info ps-0">
<h5 class="mb-1">Cory Zamora</h5>
<p class="mb-0">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="icon icon-top fs-lg text-center">
<p>"Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. "</p>
<div class="blockquote-details justify-content-center text-center">
<div class="info ps-0">
<h5 class="mb-1">Nikolas Brooten</h5>
<p class="mb-0">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>testimonials10:
enable: true
shapes:
- type: "rounded-circle"
classes: "bg-line primary rellax w-18 h-18"
position: "top: -2rem; right: -2.7rem; z-index:0;"
speed: 1
- type: "rounded-circle"
classes: "bg-soft-primary rellax w-18 h-18"
position: "bottom: -1rem; left: -3rem; z-index:0;"
speed: 1
image:
src: "tm1.webp"
classes: "bg-image bg-cover rounded-top rounded-lg-start"
card:
shadow: "shadow-lg"
padding: "p-10 p-md-11 p-lg-13"
swiper:
margin: 30
dots: true
classes: "dots-closer mb-6"Example 11
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row text-white text-center">
<div class="col-xl-10 mx-auto">
<div class="card bg-full bg-image bg-overlay-400"
data-image-src="/assets/img/photos/bg2.webp">
<div class="card-body p-9 p-xl-12">
<div class="row gx-0">
<div class="col-xxl-9 mx-auto">
<div class="swiper-container dots-light dots-closer mb-6"
data-margin="30"
data-dots="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<span class="ratings 5 mb-3"></span>
<blockquote class="border-0 fs-lg mb-2">
<p>"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Vel augue laoreet rutrum faucibus dolor auctor "</p>
<div class="blockquote-details justify-content-center text-center">
<div class="info ps-0">
<h5 class="mb-1 text-white">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<span class="ratings 5 mb-3"></span>
<blockquote class="border-0 fs-lg mb-2">
<p>"Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."</p>
<div class="blockquote-details justify-content-center text-center">
<div class="info ps-0">
<h5 class="mb-1 text-white">Cory Zamora</h5>
<p class="mb-0">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<span class="ratings 5 mb-3"></span>
<blockquote class="border-0 fs-lg mb-2">
<p>"Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. "</p>
<div class="blockquote-details justify-content-center text-center">
<div class="info ps-0">
<h5 class="mb-1 text-white">Nikolas Brooten</h5>
<p class="mb-0">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>testimonials11:
enable: true
background:
image: "bg2.webp"
overlay: "bg-overlay-400"
card:
classes: "bg-full bg-image"
padding: "p-9 p-xl-12"
swiper:
margin: 30
dots: true
classes: "dots-light dots-closer mb-6"
text_color: "text-white"Example 12
<section class="wrapper bg-light">
<div class="container py-14 py-md-16">
<div class="row">
<div class="col-md-10 col-lg-8 mx-auto">
<div class="swiper-container dots-closer text-center mb-6"
data-margin="30"
data-dots="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<blockquote class="border-0 fs-lg">
<p>"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Vel augue laoreet rutrum faucibus dolor auctor "</p>
<div class="blockquote-details justify-content-center">
<img class="rounded-circle w-12"
src="/assets/img/avatars/te1.webp"
srcset="/assets/img/avatars/[email protected] 2x"
alt="Coriss Ambady" />
<div class="info">
<h5 class="mb-1">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="border-0 fs-lg">
<p>"Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."</p>
<div class="blockquote-details justify-content-center">
<img class="rounded-circle w-12"
src="/assets/img/avatars/te2.webp"
srcset="/assets/img/avatars/[email protected] 2x"
alt="Cory Zamora" />
<div class="info">
<h5 class="mb-1">Cory Zamora</h5>
<p class="mb-0">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="border-0 fs-lg">
<p>"Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. "</p>
<div class="blockquote-details justify-content-center">
<img class="rounded-circle w-12"
src="/assets/img/avatars/te3.webp"
srcset="/assets/img/avatars/[email protected] 2x"
alt="Nikolas Brooten" />
<div class="info">
<h5 class="mb-1">Nikolas Brooten</h5>
<p class="mb-0">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>testimonials12:
enable: true
swiper:
margin: 30
dots: true
classes: "dots-closer text-center mb-6"
avatar:
classes: "rounded-circle w-12"Example 13
<section class="wrapper bg-light">
<div class="container-card pt-14 pt-md-16">
<div class="card image-wrapper bg-full bg-image bg-overlay-light-500 pb-15"
data-image-src="/assets/img/photos/bg22.webp">
<div class="card-body py-14 px-0">
<div class="container">
<div class="row gx-lg-8 gx-xl-12 gy-10 gy-lg-0">
<div class="col-lg-4 text-center text-lg-start">
<h3 class="display-4 mb-3 pe-xxl-15">We are proud of our works</h3>
<p class="lead fs-lg mb-0 pe-xxl-10">We bring solutions to make life easier for our customers.</p>
</div>
<div class="col-lg-8 mt-lg-2">
<div class="row align-items-center counter-wrapper gy-6 text-center">
<div class="col-md-4">
<img src="/assets/img/icons/solid/target.svg"
class="svg-inject icon-svg icon-svg-sm solid-duo text-grape-fuchsia mb-3"
alt="" />
<h3 class="counter">1000+</h3>
<p class="mb-0">Completed Projects</p>
</div>
<div class="col-md-4">
<img src="/assets/img/icons/solid/bar-chart.svg"
class="svg-inject icon-svg icon-svg-sm solid-duo text-grape-fuchsia mb-3"
alt="" />
<h3 class="counter">4x</h3>
<p class="mb-0">Revenue Growth</p>
</div>
<div class="col-md-4">
<img src="/assets/img/icons/solid/employees.svg"
class="svg-inject icon-svg icon-svg-sm solid-duo text-grape-fuchsia mb-3"
alt="" />
<h3 class="counter">99.7%</h3>
<p class="mb-0">Customer Satisfaction</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="grid mb-15">
<div class="row isotope gy-6 mt-n18">
<div class="item col-md-6 col-xl-3">
<div class="card shadow-lg card-border-bottom border-soft-primary">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Vel augue laoreet rutrum faucibus dolor auctor "</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="item col-md-6 col-xl-3">
<div class="card shadow-lg card-border-bottom border-soft-primary">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Cory Zamora</h5>
<p class="mb-0">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="item col-md-6 col-xl-3">
<div class="card shadow-lg card-border-bottom border-soft-primary">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. "</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Nikolas Brooten</h5>
<p class="mb-0">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="item col-md-6 col-xl-3">
<div class="card shadow-lg card-border-bottom border-soft-primary">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien."</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Coriss Juker</h5>
<p class="mb-0">Market Analyst</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</section>testimonials13:
enable: true
background:
image: "bg22.webp"
overlay: "bg-overlay-light-500"
content:
title: "We are proud of our works"
description: "We bring solutions to make life easier for our customers."
counters:
- icon: "target.svg"
number: "1000+"
text: "Completed Projects"
classes: "solid-duo text-grape-fuchsia"
- icon: "bar-chart.svg"
number: "4x"
text: "Revenue Growth"
classes: "solid-duo text-grape-fuchsia"
- icon: "employees.svg"
number: "99.7%"
text: "Customer Satisfaction"
classes: "solid-duo text-grape-fuchsia"Example 14
<section class="wrapper image-wrapper bg-image bg-overlay text-white">
<div class="container py-14 py-md-16 text-center">
<i class="icn-flower text-white fs-30 opacity-50"></i>
<div class="row mt-3">
<div class="col-xl-9 col-xxl-8 mx-auto">
<div class="swiper-container dots-light dots-closer mb-6"
data-margin="30"
data-dots="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<blockquote class="border-0 text-white fs-24 mb-0">
<p>"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Vel augue laoreet rutrum faucibus dolor auctor "</p>
<div class="blockquote-details justify-content-center">
<div class="info p-0">
<h6 class="mb-0 text-white">Coriss Ambady</h6>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="border-0 text-white fs-24 mb-0">
<p>"Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."</p>
<div class="blockquote-details justify-content-center">
<div class="info p-0">
<h6 class="mb-0 text-white">Cory Zamora</h6>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<blockquote class="border-0 text-white fs-24 mb-0">
<p>"Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. "</p>
<div class="blockquote-details justify-content-center">
<div class="info p-0">
<h6 class="mb-0 text-white">Nikolas Brooten</h6>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>testimonials14:
enable: true
background:
image: "bg32.webp"
overlay: "bg-overlay"
icon:
type: "icn-flower"
classes: "text-white fs-30 opacity-50"
swiper:
margin: 30
dots: true
classes: "dots-light dots-closer mb-6"
text:
classes: "text-white fs-24"Example 15
<section class="wrapper image-wrapper bg-image bg-overlay">
<div class="container py-15 py-md-17">
<h2 class="display-5 mb-4 text-center text-white">Happy Customers</h2>
<div class="swiper-container dots-closer dots-light dots-light-75"
data-margin="0"
data-dots="true"
data-items-xl="3"
data-items-md="2"
data-items-xs="1">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="item-inner">
<div class="card border-0 bg-white-900">
<div class="card-body">
<span class="ratings 5 mb-3"></span>
<blockquote class="border-0 mb-0">
<p>"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Vel augue laoreet rutrum faucibus dolor auctor "</p>
<div class="blockquote-details">
<div class="info p-0">
<h5 class="mb-0">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="item-inner">
<div class="card border-0 bg-white-900">
<div class="card-body">
<span class="ratings 5 mb-3"></span>
<blockquote class="border-0 mb-0">
<p>"Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."</p>
<div class="blockquote-details">
<div class="info p-0">
<h5 class="mb-0">Cory Zamora</h5>
<p class="mb-0">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="item-inner">
<div class="card border-0 bg-white-900">
<div class="card-body">
<span class="ratings 5 mb-3"></span>
<blockquote class="border-0 mb-0">
<p>"Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. "</p>
<div class="blockquote-details">
<div class="info p-0">
<h5 class="mb-0">Nikolas Brooten</h5>
<p class="mb-0">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="item-inner">
<div class="card border-0 bg-white-900">
<div class="card-body">
<span class="ratings 5 mb-3"></span>
<blockquote class="border-0 mb-0">
<p>"Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien."</p>
<div class="blockquote-details">
<div class="info p-0">
<h5 class="mb-0">Coriss Juker</h5>
<p class="mb-0">Market Analyst</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="item-inner">
<div class="card border-0 bg-white-900">
<div class="card-body">
<span class="ratings 5 mb-3"></span>
<blockquote class="border-0 mb-0">
<p>"Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus."</p>
<div class="blockquote-details">
<div class="info p-0">
<h5 class="mb-0">Jackie Sanders</h5>
<p class="mb-0">Investment Planner</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="item-inner">
<div class="card border-0 bg-white-900">
<div class="card-body">
<span class="ratings 5 mb-3"></span>
<blockquote class="border-0 mb-0">
<p>"Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue."</p>
<div class="blockquote-details">
<div class="info p-0">
<h5 class="mb-0">Laura Widerski</h5>
<p class="mb-0">Sales Specialist</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>testimonials15:
enable: true
background:
image: "bg35.webp"
overlay: "bg-overlay"
title: "Happy Customers"
swiper:
margin: 0
dots: true
classes: "dots-closer dots-light dots-light-75"
items:
xl: 3
md: 2
xs: 1
card:
classes: "border-0 bg-white-900"Example 16
<section class="wrapper bg-light">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="card bg-soft-primary rounded-4">
<div class="card-body py-14 px-lg-0">
<div class="row text-center">
<div class="col-lg-8 offset-lg-2">
<h2 class="fs-16 text-uppercase text-primary mb-3">Happy Customers</h2>
<h3 class="display-4 mb-10 px-xxl-10">Don't take our word for it. See what customers are saying about us.</h3>
</div>
</div>
<div class="row gx-lg-8 gx-xl-12 align-items-center">
<div class="col-lg-5 ms-auto col-xl-4 d-none d-lg-flex">
<div class="img-mask mask-3">
<img src="/assets/img/photos/about28.webp"
srcset="/assets/img/photos/[email protected] 2x"
alt="" />
</div>
</div>
<div class="col-lg-6 col-xl-6 col-xxl-5 me-auto">
<div class="swiper-container dots-start dots-closer mb-6"
data-margin="30"
data-dots="true">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<span class="ratings 5 mb-3"></span>
<blockquote class="border-0 fs-lg mb-0">
<p>"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Vel augue laoreet rutrum faucibus dolor auctor "</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<span class="ratings 5 mb-3"></span>
<blockquote class="border-0 fs-lg mb-0">
<p>"Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Cory Zamora</h5>
<p class="mb-0">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
<div class="swiper-slide">
<span class="ratings 5 mb-3"></span>
<blockquote class="border-0 fs-lg mb-0">
<p>"Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. "</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Nikolas Brooten</h5>
<p class="mb-0">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>testimonials16:
enable: true
card:
background: "bg-soft-primary"
classes: "rounded-4"
content:
subtitle: "Happy Customers"
subtitle_classes: "fs-16 text-uppercase text-primary mb-3"
title: "Don't take our word for it. See what customers are saying about us."
title_classes: "display-4 mb-10 px-xxl-10"
image:
src: "about28.webp"
src2x: "[email protected]"
mask: "mask-3"
swiper:
margin: 30
dots: true
classes: "dots-start dots-closer mb-6"Example 17
<section class="wrapper bg-light">
<div class="container pt-15 pt-md-17 pb-13 pb-md-15">
<div class="row">
<div class="col-md-11 col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center position-relative">
<img src="/assets/img/svg/doodle1.svg"
class="h-9 position-absolute d-none d-lg-block"
style="top: 2%; left: 9%"
alt="">
<img src="/assets/img/svg/doodle10.svg"
class="h-7 position-absolute d-none d-lg-block"
style="top: -45%; left: -17%"
alt="">
<img src="/assets/img/svg/doodle11.svg"
class="h-13 position-absolute d-none d-lg-block"
style="top: -40%; right: -15%"
alt="">
<h2 class="fs-16 text-uppercase text-muted mb-3">Happy Customers</h2>
<h3 class="display-3 mb-11 px-xl-10 px-xxl-13">Don't take our word for it. See what <span class="text-gradient gradient-7">customers</span> are saying about us.</h3>
</div>
</div>
<div class="grid">
<div class="row isotope gy-6">
<div class="item col-md-6 col-xl-4">
<div class="card shadow-none rounded-xl bg-soft-grape">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Vel augue laoreet rutrum faucibus dolor auctor "</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="item col-md-6 col-xl-4">
<div class="card shadow-none rounded-xl bg-soft-leaf">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Cory Zamora</h5>
<p class="mb-0">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="item col-md-6 col-xl-4">
<div class="card shadow-none rounded-xl bg-soft-orange">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. "</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Nikolas Brooten</h5>
<p class="mb-0">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="item col-md-6 col-xl-4">
<div class="card shadow-none rounded-xl bg-soft-pink">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien."</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Coriss Juker</h5>
<p class="mb-0">Market Analyst</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="item col-md-6 col-xl-4">
<div class="card shadow-none rounded-xl bg-soft-blue">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus."</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Jackie Sanders</h5>
<p class="mb-0">Investment Planner</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="item col-md-6 col-xl-4">
<div class="card shadow-none rounded-xl bg-soft-yellow">
<div class="card-body">
<blockquote class="icon mb-0">
<p>"Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue."</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Laura Widerski</h5>
<p class="mb-0">Sales Specialist</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</section>testimonials17:
enable: true
doodles:
- src: "doodle1.svg"
classes: "h-9 position-absolute d-none d-lg-block"
position: "top: 2%; left: 9%"
- src: "doodle10.svg"
classes: "h-7 position-absolute d-none d-lg-block"
position: "top: -45%; left: -17%"
- src: "doodle11.svg"
classes: "h-13 position-absolute d-none d-lg-block"
position: "top: -40%; right: -15%"
content:
subtitle: "Happy Customers"
subtitle_classes: "fs-16 text-uppercase text-muted mb-3"
title: "Don't take our word for it. See what <span class=\"text-gradient gradient-7\">customers</span> are saying about us."
title_classes: "display-3 mb-11 px-xl-10 px-xxl-13"
grid:
classes: "isotope gy-6"
columns:
md: 6
xl: 4
card:
shadow: "shadow-none"
rounded: "rounded-xl"Example 18
<section class="section-frame mx-xxl-11">
<div class="wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500 section-frame-wrapper"
data-image-src="/assets/img/photos/bg23.webp">
<div class="container py-16 py-md-18">
<div class="row">
<div class="col-md-11 col-lg-10 col-xl-9 mx-auto text-center">
<h3 class="display-2 mb-10 px-xxl-10">Don't take our word for it. See what customers are saying about us.</h3>
</div>
</div>
<div class="row">
<div class="grid col-md-11 mx-auto mb-lg-n23">
<div class="row isotope gy-6">
<div class="item col-md-6 col-xl-4">
<div class="card shadow-lg">
<div class="card-body">
<span class="ratings 5 mb-3"></span>
<blockquote class="icon mb-0">
<p>"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Vel augue laoreet rutrum faucibus dolor auctor "</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Coriss Ambady</h5>
<p class="mb-0">Financial Analyst</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="item col-md-6 col-xl-4">
<div class="card shadow-lg">
<div class="card-body">
<span class="ratings 5 mb-3"></span>
<blockquote class="icon mb-0">
<p>"Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Cory Zamora</h5>
<p class="mb-0">Marketing Specialist</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="item col-md-6 col-xl-4">
<div class="card shadow-lg">
<div class="card-body">
<span class="ratings 5 mb-3"></span>
<blockquote class="icon mb-0">
<p>"Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. "</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Nikolas Brooten</h5>
<p class="mb-0">Sales Manager</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="item col-md-6 col-xl-4">
<div class="card shadow-lg">
<div class="card-body">
<span class="ratings 5 mb-3"></span>
<blockquote class="icon mb-0">
<p>"Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien."</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Coriss Juker</h5>
<p class="mb-0">Market Analyst</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="item col-md-6 col-xl-4">
<div class="card shadow-lg">
<div class="card-body">
<span class="ratings 5 mb-3"></span>
<blockquote class="icon mb-0">
<p>"Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus."</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Jackie Sanders</h5>
<p class="mb-0">Investment Planner</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
<div class="item col-md-6 col-xl-4">
<div class="card shadow-lg">
<div class="card-body">
<span class="ratings 5 mb-3"></span>
<blockquote class="icon mb-0">
<p>"Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue."</p>
<div class="blockquote-details">
<div class="info ps-0">
<h5 class="mb-1">Laura Widerski</h5>
<p class="mb-0">Sales Specialist</p>
</div>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>testimonials18:
enable: true
wrapper:
classes: "section-frame mx-xxl-11"
background:
image: "bg23.webp"
overlay: "bg-overlay-light-500"
content:
title: "Don't take our word for it. See what customers are saying about us."
title_classes: "display-2 mb-10 px-xxl-10"
grid:
classes: "isotope gy-6"
columns:
md: 6
xl: 4
card:
shadow: "shadow-lg"Sign In
Please enter your credentials to continue.
Password
Sign In
Don’t have an account? Sign up
or
Create Account
Create your account to get started.
Name
Password
Confirm Password
Create Account
Already have an account? Sign in
or