Code Lab Pro

HTML Coming Soon countdown

Coming Soon html

Introduction:

Coming Soon html Countdown introduces an exciting countdown page that keeps visitors informed and engaged while anticipating the launch of a new website. This page not only informs about the upcoming site but also builds anticipation through a dynamic countdown timer, creating a sense of excitement and readiness.

HTML Code

No code available.
				
					

    
    
    
    <title>Coming Soon Countdown</title>
    
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #f0f0f0; /* Background color */
            font-family: Arial, sans-serif;
            color: #333;
        }

        .coming-soon-container {
            text-align: center;
            padding: 40px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            max-width: 80%;
            margin: 0 20px;
        }

        h1 {
            font-size: 3em;
            margin-bottom: 0.5em;
            color: #333;
        }

        p {
            font-size: 1.2em;
            color: #666;
        }

        .countdown {
            font-size: 2em;
            margin-top: 1em;
        }
    


    <div class="coming-soon-container">
        <h1>Coming Soon</h1>
        <p>Our website is under construction. Stay tuned for the launch!</p>
        <div class="countdown" id="countdown"></div>
    </div>

    
        // Set the date we're counting down to (replace with your launch date)
        var countDownDate = new Date("Dec 31, 2024 15:37:25").getTime();

        // Update the count down every 1 second
        var x = setInterval(function() {
            // Get today's date and time
            var now = new Date().getTime();

            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Display the result in the element with id="countdown"
            document.getElementById("countdown").innerHTML = days + "d " + hours + "h "
            + minutes + "m " + seconds + "s ";

            // If the count down is over, write some text
            if (distance &lt; 0) {
                clearInterval(x);
                document.getElementById(&quot;countdown&quot;).innerHTML = &quot;EXPIRED&quot;;
            }
        }, 1000);
    



				
			

Conclusion

The “Coming Soon Countdown” page serves as a compelling placeholder that not only informs visitors about an upcoming website but also builds excitement and anticipation through a dynamic countdown timer. This simple yet effective approach keeps users engaged and eagerly awaiting the launch, ensuring they return to experience the new site when it goes live.
Facebook
Twitter
LinkedIn
WhatsApp
Email
X
Print
Scroll to Top