testimonial-block

Summary

Two-column layout: a portrait photo on the left with a phone-CTA tile baked in, and two stacked review cards on the right with star rating, author thumbnail, body copy, and a translucent serif quote glyph in the corner.

HTML structure (minimal)

<section class="testimonial_wrapper section-padding">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 wow fadeInLeft" data-wow-duration="1s">
        <div class="single_testimonial_laft bg-center bg-cover" style="background-image: url(about_630x500.jpg)">
          <a href="tel:232-456-7890" class="left_button">
            <div class="icon"><i class="icon-phone"></i></div>
            <div class="content"><p>Need help? Let's Talk</p><h4>(232) 456-7890</h4></div>
          </a>
        </div>
      </div>
      <div class="col-lg-6 wow fadeInRight" data-wow-duration="1s">
        <div class="single_testimonial_right pt-5 pt-lg-0">
          <div class="section-title">
            <h6><img src="bage_head.svg" alt="">Testimonials</h6>
            <h2>Client's Testimonials</h2>
          </div>
          <p>Lorem ipsum…</p>
          <div class="single_testimonial_item">
            <div class="single_content">
              <div class="author_rating">
                <div class="author">
                  <div class="author_img"><img src="man_80x80.jpg" alt=""></div>
                  <div class="authoe_content"><h6>Md Ashikul Islam</h6><small>Team Leader</small></div>
                </div>
                <div class="rating">
                  <i class="fas fa-star"></i><i class="fas fa-star"></i>
                  <i class="fas fa-star"></i><i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                </div>
              </div>
              <p>Lorem ipsum dolor sit amet…</p>
              <div class="quote"><i class="fal fa-quote-right"></i></div>
            </div>
          </div>
          <div class="single_testimonial_item mt-20"><!-- second review --></div>
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.testimonial_wrapper {
  .single_testimonial_laft {
    min-height: 500px;
    border-radius: 4px;
    position: relative;
    .left_button {
      position: absolute; bottom: 24px; left: 24px;
      display: flex; align-items: center; gap: 14px;
      background: rgba(255,255,255,0.92);
      padding: 14px 18px;
      border-radius: 4px;
      .icon { width: 44px; height: 44px; border-radius: 50%; background: #c8242f; color: #fff; display: grid; place-items: center; }
    }
  }

  .single_testimonial_item {
    position: relative;
    background: #fff;
    border: 1px solid rgba(34,33,39,0.08);
    padding: 24px 28px;
    border-radius: 4px;
    .author { display: flex; align-items: center; gap: 14px;
      .author_img img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
      .authoe_content h6 { font-family: 'Crimson Pro', serif; }
    }
    .rating i { color: #b69d74; font-size: 13px; }
    .quote {
      position: absolute; right: 22px; bottom: 18px;
      font-size: 64px; line-height: 1;
      color: rgba(200,36,47,0.10);
    }
  }
}

Animation logic

new WOW().init(); // fadeInLeft / fadeInRight per column

Notable details

• Phone CTA baked into the photo column doubles up the section's job — testimonials and contact prompt in one block.
• Quote glyph uses Font Awesome fa-quote-right set to ~10% alpha — ornamental, not a heavy graphic.
• Two reviews stacked (not a carousel) makes the section calmer than typical sliders; the testimonials.html page does ship Owl variants for those who want autoplay.

Use when

• A B2B page where the testimonial section should feel grounded and read-at-a-glance.
• You want to reuse a portrait asset that's already on the page (lawyer / consultant headshot).
• Designs where stars + author + quote-mark are sufficient without a carousel.

Caveats

• Both reviews share placeholder copy in source — replace before launch.
• authoe_content is a misspelling that's referenced from CSS too — keep it consistent if you fix it.