newsletter-footer

Summary

Four-column dark footer: brand intro + opening hours, useful links, contact list, and a newsletter form with consent checkbox. A faint grid shape sits behind the columns; underneath, a thin copyright bar carries a left-aligned © 2025 Runok note and right-aligned circular social pills.

HTML structure (minimal)

<footer class="footer-section bg-dark-1">
  <div class="shape"><img src="assets/img/shapes/footer-shape.png" alt="footer"></div>
  <div class="container">
    <div class="row footer-wrap">
      <div class="col-lg-3 col-md-6">
        <div class="footer-widget">
          <div class="widget-header">
            <div class="footer-logo">
              <a href="index.html"><img src="assets/img/logo/logo-2.png" alt="logo"></a>
            </div>
          </div>
          <p class="mb-20">Centric applications productize before front end vortals visualize…</p>
          <h4 class="title">WE ARE AVAILABLE <span>Mon-Sat: 09.00 am to 6.30 pm</span></h4>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="footer-widget footer-col-2">
          <div class="widget-header"><h3 class="widget-title">Useful Links</h3></div>
          <ul class="footer-list">
            <li><a href="about.html">About Us</a></li>
            <li><a href="project.html">Our Gallery</a></li>
            <li><a href="service.html">Our Services</a></li>
            <li><a href="team.html">Our Team</a></li>
          </ul>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="footer-widget">
          <div class="widget-header"><h3 class="widget-title">Contact Us</h3></div>
          <ul class="address-list">
            <li><a href="mailto:support@agency.com">support@agency.com</a></li>
            <li><a href="tel:+2585492153215">+258 (549) 2158 3215</a></li>
            <li>2589 Dorland Street Luke INUA <br> Berlin, Germany</li>
          </ul>
        </div>
      </div>
      <div class="col-lg-3 col-md-6">
        <div class="footer-widget">
          <div class="widget-header"><h3 class="widget-title">Subscribe newsletter</h3></div>
          <div class="footer-form mb-20">
            <form action="#" class="rr-subscribe-form">
              <input class="form-control" type="email" name="email" placeholder="Email address">
              <input type="hidden" name="action" value="mailchimpsubscribe">
              <button class="submit">Sign Up</button>
            </form>
          </div>
          <div class="form-check form-item">
            <input class="form-check-input" type="checkbox" id="man">
            <label class="form-check-label" for="man">I'm okay with getting emails…</label>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="copyright-area">
    <div class="container">
      <div class="row copyright-content">
        <div class="col-md-6"><p>© 2025 Runok. All Rights Reserved.</p></div>
        <div class="col-md-6">
          <ul class="social-list">
            <li class="facebook"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
            <!-- pinterest, twitter, instagram -->
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>

Key SCSS tokens

.footer-section {
  background: var(--rr-color-bg-1); padding: 100px 0 0; position: relative;
  .shape { position: absolute; top: 0; right: 0; opacity: .15; }
  .footer-list li, .address-list li {
    color: var(--rr-color-text-body); margin-bottom: 12px;
    a { color: inherit; transition: color .3s ease;
      &:hover { color: var(--rr-color-theme-primary); } }
  }
  .rr-subscribe-form {
    position: relative;
    .form-control {
      background: transparent; border: 1px solid var(--rr-color-border-1);
      color: var(--rr-color-common-white); padding: 14px 110px 14px 16px;
      border-radius: 999px;
    }
    .submit {
      position: absolute; right: 4px; top: 4px; bottom: 4px;
      background: var(--rr-color-theme-primary); color: var(--rr-color-common-white);
      border: 0; padding: 0 22px; border-radius: 999px;
    }
  }
}
.copyright-area {
  margin-top: 80px; padding: 25px 0;
  border-top: 1px solid var(--rr-color-border-1);
  .social-list { display: flex; gap: 12px; justify-content: flex-end; }
  .social-list li a {
    width: 36px; height: 36px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,.06); color: #fff;
  }
}

Animation logic

(no JS — only CSS hover transitions)

Notable details

• The newsletter form fits the input + button into a single rounded pill: input has 110 px right padding to clear the absolutely-positioned button — looks like a single chip rather than a form pair.
• The hidden action="mailchimpsubscribe" field telegraphs WordPress integration intent (MailChimp for WP plugin convention) — useful clue when porting to another CMS.
• The grid shape behind the columns (.shape) is decorative and sits at 15% opacity — it adds texture without competing with the columns.

Use when

• Standard agency footer with a newsletter capture as the fourth column; works on dark themes where each column needs visible separation.
• Sites where the footer must double as an emergency contact card (phone + address + email all visible).

Caveats

• The newsletter form posts to action="#" — not wired to any backend. Hook up to MailChimp for WP, ConvertKit, or your own endpoint.
• Social icons rely on FontAwesome 6 free; the third item ships an <i class="fab fa-fab fa-google-plus"> (Google+ — long retired) that should be removed before launch.