<div class="pizzaTime"><span class="pizza">Pizza</span> <span class="lunch">Lunch</span></div>
<div class="clockbox">
<p id="countdown1" style="display:none"></p>
<p class="colon" style="display:none"> :</p>
<p id="countdown2" style="display:none"></p>
<p class="colon" style="display:none"> :</p>
<p id="countdown3" style="display:none"></p>
<p class="colon" style="display:none"> :</p>
<p id="countdown4" style="display:none"></p>
</div>
/*Downloaded from https://www.codeseek.co/catalyst_red/pizza-clock-LryOzZ */
body {
background-color: #000;
}
p {
text-align: center;
font-size: 60px;
}
#countdown1,
#countdown2,
#countdown3,
#countdown4 {
color: white;
width: 130px;
margin: 0 auto;
padding: 20px;
display: inline-block;
}
.clockbox {
width: 900px;
margin: 0 auto;
display: block;
text-align: center;
font-family: 'Monoton', cursive;
-webkit-animation: neon1 1.5s ease-in-out infinite alternate;
-moz-animation: neon1 1.5s ease-in-out infinite alternate;
animation: neon1 1.5s ease-in-out infinite alternate;
}
.colon
{
width: 20px;
display: inline-block;
padding-left: 15px;
}
.pizzaTime {
text-align: center;
font-size: 7em;
margin: 50px 0 30px 0;
color: #fff;
font-family: 'Monoton', cursive;
-webkit-animation: neon1 1.5s ease-in-out infinite alternate;
-moz-animation: neon1 1s ease-in-out infinite alternate;
animation: neon1 1s ease-in-out infinite alternate;
}
.pizza {
position: relative;
animation: moveinleft 2s linear;
}
.lunch {
position: relative;
animation: moveinright 2s linear;
}
@-webkit-keyframes neon1 {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FF1177, 0 0 70px #FF1177, 0 0 80px #FF1177, 0 0 100px #FF1177, 0 0 150px #FF1177;
}
to {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FF1177, 0 0 35px #FF1177, 0 0 40px #FF1177, 0 0 50px #FF1177, 0 0 75px #FF1177;
}
}
@keyframes moveinleft {
0% {left: -200px; opacity: 0.0;}
45% {opacity: 0.2;}
90% {left: 10px;}
100% {left: 0px;}
}
@keyframes moveinright {
0% {left: 200px; opacity: 0.0;}
45% {opacity: 0.2;}
90% {left: -10px;}
100% {left: 0px;}
}
/*Downloaded from https://www.codeseek.co/catalyst_red/pizza-clock-LryOzZ */
// Set the date we're counting down to
var countDownDate = new Date("July 25, 2018 12:00:00").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get todays date and time
var now = new Date().getTime();
// Find the distance between now an the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
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);
// Output the result in elements according to measure of time
document.getElementById("countdown1").innerHTML = days + "d";
document.getElementById("countdown2").innerHTML = hours + "h";
document.getElementById("countdown3").innerHTML = minutes + "m";
document.getElementById("countdown4").innerHTML = seconds + "s";
// If the count down is over, have 00 displayed
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown1").innerHTML = "00";
}
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown2").innerHTML = "00";
}
}, 1000);
window.setInterval(function(){
var current = new Date();
var reveal = new Date("July 21, 2017 10:05:00")
if(current.getTime()>reveal.getTime()){
$('#countdown1').show();
}
if(current.getTime()>reveal.getTime()){
$('#countdown2').show();
}
if(current.getTime()>reveal.getTime()){
$('#countdown3').show();
}
if(current.getTime()>reveal.getTime()){
$('#countdown4').show();
}
if(current.getTime()>reveal.getTime()){
$(".colon").show();
}
}, 1000);