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;
  }
}

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvZm91bmRhdGlvbi90ZXN0aW1vbmlhbC90ZXN0aW1vbmlhbC0y