site-footer

Summary

Dark photographic footer with a four-column layout: brand + newsletter, quick links, service offerings, and a head-office address block. Closes with a divided copyright row crediting the agency.

HTML structure (minimal)

<footer class="footer_wrapper footer-1 section-top bg-center bg-cover" style="background-image: url(banner_1900x700.jpg)">
  <div class="container">
    <div class="row">
      <div class="col-lg-3 col-md-6">
        <div class="single_footer_widget">
          <div class="logo_footer"><a href="#"><img src="logo_f.png" alt=""></a></div>
          <p>Lorem ipsum…</p>
          <div class="newsletter_box">
            <h4>Newsletter</h4>
            <form action="#">
              <input type="email" placeholder="Enter your email address" required>
              <button class="theme-btn" type="submit"><i class="fab fa-telegram-plane"></i></button>
            </form>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="single_footer_widget">
          <h4>Quick Link</h4>
          <div class="single_footer_link">
            <ul>
              <li><a href="#"><i class="far fa-angle-double-right"></i>About Company</a></li>
              <li><a href="#"><i class="far fa-angle-double-right"></i>Our Business Law</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-6"><!-- Service Offerings --></div>
      <div class="col-lg-3 col-md-6">
        <div class="single_footer_widget">
          <h4>Head Office</h4>
          <div class="single_footer_address">
            <div class="single_address"><div class="icon"><i class="fal fa-map-marker-alt"></i></div><p>1212 Badda College <br>Montreal, Quebec, H3B 2Y5</p></div>
            <div class="single_address"><div class="icon"><i class="fal fa-envelope"></i></div><a href="mailto:support@gmail.com">support@gmail.com</a></div>
            <div class="single_address"><div class="icon"><i class="icon-phone"></i></div><a href="tel:232-456-7890">(232) 456-7890</a></div>
          </div>
        </div>
      </div>
    </div>
    <hr>
    <div class="footer_bottom_widget py-3">
      <span><a href="#">Terms & conditions</a> | <a href="#">Privacy Policy</a></span>
      <span>© 2022 <a href="#">Legister</a> | All Rights Reserved by <a href="#">RRDevs</a></span>
    </div>
  </div>
</footer>

Key SCSS tokens

.footer_wrapper.footer-1 {
  position: relative;
  &::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(34,33,39,0.88);
    z-index: 0;
  }
  > .container { position: relative; z-index: 1; padding-top: 90px; padding-bottom: 30px; }

  color: rgba(255,255,255,0.78);
  h4 { color: #fff; font-family: 'Crimson Pro', serif; margin-bottom: 22px; }

  .newsletter_box {
    margin-top: 22px;
    form { position: relative; }
    input {
      width: 100%; height: 52px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.14);
      color: #fff; padding: 0 60px 0 18px;
      &::placeholder { color: rgba(255,255,255,0.55); }
    }
    button {
      position: absolute; right: 4px; top: 4px;
      width: 44px; height: 44px;
      background: #c8242f; color: #fff;
      border-radius: 2px;
    }
  }

  .single_footer_link ul li a {
    display: inline-flex; align-items: center; gap: 10px;
    color: rgba(255,255,255,0.78);
    padding: 6px 0;
    transition: color 0.2s;
    &:hover { color: #b69d74; }
  }

  .single_address { display: flex; gap: 12px; padding: 6px 0;
    .icon { width: 32px; flex-shrink: 0; color: #b69d74; }
  }

  .footer_bottom_widget { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
  hr { border-color: rgba(255,255,255,0.10); }
}

Notable details

• Background photo + dark overlay gives the footer the same atmosphere as the dark divider sections — visually rhymes with .brand_wrapper and .our_project_wrapper.
• Newsletter input uses an icon-only submit button positioned absolutely inside the field — saves a row.
• Brass #b69d74 lights up icons + link hover states, so the otherwise dark footer keeps a warm accent.

Use when

• Multi-section sites that need a contact-rich, link-rich footer with newsletter signup.
• Brands that already have a strong photographic asset usable as a footer hero.
• Layouts that prefer four equal columns over the increasingly common 2/1/1 split.

Caveats

• Newsletter form is not wired anywhere in the source — action="#". Hook to your provider.
• Background image is a 1900x700 placeholder; choose something with a calm dark midground or the overlay won't be enough.
• "Legister" / "RRDevs" credits are placeholders — replace before launch.