Happy New Year 2025 | New Year Card Design using HTML CSS and JavaScript

Last Updated : 23 Jul, 2025

Explore the perfect blend of creativity and technology with our Happy New Year card design tutorial using HTML, CSS, and JavaScript. Read step-by-step guide to craft visually stunning and interactive New Year cards for a memorable celebration. Elevate your web development skills while spreading joy and wishes in style.

Prerequisites: HTML, CSS, JavaScript

Approach

WCreate a responsive layout with a title, countdown timer, and celebratory elements.
Add SVG elements for decorative backgrounds (moon, clouds, cityscape)
Define a full-page layout with a dark theme and animations for the moon, clouds, and text elements.
Use keyframes for animations like floating clouds, pulsing moon, and celebratory title color transitions.
Include styles for floating emojis and their animations.
Retrieve HTML elements using getElementById.
Set the target date (next New Year's Day).
Calculate the time difference and display days, hours, minutes, and seconds dynamically.
Use setInterval to update the countdown every second.
On reaching the target date: Change the title to a celebratory message.
Add floating emojis and celebratory text animations.
Stop the countdown using clearInterval. Randomly generate emojis at different screen positions and sizes.
Use CSS animations to make them float upwards and remove them after a delay.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>New Year Countdown</title>
</head>

<body>
  <div id="bg">
    <svg id="bg__moon" height="100" width="100">
      <circle cx="50" cy="50" r="35" fill="lightblue" />
    </svg>
    <svg id="bg__cloud1" height="100" width="200">
      <g fill="#2a4b6f">
        <path d="M40,50 L40,100 L160,100 L160,50 Z" />
        <circle cx="40" cy="71" r="29" />
        <circle cx="65" cy="50" r="22" />
        <circle cx="110" cy="50" r="45" />
        <circle cx="160" cy="68" r="32" />
      </g>
    </svg>
    <svg id="bg__cloud2" height="100" width="200">
      <g fill="#3a4b6f">
        <path d="M40,50 L40,100 L160,100 L160,50 Z" />
        <circle cx="40" cy="71" r="29" />
        <circle cx="65" cy="50" r="22" />
        <circle cx="110" cy="50" r="45" />
        <circle cx="160" cy="68" r="32" />
      </g>
    </svg>
    <svg id="bg__cloud3" height="100" width="200">
      <g fill="#1a4b6f">
        <path d="M40,50 L40,100 L160,100 L160,50 Z" />
        <circle cx="40" cy="71" r="29" />
        <circle cx="65" cy="50" r="22" />
        <circle cx="110" cy="50" r="45" />
        <circle cx="160" cy="68" r="32" />
      </g>
    </svg>
  </div>
  <div id="cd">
    <h1 class="cd__title" id="cd-title">Happy New Year Countdown!</h1>
    <div class="cd__ele">
      <span class="cd__ele__value" id="cd-days">00</span>
      <span class="cd__ele__name">Days</span>
    </div>
    <div class="cd__ele">
      <span class="cd__ele__value" id="cd-hours">00</span>
      <span class="cd__ele__name">Hours</span>
    </div>
    <div class="cd__ele">
      <span class="cd__ele__value" id="cd-mins">00</span>
      <span class="cd__ele__name">Minutes</span>
    </div>
    <div class="cd__ele cd__ele--secs">
      <span class="cd__ele__value" id="cd-secs">00</span>
      <span class="cd__ele__name">Seconds</span>
    </div>
    <div class="cd__timetil" id="cd-timetil">Time until </div>
  </div>
</body>


</html>

CSS

 html,
  body {
    height: 100%;
  }

  body {
    background-color: #000e31;
    color: #fff;
    font-family: "Courier New", Courier, monospace;
    margin: 0;
    padding: 0;
    z-index: 0;
  }

  /* Count down code */
  @-webkit-keyframes cd-flowin {
    0% {
      opacity: 0;
      -webkit-transform: translate(-50%, -50%) scale(0);
      transform: translate(-50%, -50%) scale(0);
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(-50%, -50%) scale(1);
      transform: translate(-50%, -50%) scale(1);
    }
  }

  @keyframes cd-flowin {
    0% {
      opacity: 0;
      -webkit-transform: translate(-50%, -50%) scale(0);
      transform: translate(-50%, -50%) scale(0);
    }

    100% {
      opacity: 1;
      -webkit-transform: translate(-50%, -50%) scale(1);
      transform: translate(-50%, -50%) scale(1);
    }
  }

  @-webkit-keyframes cd-new-year-title {
    0% {
      color: red;
    }

    50% {
      color: blue;
    }

    100% {
      color: green;
    }
  }

  @keyframes cd-new-year-title {
    0% {
      color: red;
    }

    50% {
      color: blue;
    }

    100% {
      color: green;
    }
  }

  @-webkit-keyframes bg-move-cloud {
    0% {
      left: -250px;
    }

    100% {
      left: 105%;
    }
  }

  @keyframes bg-move-cloud {
    0% {
      left: -250px;
    }

    100% {
      left: 105%;
    }
  }

  @-webkit-keyframes bg-pulse-moon {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
    }
  }

  @keyframes bg-pulse-moon {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    100% {
      -webkit-transform: scale(1.15);
      transform: scale(1.15);
    }
  }

  #cd {
    -webkit-animation: cd-flowin 4s ease 1s forwards;
    animation: cd-flowin 4s ease 1s forwards;
    display: inline-block;
    left: 50%;
    opacity: 0;
    position: fixed;
    text-align: center;
    top: 50%;
    width: 90%;
    max-width: 500px;
    z-index: 2;
  }

  #cd .cd__title {
    color: #ebebeb;
    font-family: emoji;
    font-size: 2.2em;
    font-weight: 700;
    -webkit-transition: all 1s;
    transition: all 1s;
  }

  #cd .cd__title.cd__title--newyear {
    -webkit-animation: cd-new-year-title 3s ease alternate infinite;
    animation: cd-new-year-title 3s ease alternate infinite;
  }

  #cd .cd__ele {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    padding: 5% 3.5%;
  }

  #cd .cd__ele .cd__ele__value {
    display: block;
    font-size: 3.1em;
  }

  #cd .cd__ele .cd__ele__name {
    font-size: 0.85em;
    font-style: italic;
  }

  #cd .cd__ele--secs {
    color: #57a300;
  }

  #cd .cd__timetil {
    margin-top: 2%;
  }

  /* --< Background >-- */
  #bg {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    width: 100%;
    z-index: 1;
  }

  #bg * {
    position: fixed;
  }

  #bg__moon {
    -webkit-animation: bg-pulse-moon 4s linear 0s alternate infinite;
    animation: bg-pulse-moon 4s linear 0s alternate infinite;
    right: 2%;
    top: 2%;
  }

  #bg__grass {
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  #bg__city {
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  #bg__cloud1 {
    -webkit-animation: bg-move-cloud 48s linear -12s alternate infinite;
    animation: bg-move-cloud 48s linear -12s alternate infinite;
    top: 9%;
  }

  #bg__cloud2 {
    -webkit-animation: bg-move-cloud 60s linear -78s alternate infinite;
    animation: bg-move-cloud 60s linear -78s alternate infinite;
    top: 23%;
  }

  #bg__cloud3 {
    -webkit-animation: bg-move-cloud 80s linear -78s alternate infinite;
    animation: bg-move-cloud 80s linear -78s alternate infinite;
    top: 15%;
  }

  .celebrate {
    font-size: 2em;
    margin-top: 10px;
    animation: float 1.5s ease-in-out infinite, zoom 2s ease-in-out infinite;
  }

  @keyframes float {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-20px);
    }
  }

  @keyframes zoom {

    0%,
    100% {
      transform: scale(1);
    }

    50% {
      transform: scale(1.2);
    }
  }

  @keyframes floatUp {
    0% {
      opacity: 0;
      transform: translateY(50px);
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      transform: translateY(-500px);
    }
  }

  .floating-emoji {
    position: fixed;
    bottom: -50px;
    /* Start below the viewport */
    font-size: 2.5em;
    animation: floatUp 5s ease-in-out forwards;
    z-index: 9999;
    pointer-events: none;
  }

