Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Shreya-idle
Shreya-idle authored Sep 23, 2023
0 parents commit aea9827
Show file tree
Hide file tree
Showing 2 changed files with 159 additions and 0 deletions.
159 changes: 159 additions & 0 deletions countdowntimer.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CountDown-Timer</title>
<style>
* {
margin: 0;
padding: 0;
font-family: 'poppins', sans-serif;
box-sizing: border-box;
}

.container {
width: 100vw;
height: 100vh;
background-image: url(background.png);
background-image: linear-gradient(rgb(54, 133, 67),rgb(90, 70, 192), rgb(48, 145, 181)) ;
background-position: center;
background-size: cover;
padding: 0 8%;
position: relative;
}

.logo {
width: 120px;
padding: 20px 0;
cursor: pointer;
}

.content {
top: 50%;
position: absolute;
transform: translateY(-50%);
color: #fff;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.content h1 {
font-size: 64px;
font-weight: 600;
}

.content h1 span {
color: #ff3753;
}

.content button {
background: transparent;
border: 2px solid #fff;
outline: none;
padding: 12px 25px;
color: #fff;
display: flex;
align-items: center;
margin-top: 30px;
cursor: pointer;
}

.content button img {
width: 15px;
margin-left: 10px;
}

.countdown-time {
display: flex;
margin-left: -16px;
}

.countdown-time div {
flex-basis: 100px;
margin: 9px 15px 5px;
}

.countdown-time div p {
font-size: 60px;
margin-bottom: -14px;
letter-spacing: 1px;
}

/* .design{
width: 30%;
position: absolute;
right: 10%;
bottom: 0;
animation: cloth 5s linear infinite;
text-align: right;
margin-left: 550px;
}
@keyframes cloth {
0%{
opacity: 0;
top: 0;
}
50%{
opacity:0.5;
top: 50;
}
to{
top: 155;
opacity: 1;
}
} */
</style>
</head>

<body>
<div class="container">
<img src="vistalogosih.jpeg" class="logo" alt="">
<div class="content">
<p>Website Is Under Maintenance</p>
<h1>We're <span>Launching</span> Soon</h1>
<div class="countdown-time">
<div class="countdown-time">
<div>
<p id="days">00</p>
<span>Days</span>
</div>
<div>
<p id="hours">00</p>
<span>Hours</span>
</div>
<div>
<p id="minutes">00</p>
<span>Minutes</span>
</div>
<div>
<p id="seconds">00</p>
<span>Seconds</span>
</div>
</div>
</div>
<button type="button">Learn More<img src="triangle.png"></button>
</div>
<!-- <img src="replace.png" class="design"> -->
</div>
<script>

var countDownDate = new Date("OCT 1, 2023 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>
Binary file added vistalogosih.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit aea9827

Please sign in to comment.