main-footer

Summary

Stripped-down footer: copyright on the left, centred logo, and three text-only social links on the right — all on one row separated from the page by a thin top divider.

HTML structure (minimal)

<footer class="main-footer">
  <div class="large-container">
    <div class="footer-bottom">
      <div class="bottom-inner">
        <div class="copyright"><p><span>&copy;2024.</span> All Right Reserved</p></div>
        <figure class="footer-logo"><a href="/"><img src="logo-3.png"></a></figure>
        <ul class="social-links">
          <li><a href="#">Insta</a></li>
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Twitter</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

Key SCSS tokens

.main-footer .footer-bottom {
  border-top: 1px solid rgba(0,0,0,0.10);
  padding: 30px 0;
}
.main-footer .bottom-inner {
  display: flex; align-items: center; justify-content: space-between;
}
.main-footer .social-links { display: flex; gap: 30px; }
.main-footer .social-links a {
  font-size: 16px; font-weight: 500;
  position: relative;
}
.main-footer .social-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s;
}
.main-footer .social-links a:hover::after { transform: scaleX(1); }

Notable details

• Three text links ("Insta", "Facebook", "Twitter") instead of icons — keeps the look editorial and avoids icon-font weight.
• Single-row footer makes the section disappear into the page rhythm; major information is intentionally minimal.
• Underline-on-hover comes from a pseudo-element scaleX transition — reusable everywhere.

Use when

• Personal portfolios that want a quiet end of the page rather than a four-column sitemap.
• Sites where legal info, address and full nav already live elsewhere.

Caveats

• No newsletter signup, no language switcher, no sitemap — extending requires upgrading the markup.
• "Insta" is informal — fine for a personal site, less so for a corporate one.