about-firm-checklist

Summary

Two-column "About Us" block. Left column: kicker, serif headline, intro paragraph, four checklist rows with amber check icons, and a "LEARN MORE" amber CTA. Right column: a portrait photo (600×800) with a floating amber "15+ Years Experience" badge anchored to the top edge.

HTML structure (minimal)

<div class="section pb-0">
  <div class="r-container">
    <div class="row row-cols-xl-2 row-cols-1 p-0">
      <div class="col col-xl-7 mb-5">
        <div class="d-flex flex-column gap-4">
          <h6 class="accent-color-2">About Us</h6>
          <h3 class="accent-color">Our Firm's Commitment to Excellence</h3>
          <span class="text-color-2 font-2">Founded on the principles of integrity…</span>
          <div class="d-flex flex-column gap-3">
            <div class="d-flex gap-2 align-items-center">
              <i class="fa-solid fa-check accent-color-2"></i>
              <span class="font-2">We uphold the highest ethical standards in everything we do.</span>
            </div>
            <!-- 3 more checklist rows -->
          </div>
          <a href="about.html" class="btn btn-accent px-4 py-3 rounded-0">LEARN MORE</a>
        </div>
      </div>
      <div class="col col-xl-5 position-relative p-0">
        <div class="floating-top-1 bg-accent-color text-white p-3 end-0 text-center">
          <h3 class="fw-bold accent-color-2">15<sup>+</sup></h3>
          <span>Years Experience</span>
        </div>
        <div class="d-flex justify-content-center pe-5 mt-1" style="z-index: 2;">
          <img src="image/portrait.jpg" class="img-fluid">
        </div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.floating-top-1 {
  position: absolute;
  margin-top: 4rem;
  width: 11rem;
  /* end-0 from Bootstrap pins it to the right edge of its parent col */
}

h3.accent-color { color: var(--accent-color); font-family: var(--font-1); }
.fa-check.accent-color-2 { color: var(--accent-color-2); }

Notable details

• The years badge breaks the rectangular photo silhouette without compositing — pure absolute positioning with end-0 (Bootstrap's right:0) and margin-top: 4rem.
• Checklist uses tiny FontAwesome ticks aligned with align-items-center — readable, never wraps oddly even at long copy.
• Heading hierarchy is h6 (kicker) → h3 (title) → body, which is the same scaffold used across every section in the template — gives the page a unified rhythm.

Use when

• Standard "About / Why Us" block on a corporate site that needs a stat or seal overlapping a portrait.
• Any time you want to showcase "X years experience" without an entire stats band.

Caveats

• The badge uses fixed width: 11rem — long localizations ("Багаторічний досвід") will break the layout; switch to width: max-content if translating.
• No animation on the checklist rows; if you want them to staggered-reveal you need to add AOS or write keyframes.