about-image-collage

Summary

Two-column "about" section with an asymmetric image collage on the left (one main photo plus three smaller images and a decorative shape PNG, all absolutely positioned for a layered effect) and a right column containing a small uppercase eyebrow, a large H3 headline, a checkmark feature list, and a primary CTA.

HTML structure (minimal)

<div class="tp-about__area pt-100 pb-160">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-xl-6 wow tpfadeLeft">
        <div class="tp-about__img-wrapper p-relative">
          <div class="tp-about__bg-shape"><img src="about-bg-shape.png"></div>
          <div class="tp-about__main-img z-index"><img src="about-2.jpg"></div>
          <div class="tp-about__sub-img-1 z-index-3"><img src="about-1.jpg"></div>
          <div class="tp-about__sub-img-2"><img src="about-3.jpg"></div>
          <div class="tp-about__sub-img-3 z-index-3"><img src="about-5.png"></div>
        </div>
      </div>
      <div class="col-xl-6 wow tpfadeRight">
        <div class="tp-about__right">
          <div class="tp-about__section-box">
            <h4 class="tp-section-subtitle">OVER 150K+ CLIENT</h4>
            <h3 class="tp-section-title mb-15">We Offer Real Time Data Solutions</h3>
            <p>Excepteur sint occaecat cupidatat officia non proident…</p>
          </div>
          <div class="tp-about__list">
            <ul>
              <li><i class="fal fa-check"></i>Various analysis options.</li>
              <li><i class="fal fa-check"></i>Page Load (time, size, number of requests).</li>
              <li><i class="fal fa-check"></i>Big data analysis.</li>
            </ul>
          </div>
          <div class="tp-about__btn">
            <a class="tp-btn tp-btn-hover alt-color-black" href="about.html"><span>About Us</span><b></b></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.tp-about {
  &__main-img img { border-radius: 20px; }
  &__sub-img-1 { position: absolute; top: -40px; left: 20px; }
  &__sub-img-2 { position: absolute; bottom: -40px; right: 60px; }
  &__sub-img-3 { position: absolute; top: 35%; left: -40px; animation: float 4s ease-in-out infinite; }
  &__list ul li {
    list-style: none; padding-left: 30px; position: relative;
    margin-bottom: 12px; font-weight: 500;
    & i {
      position: absolute; top: 6px; left: 0;
      width: 18px; height: 18px; border-radius: 50%;
      background: var(--tp-common-orange);
      color: #fff; font-size: 9px; text-align: center; line-height: 18px;
    }
  }
}
@keyframes float { 50% { transform: translateY(-20px); } }

Animation logic

// WOW.js triggers tpfadeLeft / tpfadeRight on scroll-in.
// _animation.scss provides float and about-sm keyframes for the floating decorative chip.

Notable details

• The decorative tp-about__sub-img-3 chip floats vertically forever via a CSS @keyframes float, anchoring the otherwise static collage.
• Z-index choreography: main image sits at z-index, the front sub-image and the floating chip at z-index-3, the bg-shape PNG sits behind everything — clean three-layer stacking.
• Checkmark bullet uses an orange circle with white tick rather than a default li-marker, matching the overall accent system.

Use when

• "About us" or "Why us" sections that need to feel dimensional without a video.
• B2B pages that pair photo + bullet-point feature list as the lead value prop.
• When you want the right column to feel anchored by a stat or social-proof eyebrow.

Caveats

• The collage relies on absolute positioning that breaks below sm — those decorative images are hidden via d-none d-sm-block.