footer-mega

Summary

Four-column primary footer (about + Make Appointment CTA, departments list, links list, quick contacts with phone/address/socials) plus a thin secondary copyright bar. No newsletter form on home — that lives on inner pages.

HTML structure (minimal)

<footer class="footer">
  <div class="footer-primary">
    <div class="container">
      <div class="row">
        <div class="col-lg-3">
          <div class="footer-widget-about">
            <img src="assets/images/logo/logo-light.png" alt="logo" class="mb-30">
            <p class="color-gray">Our goal is to deliver quality of care…</p>
            <a href="appointment.html" class="btn btn__primary btn__primary-style2 btn__link">
              <span>Make Appointment</span><i class="icon-arrow-right"></i>
            </a>
          </div>
        </div>
        <div class="col-lg-2 offset-lg-1">
          <div class="footer-widget-nav">
            <h6 class="footer-widget__title">Departments</h6>
            <nav>
              <ul class="list-unstyled">
                <li><a href="#">Neurology Clinic</a></li>
                <li><a href="#">Cardiology Clinic</a></li>
                <!-- … -->
              </ul>
            </nav>
          </div>
        </div>
        <div class="col-lg-2">
          <div class="footer-widget-nav">
            <h6 class="footer-widget__title">Links</h6>
            <nav><ul class="list-unstyled">…</ul></nav>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="footer-widget-contact">
            <h6 class="footer-widget__title color-heading">Quick Contacts</h6>
            <ul class="contact-list list-unstyled">
              <li>If you have any questions or need help…</li>
              <li>
                <a href="tel:01061245741" class="phone__number">
                  <i class="icon-phone"></i><span>01061245741</span>
                </a>
              </li>
              <li class="color-body">2307 Beverley Rd Brooklyn, New York 11226 United States.</li>
            </ul>
            <div class="d-flex align-items-center">
              <a href="contact-us.html" class="btn btn__primary btn__link mr-30">
                <i class="icon-arrow-right"></i><span>Get Directions</span>
              </a>
              <ul class="social-icons list-unstyled mb-0">…</ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer-secondary">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-6">
          <span class="fz-14">&copy; 2020 DataSoft, All Rights Reserved. With Love by</span>
          <a class="fz-14 color-primary" href="http://themeforest.net/user/7oroof">7oroof.com</a>
        </div>
        <div class="col-lg-6">
          <nav>
            <ul class="list-unstyled footer__copyright-links d-flex flex-wrap justify-content-end mb-0">
              <li><a href="#">Terms &amp; Conditions</a></li>
              <li><a href="#">Privacy Policy</a></li>
              <li><a href="#">Cookies</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</footer>
<button id="scrollTopBtn"><i class="fas fa-long-arrow-alt-up"></i></button>

Key SCSS tokens

.footer {
  .footer-primary { padding: 90px 0 60px; background: $color-secondary; color: $color-gray; }
  .footer-widget__title { font-size: 18px; color: $color-white; margin-bottom: 25px; }
  .footer-widget-nav ul li { margin-bottom: 10px;
    a { color: $color-gray; transition: color .25s; }
    a:hover { color: $color-primary; }
  }
  .footer-widget-contact .phone__number { color: $color-white; font-size: 22px; font-weight: 700;
    i { color: $color-primary; margin-right: 8px; }
  }
  .footer-secondary { padding: 22px 0; background: darken($color-secondary, 5%);
    .footer__copyright-links li { margin-left: 25px;
      a { color: $color-gray; }
    }
  }
}
#scrollTopBtn {
  position: fixed; right: 20px; bottom: 20px; width: 45px; height: 45px;
  border-radius: 50%; background: $color-primary; color: $color-white;
  border: 0; opacity: 0; pointer-events: none; transition: opacity .3s;
  &.actived { opacity: 1; pointer-events: auto; }
}

Animation logic

// Scroll-to-top button (fixed) only fades in past 700px scroll:
$(window).on('scroll', function () {
  if ($(this).scrollTop() > 700) $('#scrollTopBtn').addClass('actived');
  else $('#scrollTopBtn').removeClass('actived');
});
$('#scrollTopBtn').on('click', function () {
  $('html, body').animate({ scrollTop: 0 }, 500);
});

Notable details

• The fourth column is wider (col-lg-4) than the nav columns to fit the contact paragraph + phone block + Get Directions button + socials in one stack — useful when a footer needs to act as a mini "contact card".
• Uses an offset-lg-1 between the about column and the first link list, creating a deliberate breathing gap that keeps the four columns from feeling cramped.
• The secondary footer uses darken($color-secondary, 5%) for a barely-different shade — a subtle layering trick instead of a hard divider line.

Use when

• Standard B2B / healthcare / corporate sites with departments + links + contacts in a single mega footer.
• Layouts where the footer carries meaningful CTAs (Make Appointment, Get Directions) rather than just nav.

Caveats

• Copyright text is hard-coded ("2020 DataSoft") — remember to swap before publishing.
• No newsletter signup; if you need one, plan a fifth column or replace the about copy with a form.