about-with-video

Summary

Two-column "about" section: a portrait image with a Magnific-popup YouTube play button overlay and a floating 25+ years badge on the left, alongside a section title, body copy, signature image, and bullet list on the right.

HTML structure (minimal)

<section class="about_wrapper section-padding">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 wow fadeInLeft" data-wow-duration="1s">
        <div class="single_about_left">
          <div class="modal_widget">
            <div class="modal_popup">
              <div class="popup_video">
                <a class="popup-youtube" href="https://www.youtube.com/watch?v=tj9-MGHCs38">
                  <i class="fas fa-play"></i>
                </a>
              </div>
              <span>Play Video</span>
            </div>
          </div>
          <div class="single_about_img"><img src="about_570x550.jpg" alt=""></div>
          <div class="modal_funfact">
            <div class="about_funfact">
              <h2><span class="counter">25</span>+</h2>
              <h4>Year's Experience</h4>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-6 wow fadeInRight" data-wow-duration="1s">
        <div class="about_content">
          <div class="section-title">
            <h6><img src="bage_head.svg" alt="">About Us</h6>
            <h2>Welcome to Legister Firm & Law Company</h2>
          </div>
          <p>Lorem ipsum…</p>
          <div class="row">
            <div class="col-md-6">
              <div class="single_author">
                <p>consectetur adipiscing elit…</p>
                <img src="signechar.svg" alt="">
              </div>
            </div>
            <div class="col-md-6">
              <ul>
                <li>Praesent feugiat sem mattis.</li>
                <li>Domestic & Foreign Investment Law.</li>
              </ul>
            </div>
          </div>
          <a href="#" class="btnd mt-50">Learn More <i class="far fa-level-up-alt"></i></a>
        </div>
      </div>
    </div>
  </div>
  <div class="about_element d-none d-xl-block"><img src="scale.svg" alt=""></div>
</section>

Key SCSS tokens

.about_wrapper {
  position: relative;
  .single_about_left { position: relative; }
  .modal_popup .popup-youtube {
    width: 84px; height: 84px;
    border-radius: 50%;
    background: #c8242f;
    color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 0 0 8px rgba(200,36,47,0.25);
    animation: pulse 1.6s infinite;
  }
  .modal_funfact .about_funfact {
    position: absolute; bottom: -20px; right: 20px;
    background: #ebe6e3;
    padding: 22px 28px;
    border-radius: 4px;
    h2 { font-family: 'Crimson Pro', serif; color: #c8242f; }
  }
  .single_author img { max-width: 120px; margin-top: 12px; }
}

Animation logic

$('.popup-youtube').magnificPopup({ type: 'iframe' });
$('.counter').counterUp({ delay: 10, time: 3000 });
new WOW().init(); // .wow.fadeInLeft / fadeInRight

Notable details

• Combines three patterns in one column: image + video popup trigger + floating badge. The badge sits on top of the image bottom-right, anchoring brand confidence (years of experience).
• The signature SVG inside .single_author is rare — most templates skip the personal-touch detail.
• Pulse halo on the play button is a small CSS-only flourish that draws the eye without competing with the headline.

Use when

• Founder-led services that benefit from a portrait + video-intro combo.
• About sections that need to surface social proof (years, clients) without a dedicated stats row.
• Designs where you want the bullet list and signature to share equal weight under the headline.

Caveats

• YouTube popup requires Magnific Popup loaded globally; without it, clicking the link navigates away.
• Floating badge assumes the parent column has enough bottom padding; on tablets the badge can overlap the next section if you remove section-padding.