Countdown

rohit
Feb 13, 2026 4
Live Preview

Live Editor

<div class="bg"></div>
<div class="grid-lines"></div>

<section class="section">

  <!-- eyebrow -->
  <div class="eyebrow">Limited Time Offer</div>

  <!-- headline -->
  <div class="headline">
    <div class="headline-big">DEAL ENDS <span>SOON</span></div>
    <div class="headline-sub">Don't miss out — grab it before the clock hits zero</div>
  </div>

  <!-- countdown -->
  <div class="countdown" id="countdown">
    <!-- Days -->
    <div class="unit" id="unit-d">
      <div class="flip-wrap" id="wrap-d">
        <div class="glow-ring"></div>
        <div class="card-top"><div class="num" id="top-cur-d">00</div></div>
        <div class="card-bot"><div class="num" id="bot-cur-d">00</div></div>
        <div class="flip-top"><div class="num" id="flip-top-d">00</div></div>
        <div class="flip-bot"><div class="num" id="flip-bot-d">00</div></div>
        <div class="crease"></div>
      </div>
      <div class="unit-label">Days</div>
    </div>

    <div class="sep"><span></span><span></span></div>

    <!-- Hours -->
    <div class="unit" id="unit-h">
      <div class="flip-wrap" id="wrap-h">
        <div class="glow-ring"></div>
        <div class="card-top"><div class="num" id="top-cur-h">00</div></div>
        <div class="card-bot"><div class="num" id="bot-cur-h">00</div></div>
        <div class="flip-top"><div class="num" id="flip-top-h">00</div></div>
        <div class="flip-bot"><div class="num" id="flip-bot-h">00</div></div>
        <div class="crease"></div>
      </div>
      <div class="unit-label">Hours</div>
    </div>

    <div class="sep"><span></span><span></span></div>

    <!-- Minutes -->
    <div class="unit" id="unit-m">
      <div class="flip-wrap" id="wrap-m">
        <div class="glow-ring"></div>
        <div class="card-top"><div class="num" id="top-cur-m">00</div></div>
        <div class="card-bot"><div class="num" id="bot-cur-m">00</div></div>
        <div class="flip-top"><div class="num" id="flip-top-m">00</div></div>
        <div class="flip-bot"><div class="num" id="flip-bot-m">00</div></div>
        <div class="crease"></div>
      </div>
      <div class="unit-label">Minutes</div>
    </div>

    <div class="sep"><span></span><span></span></div>

    <!-- Seconds -->
    <div class="unit" id="unit-s">
      <div class="flip-wrap" id="wrap-s">
        <div class="glow-ring"></div>
        <div class="card-top"><div class="num" id="top-cur-s">00</div></div>
        <div class="card-bot"><div class="num" id="bot-cur-s">00</div></div>
        <div class="flip-top"><div class="num" id="flip-top-s">00</div></div>
        <div class="flip-bot"><div class="num" id="flip-bot-s">00</div></div>
        <div class="crease"></div>
      </div>
      <div class="unit-label">Seconds</div>
    </div>
  </div>

  <!-- ended msg -->
  <div class="ended-msg" id="endedMsg">🔥 OFFER EXPIRED</div>

  <!-- stats pills -->
  <div class="stats">
    <div class="stat-pill"><div class="stat-dot"></div> 2,340 people viewing right now</div>
    <div class="stat-pill"><div class="stat-dot" style="background:var(--gold);box-shadow:0 0 8px var(--gold)"></div> Only 13 spots left</div>
    <div class="stat-pill"><div class="stat-dot" style="background:var(--cyan);box-shadow:0 0 8px var(--cyan)"></div> Free shipping today</div>
  </div>

  <!-- CTA buttons -->
  <div class="cta">
    <button class="btn-primary">Claim This Deal</button>
    <button class="btn-ghost">Learn More</button>
  </div>

