Testimonial block 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 1</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">
    
    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="testimonial-1">

        <div class="grid-container">
            <div class="grid-x testimonials grid-padding-x align-left">
                <div class="cell large-6 align-left d-flex">
                    <div class="testimonial d-flex">
                        <div class="testimonial-profile rounded-circle ">
                            <img src="//assets.free-website-resources.com/img/profile-01.jpg" alt="Jesse D." class="img-fluid">
                        </div>
                        <div class="testimonial-content">
                            <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 class="testimonial-user-name">- Jesse D.</div>
                            <div class="testimonial-user-company">Apple</div>
                        </div>
                    </div>
                </div>
                <div class="cell large-6 align-left d-flex">
                    <div class="testimonial d-flex">
                        <div class="testimonial-profile rounded-circle">
                            <img src="//assets.free-website-resources.com/img/profile-03.jpg" alt="Annabell M." class="img-fluid">
                        </div>
                        <div class="testimonial-content">
                            <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 class="testimonial-user-name">- Annabell M.</div>
                            <div class="testimonial-user-company">Microsoft</div>
                        </div>
                    </div>
                </div>
                <div class="cell large-6 align-left d-flex">
                    <div class="testimonial d-flex">
                        <div class="testimonial-profile rounded-circle ">
                            <img src="//assets.free-website-resources.com/img/profile-02.jpg" alt="Candace H." class="img-fluid">
                        </div>
                        <div class="testimonial-content">
                            <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 class="testimonial-user-name">- Candace H.</div>
                            <div class="testimonial-user-company">Google</div>
                        </div>
                    </div>
                </div>
                <div class="cell large-6 align-left d-flex">
                    <div class="testimonial d-flex">
                        <div class="testimonial-profile rounded-circle">
                            <img src="//assets.free-website-resources.com/img/profile-07.jpg" alt="Joe H." class="img-fluid">
                        </div>
                        <div class="testimonial-content">
                            <p>"This is simply unbelievable! I use FWR Bootstrap Blocks often. You've saved our business! No
                                matter where you go, FWR Bootstrap Blocks is the coolest, most happening thing around!"</p>
                            <div class="testimonial-user-name">- Joe H.</div>
                            <div class="testimonial-user-company">Facebook</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- /.testimonial-1 -->

    <!-- 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;
$border-color: #dee2e6;
$light-gray: #6c757d;

.testimonial-1 {
  font-family: $body-font-family;
  @include padding-direction('vertical', 1);
}

.testimonials {
  margin-top: 1rem;
}

.testimonial {
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 2px solid $border-color;
  border-radius: 1rem;
  cursor: default;
  transition: background-color .3s, border-color .3s;

  &:hover {
    background-color: rgba($primary, .1);
    border-color: rgba($primary, .5);
  }
}

.testimonial-profile {
  flex: 0 0 60px;
  height: 60px;
  overflow: hidden;
  margin-right: 1rem;
}

.rounded-circle {
  border-radius: 50%;
}

.d-flex {
  display: flex;
}

.testimonial-content {
  display: block;

  p {
    color: $light-gray;
    line-height: 1.5;
  }
}

.testimonial-user-name {
  font-size: 1rem;
  font-weight: bold;
  color: $body-font-color;
  text-transform: uppercase;
  margin-top: 1.5rem;
}

.testimonial-user-company {
  font-size: 1rem;
  color: $light-gray;
}


@media #{breakpoint(medium)} {

  .testimonial-1 {
    @include padding-direction('vertical', 3);
  }

  .testimonial {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
  }

}


@media #{breakpoint(large)} {

  .testimonial {
    max-width: none;
  }

  .testimonial-profile {
    width: 80px;
    height: 80px;
    flex-basis: 80px;
    margin-right: 1.5rem;
  }

}
/**
 * Foundation for Sites by ZURB
 * Version 6.4.4-rc1
 * foundation.zurb.com
 * Licensed under MIT Open Source
 */
.testimonial-1 {
  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;
}

.testimonials {
  margin-top: 1rem;
}

.testimonial {
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 2px solid #dee2e6;
  border-radius: 1rem;
  cursor: default;
  -webkit-transition: background-color .3s, border-color .3s;
  transition: background-color .3s, border-color .3s;
}

.testimonial:hover {
  background-color: rgba(88, 99, 248, 0.1);
  border-color: rgba(88, 99, 248, 0.5);
}

.testimonial-profile {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 60px;
          flex: 0 0 60px;
  height: 60px;
  overflow: hidden;
  margin-right: 1rem;
}

.rounded-circle {
  border-radius: 50%;
}

.d-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.testimonial-content {
  display: block;
}

.testimonial-content p {
  color: #6c757d;
  line-height: 1.5;
}

.testimonial-user-name {
  font-size: 1rem;
  font-weight: bold;
  color: #0a0a0a;
  text-transform: uppercase;
  margin-top: 1.5rem;
}

.testimonial-user-company {
  font-size: 1rem;
  color: #6c757d;
}

@media (min-width: 40em) {
  .testimonial-1 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .testimonial {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (min-width: 64em) {
  .testimonial {
    max-width: none;
  }
  .testimonial-profile {
    width: 80px;
    height: 80px;
    -ms-flex-preferred-size: 80px;
        flex-basis: 80px;
    margin-right: 1.5rem;
  }
}

Similar Blocks

aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvZm91bmRhdGlvbi90ZXN0aW1vbmlhbC90ZXN0aW1vbmlhbC0x