Testimonial component - 3
COPY
<section class="testimonials py-5">
<div class="container bg-primary rounded-top">
<div class="row justify-content-center p-5">
<div class="col-md-4">
<div class="p-3 my-2">
<h2 class="text-white mx-auto mb-3 mt-5">Testmonials</h2>
<p class="fs-lg pe-lg-5 text-white">Find out everything you need to know and more about how</p>
<a href="#" class="btn btn-light rounded-pill mb-0 px-4">Learn More</a>
</div>
</div>
<div class="col-md-4">
<div class="item bg-white rounded p-4">
<div class="d-flex align-items-center justify-content-center mb-3 mt-5">
<div class="avatar avatar-sm">
<img class="avatar-img rounded-circle" src="/html-component/images/avatar/m1.jpg" width="50" alt="...">
</div>
<div class="ms-4 text-start">
<h6 class="font-sans-serif text-uppercase mb-0">
Katie Williams
</h6>
<p class="small text-muted mt-n1 mb-0">
COO at Stripe
</p>
</div>
</div>
<blockquote>
<p class="mb-md-8">
We wouldn't be able to run the majority of our business without the Goodkit platform helping us manage everything.
</p>
<div class="d-flex align-items-end gap-1 rate fs-6 opacity-75">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
</blockquote>
</div>
</div>
<div class="col-md-4">
<div class="item bg-white rounded p-4">
<div class="d-flex align-items-center justify-content-center mb-3 mt-5">
<div class="avatar avatar-sm">
<img class="avatar-img rounded-circle" src="/html-component/images/avatar/m4.jpg" width="50" alt="...">
</div>
<div class="ms-4 text-start">
<h6 class="font-sans-serif text-uppercase mb-0">
AMIL EVARA
</h6>
<p class="small text-muted mt-n1 mb-0">
UI/UX Designer
</p>
</div>
</div>
<blockquote>
<p class="mb-md-8">
We wouldn't be able to run the majority of our business without the Goodkit platform helping us manage everything.
</p>
<div class="d-flex gap-1 rate fs-6 opacity-75">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
</blockquote>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
.testimonials .item {
background: url(/html-component/images/icon/semicolon.svg) no-repeat 30px 30px;
}
Testimonial component - 3
COPY
<section class="py-4">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-9">
<div class="text-center my-5">
<h2>They use Olla to create great websites.</h2>
<p>A powerful suite of features to help you build fast and functional layouts. features to help
you build fast and functional layouts.</p>
</div>
<div id="carouselTestimonials" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselTestimonials" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselTestimonials" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselTestimonials" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="card border-0 bg-primary-subtle pt-5 my-5 position-relative">
<div class="card-body p-4">
<div class="member-profile position-absolute w-100 text-center">
<img class="rounded-circle mx-auto d-inline-block shadow-sm" src="/html-component/images/avatar/m1.jpg" width="100" height="100" alt="">
</div>
<div class="card-text pt-1">
<h5 class="member-name mb-0 text-center text-primary fw-semibold">Doris
Meyer
</h5>
<div class="mb-3 text-center fw-bold">Product Manager</div>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula
eget dolor. Vivamus eget eros vestibulum, accumsan ante viverra,
condimentum
tellus.</div>
</div>
</div>
<div class="card-footer bg-primary text-center">
<ul class="social-list list-inline mb-0 mx-auto">
<li class="list-inline-item">
<a href="#">
<i class="bi bi-linkedin text-white fs-4"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="bi bi-twitter text-white fs-4"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="bi bi-skype text-white fs-4"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card border-0 bg-primary-subtle pt-5 my-5 position-relative">
<div class="card-body p-4">
<div class="member-profile position-absolute w-100 text-center">
<img class="rounded-circle mx-auto d-inline-block shadow-sm" src="/html-component/images/avatar/m2.jpg" width="100" height="100" alt="">
</div>
<div class="card-text pt-1">
<h5 class="member-name mb-0 text-center text-primary fw-semibold">Ronald
Reid
</h5>
<div class="mb-3 text-center fw-bold">iOS Developer</div>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula
eget dolor. Vivamus eget eros vestibulum, accumsan ante viverra,
condimentum
tellus.</div>
</div>
</div>
<div class="card-footer bg-primary text-center">
<ul class="social-list list-inline mb-0 mx-auto">
<li class="list-inline-item">
<a href="#">
<i class="bi bi-linkedin text-white fs-4"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="bi bi-twitter text-white fs-4"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="bi bi-skype text-white fs-4"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card border-0 bg-primary-subtle pt-5 my-5 position-relative">
<div class="card-body p-4">
<div class="member-profile position-absolute w-100 text-center">
<img class="rounded-circle mx-auto d-inline-block shadow-sm" src="/html-component/images/avatar/m2.jpg" width="100" height="100" alt="">
</div>
<div class="card-text text-center pt-1">
<h5 class="member-name mb-0 text-primary fw-semibold">Joe Thomas</h5>
<div class="mb-3 text-center fw-bold">Co-founder / CTO</div>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula
eget dolor. Vivamus eget eros vestibulum, accumsan ante viverra,
condimentum
tellus. Curabitur pellentesque convallis purus non ornare. Donec
bibendum sed
purus dignissim rutrum. Maecenas bibendum feugiat est, et venenatis
nunc.</div>
</div>
</div>
<div class="card-footer bg-primary text-center">
<ul class="social-list list-inline mb-0 mx-auto">
<li class="list-inline-item">
<a href="#">
<i class="bi bi-linkedin text-white fs-4"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="bi bi-twitter text-white fs-4"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="bi bi-skype text-white fs-4"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselTestimonials" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselTestimonials" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
font-size: .90rem;
}
.member-profile {
top: -50px;
left: 0;
}
.carousel-indicators [data-bs-target] {
background-color: #ddd;
}
Testimonial component - 2
COPY
<section class="py-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6">
<img src="/html-component/images/product/work-station.jpg" class="img-fluid">
</div>
<div class="col-md-6">
<div class="text-center">
<div class="img-fluid svg-shim text-stripe mx-auto mb-3 mt-5" style="max-width: 85px;">
<svg viewbox="0 0 65 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.56803 10.5801C4.56803 9.87724 5.14579 9.60679 6.10289 9.60679C7.475 9.60679 9.20829 10.0215 10.5805 10.7604V6.52467C9.08197 5.92992 7.60145 5.69559 6.10289 5.69559C2.4375 5.69559 0 7.6062 0 10.7966C0 15.771 6.86105 14.9781 6.86105 17.123C6.86105 17.952 6.13895 18.2224 5.12776 18.2224C3.62921 18.2224 1.71526 17.6095 0.198555 16.7805V21.0702C1.87776 21.7912 3.575 22.0975 5.12776 22.0975C8.88329 22.0975 11.4653 20.2411 11.4653 17.0148C11.4472 11.6436 4.56803 12.5988 4.56803 10.5801ZM16.7736 2.09082L12.368 3.02801L12.35 17.4653C12.35 20.133 14.3542 22.0975 17.0264 22.0975C18.507 22.0975 19.5903 21.8272 20.1861 21.5027V17.8439C19.6084 18.0782 16.7555 18.9073 16.7555 16.2397V9.84112H20.1861V6.00203H16.7555L16.7736 2.09082ZM25.8014 7.33576L25.5125 6.00203H21.6125V21.7731H26.1264V11.0849C27.1916 9.69703 28.9972 9.94935 29.557 10.1476V6.00203C28.9792 5.7857 26.8667 5.38915 25.8014 7.33576ZM30.6583 6.00203H35.1903V21.7731H30.6583V6.00203ZM30.6583 4.63218L35.1903 3.65888V0L30.6583 0.955306V4.63205V4.63218ZM44.6153 5.69559C42.8458 5.69559 41.7083 6.52467 41.0764 7.10155L40.8416 5.98403H36.8695V27L41.3833 26.0448L41.4014 20.944C42.0514 21.4126 43.0083 22.0795 44.5972 22.0795C47.8292 22.0795 50.7722 19.484 50.7722 13.7704C50.7542 8.54338 47.775 5.69559 44.6153 5.69559ZM43.532 18.1142C42.4667 18.1142 41.8346 17.7358 41.4014 17.2671L41.3833 10.5801C41.8528 10.0575 42.5028 9.69703 43.532 9.69703C45.175 9.69703 46.3125 11.5354 46.3125 13.8965C46.3125 16.3118 45.193 18.1142 43.532 18.1142ZM65 13.9507C65 9.33647 62.7611 5.69559 58.482 5.69559C54.1846 5.69559 51.5846 9.3366 51.5846 13.9147C51.5846 19.3398 54.6542 22.0795 59.0596 22.0795C61.2083 22.0795 62.8333 21.5929 64.0611 20.908V17.3031C62.8334 17.916 61.425 18.2945 59.6375 18.2945C57.8861 18.2945 56.3333 17.6816 56.1347 15.5548H64.9639C64.9639 15.3204 65 14.3832 65 13.9507ZM56.0805 12.2384C56.0805 10.2017 57.3264 9.35447 58.4639 9.35447C59.5653 9.35447 60.7389 10.2017 60.7389 12.2384H56.0805Z" fill="currentColor"></path>
</svg>
</div>
<blockquote>
<p class="lead mb-md-8">
<q>
We wouldn't be able to run the majority of our business without the Goodkit platform
helping
us manage everything.
</q>
</p>
<div class="d-flex gap-1 rate justify-content-center">
<svg aria-hidden="true" viewbox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
</path>
</svg><svg aria-hidden="true" viewbox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
</path>
</svg><svg aria-hidden="true" viewbox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
</path>
</svg><svg aria-hidden="true" viewbox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
</path>
</svg><svg aria-hidden="true" viewbox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z">
</path>
</svg>
</div>
<footer class="d-flex align-items-center justify-content-center mt-5">
<div class="avatar avatar-sm">
<img class="avatar-img rounded-circle" src="/html-component/images/avatar/m1.jpg" width="50" alt="...">
</div>
<div class="ms-4 text-start">
<h4 class="font-sans-serif mb-0">
Katie Williams
</h4>
<p class="small text-muted mt-n1 mb-0">
COO at Stripe
</p>
</div>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
.rate svg {
width: 20px;
}
Testimonial component - 1
COPY
<section class="py-5">
<div class="row justify-content-center">
<div class="col-12 col-md-7">
<div class="bg-info p-5 rounded-2 shadow-lg">
<div class="row">
<div class="col-12 col-md-8 ps-md-5">
<h3 class="display-5 fw-medium w-75 mb-3">
Success With webui
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
<div>
<h4>Katie Williams</h4>
<p class="small text-muted mt-n1 mb-0">
COO at Google
</p>
</div>
</div>
<div class="col-12 col-md-4 pe-md-5">
<img src="/html-component/images/avatar/m4.jpg" class="img-fluid rounded-2">
</div>
</div>
</div>
</div>
</div>
<div class="overlay bg-dark h-300px mt-n100">
</div>
</section>
<!-- Bootstrap JavaScript library -->
COPY
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
.h-300px {
height: 300px !important;
}
.mt-n100 {
margin-top: -200px;
}
More coming soon
Regular license
- Free to use this design
- Customization by expert designer $20/hr
- For more information please get in touch with our marketing person - info@webui.io