Hello developers, today in this blog, you'll learn how to create a Responsive Coming Soon Page using HTML, CSS & JavaScript.
A Coming Soon Page is a temporary landing page that’s announcing a new product or service. The Coming Soon Page creates an expectation and excitement among your visitors and makes them return to your website as soon as it is ready. In the Coming Soon Page, there is a count-down timer with days, hours, minutes, and seconds that informs you when your site will launch.
The Coming Soon Page may contain company name and there will be the information that their product or service will be launched soon. Then it consists of the timer or count-down which indicates the time that how many days the company takes to launch a new product or service. Then, if the visitor wants to know any details of the product or launch, they can contact the company through the social media icons like Facebook, Instagram, Linkedin, and e-mail. These social media icons can be given below the count-down.
To make the Coming Soon Page responsive, we have used the CSS media query property. The count-down in this Responsive Coming Soon Page is performed mainly by using JavaScript.
Responsive Coming Soon Page using HTML, CSS, & JavaScript [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
<!DOCTYPE html>
<html>
<head>
<title>
comming soon page || Learning robo
</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<h1>Company Name</h1>
<h2>We Are Coming Soon.</h2>
<div class="count">
<div class="countd">
<span id="days">00</span><br>
days
</div>
<div class="countd">
<span id="hours">00</span><br>
hours
</div>
<div class="countd">
<span id="mins">00</span><br>
minutes
</div>
<div class="countd">
<span id="secs">00</span><br>
seconds
</div>
</div>
<div class="countso">
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-envelope"></i>
</div>
<div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS provides style to an HTML page. To make the page attractive and page responsive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.
Thank you for reading our blog. If you face any problem in creating this Responsive Coming Soon Page using HTML, CSS, and JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
A Coming Soon Page is a temporary landing page that’s announcing a new product or service. The Coming Soon Page creates an expectation and excitement among your visitors and makes them return to your website as soon as it is ready. In the Coming Soon Page, there is a count-down timer with days, hours, minutes, and seconds that informs you when your site will launch.
The Coming Soon Page may contain company name and there will be the information that their product or service will be launched soon. Then it consists of the timer or count-down which indicates the time that how many days the company takes to launch a new product or service. Then, if the visitor wants to know any details of the product or launch, they can contact the company through the social media icons like Facebook, Instagram, Linkedin, and e-mail. These social media icons can be given below the count-down.
To make the Coming Soon Page responsive, we have used the CSS media query property. The count-down in this Responsive Coming Soon Page is performed mainly by using JavaScript.
Responsive Coming Soon Page using HTML, CSS, & JavaScript [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
*{
box-sizing: border-box;
}
html{
background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
}
body{
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
background:transparent;
height: 100%;
}
.container{
height:435px;
width:60%;
background-color: #202124;
color:#000;
margin:100px auto;
padding:60px;
border-radius: 12px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.container , h1,h2{
text-align: center;
}
.container> h1{
color:#887fff;
}
.container> h2{
color:#fff;
}
.count{
display: flex;
justify-content: center;
font-size: 30px;
}
.countso{
display: flex;
justify-content: center;
font-size: 30px;
margin-top: 20px;
}
.countso > i{
background-color: #887fff;
height:50px;
width:50px;
padding:10px;
border-radius:12px;
margin-left: 10px;
cursor: pointer;
}
.countd{
margin-left: 10px;
color:#fff;
border:2px solid #887fff;
padding:10px;
border-radius: 10px;
width:200px
}
@media only screen and (max-width: 900px) {
.container{
margin:75px auto;
width:90%
}
.count{
font-size: 20px;
}
.countso{
font-size: 20px;
}
.countso > i{
height:40px;
width:40px;
}
}
.credit{
margin-top: 20px;
text-align: center;
color: #fff;
font-weight: 900;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#887fff;
font-weight: bold;
}
var count = new Date("apr 2,2022 00:00:00").getTime();
var x = setInterval( function() {
var now = new Date().getTime();
var d = count - now;
var days = Math.floor(d/(1000*60*60*24));
var hours = Math.floor((d%(1000*60*60*24))/(1000*60*60));
var minutes = Math.floor((d%(1000*60*60))/(1000*60));
var seconds = Math.floor((d%(1000*60))/1000);
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("mins").innerHTML = minutes;
document.getElementById("secs").innerHTML = seconds;
},1000);
Thank you for reading our blog. If you face any problem in creating this Responsive Coming Soon Page using HTML, CSS, and JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team