John Doe

Cool Company Inc.

Lorem ipsum is a pseudo-latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.

Jane Doe

Cool Company Inc.

Lorem ipsum is a pseudo-latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.

John Doe

Cool Company Inc.

Lorem ipsum is a pseudo-latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.

Jane Doe

Cool Company Inc.

Lorem ipsum is a pseudo-latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.

Testimonials 01

Description: Testimonials example with different morph icons within the images inside them. Images can be in JPG, PNG, GIF, SVG formats. In this example there are SVG avatars, which were made with SVG Avatars Generator

Requires: Bootstrap 3.X for basic grid, buttons, text, etc. styles.

WordPress Note: This example may require theme files customization or using a page builder (composer) at your own. See on it as a starting point.

Important: LivIcons data-options are set to different from these defaults only! If you have another set of the default options please use a full notation of them which you can get from the Configuration tool

<!-- Testimonials 01 -->
<div class="container">
    <div class="row">
        <div class="col-md-6 col-xs-12">
            <div class="testimonials-01 row">
                <div class="col-sm-4 col-xs-12">
                    <div class="livicon-evo" data-options="
                        name: morph-octagon-square.svg;
                        morphImage: path/to/your_image.svg;
                        size: 100%;
                        style: lines;
                        strokeColor: #fbfbfb;
                        strokeWidth: 4;
                        eventOn: grandparent;
                        drawColor: #eee;
                        drawStartPoint: start;
                        drawOnViewport: true">
                    </div>
                </div>
                <div class="col-sm-8 col-xs-12">
                    <h3>John Doe</h3>
                    <h6 class="text-uppercase">Cool Company Inc.</h6>
                    <p>Lorem ipsum is a pseudo-latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.</p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xs-12">
            <div class="testimonials-01 row">
                <div class="col-sm-4 col-xs-12">
                    <div class="livicon-evo" data-options="
                        name: morph-smooth-square.svg;
                        morphImage: path/to/your_image.svg;
                        size: 100%;
                        style: lines;
                        strokeColor: #fbfbfb;
                        strokeWidth: 4;
                        eventOn: grandparent;
                        drawColor: #eee;
                        drawStartPoint: start;
                        drawOnViewport: true">
                    </div>
                </div>
                <div class="col-sm-8 col-xs-12">
                    <h3>Jane Doe</h3>
                    <h6 class="text-uppercase">Cool Company Inc.</h6>
                    <p>Lorem ipsum is a pseudo-latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-xs-12">
            <div class="testimonials-01 row">
                <div class="col-sm-4 col-xs-12">
                    <div class="livicon-evo" data-options="
                        name: morph-square-sticker.svg;
                        morphImage: path/to/your_image.svg;
                        morphState: end;
                        size: 100%;
                        style: lines;
                        strokeColor: #fbfbfb;
                        strokeWidth: 4;
                        eventOn: grandparent;
                        drawColor: #eee;
                        drawStartPoint: start;
                        drawOnViewport: true">
                    </div>
                </div>
                <div class="col-sm-8 col-xs-12">
                    <h3>John Doe</h3>
                    <h6 class="text-uppercase">Cool Company Inc.</h6>
                    <p>Lorem ipsum is a pseudo-latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.</p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-xs-12">
            <div class="testimonials-01 row">
                <div class="col-sm-4 col-xs-12">
                    <div class="livicon-evo" data-options="
                        name: morph-circle-square.svg;
                        morphImage: path/to/your_image.svg;
                        size: 100%;
                        style: lines;
                        strokeColor: #fbfbfb;
                        strokeWidth: 4;
                        eventOn: grandparent;
                        drawColor: #eee;
                        drawStartPoint: start;
                        drawOnViewport: true">
                    </div>
                </div>
                <div class="col-sm-8 col-xs-12">
                    <h3>Jane Doe</h3>
                    <h6 class="text-uppercase">Cool Company Inc.</h6>
                    <p>Lorem ipsum is a pseudo-latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content.</p>
                </div>
            </div>
        </div>
    </div>
</div>
/********* Testimonials 01 **********/
.testimonials-01 {
  margin: 30px 0 0 0;
  background-color: #F7F7F7;
  padding: 20px 20px 20px 20px;
  border: 1px solid #eee;
}
.testimonials-01 h3 {
  margin-top: 15px;
}
.testimonials-01 h6 {
  color: #555;
  font-weight: 900;
}
.testimonials-01 p {
  color: #888;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .testimonials-01 .livicon-evo {
    width: 50%!important;
    margin: 0 auto;
  }
  .testimonials-01 h3 {
    text-align: center;
    margin-top: 10px;
  }
  .testimonials-01 h6 {
    text-align: center;
  }
}

Categories

Miscellaneous

Share