-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
executable file
·132 lines (121 loc) · 8.89 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<html class=" js no-touch multiplebgs backgroundsize cssgradients csstransforms3d csstransitions svg devicemotion deviceorientation"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1">
<title>Beercamp 2012</title>
<link type="text/css" rel="stylesheet" href="css/reset.css">
<link type="text/css" rel="stylesheet" href="css/base.css">
</head>
<body>
<div class="scene" style="transform: scale3d(0.842758620689655, 0.842758620689655, 0.842758620689655) rotateX(-15deg) rotateY(-4.5625deg) translateY(100px);">
<div class="book on-cover" style="cursor: -webkit-grab; transform: translate3d(-300px, 0px, 100px) rotateX(29deg) rotateZ(-8deg);">
<div class="drag-notice">Click and drag<br>to turn pages!</div>
<ul class="spreads">
<li class="cover spread" style="transform: translateX(0px) translateZ(5px) rotateY(0deg);">
<div class="page-right page" style="transform: rotateY(0deg);"></div>
</li>
<li class="intro spread" style="transform: translateX(1.71px) translateZ(4.698px) rotateY(0.5deg);">
<div class="page-left page" style="transform: rotateY(180deg);">
<div class="hotspot" style="pointer-events: auto; display: none;">
<div class="indicator" data-offsetx="50" data-offsety="50" style="opacity: 1; display: none;"></div>
<p>
Gather ye monsters,<br>
ye wily web wobsters.<br>
Drop your iPhoneries,<br>
throw on clean clotheries.<br>
Come join the tribe,<br>
revel, rock and imbibe.<br>
</p>
</div>
<div class="horns popup" data-depth="50" style="transform: translateY(50px) rotateZ(15deg) rotateX(-180deg); display: none;"></div>
<div class="monster-body popup" data-depth="100" style="transform: translateY(100px) rotateZ(15deg) rotateX(-180deg); display: none;"></div>
<div class="eyes popup" data-depth="150" style="transform: translateY(150px) rotateZ(15deg) rotateX(-180deg); display: none;"></div>
<div class="beers popup" data-depth="300" style="transform: translateY(300px) rotateZ(15deg) rotateX(-180deg); display: none;"></div>
<div class="beercamp popup" data-depth="400" style="transform: translateY(400px) rotateZ(15deg) rotateX(-180deg); display: none;"></div>
<div class="beercamp-date popup" data-depth="500" style="transform: translateY(500px) rotateZ(15deg) rotateX(-180deg); display: none;"></div>
</div>
<div class="page-right page" style="transform: rotateY(0deg);">
<div class="horns popup" data-depth="50" style="transform: translateY(50px) rotateZ(-15deg) rotateX(-180deg); display: none;"></div>
<div class="monster-body popup" data-depth="100" style="transform: translateY(100px) rotateZ(-15deg) rotateX(-180deg); display: none;"></div>
<div class="eyes popup" data-depth="150" style="transform: translateY(150px) rotateZ(-15deg) rotateX(-180deg); display: none;"></div>
<div class="beers popup" data-depth="300" style="transform: translateY(300px) rotateZ(-15deg) rotateX(-180deg); display: none;"></div>
<div class="beercamp popup" data-depth="400" style="transform: translateY(400px) rotateZ(-15deg) rotateX(-180deg); display: none;"></div>
<div class="beercamp-date popup" data-depth="500" style="transform: translateY(500px) rotateZ(-15deg) rotateX(-180deg); display: none;"></div>
</div>
</li>
<li class="location spread" style="transform: translateX(3.214px) translateZ(3.83px) rotateY(1deg);">
<div class="page-left page" style="transform: rotateY(180deg);">
<div class="purple-monster-back-leg popup" data-depth="200" style="transform: translateY(200px) rotateZ(15deg) rotateX(-180deg); display: none;"></div>
<div class="purple-monster-full popup" data-depth="300" style="transform: translateY(300px) rotateZ(15deg) rotateX(-180deg); display: none;"></div>
<div class="poland-title popup" data-depth="450" style="transform: translateY(450px) rotateZ(15deg) rotateX(-180deg); display: none;"></div>
<div class="warsaw-title popup" data-depth="510" style="transform: translateY(510px) rotateZ(15deg) rotateX(-180deg); display: none;"></div>
</div>
<div class="page-right page" style="transform: rotateY(0deg);">
<div class="hotspot" style="pointer-events: auto; display: none;">
<div class="indicator" data-offsetx="-50" data-offsety="50" style="opacity: 1; display: none;"></div>
<p>
Where Chopin wrote etudes,<br>
we'll be fueling bright moods.<br>
Swing on by and share a hehe,<br>
or go radioactive like Madame Curie.
</p>
</div>
<div class="purple-monster-back-leg popup" data-depth="200" style="transform: translateY(200px) rotateZ(-15deg) rotateX(-180deg); display: none;"></div>
<div class="building-1-full popup" data-depth="250" style="transform: translateY(250px) rotateZ(-15deg) rotateX(-180deg); display: none;"></div>
<div class="purple-monster-full popup" data-depth="300" style="transform: translateY(300px) rotateZ(-15deg) rotateX(-180deg); display: none;"></div>
<div class="building-2 popup" data-depth="400" style="transform: translateY(400px) rotateZ(-15deg) rotateX(-180deg); display: none;"></div>
</div>
</li>
<li class="music spread" style="transform: translateX(4.33px) translateZ(2.5px) rotateY(1.5deg);">
<div class="page-left page" style="transform: rotateY(180deg);">
<div class="hotspot" style="pointer-events: auto; display: none;">
<div class="indicator" data-offsetx="50" data-offsety="50" style="opacity: 1; display: none;"></div>
<p>
Strap some soles to your blistery feets,<br>
dance and debauch to some warsawy beats.<br>
We're rockin' the flux like Marty McFly,<br>
save your future-self regret and stop on by.
</p>
</div>
<div class="dj-lightshow popup" data-depth="150" style="transform: translateY(150px) rotateZ(15deg) rotateX(-180deg); display: none;"></div>
<div class="dj-monster-full popup" data-depth="200" style="transform: translateY(200px) rotateZ(15deg) rotateX(-180deg); display: none;"></div>
<div class="dj-monster-helmet popup" data-depth="220" style="transform: translateY(220px) rotateZ(15deg) rotateX(-180deg); display: none;"></div>
<div class="crowd popup" data-depth="320" style="transform: translateY(320px) rotateZ(15deg) rotateX(-180deg); display: none;"></div>
<div class="dj-wookie popup" data-depth="400" style="transform: translateY(400px) rotateZ(15deg) rotateX(-180deg); display: none;"></div>
</div>
<div class="page-right page" style="transform: rotateY(0deg);">
<div class="dj-lightshow popup" data-depth="150" style="transform: translateY(150px) rotateZ(-15deg) rotateX(-180deg); display: none;"></div>
<div class="dj-monster-full popup" data-depth="200" style="transform: translateY(200px) rotateZ(-15deg) rotateX(-180deg); display: none;"></div>
<div class="dj-monster-helmet popup" data-depth="220" style="transform: translateY(220px) rotateZ(-15deg) rotateX(-180deg); display: none;"></div>
<div class="crowd popup" data-depth="320" style="transform: translateY(320px) rotateZ(-15deg) rotateX(-180deg); display: none;"></div>
<div class="marne popup" data-depth="400" style="transform: translateY(400px) rotateZ(-15deg) rotateX(-180deg); display: none;"></div>
<div class="limboski popup" data-depth="550" style="transform: translateY(550px) rotateZ(-15deg) rotateX(-180deg); display: none;"></div>
</div>
</li>
<li class="back spread" style="transform: translateX(4.924px) translateZ(0.868px) rotateY(2deg);">
<div class="page-left page" style="transform: rotateY(180deg);"></div>
</li>
</ul>
</div>
</div>
<footer>
<div class="warning">Booo! It looks like your browser doesn't support 3D transforms. You can still attend the party, but you will be judged.</div>
<div class="details">
<h1 class="beercamp-title">BEeRCAMP</h1>
</div>
<a href="http://nclud.com" class="nclud">nclud</a>
</footer>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/sylvester.js"></script>
<script type="text/javascript" src="js/modernizr.js"></script><style>@media (touch-enabled),(-webkit-touch-enabled),(-moz-touch-enabled),(-o-touch-enabled),(-ms-touch-enabled),(modernizr){#touch{top:9px;position:absolute}}@media (transform-3d),(-webkit-transform-3d),(-moz-transform-3d),(-o-transform-3d),(-ms-transform-3d),(modernizr){#csstransforms3d{left:9px;position:absolute;height:3px;}}</style>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29859878-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body></html>