@ -0,0 +1,192 @@ |
|||
@font-face { |
|||
font-family: 'BebasNeueRegular'; |
|||
src: url('fonts/BebasNeue-webfont.eot'); |
|||
src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/BebasNeue-webfont.woff') format('woff'),url('fonts/BebasNeue-webfont.ttf') format('truetype'), url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); |
|||
font-weight: normal; |
|||
font-style: normal; } |
|||
/* CSS reset */ |
|||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td |
|||
{ |
|||
margin:0; |
|||
padding:0; |
|||
} |
|||
html,body { |
|||
margin:0; |
|||
padding:0; |
|||
} |
|||
table { |
|||
border-collapse:collapse; |
|||
border-spacing:0; |
|||
} |
|||
fieldset,img { |
|||
border:0; |
|||
} |
|||
input{ |
|||
border:1px solid #b0b0b0; |
|||
padding:3px 5px 4px; |
|||
color:#979797; |
|||
width:190px; |
|||
} |
|||
address,caption,cite,code,dfn,th,var { |
|||
font-style:normal; |
|||
font-weight:normal; |
|||
} |
|||
ol,ul { |
|||
list-style:none; |
|||
} |
|||
caption,th { |
|||
text-align:left; |
|||
} |
|||
h1,h2,h3,h4,h5,h6 { |
|||
font-size:100%; |
|||
font-weight:normal; |
|||
} |
|||
q:before,q:after { |
|||
content:''; |
|||
} |
|||
abbr,acronym { border:0; |
|||
} |
|||
/* General Demo Style */ |
|||
body{ |
|||
font-family: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; |
|||
background: #000; |
|||
font-weight: 400; |
|||
font-size: 15px; |
|||
color: #aa3e03; |
|||
overflow-y: scroll; |
|||
overflow-x: hidden; |
|||
} |
|||
.ie7 body{ |
|||
overflow:hidden; |
|||
} |
|||
a{ |
|||
color: #333; |
|||
text-decoration: none; |
|||
} |
|||
.container{ |
|||
position: relative; |
|||
text-align: center; |
|||
} |
|||
.clr{ |
|||
clear: both; |
|||
} |
|||
.container > header{ |
|||
padding: 30px 30px 10px 20px; |
|||
margin: 0px 20px 10px 20px; |
|||
position: relative; |
|||
display: block; |
|||
text-shadow: 1px 1px 1px rgba(0,0,0,0.2); |
|||
text-align: left; |
|||
} |
|||
.container > header h1{ |
|||
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; |
|||
font-size: 35px; |
|||
line-height: 35px; |
|||
position: relative; |
|||
font-weight: 400; |
|||
color: #fff; |
|||
text-shadow: 1px 1px 1px rgba(0,0,0,0.3); |
|||
padding: 0px 0px 5px 0px; |
|||
} |
|||
.container > header h1 span{ |
|||
|
|||
} |
|||
.container > header h2, p.info{ |
|||
font-size: 16px; |
|||
font-style: italic; |
|||
color: #f8f8f8; |
|||
text-shadow: 1px 1px 1px rgba(0,0,0,0.6); |
|||
} |
|||
/* Header Style */ |
|||
.codrops-top{ |
|||
font-family: Arial, sans-serif; |
|||
line-height: 24px; |
|||
font-size: 11px; |
|||
width: 100%; |
|||
background: #000; |
|||
opacity: 0.9; |
|||
text-transform: uppercase; |
|||
z-index: 9999; |
|||
position: relative; |
|||
-moz-box-shadow: 1px 0px 2px #000; |
|||
-webkit-box-shadow: 1px 0px 2px #000; |
|||
box-shadow: 1px 0px 2px #000; |
|||
} |
|||
.codrops-top a{ |
|||
padding: 0px 10px; |
|||
letter-spacing: 1px; |
|||
color: #ddd; |
|||
display: block; |
|||
float: left; |
|||
} |
|||
.codrops-top a:hover{ |
|||
color: #fff; |
|||
} |
|||
.codrops-top span.right{ |
|||
float: right; |
|||
} |
|||
.codrops-top span.right a{ |
|||
float: none; |
|||
display: inline; |
|||
} |
|||
|
|||
p.codrops-demos{ |
|||
display: block; |
|||
padding: 15px 0px; |
|||
} |
|||
p.codrops-demos a, |
|||
p.codrops-demos a.current-demo, |
|||
p.codrops-demos a.current-demo:hover{ |
|||
display: inline-block; |
|||
border: 1px solid #6d0019; |
|||
padding: 4px 10px 3px; |
|||
font-size: 13px; |
|||
line-height: 18px; |
|||
margin: 2px 3px; |
|||
font-weight: 800; |
|||
-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1); |
|||
-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1); |
|||
box-shadow: 0px 1px 1px rgba(0,0,0,0.1); |
|||
color:#fff; |
|||
-webkit-border-radius: 5px; |
|||
-moz-border-radius: 5px; |
|||
border-radius: 5px; |
|||
background: #a90329; |
|||
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); |
|||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); |
|||
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); |
|||
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); |
|||
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); |
|||
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); |
|||
} |
|||
p.codrops-demos a:hover{ |
|||
background: #6d0019; |
|||
} |
|||
p.codrops-demos a:active{ |
|||
background: #6d0019; |
|||
background: -moz-linear-gradient(top, #6d0019 0%, #8f0222 56%, #a90329 100%); |
|||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6d0019), color-stop(56%,#8f0222), color-stop(100%,#a90329)); |
|||
background: -webkit-linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%); |
|||
background: -o-linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%); |
|||
background: -ms-linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%); |
|||
background: linear-gradient(top, #6d0019 0%,#8f0222 56%,#a90329 100%); |
|||
-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.9); |
|||
-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.9); |
|||
box-shadow: 0px 1px 1px rgba(255,255,255,0.9); |
|||
} |
|||
p.codrops-demos a.current-demo, |
|||
p.codrops-demos a.current-demo:hover{ |
|||
color: #A5727D; |
|||
background: #6d0019; |
|||
} |
|||
/* Media Queries */ |
|||
@media screen and (max-width: 767px) { |
|||
.container > header{ |
|||
text-align: center; |
|||
} |
|||
p.codrops-demos { |
|||
position: relative; |
|||
top: auto; |
|||
left: auto; |
|||
} |
|||
} |
@ -0,0 +1,5 @@ |
|||
@font-face { |
|||
font-family: "c3"; |
|||
src:url('etc/BebasNeue.otf'); |
|||
src:url('../etc/BebasNeueLight.otf'); |
|||
} |
@ -0,0 +1,17 @@ |
|||
.fadein img { |
|||
position: fixed; |
|||
left: 0; |
|||
top: 0; |
|||
z-index: 0; |
|||
object-fit: cover; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
} |
|||
.fadein:after{ |
|||
background: url(../img/pattern.png) repeat top left; |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; right: 0; |
|||
bottom: 0; left: 0; |
|||
z-index: 98; |
|||
} |
After Width: | Height: | Size: 227 KiB |
After Width: | Height: | Size: 189 KiB |
After Width: | Height: | Size: 340 KiB |
After Width: | Height: | Size: 236 KiB |
After Width: | Height: | Size: 304 KiB |
After Width: | Height: | Size: 246 KiB |
After Width: | Height: | Size: 419 KiB |
After Width: | Height: | Size: 447 KiB |
After Width: | Height: | Size: 219 KiB |
After Width: | Height: | Size: 523 KiB |
After Width: | Height: | Size: 310 KiB |
After Width: | Height: | Size: 208 KiB |
After Width: | Height: | Size: 281 KiB |
After Width: | Height: | Size: 339 KiB |
After Width: | Height: | Size: 325 KiB |
After Width: | Height: | Size: 541 KiB |
After Width: | Height: | Size: 443 KiB |
After Width: | Height: | Size: 382 KiB |
After Width: | Height: | Size: 452 KiB |
After Width: | Height: | Size: 292 KiB |
After Width: | Height: | Size: 304 KiB |
After Width: | Height: | Size: 501 KiB |
After Width: | Height: | Size: 496 KiB |
After Width: | Height: | Size: 512 KiB |
After Width: | Height: | Size: 546 KiB |
After Width: | Height: | Size: 219 KiB |
After Width: | Height: | Size: 320 KiB |
After Width: | Height: | Size: 211 KiB |
After Width: | Height: | Size: 325 KiB |
After Width: | Height: | Size: 118 B |
@ -0,0 +1,102 @@ |
|||
<!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> |