103 lines
2.9 KiB
HTML
103 lines
2.9 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title>C3 Counter</title>
|
|
<meta name="description" content="An image crossfade animation done with CSS3">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="css/style2.css">
|
|
<link rel="stylesheet" href="css/demo2.css">
|
|
<link rel="stylesheet" href="css/font.css">
|
|
<script>
|
|
var countDownDate = new Date("dec 28, 2019 00:00:01").getTime();
|
|
var x = setInterval(function() {
|
|
var now = new Date().getTime();
|
|
var distance = countDownDate - now;
|
|
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
|
document.getElementById("demo").innerHTML = "there are only " + ("<br>") + days + " days left" + ("<br>") + " until 36C3";
|
|
if (distance < 0) {
|
|
clearInterval(x);
|
|
document.getElementById("demo").innerHTML = "It's Congress";
|
|
}
|
|
}, 1000);
|
|
</script>
|
|
<style type="text/css">
|
|
body {
|
|
overflow:hidden;
|
|
}
|
|
</style>
|
|
<script src="src/jquerz.min.js"></script>
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
$('.fadein img:gt(0)').hide();
|
|
|
|
setInterval(function () {
|
|
$('.fadein :first-child').fadeOut(2000)
|
|
.next('img')
|
|
.fadeIn(2000)
|
|
.end()
|
|
.appendTo('.fadein');
|
|
}, 6000); // 4 seconds
|
|
});
|
|
</script>
|
|
<style>
|
|
p {
|
|
text-align: center;
|
|
font-size: 60px;
|
|
margin-top: 0px;
|
|
color: #fff;
|
|
position: relative;
|
|
z-index: 99;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
font-family: sans-serif;
|
|
text-align: left;
|
|
padding-top: 25px;
|
|
padding-left: 25px;
|
|
font-size: 7em;
|
|
line-height: 0.8;
|
|
font-weight: 900;
|
|
font-family: 'c3';
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p id="demo"></p>
|
|
|
|
<div class="fadein" >
|
|
<img src="img/01.jpg">
|
|
<img src="img/02.jpg">
|
|
<img src="img/03.jpg">
|
|
<img src="img/04.jpg">
|
|
<img src="img/05.jpg">
|
|
<img src="img/06.jpg">
|
|
<img src="img/07.jpg">
|
|
<img src="img/08.jpg">
|
|
<img src="img/09.jpg">
|
|
<img src="img/10.jpg">
|
|
<img src="img/11.jpg">
|
|
<img src="img/12.jpg">
|
|
<img src="img/13.jpg">
|
|
<img src="img/14.jpg">
|
|
<img src="img/15.jpg">
|
|
<img src="img/16.jpg">
|
|
<img src="img/17.jpg">
|
|
<img src="img/18.jpg">
|
|
<img src="img/19.jpg">
|
|
<img src="img/20.jpg">
|
|
<img src="img/21.jpg">
|
|
<img src="img/22.jpg">
|
|
<img src="img/23.jpg">
|
|
<img src="img/24.jpg">
|
|
<img src="img/25.jpg">
|
|
<img src="img/26.jpg">
|
|
<img src="img/27.jpg">
|
|
<img src="img/28.jpg">
|
|
<img src="img/29.jpg">
|
|
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|