video-player-process-timeline

Summary

Two-column "how we work" section: a tall jarallax photo with a circular play-button overlay (centered) on the left, and a numbered three-step vertical timeline on the right.

HTML structure (minimal)

<section class="bg-light">
  <div class="container">
    <div class="row g-4 gx-5 justify-content-between">
      <div class="col-md-6">
        <div class="jarallax h-100 rounded-1 relative overflow-hidden mh-400 wow fadeInUp">
          <img src="images/misc/s4.webp" class="jarallax-img" alt="">
          <div class="absolute start-0 w-100 abs-middle fs-36 text-white text-center z-2">
            <div class="player bg-color border-0 circle wow scaleIn"><span></span></div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="subtitle s2 mb-3 wow fadeInUp">Work Process</div>
        <h2 class="wow fadeInUp col-lg-8" data-wow-delay=".2s">Proven Approach to Legal Success</h2>
        <div class="mt-5 de-timeline-s2 wow fadeInUp">
          <div class="d-item pb-1">
            <div class="d-text">
              <div class="d-icon">1</div>
              <h3>Case Evaluation</h3>
              <p>We carefully review your situation, assess the legal facts...</p>
            </div>
          </div>
          <div class="d-item pb-1">
            <div class="d-text">
              <div class="d-icon">2</div>
              <h3>Strategy Development</h3>
              <p>Our team gathers evidence, prepares documentation...</p>
            </div>
          </div>
          <div class="d-item pb-1">
            <div class="d-text">
              <div class="d-icon">3</div>
              <h3>Case Resolution</h3>
              <p>We represent you in negotiations or court proceedings...</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.player {
  width: 80px; height: 80px;
  display: inline-flex;
  align-items: center; justify-content: center;
  position: relative;
}
.player::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  animation: pulse 2.5s ease-out infinite;
}
.player span {
  width: 0; height: 0;
  border-style: solid;
  border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent #fff;
}
.abs-middle {
  position: absolute;
  top: 50%; transform: translateY(-50%);
}
.de-timeline-s2 .d-item { position: relative; padding-left: 60px; }
.de-timeline-s2 .d-icon {
  position: absolute; left: 0; top: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.de-timeline-s2 .d-item:not(:last-child) .d-text {
  border-left: 1px dashed var(--primary-color);
  margin-left: 20px; padding-left: 30px;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

Animation logic

// Play button has a CSS @keyframes pulse on its ::before ring,
// plus a WOW.js scaleIn entrance.
// Clicking the .player typically opens a Magnific Popup video lightbox:
$('.player').on('click', function (e) {
  e.preventDefault();
  // Magnific Popup or similar handler
});

Notable details

• Numbered steps use a circular badge (.d-icon) and a dashed left border on the text container that connects step n to step n+1 — connection logic lives on the .d-text, not on the wrapper, so the line stops cleanly at the last step.
• The play button's pulsing ring is pure CSS @keyframes pulse — no JS, repeats infinitely.
• The image side is mh-400 (min-height 400px) so the image and timeline columns approximately match in height even at narrow viewports.

Use when

• Process/methodology sections that need a short numbered storyline next to evocative imagery.
• Anywhere you want a "watch our story" video CTA paired with body content rather than as a hero.

Caveats

• Video lightbox requires Magnific Popup (loaded via vendors.js). If you strip jQuery, replace with a native <dialog> or modern lightbox.
• Pulse animation runs forever — battery drain on mobile if section sits in viewport.