footer-newsletter

Summary

Full-width footer over a dark cinematic photograph. The top strip is a newsletter capture row with a serif H2 ("Subscribe to Our Newsletter!") and an inline email-and-button input. Below is a four-column site map (logo + about copy + socials, Expertise links, Useful Links, Connect details), and a bottom legal strip with copyright and three legal links.

HTML structure (minimal)

<section class="footer-section fix bg-cover" style="background-image: url(assets/img/footer/bg.jpg);">
  <div class="container">
    <div class="contact-info-area">
      <div class="content">
        <div class="section-title">
          <h2 class="text-white">Subscribe to Our <br>Newsletter!</h2>
        </div>
        <p>We will only send you important updates and notices.</p>
      </div>
      <div class="search-widget">
        <input type="email" id="email" placeholder="Enter Your Email address">
        <button type="submit" class="theme-btn">Subscribe <i class="fa-solid fa-arrow-right"></i></button>
      </div>
    </div>
    <div class="footer-widget-wrapper">
      <div class="row">
        <div class="col-xl-4 col-sm-6 col-md-6 col-lg-4">
          <div class="single-footer-widget">
            <div class="widget-head"><a href="index.html"><img src="assets/img/logo/white-logo.svg"></a></div>
            <div class="footer-content">
              <p>Our culture nurtures and strives...</p>
              <div class="social-icon">
                <a href="#"><i class="fab fa-facebook-f"></i></a>
                <!-- 3 more -->
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-sm-6 col-md-6 col-lg-4">
          <div class="single-footer-widget">
            <div class="widget-head"><h4>Expertise</h4></div>
            <ul class="list-items"><li><a href="#">Patent Infringement</a></li>...</ul>
          </div>
        </div>
        <!-- Useful Links / Connect -->
      </div>
    </div>
    <div class="footer-bottom">
      <div class="container">
        <div class="footer-wrapper">
          <p>© Grameentheme2025. All Rights Reserved</p>
          <ul class="bottom-list">
            <li><a href="contact.html">Privacy Policy</a></li>
            <li><a href="contact.html">Terms of Service</a></li>
            <li><a href="contact.html">Legal Agreement</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.footer-section {
  position: relative;
  color: var(--white);
  padding-top: 120px;
  &::before {
    content: ""; position: absolute; inset: 0;
    background: rgba(24,24,24,0.85);
  }
  > .container { position: relative; z-index: 2; }
}
.contact-info-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 64px;
  .search-widget {
    position: relative;
    input {
      width: 100%;
      padding: 18px 24px;
      border-radius: 6px;
      border: none;
      background: rgba(255,255,255,0.08);
      color: var(--white);
      &::placeholder { color: rgba(255,255,255,0.6); }
    }
    button.theme-btn {
      position: absolute;
      right: 6px; top: 6px; bottom: 6px;
    }
  }
}
.footer-bottom {
  margin-top: 80px;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-block: 24px;
  .footer-wrapper { display: flex; justify-content: space-between; align-items: center; }
  .bottom-list { display: flex; gap: 32px; list-style: none; padding: 0; margin: 0; }
}

Animation logic

// WOW.js fades widget columns in with .2s/.4s/.6s/.8s cascade.

Notable details

• The newsletter input button is anchored INSIDE the input via position: absolute — single-line affordance instead of a separate field+button row.
• Background photo is darkened with a near-black rgba(24,24,24,0.85) overlay rather than tinted with theme colour, keeping focus on copy.
• Copyright line uses a non-standard "Grameentheme2025" — replace before shipping.

Use when

• Service-firm footers needing a prominent newsletter capture above the standard four-column site map.
• Dark photographic footers where you want type to dominate.

Caveats

• The semantic outer element is <section> instead of <footer>. Wrap it in or rename to <footer> for accessibility.
• id="email" is reused in some demos — ensure unique IDs if multiple newsletter inputs end up on the same page.