Coming soon page using JavaScript

Today we will share with you a snippet about Coming Soon or Maintenance Page Design. Before collecting the source code of the snippet, take a look at how it is coded in the video below. We have many videos on front-end development on our YouTube channel. If you like the videos, you can subscribe to our YouTube channel.

We hope that you have watched the entire video to understand how this small project is done. What is a coming soon landing page? Suppose you have a website. You want to add a new feature or product to your website. The layout of the website will be chaotic because you will be messing with the coding, which is not what you want your visitors to see. In this situation, you can create this coming soon landing page and show it to the visitors. This means that when someone searches your web URL, they will see this page. They will understand that website is under maintenance.

Usually, a coming soon or maintenance page has a countdown clock. along with a headline text which indicates what the page is all about. it also contains the company logo, a brief text about why the maintenance is going on, and a call to action button. Coming soon landing pages are usually very simple. The primary purpose is ruined by excess text or content. It is better not to add too much information. Set a probable date when your website is going to relaunch with the countdown clock. With some text, you can briefly tell what new features or benefits your visitors are going to get in the future.

You May also like:

Coming soon page using javascript [ Source Code ]:

If you want, you can create a separate JS file and put the JavaScript code in it. We have added the code to the HTML page in this project. As the project is completely JavaScript based there is no need to add jQuery CDN to it. Once the files are set up, copy the source code from the code box below and paste it into your files. If the code doesn't work then download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coming Soon Page Using Html CSS & Javascript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="content">        
        <h2>Coming Soon</h2>
        <div class="timing">00 : 00 : 00 : 00</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum cupiditate tempore, sapiente dicta, iusto atque!</p>
        <a href="#">Learn More</a>
    </div>

    <script>
        let customeDate = new Date("September 10, 2022 12:00:00").getTime();
        let timer = setInterval(timing, 1000);
        function timing(){
            let now = new Date().getTime();
            let x = customeDate - now;
            if(x > 0){
                
                let days = Math.floor(x / (1000*60*60*24));
                
                let hours = Math.floor((x % (1000*60*60*24)) / (1000*60*60));
                
                let mins = Math.floor((x % (1000*60*60)) / (1000*60));
                
                let secs = Math.floor((x % (1000*60)) / 1000);
                
                let time = `${days}d : ${hours}h : ${mins}m : ${secs}s`;
                document.querySelector('.timing').innerHTML = time;
            }
        }
    </script>
</body>
</html>

ADD CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body{
    min-height: 100vh;
    background: url('https://cdn.pixabay.com/photo/2018/05/04/18/37/technology-3374658_960_720.jpg') no-repeat right;
    background-size: cover;
}
.content{
    width: 100%;
    height: 100vh;
    background: #0006;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.timing {
	font-size: 40px;
}
.content h2 {
	font-size: 100px;
	font-weight: 900;
	margin: 10px;
	font-family: bebas neue;
}
.content a {
	text-decoration: none;
	background: #fff;
	color: #111;
	padding: 10px 35px;
	border-radius: 50px;
}

.content p {
	margin: 0 auto;
	width: 35%;
	text-align: center;
	font-size: 15px;
	text-transform: none;
	font-weight: 400;
	line-height: 1.9;
	padding: 15px 0;
}
@media (min-width: 768px) and (max-width:991px){
    .content p {
	width: 70%;
}
}
@media (max-width: 767px){
    .content h2 {
  font-size: 40px;
}
.timing {
  font-size: 25px;
}
.content p {
  width: 95%;
}
}

Hopefully, the code is working. On our website, there is a lot of information regarding front-end development. Clicking on the Load More button on the home page allows you to explore them. If you enjoy what you see on the website, you can share it with other people. We would like to thank you very much for visiting our website.

DOWNLOAD CODE

Coming soon page using javascript [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Coming soon page using JavaScript

Coming soon page using javascript [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form