Responsive Coming Soon Page using HTML, CSS & JavaScript with modern UI

Responsive Coming Soon Page using HTML, CSS & JavaScript with modern UI
Hello developers, today in this blog, you'll learn how to create a Responsive Coming Soon Page using HTML, CSS & JavaScript with modern UI.

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.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Coming Soon Page || learning Robo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="Style.css"> </head> <body> <div class="container"> <h2><span>Learning Robo</span><br/> </h2> <h1>We are <br/><span>Comming soon</span><br/> </h1> <div class="count"> <div class="countd"> <span id="days">00</span> DAYS </div> <div class="countd"> <span id="hours">00</span> HOURS </div> <div class="countd"> <span id="minutes">00</span> MINUTES </div> <div class="countd"> <span id="seconds">00</span> SECONDS </div> </div> <button class="btn">Notify Me</button><br/><br/> <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.


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;
}  
JavaScript makes the page work functionally which makes the count-down work. At last, create a JavaScript file with the name of script.js and remember that you've got need to make a file with a .js extension.

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);
We hope you would like this Responsive Coming Soon Page using HTML, CSS, and JavaScript with modern UI.

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.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome