A Coming Soon Page is a temporary landing page that’s announcing a new product or service provided by the company. 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 the site will launch.
The Coming Soon Page may contain the 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.
There is a notification button named Notify Me below the counter, which sends notifications when the page is launched or the timer ends. The count-down in this Responsive Coming Soon Page is performed mainly by using JavaScript.
Responsive Coming Soon Page using HTML, CSS, & JavaScript with modern UI [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.
body,html{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body{
background: #12192c;
font-family: "Montserret",sans-serif;
}
.container{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
color: white;
}
.container h1 {
text-transform: uppercase;
font-size: 30px;
margin: 0px;
text-align: center;
}
.container h2{
text-transform: uppercase;
font-size: 50px;
margin: 0px;
text-align: center;
}
.count{
margin: 40px;
}
.countd{
display: inline-block;
width: 80px;
height: 80px;
border: 2px solid#21D4FD;
margin: 0 30px;
font-size: 12px;
border-radius: 12px;
overflow: hidden;
}
.countd span{
display:block;
font-size: 26px;
margin-top: 14px;
}
span{
background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.btn{
width: 140px;
margin-top: 30px;
height: 40px;
border: none;
color: #fff;
border-radius: 20px;
background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
cursor:pointer;
}
.credit{
text-align: center;
color: #fff;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#21D4FD;
font-weight: bold;
}
Note: You can change the date and time as you want.
let count = new Date("april 16,2022 00:01:00").getTime();
let x = setInterval(function() {
let now = new Date().getTime();
let d = count - now;
let days = Math.floor(d/(1000*60*60*24));
let hours = Math.floor((d%(1000*60*60*24))/(1000*60*60));
let minutes = Math.floor((d%(1000*60*60))/(1000*60));
let seconds = Math.floor((d%(1000*60))/1000);
document.getElementById("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
if(d <= 0){
clearInterval(x);
}
},1000);
Thank you for reading our blog. If you face any problem in creating this Responsive Coming Soon Page using HTML, CSS, and JavaScript with modern UI, 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