about-firm-checklist

Файли-джерела
- index.html
main div.section.pb-0:nth-child(3)
Бібліотеки
bootstrap
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) andmargin-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 towidth: max-contentif translating. - No animation on the checklist rows; if you want them to staggered-reveal you need to add AOS or write keyframes.