footer-mega

Summary

Three-tier footer: a top contact-info row of icon tiles (address, email, phone), a four-column widget area (about + socials, quick links, recent posts, newsletter form), and a bottom copyright/legal row with a decorative vector backdrop.

HTML structure (minimal)

<footer class="ul-footer">
  <div class="ul-footer-top">
    <div class="ul-footer-container">
      <div class="ul-footer-top-contact-infos">
        <div class="ul-footer-top-contact-info">
          <div class="ul-footer-top-contact-info-icon">
            <div class="ul-footer-top-contact-info-icon-inner"><i class="flaticon-pin"></i></div>
          </div>
          <div class="ul-footer-top-contact-info-txt">
            <span class="ul-footer-top-contact-info-label">Address</span>
            <h5 class="ul-footer-top-contact-info-address">4648 Rocky Road Philadelphia PA, 1920</h5>
          </div>
        </div>
        <!-- email + phone tiles -->
      </div>
    </div>
  </div>

  <div class="ul-footer-middle">
    <div class="ul-footer-container">
      <div class="ul-footer-middle-wrapper wow animate__fadeInUp">
        <div class="ul-footer-about">
          <a href="index.html"><img src="logo-white.svg" alt=""></a>
          <p class="ul-footer-about-txt">Phasellus ultricies aliquam volutpat...</p>
          <div class="ul-footer-socials">
            <a href="#"><i class="flaticon-facebook"></i></a>
            <a href="#"><i class="flaticon-twitter"></i></a>
            <a href="#"><i class="flaticon-linkedin-big-logo"></i></a>
            <a href="#"><i class="flaticon-youtube"></i></a>
          </div>
        </div>

        <div class="ul-footer-widget">
          <h3 class="ul-footer-widget-title">Quick Links</h3>
          <div class="ul-footer-widget-links">
            <a href="about.html">About Us</a>
            <a href="services.html">Our Services</a>
            <!-- ... -->
          </div>
        </div>

        <div class="ul-footer-widget ul-footer-recent-posts">
          <h3 class="ul-footer-widget-title">Recent Posts</h3>
          <div class="ul-blog-sidebar-posts">
            <div class="ul-blog-sidebar-post ul-footer-post">
              <div class="img"><img src="blog-2.jpg" alt=""></div>
              <div class="txt">
                <span class="date"><i class="flaticon-calendar"></i> May 12, 2025</span>
                <h4 class="title"><a href="blog-details.html">There are many varions of passages of</a></h4>
              </div>
            </div>
            <!-- second post -->
          </div>
        </div>

        <div class="ul-footer-widget ul-nwsltr-widget">
          <h3 class="ul-footer-widget-title">Contact Us</h3>
          <div class="ul-footer-widget-links ul-footer-contact-links">
            <a href="mailto:info@example.com"><i class="flaticon-mail"></i> info@example.com</a>
            <a href="tel:123-456-7890"><i class="flaticon-telephone-call"></i> 123-456-7890</a>
          </div>
          <form action="#" class="ul-nwsltr-form">
            <div class="top">
              <input type="email" placeholder="Your Email Address" class="ul-nwsltr-input">
              <button type="submit"><i class="flaticon-next"></i></button>
            </div>
            <div class="agreement">
              <label for="nwsltr-agreement" class="ul-checkbox-wrapper">
                <input type="checkbox" id="nwsltr-agreement" hidden>
                <span class="ul-checkbox"><i class="flaticon-tick"></i></span>
                <span class="ul-checkbox-txt">I agree with the <a href="#">Privacy Policy</a></span>
              </label>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div class="ul-footer-bottom">
    <div class="ul-footer-container">
      <div class="ul-footer-bottom-wrapper">
        <p class="copyright-txt">&copy; <span id="footer-copyright-year"></span> Charitics. All rights reserved</p>
        <div class="ul-footer-bottom-nav"><a href="#">Terms &amp; Conditions</a> <a href="#">Privacy Policy</a></div>
      </div>
    </div>
  </div>

  <div class="ul-footer-vectors">
    <img src="footer-vector-img.png" class="ul-footer-vector-1">
  </div>
</footer>

Key SCSS tokens

.ul-footer { background: var(--ul-black); color: var(--white); position: relative; }

.ul-footer-top {
  background: var(--ul-gradient);
  padding: clamp(20px, 2.10vw, 40px);
  border-radius: clamp(12px, 1.57vw, 30px);
  margin: 0 auto -40px;          /* lifted into the dark middle band */
  max-width: clamp(0px, 90vw, 1720px);
}
.ul-footer-top-contact-infos {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.10vw, 40px);
}
.ul-footer-top-contact-info-icon-inner {
  background: var(--white);
  color: var(--ul-primary);
  width: 56px; aspect-ratio: 1/1;
  border-radius: 50%;
  display: grid; place-items: center;
}

.ul-footer-middle-wrapper {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.5fr 1.4fr;
  gap: clamp(24px, 2.10vw, 48px);
  padding-top: 80px;
}
.ul-nwsltr-form .top {
  display: flex;
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  padding: 4px;
  input { flex: 1; padding: 10px 16px; color: var(--white); }
  button {
    background: var(--ul-gradient);
    color: var(--white);
    width: 44px; aspect-ratio: 1; border-radius: 50%;
  }
}

Animation logic

// Footer middle-wrapper carries .wow.animate__fadeInUp.
// Copyright year auto-fills:
document.getElementById("footer-copyright-year").textContent = new Date().getFullYear();
new WOW({}).init();

Notable details

• Top contact-info bar uses a gradient pill with negative bottom margin so it overlaps the dark middle band — gives a "floating header" feel without an explicit border.
• Widget grid uses fractional column ratios (1.4 / 1 / 1.5 / 1.4) rather than equal repeat(4, 1fr) — recent-posts column is widest because post titles are longest.
• Newsletter input + submit are wrapped in a single rounded pill with the submit button absorbed into the right edge — readable on dark backgrounds without separate borders.
• Custom checkbox uses a hidden input + visible icon span pattern — same trick as the donate-form radios, consistent across the template.

Use when

• Multi-page sites needing address, email, phone, social, links, recent posts, AND a newsletter signup all in one footer.
• Charity/NGO sites that want the contact info to feel prominent (the gradient pill achieves that).
• Templates that want a self-updating copyright year without inline date formatting.

Caveats

• The fractional grid only looks balanced at 4-widget configs — dropping a widget requires re-tuning column ratios.
• Footer vector PNG is decorative and bleeds off-page; ensure overflow: hidden is set on the footer in production.
• Newsletter submit has no validation or success state — production needs a fetch handler with feedback UI.