Site Under Construction Template

Site Under Construction Template – A Simple Guide

If you're building a new website or updating an existing one, a Site Under Construction page helps keep visitors informed while you work behind the scenes. In this guide, we'll explain how this site under construction template works, why it's useful, and how you can customize it easily.

Why Use a Site Under Construction Template?

Before diving into the code, let's understand why this template is beneficial:

✅ Keeps Visitors Informed – Instead of seeing a broken or empty page, users know your site will be live soon.
✅ Builds Anticipation – A countdown timer creates excitement for your launch.
✅ Collects Emails – The "Notify Me" button can help gather leads before your site goes live.
✅ Professional Look – A well-designed under-construction page maintains credibility.

How This Site Under Construction Template Works

The provided template is a clean, responsive HTML page with a countdown timer. Here's a breakdown of how it functions:

1. The Basic Structure (HTML)

The template uses simple HTML to create:

A heading (<h1>) – "Website Under Construction"
A short message (<p>) – "We're working hard to bring you an amazing experience..."
A countdown timer (days, hours, minutes, seconds)
A "Notify Me" button

2. Stylish Design (CSS)

The CSS ensures the page looks modern and attractive:

Gradient Background – A sleek blue-purple gradient makes it visually appealing.
Responsive Layout – Works on mobile and desktop.
Clean Typography – Uses the Poppins font for readability.
Animated Time Blocks – The countdown numbers are displayed in styled boxes.

3. Dynamic Countdown (JavaScript)

The JavaScript handles the countdown logic:

Sets a launch date (default: 10 days from now).
Calculates remaining time in days, hours, minutes, and seconds.
Updates every second for a real-time effect.
Displays "We're Live!" when the countdown ends.

How to Customize This Template

Want to tweak this site under construction template? Here's how:

1. Change the Launch Date

In the JavaScript section, modify:

const countDownDate = new Date().getTime() + (10 * 24 * 60 * 60 * 1000); // 10 days from now

Change 10 to your preferred number of days.

2. Update Colors & Fonts

Edit the CSS to match your brand:

background: linear-gradient(135deg, #6a11cb, #2575fc); /* Change gradient colors */
font-family: 'Poppins', sans-serif; /* Try 'Roboto', 'Open Sans', etc. */

3. Modify the Text

Update the heading and message in the HTML:

<h1>Coming Soon: Our Awesome Website!</h1>
<p>We're crafting something special for you. Stay tuned!</p>

4. Connect the "Notify Me" Button

Currently, the button doesn't function. To make it work:

Add an email collection service (like Mailchimp).
Use a simple PHP script or a form handler like Formspree.

Example:

<form action="" method="POST">
    <input type="email" name="email" placeholder="Enter your email" required>
    <button type="submit" class="notify-btn">Notify Me</button>
</form>

Full Source code:-


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Under Construction</title>
   
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
	<style>
	* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

.container {
    text-align: center;
    max-width: 600px;
    padding: 20px;
}

h1 {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 20px;
}

p {
    font-size: 1.2rem;
    margin-bottom: 40px;
}

.countdown {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.time {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    width: 100px;
}

.time span {
    font-size: 2.5rem;
    font-weight: 600;
}

.label {
    font-size: 1rem;
    margin-top: 5px;
    opacity: 0.8;
}

.notify-btn {
    background: #fff;
    color: #6a11cb;
    border: none;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.notify-btn:hover {
    background: #f0f0f0;
}
	</style>
</head>
<body>
    <div class="container">
        <div class="content">
            <h1>Website Under Construction</h1>
            <p>We're working hard to bring you an amazing experience. Stay tuned!</p>
            <div class="countdown">
                <div class="time">
                    <span id="days">00</span>
                    <div class="label">Days</div>
                </div>
                <div class="time">
                    <span id="hours">00</span>
                    <div class="label">Hours</div>
                </div>
                <div class="time">
                    <span id="minutes">00</span>
                    <div class="label">Minutes</div>
                </div>
                <div class="time">
                    <span id="seconds">00</span>
                    <div class="label">Seconds</div>
                </div>
            </div>
            <button class="notify-btn">Notify Me When It's Ready</button>
        </div>
    </div>
    <script>
	// Set the date we're counting down to (e.g., 10 days from now)
const countDownDate = new Date().getTime() + (10 * 24 * 60 * 60 * 1000);

// Update the countdown every 1 second
const countdownFunction = setInterval(() => {
    // Get today's date and time
    const now = new Date().getTime();

    // Find the distance between now and the countdown date
    const distance = countDownDate - now;

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

    // Display the result in the respective elements
    document.getElementById("days").innerText = String(days).padStart(2, "0");
    document.getElementById("hours").innerText = String(hours).padStart(2, "0");
    document.getElementById("minutes").innerText = String(minutes).padStart(2, "0");
    document.getElementById("seconds").innerText = String(seconds).padStart(2, "0");

    // If the countdown is over, display a message
    if (distance < 0) {
        clearInterval(countdownFunction);
        document.querySelector(".countdown").innerHTML = "<h2>We're Live!</h2>";
    }
}, 1000);
	</script>
</body>
</html>

Final Thoughts

This site under construction template is an easy, effective way to manage visitor expectations while you build your website. With simple HTML, CSS, and JavaScript, you can launch this page quickly and customize it as needed.

🚀 Ready to use it? Just copy the provided code, tweak it, and upload it to your server!

Need more features? Consider adding:

📧 An email signup form
📱 Social media buttons
🔔 Browser notifications

Site Under Construction Template – A Simple Guide