Launching Page(Javascript)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Launching</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img src="logo.png" alt="" class="logo">
<div class="content">
<p>Website Is Under Maintenance</p>
<h1>We're <span>Launching</span> Soon</h1>
<div class="time">
<div>
<p id="days">00</p>
<br>
<span>Days</span>
</div>
<div>
<p id="hours">00</p>
<br>
<span>Hours</span>
</div>
<div>
<p id="minutes">00</p>
<br>
<span>Minut</span>
</div>
<div>
<p id="seconds">00</p>
<br>
<span>Sec</span>
</div>
<button type="button">Learn More <img src="triangle.png" alt=""></button>
</div>
</div>
<script>
var countDownDate = new Date("Sep 20, 2024 00:00:00").getTime();
var x = 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("days").innerHTML = days;
document.getElementById("hours").innerHTML = hours;
document.getElementById("minutes").innerHTML = minutes;
document.getElementById("seconds").innerHTML = seconds;
}, 1000);
</script>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
font-family: 'Times New Roman', Times, serif;
box-sizing: border-box;
}
body {
width: auto;
height: 100vh;
background-image: url(background.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
}
.logo {
width: 150px;
padding: 20px 0;
cursor: pointer;
margin-left: 65px;
}
.content {
top: 50%;
position: absolute;
transform: translateY(-50%);
color: #fff;
margin-left: 65px;
}
.content h1 {
font-size: 64px;
font-weight: 600;
}
.content h1 span {
color: aqua;
}
.content button {
background: transparent;
border: 2px solid #fff;
outline: none;
padding: 12px 25px;
color: #fff;
display: flex;
align-items: center;
margin-top: 0px;
cursor: pointer;
margin-left: 15px;
}
.content button img {
width: 15px;
margin-left: 10px;
margin-right: 2px;
}
.time {
display: flex;
margin-top: 47px;
}
.time div {
flex-basis: 100px;
}
.time p {
font-size: 50px;
margin-bottom: -14px;
font-weight: 200;
}
.time span{
font-size: 25px;
font-weight: 30;
}
.rocket {
width: 250px;
position: relative;
left: 130%;
bottom: 0;
animation: rocket 4s linear infinite;
}
Output-
https://debadatta77.github.io/Launching-Page/
.png)
Comments
Post a Comment