Skip to main content

Coming Soon Website Landing Page Design | HTML And CSS

coming-soon-website-template-landing-page

Coming Soon Website Landing Page Design Using HTML And CSS

"Coming Soon Page Design" is used when you want to launch a new website. But you can also use this animation in the offer card design.

The design concept here is very simple, we just add the background image and design a block that contains timing clock. We are using JavaScript for clock design. Very basic HTML and css have been used to align that clock and background image.

You can learn more about website development effects if you follow our other article.



01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Coming Soon Website Landing Page Design</title> 
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<body>
  <div class="logo">
    <h1>LOGO</h1>
  </div>
  <div class="bgbox">
    <div class="timebox">
      <h1>COMING SOON</h1>
      <hr />
      <p id="time"></p>
    </div>
  </div>
</body>



03. CSS

You can download image form here.

body,html{
  margin: 0px;
  height: 100%;
  font-family: sans-serif , arial;
}
.bgbox{
  height: 100%;
  width: 100%;
  background-image: url("bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.logo{
    position: absolute;
    top: 0px;
    color: white;
    margin: 0px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}
.logo h1{
  margin-left: 72px;
  letter-spacing: 2px;
  font-size: 26px;
}
.timebox{
  position: absolute;
  top: 20%;
  right: 5%;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  padding: 60px 80px;
  font-size: 24px;
  color: black;
}
.timebox h1{
  letter-spacing: 8px;
  line-height: 10%;
}
#time {
  font-size: 42px;
}


04. JAVASCRIPT

var countDownDate = new Date("Jun 1 , 2021 12:00:00").getTime();
var countDownFunction = setInterval(function(){
  var now = new Date().getTime();
  var distance = countDownDate - now ;
  var d = Math.floor(distance / (1000 * 60 * 60 * 24));
  var h = Math.floor(( distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var m = Math.floor(( distance % (1000 * 60 * 60)) / (1000 * 60));
  var s = Math.floor(( distance % (1000 * 60)) / (1000));
  d = addZero(d);
  h = addZero(h);
  m = addZero(m);
  s = addZero(s);
  document.getElementById("time").innerHTML = d + "D: " + h + "H: " + m + "M: " + s + "S";
  if (distance < 0) {
    clearInterval(countDownFunction);
    document.getElementById("time").innerHTML = "WELCOME";
  }
  function addZero(a){
    if (a < 10) {
      a = "0" + a;
    }
    return a;
  }

},1000);


05. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




06. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.





RELATED POST:

Comments

Post a Comment