Testimonial 2 Foundation
Testimonial block with sliding testimonials for displaying client testimonials on websites and landing pages.
Dependencies
- Foundation 6
- FontAwesome
<!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>FWR Foundation Blocks - Testimonial 2</title>
<!-- Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/css/foundation.min.css" integrity="sha256-GSio8qamaXapM8Fq9JYdGNTvk/dgs+cMLgPeevOYEx0= sha384-wAweiGTn38CY2DSwAaEffed6iMeflc0FMiuptanbN4J+ib+342gKGpvYRWubPd/+ sha512-QHEb6jOC8SaGTmYmGU19u2FhIfeG+t/hSacIWPpDzOp5yygnthL3JwnilM7LM1dOAbJv62R+/FICfsrKUqv4Gg==" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<!-- Custom style -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="testimonial-2">
<div class="grid-container">
<div class="grid-x grid-padding-x align-left">
<div class="cell medium-12 large-12">
<div class="testimonial-intro text-center">
<h1 class="testimonial-intro-title">Our Customers Say</h1>
<p class="lead">Don't trust our words. Just have a look at what our customers say about <strong>FWR Blocks</strong></p>
</div>
<div class="orbit testimonials" role="region" data-orbit data-auto-play="false" data-options="animInFromLeft:slide-in-left; animInFromRight:slide-in-right; animOutToLeft:slide-out-left; animOutToRight:slide-out-right;">
<div class="orbit-wrapper">
<div class="orbit-controls">
<button class="orbit-previous" aria-label="previous"><i class="fas fa-chevron-left"></i></button>
<button class="orbit-next" aria-label="next"><i class="fas fa-chevron-right"></i></button>
</div>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<div class="testimonial text-center">
<div class="testimonial-profile rounded-circle">
<img src="//assets.free-website-resources.com/img/profile-06.jpg" alt="Jesse D." class="img-fluid">
</div>
<div class="testimonial-content">
<h5 class="testimonial-user-name">- Jesse D.</h5>
<div class="testimonial-user-company">Director, Apple</div>
<div class="testimonial-rating">
<div class="fas fa-star"></div>
<div class="fas fa-star"></div>
<div class="fas fa-star"></div>
<div class="fas fa-star"></div>
<div class="fas fa-star"></div>
</div>
<div class="testimonial-message">
<p>It really saves me time and effort. FWR Bootstrap Blocks is exactly what
our business has been lacking. FWR Bootstrap Blocks was worth a fortune
to my company. FWR Bootstrap Blocks has really helped our business. I'm
good to go.</p>
</div>
</div>
</div>
</li>
<li class="orbit-slide">
<div class="testimonial text-center">
<div class="testimonial-profile rounded-circle mx-auto">
<img src="//assets.free-website-resources.com/img/profile-03.jpg" alt="Anabella M." class="img-fluid">
</div>
<div class="testimonial-content">
<h5 class="testimonial-user-name mt-4 mb-2">- Anabella M.</h5>
<div class="testimonial-user-company text-muted">Director, Microsoft</div>
<div class="testimonial-rating mt-2 mb-3">
<div class="fas fa-star"></div>
<div class="fas fa-star"></div>
<div class="fas fa-star"></div>
<div class="fas fa-star"></div>
<div class="fas fa-star"></div>
</div>
<div class="testimonial-message">
<p>Needless to say we are extremely satisfied with the results. Keep up the
excellent work. Your company is truly upstanding and is behind its
product 100%. Thanks guys, keep up the good work!</p>
</div>
</div>
</div>
</li>
<li class="orbit-slide">
<div class="testimonial text-center">
<div class="testimonial-profile rounded-circle mx-auto">
<img src="//assets.free-website-resources.com/img/profile-02.jpg" alt="Candace H." class="img-fluid">
</div>
<div class="testimonial-content">
<h5 class="testimonial-user-name">- Candace H.</h5>
<div class="testimonial-user-company text-muted">Director, Google</div>
<div class="testimonial-rating mt-2 mb-3">
<div class="fas fa-star"></div>
<div class="fas fa-star"></div>
<div class="fas fa-star"></div>
<div class="fas fa-star"></div>
<div class="fas fa-star"></div>
</div>
<div class="testimonial-message">
<p>FWR Bootstrap Blocks is exactly what our business has been lacking. FWR
Bootstrap Blocks is both attractive and highly adaptable. Man, this
thing is getting better and better as I learn more about it.</p>
</div>
</div>
</div>
</li>
</ul>
<nav class="orbit-bullets">
<button class="is-active" data-slide="0">
<span class="show-for-sr">Current Slide</span>
</button>
<button data-slide="1"></button>
<button data-slide="2"></button>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.testimonial-2 -->
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.4.3/dist/js/foundation.min.js" integrity="sha256-mRYlCu5EG+ouD07WxLF8v4ZAZYCA6WrmdIXyn1Bv9Vk= sha384-KzKofw4qqetd3kvuQ5AdapWPqV1ZI+CnfyfEwZQgPk8poOLWaabfgJOfmW7uI+AV sha512-0gHfaMkY+Do568TgjJC2iMAV0dQlY4NqbeZ4pr9lVUTXQzKu8qceyd6wg/3Uql9qA2+3X5NHv3IMb05wb387rA==" crossorigin="anonymous"></script>
<script>
$(document).foundation();
</script>
</body>
</html>// Foundation variables and mixins
@import "~foundation-sites/scss/foundation";
// Variables
$body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$header-font-family: $body-font-family;
$primary: #5863f8;
$gray: #6c757d;
$light-gray: #495057;
$rating: #ffd500;
$arrow-color: #dee2e6;
$testimonial-bg: #e9ecef;
$orbit-bullet-background: #e5e5e5;
$orbit-bullet-background-active: $primary;
b, strong {
font-weight: bolder;
}
.orbit-next,
.orbit-previous {
cursor: pointer;
display: none;
color: $arrow-color;
font-size: 24px;
background-color: transparent !important;
}
.orbit-bullets {
margin-top: 1rem;
button {
width: 30px;
border-radius: 6px;
height: 6px;
background: $orbit-bullet-background;
cursor: pointer;
display: inline-block;
vertical-align: middle;
&.is-active {
background: $orbit-bullet-background-active;
}
}
}
.orbit ul {
list-style: none;
margin: 0;
padding: 0;
}
.testimonial-2 {
font-family: $header-font-family;
@include padding-direction('vertical', 1);
}
.testimonial-intro-title {
font-family: $header-font-family;
font-size: 1.75rem;
line-height: 1.2;
}
.lead {
font-size: 1.25rem;
font-weight: 300;
line-height: 1.5;
}
.testimonials {
margin-top: 1.5rem;
padding-top: 1rem;
}
.testimonial-user-name {
font-weight: 500;
font-size: 1.5rem;
line-height: 1.2;
font-family: $header-font-family;
margin-bottom: .5rem;
}
.testimonial-user-company {
font-size: .875rem;
line-height: 1.5;
color: $gray;
margin-bottom: 8px;
}
.testimonial-message {
max-width: 700px;
margin: 1rem auto 0;
background: $testimonial-bg;
border-radius: 10px;
padding: 1rem 1rem 0.5rem;
p {
line-height: 1.75;
color: $light-gray;
&:last-child {
margin-bottom: 0;
}
&::before {
content: '\201C';
margin-right: 3px;
font-family: "Arial", serif;
font-weight: bold;
}
&::after {
content: '\201D';
margin-left: 3px;
font-family: "Arial", serif;
font-weight: bold;
}
}
}
.testimonial-rating {
font-size: .75rem;
color: $rating;
}
.testimonial-profile {
flex: 0 0 80px;
overflow: hidden;
width: 80px;
flex-basis: 80px;
height: 80px;
margin: 0 auto;
}
.rounded-circle {
border-radius: 50% !important;
}
.testimonial-content {
margin: 1.5rem 0;
}
@media #{breakpoint(medium)} {
.testimonial-2 {
@include padding-direction('vertical', 3);
}
.testimonial-intro-title {
font-size: 2.5rem;
}
.testimonials {
margin-top: 1rem;
}
.testimonial {
margin-top: 2rem;
padding-top: 15px;
padding-bottom: 0;
}
.testimonial-message {
max-width: 500px;
margin: 1.5rem auto 1rem;
}
.testimonial-content {
margin: 18px 25px 25px 22px;
}
.orbit-container {
height: auto !important;
}
.orbit-bullets {
margin-top: 0;
}
.orbit-next,
.orbit-previous {
display: inline-block;
}
}
@media #{breakpoint(large)} {
.testimonials {
margin-top: 0;
padding-top: 0;
}
.testimonial-content {
margin-top: 1.5rem;
}
.testimonial-message {
margin: 25px 10% 0;
max-width: none;
padding: 1.5rem 3rem;
}
}
/**
* Foundation for Sites by ZURB
* Version 6.4.4-rc1
* foundation.zurb.com
* Licensed under MIT Open Source
*/
b, strong {
font-weight: bolder;
}
.orbit-next,
.orbit-previous {
cursor: pointer;
display: none;
color: #dee2e6;
font-size: 24px;
background-color: transparent !important;
}
.orbit-bullets {
margin-top: 1rem;
}
.orbit-bullets button {
width: 30px;
border-radius: 6px;
height: 6px;
background: #e5e5e5;
cursor: pointer;
display: inline-block;
vertical-align: middle;
}
.orbit-bullets button.is-active {
background: #5863f8;
}
.orbit ul {
list-style: none;
margin: 0;
padding: 0;
}
.testimonial-2 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.testimonial-intro-title {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1.75rem;
line-height: 1.2;
}
.lead {
font-size: 1.25rem;
font-weight: 300;
line-height: 1.5;
}
.testimonials {
margin-top: 1.5rem;
padding-top: 1rem;
}
.testimonial-user-name {
font-weight: 500;
font-size: 1.5rem;
line-height: 1.2;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin-bottom: .5rem;
}
.testimonial-user-company {
font-size: .875rem;
line-height: 1.5;
color: #6c757d;
margin-bottom: 8px;
}
.testimonial-message {
max-width: 700px;
margin: 1rem auto 0;
background: #e9ecef;
border-radius: 10px;
padding: 1rem 1rem 0.5rem;
}
.testimonial-message p {
line-height: 1.75;
color: #495057;
}
.testimonial-message p:last-child {
margin-bottom: 0;
}
.testimonial-message p::before {
content: '\201C';
margin-right: 3px;
font-family: "Arial", serif;
font-weight: bold;
}
.testimonial-message p::after {
content: '\201D';
margin-left: 3px;
font-family: "Arial", serif;
font-weight: bold;
}
.testimonial-rating {
font-size: .75rem;
color: #ffd500;
}
.testimonial-profile {
-webkit-box-flex: 0;
-ms-flex: 0 0 80px;
flex: 0 0 80px;
overflow: hidden;
width: 80px;
-ms-flex-preferred-size: 80px;
flex-basis: 80px;
height: 80px;
margin: 0 auto;
}
.rounded-circle {
border-radius: 50% !important;
}
.testimonial-content {
margin: 1.5rem 0;
}
@media (min-width: 40em) {
.testimonial-2 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
.testimonial-intro-title {
font-size: 2.5rem;
}
.testimonials {
margin-top: 1rem;
}
.testimonial {
margin-top: 2rem;
padding-top: 15px;
padding-bottom: 0;
}
.testimonial-message {
max-width: 500px;
margin: 1.5rem auto 1rem;
}
.testimonial-content {
margin: 18px 25px 25px 22px;
}
.orbit-container {
height: auto !important;
}
.orbit-bullets {
margin-top: 0;
}
.orbit-next,
.orbit-previous {
display: inline-block;
}
}
@media (min-width: 64em) {
.testimonials {
margin-top: 0;
padding-top: 0;
}
.testimonial-content {
margin-top: 1.5rem;
}
.testimonial-message {
margin: 25px 10% 0;
max-width: none;
padding: 1.5rem 3rem;
}
}
