footer-multicolumn

Summary

Deep-teal footer split into a 4-column row above an amber-bordered hairline divider. Left column: logo, short paragraph and four social icons. Right area: three text columns ("Quick Links", "Services", "Contact Us") with amber-bordered headings and lists. A single-row copyright bar sits beneath the divider.

HTML structure (minimal)

<footer>
  <div class="section pb-0 bg-accent-color text-white">
    <div class="r-container">
      <div class="border-bottom border-accent-2 pb-xl-5">
        <div class="row row-cols-xl-3 row-cols-1">
          <div class="col col-xl-4 mb-3">
            <div class="d-flex flex-column gap-3 pe-xl-5">
              <img src="image/logo-(1).png" class="img-fluid" width="250">
              <p>Pillar Firm provides a very fast and responsible advice legal service.</p>
              <div class="social-container">
                <a href="#" class="social-item-2"><i class="fa-brands fa-facebook-f"></i></a>
                <a href="#" class="social-item-2"><i class="fa-brands fa-twitter"></i></a>
                <a href="#" class="social-item-2"><i class="fa-brands fa-instagram"></i></a>
                <a href="#" class="social-item-2"><i class="fa-brands fa-youtube"></i></a>
              </div>
            </div>
          </div>
          <div class="col col-xl-8 mb-3">
            <div class="row row-cols-xl-3 row-cols-1">
              <div class="col-xl-3 mb-3">
                <div class="d-flex flex-column gap-3">
                  <div class="pb-2 w-max-content border-bottom border-accent-2">
                    <h4 class="font-1">Quick Links</h4>
                  </div>
                  <ul class="list gap-2 accent-color list-circle">
                    <li><a href="index.html" class="link">Home</a></li>
                    <!-- … -->
                  </ul>
                </div>
              </div>
              <!-- Services & Contact Us columns mirror this shape -->
            </div>
          </div>
        </div>
      </div>
      <div class="d-flex justify-content-center py-3">
        <span class="font-2 fs-6">COPYRIGHT © 2024 ROMETHEME. ALL RIGHTS RESERVED.</span>
      </div>
    </div>
  </div>
</footer>

Key SCSS tokens

.bg-accent-color { background: var(--accent-color); }
.border-accent-2 { border-color: var(--accent-color-2) !important; }
.w-max-content  { width: max-content !important; }

.contact-item {
  border-radius: 50%;
  aspect-ratio: 1/1;
  height: 1.5rem;
  display: flex; justify-content: center; align-items: center;
  color: white;
  background: var(--accent-color);
}

Notable details

• Each column heading sits inside its own w-max-content flex item with an amber bottom border, so the underline only stretches as far as the text — a small detail that reads as deliberate typography.
• The contact-info icons (envelope, phone, location, globe) are rendered as small circular badges via .contact-item — gives each line a consistent left-anchor without an icon font's rectangular bounding box.
• Copyright bar is centered single-line — visually quieter than the usual two-column "©" + "Privacy / Terms" footer.

Use when

• Standard four-column corporate footers where the brand owner wants their logo and tagline on the left and three nav columns on the right.
• Any footer where you want amber accents to match a teal background palette without resorting to white text everywhere.

Caveats

• The "ROMETHEME" copyright in the demo needs to be replaced with the client's name before launch.
• The Facebook/Twitter/Instagram/YouTube row points to the brand domains, not specific accounts — wire the real URLs.