</section>
 :root {
    --bg:        #03010a;
    --surface:   #0b0717;
    --border:    rgba(255,255,255,0.06);
    --accent:    #ff2d55;
    --gold:      #ffd060;
    --cyan:      #00f0ff;
    --text:      #f0eeff;
    --muted:     #4a4468;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--bg);
    font-family: 'Rajdhani', sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
  }

  /* ── animated background ── */
  .bg {
    position: fixed; inset: 0; z-index: 0;
    background:
      radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255,45,85,0.12) 0%, transparent 65%),
      radial-gradient(ellipse 50% 60% at 10% 50%,  rgba(0,240,255,0.06) 0%, transparent 60%),
      radial-gradient(ellipse 40% 40% at 90% 20%,  rgba(255,208,96,0.05) 0%, transparent 55%);
  }

  /* Grid lines */
  .grid-lines {
    position: fixed; inset: 0; z-index: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 100%);
  }

  /* Scanlines */
  body::after {
    content: '';
    position: fixed; inset: 0; z-index: 200;
    background: repeating-linear-gradient(
      0deg, transparent, transparent 3px,
      rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 4px
    );
    pointer-events: none;
  }

  /* ── Wrapper ── */
  .section {
    position: relative; z-index: 1;
    width: min(960px, 95vw);
    padding: 80px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
  }

  /* ── Top label ── */
  .eyebrow {
    display: flex; align-items: center; gap: 14px;
    font-size: 11px; letter-spacing: 0.4em;
    text-transform: uppercase; color: var(--accent);
    font-weight: 600;
  }
  .eyebrow::before,
  .eyebrow::after {
    content: '';
    width: 40px; height: 1px;
    background: linear-gradient(to right, transparent, var(--accent));
  }
  .eyebrow::after { transform: scaleX(-1); }

  /* ── Headline ── */
  .headline {
    text-align: center;
    line-height: 0.9;
  }
  .headline-big {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(48px, 8vw, 88px);
    letter-spacing: 0.03em;
    color: var(--text);
    text-shadow: 0 0 60px rgba(255,45,85,0.3);
  }
  .headline-big span {
    background: linear-gradient(90deg, var(--accent), var(--gold));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .headline-sub {
    margin-top: 14px;
    font-size: clamp(13px, 2vw, 16px);
    letter-spacing: 0.12em;
    color: var(--muted);
    text-transform: uppercase;
    font-weight: 400;
  }

  /* ── Countdown grid ── */
  .countdown {
    display: flex;
    gap: clamp(12px, 3vw, 28px);
    align-items: center;
  }

  /* Colon separator */
  .sep {
    display: flex; flex-direction: column; gap: 10px;
    padding-bottom: 28px;
  }
  .sep span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent), 0 0 24px rgba(255,45,85,0.4);
    animation: blink 1s ease-in-out infinite;
  }
  .sep span:nth-child(2) { animation-delay: 0.5s; }

  @keyframes blink {
    0%,100% { opacity: 1; } 50% { opacity: 0.15; }
  }

  /* ── Flip card ── */
  .unit {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
  }

  .flip-wrap {
    position: relative;
    width: clamp(88px, 18vw, 148px);
    height: clamp(104px, 22vw, 176px);
  }

  /* Top/bottom halves */
  .card-top,
  .card-bot,
  .flip-top,
  .flip-bot {
    position: absolute; left: 0; right: 0;
    overflow: hidden;
    border-radius: 4px;
  }
  .card-top  { top: 0;   height: 50%; border-radius: 8px 8px 0 0; }
  .card-bot  { bottom: 0; height: 50%; border-radius: 0 0 8px 8px; }
  .flip-top  { top: 0;   height: 50%; transform-origin: bottom center; border-radius: 8px 8px 0 0; }
  .flip-bot  { bottom: 0; height: 50%; transform-origin: top center;   border-radius: 0 0 8px 8px; }

  /* Card surface */
  .card-top, .card-bot, .flip-top, .flip-bot {
    background: linear-gradient(180deg, #17103a 0%, #0f0a26 100%);
    border: 1px solid rgba(255,45,85,0.15);
  }
  .card-top { border-bottom: 1px solid rgba(0,0,0,0.5); }
  .card-bot { border-top:    1px solid rgba(255,255,255,0.04); }

  /* Number inside each half */
  .card-top .num,
  .card-bot .num,
  .flip-top .num,
  .flip-bot .num {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(52px, 12vw, 100px);
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    position: absolute; left: 0; right: 0;
    text-align: center;
  }

  .card-top .num { bottom: 0;  padding-bottom: 6px; }
  .card-bot .num { top: 0;     padding-top: 6px; }
  .flip-top .num { bottom: 0;  padding-bottom: 6px; }
  .flip-bot .num { top: 0;     padding-top: 6px; }

  /* Gloss */
  .card-top::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, transparent 100%);
    pointer-events: none;
  }

  /* Crease line */
  .crease {
    position: absolute;
    left: 0; right: 0;
    top: 50%; transform: translateY(-50%);
    height: 2px;
    background: rgba(0,0,0,0.7);
    z-index: 10;
    pointer-events: none;
  }

  /* Glow ring behind card */
  .glow-ring {
    position: absolute; inset: -12px;
    border-radius: 14px;
    background: radial-gradient(ellipse at 50% 100%, rgba(255,45,85,0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .flip-wrap:hover .glow-ring { opacity: 1; }

  /* Outer card border glow on hover */
  .flip-wrap::before {
    content: '';
    position: absolute; inset: -1px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255,45,85,0.4), rgba(255,208,96,0.15));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.35s;
  }
  .flip-wrap:hover::before { opacity: 1; }

  /* Label */
  .unit-label {
    font-size: clamp(10px, 2vw, 13px);
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
  }

  /* ── Flip animation ── */
  @keyframes flipTop {
    0%   { transform: rotateX(0deg);    z-index: 2; }
    100% { transform: rotateX(-90deg);  z-index: 2; }
  }
  @keyframes flipBot {
    0%   { transform: rotateX(90deg);  z-index: 1; }
    100% { transform: rotateX(0deg);   z-index: 1; }
  }

  .flipping .flip-top { animation: flipTop 0.25s ease-in  forwards; }
  .flipping .flip-bot { animation: flipBot 0.25s ease-out 0.25s forwards; }

  /* ── Stats row below ── */
  .stats {
    display: flex; gap: clamp(20px, 4vw, 48px);
    flex-wrap: wrap; justify-content: center;
  }

  .stat-pill {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 20px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.025);
    backdrop-filter: blur(8px);
    font-size: 13px;
    color: var(--muted);
    letter-spacing: 0.05em;
    transition: border-color 0.3s, color 0.3s;
  }
  .stat-pill:hover { border-color: rgba(255,45,85,0.35); color: var(--text); }

  .stat-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse {
    0%,100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.6); opacity: 0.5; }
  }

  /* ── CTA ── */
  .cta {
    display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  }
  .btn-primary {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px; font-weight: 700;
    letter-spacing: 0.25em; text-transform: uppercase;
    padding: 14px 36px;
    border-radius: 6px;
    border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--accent), #ff6b35);
    color: #fff;
    box-shadow: 0 0 30px rgba(255,45,85,0.4), 0 0 60px rgba(255,45,85,0.15);
    transition: all 0.3s;
    position: relative; overflow: hidden;
  }
  .btn-primary::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
    opacity: 0; transition: opacity 0.3s;
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 40px rgba(255,45,85,0.6), 0 8px 30px rgba(255,45,85,0.3); }
  .btn-primary:hover::after { opacity: 1; }
  .btn-primary:active { transform: scale(0.97); }

  .btn-ghost {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px; font-weight: 600;
    letter-spacing: 0.25em; text-transform: uppercase;
    padding: 14px 36px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--muted); cursor: pointer;
    transition: all 0.3s;
  }
  .btn-ghost:hover { border-color: rgba(255,255,255,0.4); color: var(--text); }

  /* ── Timer ended state ── */
  .ended-msg {
    display: none;
    font-family: 'Oswald', sans-serif;
    font-size: clamp(28px, 6vw, 52px);
    letter-spacing: 0.1em;
    color: var(--gold);
    text-shadow: 0 0 40px rgba(255,208,96,0.5);
    animation: flicker 1.2s ease-in-out infinite;
  }
  @keyframes flicker {
    0%,100% { opacity: 1; } 48% { opacity: 0.85; } 50% { opacity: 0.4; } 52% { opacity: 0.9; }
  }

  /* Responsive */
  @media (max-width: 480px) {
    .sep { padding-bottom: 20px; gap: 6px; }
    .sep span { width: 5px; height: 5px; }
    .section { padding: 60px 16px; gap: 40px; }
  }
 // ── Set your target date here ──
  const TARGET = new Date();
  TARGET.setDate(TARGET.getDate() + 3);
  TARGET.setHours(TARGET.getHours() + 8);
  TARGET.setMinutes(TARGET.getMinutes() + 47);
  TARGET.setSeconds(TARGET.getSeconds() + 22);

  const pad = n => String(n).padStart(2,'0');

  // State: previous values
  const prev = { d:'--', h:'--', m:'--', s:'--' };

  function triggerFlip(key, newVal) {
    const wrap = document.getElementById(`wrap-${key}`);
    if (!wrap) return;

    const topCur  = document.getElementById(`top-cur-${key}`);
    const botCur  = document.getElementById(`bot-cur-${key}`);
    const flipTop = document.getElementById(`flip-top-${key}`);
    const flipBot = document.getElementById(`flip-bot-${key}`);

    // Prepare: flip-top shows OLD, flip-bot shows NEW
    flipTop.textContent = prev[key];
    flipBot.textContent = newVal;

    // Static panels show old on top, new on bottom
    topCur.textContent = prev[key];
    botCur.textContent = newVal;

    // Remove class to reset, re-add on next frame
    wrap.classList.remove('flipping');
    void wrap.offsetWidth; // reflow
    wrap.classList.add('flipping');

    // After full animation, update top static panel to new
    setTimeout(() => {
      topCur.textContent = newVal;
      wrap.classList.remove('flipping');
    }, 520);

    prev[key] = newVal;
  }

  function tick() {
    const now  = new Date();
    const diff = TARGET - now;

    if (diff <= 0) {
      document.getElementById('countdown').style.display = 'none';
      document.getElementById('endedMsg').style.display  = 'block';
      return;
    }

    const d = Math.floor(diff / 86400000);
    const h = Math.floor((diff % 86400000) / 3600000);
    const m = Math.floor((diff % 3600000)  / 60000);
    const s = Math.floor((diff % 60000)    / 1000);

    const vals = {
      d: pad(d),
      h: pad(h),
      m: pad(m),
      s: pad(s)
    };

    for (const key of ['d','h','m','s']) {
      if (vals[key] !== prev[key]) {
        triggerFlip(key, vals[key]);
      }
    }
  }

  // Init immediately
  const now  = new Date();
  const diff = TARGET - now;
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff % 86400000) / 3600000);
  const m = Math.floor((diff % 3600000)  / 60000);
  const s = Math.floor((diff % 60000)    / 1000);
  for (const [key, val] of [['d',pad(d)],['h',pad(h)],['m',pad(m)],['s',pad(s)]]) {
    prev[key] = val;
    ['top-cur','bot-cur','flip-top','flip-bot'].forEach(id => {
      document.getElementById(`${id}-${key}`).textContent = val;
    });
  }

  setInterval(tick, 1000);
Categories

Countdown

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
