A “Coming Soon” page is a simple yet effective way to inform visitors that your website or product is under construction or will be launched soon. It provides a teaser of what’s to come and allows you to start building anticipation and collecting leads. By using HTML, CSS, and JavaScript, you can create an engaging and visually appealing “Coming Soon” page that keeps visitors informed and interested.
create a file an save it with .html extension and copy and paste the below code in it .
Note: Make sure you change the image path and also you can add your own additions
Html Full Code:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Count Down Landing Page</title>
<link rel="stylesheet" href="soon.css">
</head>
<body>
<!-- Navbar Starts from Here -->
<nav class="navbar">
<h2>Coming Soon</h2>
</nav>
<!-- Navbar Ends Here -->
<!-- Home Section Starts from Here -->
<section class="home-section">
<div class="home-left">
<p>Build your career in coding with codemagnet</p>
<p class="heading">Opportunities <br> <span class="bold-heading">Designed</span> for Real Life</p>
<p class="home-description">
Python course for beginners and advanced levels
</p>
<div class="contact">
<p class="mail">name@youremail.com</p>
<a href="#">Subscribe</a>
</div>
</div>
<div class="home-right">
<img src="logopy.png" alt="">
</div>
</section>
<!-- Home Section Ends Here -->
<!-- Countdown Section Starts from Here -->
<section class="countdown">
<p>Free Python Course For Beginners</p>
<div id="timer-container" class="timer-container">
<p id="days">0<br>Days</p>
<p id="hours">0<br>Hours</p>
<p id="minutes">0<br>Minutes</p>
<p id="seconds">0<br>Seconds</p>
</div>
</section>
<!-- Countdown Section Ends Here -->
<script>
// Set the date we're counting down to
var countDownDate = new Date("Aug 1, 2024 00:00:00").getTime();
// Update the countdown every 1 second
var x = setInterval(function() {
// Get the current date and time
var now = new Date().getTime();
// Calculate the remaining time
var distance = countDownDate - now;
// Calculate 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 countdown timer
document.getElementById("days").innerHTML = days + "<br>Days";
document.getElementById("hours").innerHTML = hours + "<br>Hours";
document.getElementById("minutes").innerHTML = minutes + "<br>Minutes";
document.getElementById("seconds").innerHTML = seconds + "<br>Seconds";
// If the countdown is over, display a message
if (distance < 0) {
clearInterval(x);
document.getElementById("timer-container").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>
create a css code and save it with .css extension and use the file name in the html code
CSS Code:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.navbar {
text-align: center;
padding: 1rem 0;
color: #fff;
background-color: blueviolet;
}
.home-section {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
padding: 1rem;
width: 80%;
margin: 0 auto;
}
.home-left,
.home-right {
width: 28rem;
margin-top: 1.5rem;
}
.heading{
line-height: 2.5rem;
font-size: 2rem;
margin: 1rem auto;
}
.bold-heading{
font-weight: bold;
}
.home-description {
font-size: .9rem;
}
.home-right {
position: relative;
display: flex;
justify-content: center;
align-items: center;
transition: all .4s;
cursor: pointer;
}
.home-right img {
position: relative;
border-radius: 50%;
width: 20rem;
transition: all .4s;
box-shadow: 1px 7px 13px 0 #58555369;
}
.home-right:hover img {
transition: all .4s;
box-shadow: 8px 14px 25px 0 #58555369;
transform: translateY(-5px);
}
.home-left h2 {
margin: 1rem 0;
}
.contact {
margin: .8rem 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.contact p,
a {
margin-top: 1rem;
}
.contact a {
text-decoration: none;
color: white;
background-color: blue;
padding: .7rem .9rem;
border-radius: 10px;
transition: all .5s;
}
.contact a:hover {
transition: all .5s;
box-shadow: 8px 14px 25px 0 #27242469;
transform: translateY(-5px);
}
.countdown {
width: 80%;
margin: 2rem auto;
text-align: center;
}
.timer-container {
padding: 2rem 0;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.timer-container p {
margin: 0 .5rem;
}
.number {
font-size: 2rem;
}
@media screen and (max-width: 570px) {
.home-right img {
width: 15rem;
}
.home-section,
.countdown {
padding: 0;
margin: 1rem auto;
}
}
@media screen and (max-width: 1153px) {
.home-left {
width: 100%;
}
}Output:
Explanation of the above code:
- Navigation Bar (
<nav>): This section contains a heading “Coming Soon,” which likely indicates that the website is under construction or will be launched soon. - Home Section (
<section class="home-section">): This section includes information about the website or product. It mentions building a career in coding with “codemagnet,” describes opportunities designed for real life, and promotes a Python course for beginners and advanced levels. - Countdown Section (
<section class="countdown">): This section displays a countdown timer for a free Python course for beginners. It includes placeholders for days, hours, minutes, and seconds. The JavaScript code calculates the remaining time until August 1, 2024, and updates the countdown timer every second. When the countdown reaches zero, it displays the message “EXPIRED.” - JavaScript (
<script>): The JavaScript code sets the target date for the countdown timer (countDownDate) and then calculates the remaining time in days, hours, minutes, and seconds. It updates the HTML elements with the calculated values every second. If the countdown reaches zero, it displays the “EXPIRED” message and stops the timer.
Conclusion:
Creating a “Coming Soon” page using HTML, CSS, and JavaScript is a great way to inform visitors about your upcoming website or product. By using these technologies, you can create a visually appealing and engaging page that builds anticipation and encourages visitors to stay connected. Remember to keep the design simple yet attractive, and provide clear information about the launch date and any other relevant details.
Leave a Reply