Create A Coming Soon Page Using Java Script By #BKTutorial

Source Code:

1) Index.html

<link rel="stylesheet" href="style.css" type="text/css" />

<audio src="Music.mp3" type="audio/mpeg" autoplay> </audio> 

<div class="bgimg"> 

<h1>WE ARE COMING VERY SOON !!</h1>

<hr />

<p id="demo" style="font-size:30px"></p>

</div>

<script>

  var countDownDate=new Date("Jun 15,2020 00:00:00").getTime();

  var countDownfunction=setInterval(function(){

  var now=new Date().getTime();

  var distance=countDownDate-now;

  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);

  document.getElementById("demo").innerHTML=days + "d " + hours +"h " + minutes + "m " + seconds+ "s ";

 

 if(distance<0){

   clearInterval(countDownfunction);

   document.getElementById("demo").innerHTML= "EXPRIED";

 }

  },1000); 

</script>

2) Style.css

@charset "utf-8";

/* CSS Document */

body

{

  height:100%; color:#FFF; font-family:Changa; font-weight:lighter; letter-spacing:10px;

  margin:0; padding:0; overflow:hidden;background:url(image.jpeg); background-size:cover;

}

.bgimg{

  height:200px; width:800px; background-color:#000; position:absolute; top:50%; left:50%; 

  transform:translate(-50%,-50%); text-align:center; opacity:.6;

}

h1 #demo

{

  text-align:center;

  filter: contrast(120%);

  margin:-10px;

}

hr{

 margin:auto;

 border:solid 1.5px #FF4560;

}

audio{

  display:hide;

}

Output: