Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a \"coming soon page\" with CSS and JavaScript?
A "coming soon" page is a temporary webpage displayed to visitors before a website launches. This page typically includes an attractive design, launch information, and a countdown timer to create anticipation. We'll create one using CSS for styling and JavaScript for the countdown functionality.
HTML Structure
First, let's set up the basic HTML structure with a background container and centered content −
<div class="bgimg">
<div class="middle">
<h1>COMING SOON</h1>
<hr>
<h2 class="timer"></h2>
</div>
</div>
Background Image Styling
The background image is applied using CSS properties to create a full-screen cover effect −
.bgimg {
background-image: url("background-image.jpg");
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: white;
font-size: 25px;
filter: grayscale(100%);
}
Center Content Positioning
The content is centered using absolute positioning and transform properties −
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
JavaScript Countdown Timer
The countdown timer calculates the remaining time until launch and updates every second −
var countDownDate = new Date("December 31, 2024 23:59:59").getTime();
var timeClear = setInterval(function() {
var now = new Date().getTime();
var timeLeft = countDownDate - now;
var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
document.querySelector(".timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s";
if (timeLeft < 0) {
clearInterval(timeClear);
document.querySelector(".timer").innerHTML = "We're Live!";
}
}, 1000);
Complete Example
Here's the complete coming soon page with countdown timer −
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 100vh;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
}
.bgimg {
background-image: url("https://images.pexels.com/photos/117602/pexels-photo-117602.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: white;
font-size: 25px;
filter: grayscale(100%);
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
h1 {
font-size: 48px;
margin-bottom: 20px;
background-color: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 10px;
}
.timer {
font-size: 36px;
background-color: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 10px;
margin-top: 20px;
}
hr {
width: 60%;
border: 2px solid white;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="bgimg">
<div class="middle">
<h1>COMING SOON</h1>
<hr>
<h2 class="timer"></h2>
</div>
</div>
<script>
var countDownDate = new Date("December 31, 2024 23:59:59").getTime();
var timeClear = setInterval(function() {
var now = new Date().getTime();
var timeLeft = countDownDate - now;
var days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
document.querySelector(".timer").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s";
if (timeLeft < 0) {
clearInterval(timeClear);
document.querySelector(".timer").innerHTML = "We're Live!";
}
}, 1000);
</script>
</body>
</html>
A full-screen coming soon page with a grayscale background image, centered "COMING SOON" text, and a live countdown timer showing days, hours, minutes, and seconds remaining until the launch date.
Conclusion
This coming soon page combines CSS styling for visual appeal with JavaScript functionality for the countdown timer. The responsive design ensures it looks great on all devices, while the timer creates engagement and anticipation for your website launch.
346 Views