JavaScript

window.onload = function () {
    var elements = {
        cd: document.getElementById("cd"),
        cd_title: document.getElementById("cd-title"),
        cd_days: document.getElementById("cd-days"),
        cd_hours: document.getElementById("cd-hours"),
        cd_mins: document.getElementById("cd-mins"),
        cd_secs: document.getElementById("cd-secs"),
        cd_timetil: document.getElementById("cd-timetil"),
    };

    elements.cd_title.innerHTML += " " + (new Date().getFullYear() + 1);
    var endDate = new Date(new Date().getFullYear() + 1 + "/1/1"),
        sec = 1000,
        min = sec * 60,
        hour = min * 60,
        day = hour * 24;

    elements.cd_timetil.innerHTML = "Time until " + endDate.toDateString();

    var cdInterval = setInterval(function () {
        var nowDate = new Date(),
            dif = endDate.getTime() - nowDate.getTime();

        if (dif <= 0) {
            elements.cd_title.classList.add("cd__title--newyear");
            elements.cd_title.innerHTML = " Happy New Year 2025! 🎉🎊";
            elements.cd.insertAdjacentHTML(
                "beforeend",
                '<div class="celebrate">🎆✨🎇 Enjoy the celebration! 🎇✨🎆</div>'
            );

            setInterval(() => createFloatingEmojis(), 200);
            return clearInterval(cdInterval);
        }
        var days = Math.floor(dif / day),
            hours = Math.floor((dif % day) / hour),
            mins = Math.floor((dif % hour) / min),
            secs = Math.floor((dif % min) / sec);
        elements.cd_days.innerHTML = ("000" + days).slice(-3);
        elements.cd_days.nextElementSibling.innerHTML = "Day" + (days == 1 ? "" : "s");
        elements.cd_hours.innerHTML = ("00" + hours).slice(-2);
        elements.cd_hours.nextElementSibling.innerHTML = "Hour" + (hours == 1 ? "" : "s");
        elements.cd_mins.innerHTML = ("00" + mins).slice(-2);
        elements.cd_mins.nextElementSibling.innerHTML = "Minute" + (mins == 1 ? "" : "s");
        elements.cd_secs.innerHTML = ("00" + secs).slice(-2);
        elements.cd_secs.nextElementSibling.innerHTML = "Second" + (secs == 1 ? "" : "s");
    }, 1000);

    function createFloatingEmojis() {
        const emojiList = ["🎉", "🎊", "🎆", "✨", "🎇"];
        for (let i = 0; i < 10; i++) {
            const emoji = document.createElement("div");
            emoji.className = "floating-emoji";
            emoji.textContent = emojiList[Math.floor(Math.random() * emojiList.length)];
            emoji.style.left = Math.random() * 100 + "vw";
            emoji.style.animationDuration = Math.random() * 2 + 4 + "s";
            emoji.style.fontSize = Math.random() * 1.5 + 1.5 + "em";
            document.body.appendChild(emoji);
            setTimeout(() => emoji.remove(), 3000);
        }
    }
};

New Year Card Design using HTML CSS and JavaScript

meetahaloyx4

Improve

Article Tags :

Happy New Year 2025 | New Year Card Design using HTML CSS and JavaScript

Approach

Explore

Thank You!

What kind of Experience do you want to share?