MarketOnline7
Coming Soon Page Builder
Create professional under construction pages with countdown timers and email collection
Design Your Coming Soon Page
Advertisement
Page Preview
This is how your coming soon 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 coming soon page:
Coming Soon 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, #7e22ce 0%, #6b21a8 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: #a855f7;
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 :cite[1]:cite[4].
Email Collection
Capture visitor emails to notify them when your site launches :cite[2]:cite[5].
Custom Design
Choose colors and styles that match your brand identity :cite[3]:cite[8].
Mobile Responsive
Looks great on all devices from smartphones to desktops :cite[10].
SEO Friendly
Search engine optimized to maintain your online presence :cite[5]:cite[9].
Quick Setup
Get your coming soon page live in minutes :cite[7]:cite[10].
