split-testimonial

Summary

Two-column testimonial layout: a portrait photo on the left with a circular gradient quote-icon badge anchored to its corner, and on the right a section title plus an Owl single-item carousel that cycles through quotes with star ratings and author attribution.

HTML structure (minimal)

<section class="testimonial-section">
  <div class="pattern-layer">
    <div class="pattern-1" style="background-image: url(shape-4.png);"></div>
    <div class="pattern-2 zoom-fade" style="background-image: url(shape-5.png);"></div>
  </div>
  <div class="auto-container">
    <div class="row align-items-center">
      <div class="col-lg-6 image-column">
        <div class="image-box">
          <figure class="image"><img src="testimonial-1.jpg" alt=""></figure>
          <div class="icon-box"><div class="icon gradient-color"><i class="icon-7"></i></div></div>
        </div>
      </div>
      <div class="col-lg-6 content-column">
        <div class="content-box">
          <div class="sec-title">
            <span class="sub-title gradient-color">Testimonials</span>
            <h2>What Our Clients and Partners Think</h2>
          </div>
          <div class="single-item-carousel owl-carousel owl-theme">
            <div class="testimonial-content">
              <ul class="rating">
                <li><i class="icon-32"></i></li><!-- 4 more stars -->
              </ul>
              <p>"Blandit aliquet varius id malesuada nunc euismod…"</p>
              <div class="author-box">
                <figure class="thumb-box"><img src="testimonial-1.png" alt=""></figure>
                <div class="inner">
                  <h3>Ronald Richards</h3>
                  <span class="destination">Founder & CEO</span>
                </div>
              </div>
            </div>
            <!-- more .testimonial-content slides -->
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.testimonial-section .image-box .icon-box .icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--theme-color); /* gradient */
  color: #fff;
}
.testimonial-content .rating li i { color: #FFB31F; font-size: 18px; }
.testimonial-content p { font-size: 22px; line-height: 32px; font-weight: 500; }

.pattern-2.zoom-fade { animation: zoom-fade 5s infinite linear; }

Animation logic

$('.single-item-carousel').owlCarousel({
  loop: true,
  margin: 30,
  nav: true,
  smartSpeed: 500,
  autoplay: 1000,
  navText: ['<span class="icon-2"></span>', '<span class="icon-3"></span>'],
  responsive: { 0: { items: 1 }, 1200: { items: 1 } }
});

Notable details

• The portrait stays static while only the quote text rotates — gives a "this is the story" feel rather than a card-rotator feel.
• Decorative shapes in .pattern-layer use zoom-fade to add slow movement behind the static photo.
• Star rating uses 5 separate <i> elements with the same icon, not a half-star aware widget.

Use when

• Single-feature client testimonials where one client carries the page.
• Sections that need a strong portrait moment plus space for several quote variations.

Caveats

• autoplay: 1000 is very fast — likely too fast for a real reader; tune up.
• Hard-coded 5-star ratings; no support for partial stars or rating values from data.
• Owl Carousel is jQuery-era; modern stacks will swap to Swiper/Embla.