subscribe-footer

Summary

Three-tier dark footer: a top strip with logo + email subscribe, a middle widget area with a big "Connect with Us" CTA, link list, contact info, and social icons, and a bottom copyright bar with quick links.

HTML structure (minimal)

<footer class="main-footer">
  <div class="footer-top">
    <div class="bg-color bg-color-1"></div>
    <div class="auto-container">
      <div class="inner-container">
        <div class="row align-items-center">
          <div class="col-lg-6 logo-column">
            <figure class="footer-logo"><a href="index.html"><img src="logo-3.png" alt=""></a></figure>
          </div>
          <div class="col-lg-6 form-column">
            <div class="form-inner">
              <h3>Subscribe Now</h3>
              <form method="post" action="contact.html">
                <div class="form-group">
                  <input type="email" name="email" placeholder="Enter your email" required>
                  <button type="submit"><i class="icon-8"></i></button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="main-footer-content bg-color-1">
    <div class="widget-section">
      <div class="auto-container">
        <div class="row">
          <div class="col-lg-6 footer-column">
            <div class="footer-widget about-widget">
              <h2>Connect with Us to Start Working Together!</h2>
              <a href="contact.html" class="theme-btn btn-one"><span class="text">Get Started</span><i class="icon-3"></i></a>
            </div>
          </div>
          <div class="col-lg-3 footer-column">
            <div class="footer-widget links-widget">
              <h3>Links</h3>
              <ul class="links-list">
                <li><a href="about.html">About Us</a></li>
                <li><a href="team.html">Our Team</a></li>
                <li><a href="project.html">Our Projects</a></li>
                <li><a href="faq.html">FAQ'S</a></li>
                <li><a href="contact.html">Contact Us</a></li>
              </ul>
            </div>
          </div>
          <div class="col-lg-3 footer-column">
            <div class="footer-widget contact-widget">
              <h3>Get In Touch</h3>
              <ul class="info-list">
                <li><i class="icon-9"></i><span>Add: New Hyde Park, NY 11040</span></li>
                <li><i class="icon-10"></i><span>Email: <a href="mailto:example@info.com">example@info.com</a></span></li>
                <li><i class="icon-11"></i><span>Phone: <a href="tel:3336660000">333 666 0000</a></span></li>
              </ul>
              <ul class="social-links">
                <li><a href="#"><i class="icon-12"></i></a></li>
                <li><a href="#"><i class="icon-13"></i></a></li>
                <li><a href="#"><i class="icon-14"></i></a></li>
                <li><a href="#"><i class="icon-15"></i></a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <div class="auto-container">
        <div class="bottom-inner">
          <div class="copyright"><p>Copyright 2025 by <a href="index.html">DigMox</a> All Right Reserved.</p></div>
          <ul class="footer-menu">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="team.html">Team</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</footer>

Key SCSS tokens

.bg-color-1 { background: #1A1A1A; }
.main-footer { color: #fff; }

.footer-top .form-inner input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #fff;
  padding: 14px 60px 14px 24px;
  border-radius: 50px;
}
.footer-top .form-inner button {
  position: absolute; right: 6px; top: 6px;
  width: 44px; height: 44px;
  background: var(--theme-color);
  border-radius: 50%;
}

.footer-widget .links-list li a:hover { color: #EF721F; }

Notable details

• Three vertical zones (subscribe / widgets / copyright) all live in one <footer> element with shared bg-color-1 — easy to drop sections.
• The "Connect with Us" headline doubles as the secondary CTA — the actual button (Get Started) sits beneath it. Saves a separate CTA section.
• Social icons share the same custom icon font (icon-12 … icon-15) — fewer HTTP requests than SVG sprites.
• Subscribe input has the submit button absolutely positioned inside it for a clean pill-shaped form.

Use when

• Marketing footers that need to do four jobs (subscribe, brand link, contact, copyright) without feeling crowded.
• Single-page sites where the footer is also the contact/CTA.

Caveats

• The contact info is hard-coded; CMS-friendly rebuild needs to expose every field.
• Social icons rely on the icomoon font; replacing requires a new icon set or SVGs.
• The "Subscribe Now" form posts to contact.html — placeholder; wire to a real endpoint or service.