footer-main

Summary

Dark photo-backed footer split into a top region with the brand widget (logo + blurb + social icons) and three sitemap columns, plus a bottom legal strip. Background image is set inline so it can be swapped per-page; the current year is injected by JS so the copyright line stays evergreen.

HTML structure (minimal)

<footer>
  <div class="footer-main bg-contain"
       style="background-image: url(footer-bg-large.jpg)">
    <div class="footer-top">
      <div class="container">
        <div class="row footer-custom-row">
          <div class="col-12 col-md-6">
            <div class="footer-widget footer-widget-brand"
                 data-aos="fade-up" data-aos-anchor=".footer-top">
              <a class="footer-logo"><img src="logo-white.png" /></a>
              <p class="text text-16">Brand description...</p>
              <ul class="social-icons list-unstyled" data-aos="fade-up">
                <li><a class="social-link" href="#facebook"><svg>fb</svg></a></li>
                <li><a class="social-link" href="#linkedin"><svg>in</svg></a></li>
                <li><a class="social-link" href="#x"><svg>x</svg></a></li>
              </ul>
            </div>
          </div>
          <div class="col-12 col-md-2">
            <div class="footer-widget">
              <h4 class="footer-widget-title heading text-20">Quick Links</h4>
              <ul class="footer-menu list-unstyled">
                <li><a href="about.html">About</a></li>
                <li><a href="services.html">Services</a></li>
              </ul>
            </div>
          </div>
          <!-- two more sitemap columns -->
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <div class="container">
        <p class="text text-16">© <span class="current-year">2025</span> Consulo. All rights reserved.</p>
      </div>
    </div>
  </div>
</footer>

Key SCSS tokens

.footer-main {
  --color-background: rgba(28,37,57,1);
  --color-foreground: rgba(255,255,255,0.7);
  --color-foreground-heading: rgba(255,255,255,1);
  background-color: var(--color-background);
  color: var(--color-foreground);
  padding: 100px 0 0;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 24px 0;
  margin-block-start: 80px;
}
.social-icons {
  display: flex;
  gap: 12px;
}
.social-icons .social-link {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s;
}
.social-icons .social-link:hover {
  background: rgba(255,255,255,1);
  color: var(--color-background);
}

Animation logic

// Auto-update copyright year
let copyrightCurrentyear = document.querySelector(".current-year");
copyrightCurrentyear ? (copyrightCurrentyear.innerHTML = new Date().getFullYear()) : null;

Notable details

• The current-year injection is one of the simplest evergreen-footer tricks and avoids the embarrassing "© 2023" stuck on a 2026 site.
• The footer photo is set via inline style="background-image: url(...)" so per-page layouts can swap the backdrop without overriding CSS.
• All AOS reveals on the footer use data-aos-anchor=".footer-top" so the entire footer animates in unison once any part of it enters the viewport.
• Social icons are circular outline at rest and invert (white fill, dark icon) on hover via the same CSS-variable rebinding pattern used elsewhere.

Use when

• Production sites that want a polished dark footer with brand identity, sitemap and social links in one band.
• Pages where the footer needs to sit behind a photographic backdrop instead of a flat color.
• Templates that need an evergreen copyright year without a build step.

Caveats

• The footer photo file is footer-bg-large.jpg — make sure to optimize it (the source is ~hundreds of KB) or it dominates the page weight.
• Sitemap columns are static HTML — no CMS hookup. For a real deployment, wire them to a global config.