MarketOnline7
Website Under Construction Tool
Create professional coming soon pages with countdown timers and contact forms
Design Your Under Construction Page
Advertisement
Page Preview
This is how your under construction page will look:
Your Awesome Website
Something amazing is coming soon
00
Days
00
Hours
00
Minutes
00
Seconds
Mobile Preview
Get Your HTML Code
Copy and paste this code to your website to display your under construction page:
Under Construction Page Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Awesome Website - Coming Soon</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 50px;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 800px;
background: rgba(255, 255, 255, 0.1);
padding: 40px;
border-radius: 15px;
backdrop-filter: blur(10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 3rem;
margin-bottom: 20px;
}
p {
font-size: 1.2rem;
margin-bottom: 30px;
opacity: 0.9;
}
.countdown {
display: flex;
justify-content: center;
gap: 20px;
margin: 40px 0;
}
.countdown-item {
background: rgba(255, 255, 255, 0.15);
padding: 20px;
border-radius: 10px;
min-width: 100px;
}
.countdown-value {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 5px;
}
.countdown-label {
font-size: 0.9rem;
opacity: 0.8;
}
.subscribe-form {
display: flex;
justify-content: center;
margin: 30px 0;
}
.subscribe-input {
padding: 15px 20px;
border: none;
border-radius: 8px 0 0 8px;
width: 300px;
font-size: 1rem;
}
.subscribe-btn {
padding: 15px 25px;
background: #4f46e5;
color: white;
border: none;
border-radius: 0 8px 8px 0;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
}
.social-links {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 30px;
}
.social-link {
display: inline-block;
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
color: white;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s ease;
}
.social-link:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-3px);
}
</style>
</head>
<body>
<div class="container">
<h1>Your Awesome Website</h1>
<p>Something amazing is coming soon. Stay tuned!</p>
<div class="countdown">
<div class="countdown-item">
<div class="countdown-value" id="days">00</div>
<div class="countdown-label">Days</div>
</div>
<div class="countdown-item">
<div class="countdown-value" id="hours">00</div>
<div class="countdown-label">Hours</div>
</div>
<div class="countdown-item">
<div class="countdown-value" id="minutes">00</div>
<div class="countdown-label">Minutes</div>
</div>
<div class="countdown-item">
<div class="countdown-value" id="seconds">00</div>
<div class="countdown-label">Seconds</div>
</div>
</div>
<div class="subscribe-form">
<input type="email" class="subscribe-input" placeholder="Enter your email for updates">
<button class="subscribe-btn">Notify Me</button>
</div>
<div class="social-links">
<a href="#" class="social-link">FB</a>
<a href="#" class="social-link">TW</a>
<a href="#" class="social-link">IG</a>
<a href="#" class="social-link">LI</a>
</div>
</div>
<script>
// Set the launch date
const launchDate = new Date('2023-12-31T23:59:59');
function updateCountdown() {
const now = new Date();
const diff = launchDate - now;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
document.getElementById('days').textContent = days.toString().padStart(2, '0');
document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
}
// Update countdown every second
setInterval(updateCountdown, 1000);
updateCountdown();
</script>
</body>
</html>
Countdown Timer
Build excitement with a customizable countdown to your launch date.
Email Collection
Capture visitor emails to notify them when your site launches.
Custom Design
Choose colors and styles that match your brand identity.
Mobile Responsive
Looks great on all devices from smartphones to desktops.
SEO Friendly
Search engine optimized to maintain your online presence.
Quick Setup
Get your under construction page live in minutes.
