ad-countdown-banner

Summary

A two-card promotional row directly above the testimonials. The left card pushes a generic "Furniture limit offer 30% Off" message; the right card embeds a four-segment countdown timer (days / hours / minutes / seconds) running off plain JavaScript.

HTML structure (minimal)

<section class="furniture-ad pb-100">
  <div class="container">
    <div class="row g-4">
      <div class="col-xxl-7 col-xl-6">
        <div class="furniture-ad__item h-100 bg-image"
             data-background="assets/imgs/furniture/ad/ad-discount.png">
          <div class="fad-content">
            <h6 class="text-white mb-20 text-uppercase">HOT DEAL furniture</h6>
            <h2 class="text-capitalize text-white">Furniture limit offer <br> 30% Off</h2>
            <a class="border__btn-f mt-35" href="#">Buy Now<span><i class="fa-regular fa-angle-right"></i></span></a>
          </div>
        </div>
      </div>
      <div class="col-xxl-5 col-xl-6">
        <div class="furniture-ad__item h-100 bg-image"
             data-background="assets/imgs/furniture/ad/ad-timer.png">
          <div class="fad-content fad-timer text-center">
            <h6 class="text-white mb-20 text-uppercase">HOT DEAL furniture</h6>
            <h2 class="text-capitalize text-white mb-30">Deals OF the Week</h2>
            <div class="countdown-wrapper">
              <ul>
                <li><span id="days">24</span>days</li>
                <li><span id="hours">1</span>hrs</li>
                <li><span id="minutes">7</span>mins</li>
                <li><span id="seconds">43</span>secs</li>
              </ul>
            </div>
            <a class="border__btn-f mt-40" href="#">Buy Now<span><i class="fa-regular fa-angle-right"></i></span></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Key SCSS tokens

.furniture-ad__item {
  position: relative;
  padding: 60px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
}
.countdown-wrapper ul {
  display: flex;
  justify-content: center;
  gap: 24px;
  list-style: none;
  li {
    color: #fff;
    font-weight: 500;
    span {
      display: block;
      font-size: 40px;
      font-weight: 700;
      line-height: 1;
    }
  }
}
.fad-content h2 {
  font-size: 44px;
  font-weight: 600;
}

Animation logic

// assets/js/main.js — inline countdown, no library
if ($(".countdown-wrapper").length > 0) {
  const target = new Date("Apr 30, 2025 23:59:59").getTime();
  const second = 1000, minute = 60 * second, hour = 60 * minute, day = 24 * hour;

  setInterval(() => {
    const distance = target - Date.now();
    if (distance < 0) return;
    document.getElementById("days").innerText    = Math.floor(distance / day);
    document.getElementById("hours").innerText   = Math.floor((distance % day) / hour);
    document.getElementById("minutes").innerText = Math.floor((distance % hour) / minute);
    document.getElementById("seconds").innerText = Math.floor((distance % minute) / second);
  }, 1000);
}

Notable details

• No library. Date math runs on setInterval and writes into static <span> ids, which keeps the bundle thin.
• The two cards intentionally use a different col-xxl ratio (7/5) so the timer card feels narrower and more poster-like.
• Both cards share the same furniture-ad__item shell; the timer variation just adds fad-timer and a countdown-wrapper.

Use when

• Limited-time sale promos on the home page.
• Product launches that need urgency without a heavyweight sale-engine integration.
• Flash-deal banners that should still render meaningful content if JS fails (the static numbers in HTML are placeholders).

Caveats

• The target date is hard-coded in main.js — for production you'll want a data attribute or a timestamp injected from a CMS.
• IDs days/hours/minutes/seconds are global; if you want two countdowns on one page, refactor to classes scoped per wrapper.