opencoil-paracity/works/Sarah Grant/otastaImg/data/index.html
2020-10-16 18:36:19 +02:00

400 lines
11 KiB
HTML

<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1 {
font-size: 3em;
}
img {
max-width: 100%;
/*position: absolute;*/
}
.rel {
position: relative;
}
#capture {
height: 100vh;
}
.text {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
z-index: -1;
}
.text > div {
/*font-size: 20px;*/
font-family: monospace;
color: #695858;
letter-spacing: .1em;
padding: 13px;
transform: rotate(355deg);
}
#button-wrapper {
position: fixed;
top: 300px;
left: 0;
width: 250px;
animation: translate 20s infinite linear;
z-index: 9999;
}
#imgButton {
background: linear-gradient(to right, #CB3066, #16BFFD);
background-size: 300% 300%;
color: #fff;
font-size: 18px;
line-height: 30px;
padding: 10px 30px;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
position: absolute;
left: -300px;
border: 0;
outline: 0;
box-shadow: 0 5px 10px 0 rgba(205, 209, 215, 0.8);
animation: gradient 2.5s ease infinite, inmotion 1.5s alternate infinite ease-in-out;
}
@keyframes translate {
to { transform: translateX(200%); }
}
@keyframes inmotion {
to { transform: translateY(100px); }
}
@keyframes gradient {
0% { background-position: 0% 50% }
50% { background-position: 100% 50% }
100% { background-position: 0% 50% }
}
</style>
</div>
<body id="capture">
<div id="button-wrapper">
<button id="imgButton">CLICK TO SAVE YOUR KATAMARI</button>
</div>
<div class="text">
<div>Bouchéstraße</div>
<div>Alt-Treptow</div>
<div>Berlin</div>
<div>Kiefholzstraße</div>
<div>Elsenstraße</div>
<div>Harzer Straße</div>
<div>Wildenbruchstraße</div>
<div>Heidelberger Straße</div>
<div>Karl-Kunger-Straße</div>
<div>Sülzhayner Straße</div>
<div>Schmollerstraße</div>
<div>Mengerzeile</div>
<div>Am Treptower Park</div>
<div>Puschkinallee</div>
<div>Martin-Hoffman-Straße</div>
<div>Eichenstraße</div>
<div>Fanny-Zobel-Straße</div>
<div>Matthesstraße</div>
<div>Beermannstraße</div>
<div>Jordanstraße</div>
<div>Lohmühlenstraße</div>
<div>Am Flutgraben</div>
<div>Schleusenufer</div>
<div>Landwehr Canal</div>
<div>Spree</div>
<div>Treptower Park</div>
<div>Rummelsburger See</div>
<div>Schlesisches Tor</div>
<div>Skalitzer Straße</div>
<div>Köpenicker Straße</div>
<div>Brückenstraße</div>
<div>Rungestraße</div>
<div>Ohmstraße</div>
<div>Michaelkirchstraße</div>
<div>Michaelkirchplatz</div>
<div>Heinrich-Heine-Straße</div>
<div>Jannowitzbrücke</div>
<div>Schlesisches Straße</div>
<div>Cuvrystraße</div>
<div>Wrangelstraße</div>
<div>Taborstraße</div>
<div>Heckmannufer</div>
<div>Görlitzer Ufer</div>
<div>Görlitzer Park</div>
<div>Falckenstein Straße</div>
<div>Oppelner Straße</div>
<div>Sorauer Straße</div>
<div>Lübbener Straße</div>
<div>Plesser Straße</div>
<div>Krüllsstraße</div>
<div>Kiehlufer</div>
<div>Treptower Straße</div>
<div>Hüttenroder Weg</div>
<div>Onckenstraße</div>
<div>Lexisstraße</div>
<div>Grabowstraße</div>
<div>Wiener Straße</div>
<div>Reichenberger Straße</div>
<div>Paul-Lincke-Ufer</div>
<div>Glogauer Straße</div>
<div>Liegnitzer Straße</div>
<div>Forster Straße</div>
<div>Ohlauer Straße</div>
<div>Lausitzer Straße</div>
<div>Manteuffelstraße</div>
<div>Mariannenstraße</div>
<div>Muskauer Straße</div>
<div>Warschauer Straße</div>
<div>Revaler Straße</div>
<div>Simon-Dach-Straße</div>
<div>Boxhagener Platz</div>
<div>Kreuzberg</div>
<div>Neukölln</div>
<div>Bouchéstraße</div>
<div>Alt-Treptow</div>
<div>Berlin</div>
<div>Kiefholzstraße</div>
<div>Elsenstraße</div>
<div>Harzer Straße</div>
<div>Wildenbruchstraße</div>
<div>Heidelberger Straße</div>
<div>Karl-Kunger-Straße</div>
<div>Sülzhayner Straße</div>
<div>Schmollerstraße</div>
<div>Mengerzeile</div>
<div>Am Treptower Park</div>
<div>Puschkinallee</div>
<div>Martin-Hoffman-Straße</div>
<div>Eichenstraße</div>
<div>Fanny-Zobel-Straße</div>
<div>Matthesstraße</div>
<div>Beermannstraße</div>
<div>Jordanstraße</div>
<div>Lohmühlenstraße</div>
<div>Am Flutgraben</div>
<div>Schleusenufer</div>
<div>Landwehr Canal</div>
<div>Spree</div>
<div>Treptower Park</div>
<div>Rummelsburger See</div>
<div>Schlesisches Tor</div>
<div>Skalitzer Straße</div>
<div>Köpenicker Straße</div>
<div>Brückenstraße</div>
<div>Rungestraße</div>
<div>Ohmstraße</div>
<div>Michaelkirchstraße</div>
<div>Michaelkirchplatz</div>
<div>Heinrich-Heine-Straße</div>
<div>Jannowitzbrücke</div>
<div>Schlesisches Straße</div>
<div>Cuvrystraße</div>
<div>Wrangelstraße</div>
<div>Taborstraße</div>
<div>Heckmannufer</div>
<div>Görlitzer Ufer</div>
<div>Görlitzer Park</div>
<div>Falckenstein Straße</div>
<div>Oppelner Straße</div>
<div>Sorauer Straße</div>
<div>Lübbener Straße</div>
<div>Plesser Straße</div>
<div>Krüllsstraße</div>
<div>Kiehlufer</div>
<div>Treptower Straße</div>
<div>Hüttenroder Weg</div>
<div>Onckenstraße</div>
<div>Lexisstraße</div>
<div>Grabowstraße</div>
<div>Wiener Straße</div>
<div>Reichenberger Straße</div>
<div>Paul-Lincke-Ufer</div>
<div>Glogauer Straße</div>
<div>Liegnitzer Straße</div>
<div>Forster Straße</div>
<div>Ohlauer Straße</div>
<div>Lausitzer Straße</div>
<div>Manteuffelstraße</div>
<div>Mariannenstraße</div>
<div>Muskauer Straße</div>
<div>Warschauer Straße</div>
<div>Revaler Straße</div>
<div>Simon-Dach-Straße</div>
<div>Boxhagener Platz</div>
<div>Kreuzberg</div>
<div>Neukölln</div>
<div>Bouchéstraße</div>
<div>Alt-Treptow</div>
<div>Berlin</div>
<div>Kiefholzstraße</div>
<div>Elsenstraße</div>
<div>Harzer Straße</div>
<div>Wildenbruchstraße</div>
<div>Heidelberger Straße</div>
<div>Karl-Kunger-Straße</div>
<div>Sülzhayner Straße</div>
<div>Schmollerstraße</div>
<div>Mengerzeile</div>
<div>Am Treptower Park</div>
<div>Puschkinallee</div>
<div>Martin-Hoffman-Straße</div>
<div>Eichenstraße</div>
<div>Fanny-Zobel-Straße</div>
<div>Matthesstraße</div>
<div>Beermannstraße</div>
<div>Jordanstraße</div>
<div>Lohmühlenstraße</div>
<div>Am Flutgraben</div>
<div>Schleusenufer</div>
<div>Landwehr Canal</div>
<div>Spree</div>
<div>Treptower Park</div>
<div>Rummelsburger See</div>
<div>Schlesisches Tor</div>
<div>Skalitzer Straße</div>
<div>Köpenicker Straße</div>
<div>Brückenstraße</div>
<div>Rungestraße</div>
<div>Ohmstraße</div>
<div>Michaelkirchstraße</div>
<div>Michaelkirchplatz</div>
<div>Heinrich-Heine-Straße</div>
<div>Jannowitzbrücke</div>
<div>Schlesisches Straße</div>
<div>Cuvrystraße</div>
<div>Wrangelstraße</div>
<div>Taborstraße</div>
<div>Heckmannufer</div>
<div>Görlitzer Ufer</div>
<div>Görlitzer Park</div>
<div>Falckenstein Straße</div>
<div>Oppelner Straße</div>
<div>Sorauer Straße</div>
<div>Lübbener Straße</div>
<div>Plesser Straße</div>
<div>Krüllsstraße</div>
<div>Kiehlufer</div>
<div>Treptower Straße</div>
<div>Hüttenroder Weg</div>
<div>Onckenstraße</div>
<div>Lexisstraße</div>
<div>Grabowstraße</div>
<div>Wiener Straße</div>
<div>Reichenberger Straße</div>
<div>Paul-Lincke-Ufer</div>
<div>Glogauer Straße</div>
<div>Liegnitzer Straße</div>
<div>Forster Straße</div>
<div>Ohlauer Straße</div>
<div>Lausitzer Straße</div>
<div>Manteuffelstraße</div>
<div>Mariannenstraße</div>
<div>Muskauer Straße</div>
<div>Warschauer Straße</div>
<div>Revaler Straße</div>
<div>Simon-Dach-Straße</div>
<div>Boxhagener Platz</div>
<div>Kreuzberg</div>
<div>Neukölln</div>
<div>Bouchéstraße</div>
<div>Alt-Treptow</div>
<div>Berlin</div>
<div>Kiefholzstraße</div>
<div>Elsenstraße</div>
<div>Harzer Straße</div>
<div>Wildenbruchstraße</div>
<div>Heidelberger Straße</div>
<div>Karl-Kunger-Straße</div>
<div>Sülzhayner Straße</div>
<div>Schmollerstraße</div>
<div>Mengerzeile</div>
<div>Am Treptower Park</div>
<div>Puschkinallee</div>
<div>Martin-Hoffman-Straße</div>
<div>Eichenstraße</div>
<div>Fanny-Zobel-Straße</div>
<div>Matthesstraße</div>
<div>Beermannstraße</div>
<div>Jordanstraße</div>
<div>Lohmühlenstraße</div>
<div>Am Flutgraben</div>
<div>Schleusenufer</div>
<div>Landwehr Canal</div>
<div>Spree</div>
<div>Treptower Park</div>
<div>Rummelsburger See</div>
<div>Schlesisches Tor</div>
<div>Skalitzer Straße</div>
<div>Köpenicker Straße</div>
<div>Brückenstraße</div>
<div>Rungestraße</div>
<div>Ohmstraße</div>
<div>Michaelkirchstraße</div>
<div>Michaelkirchplatz</div>
<div>Heinrich-Heine-Straße</div>
<div>Jannowitzbrücke</div>
<div>Schlesisches Straße</div>
<div>Cuvrystraße</div>
<div>Wrangelstraße</div>
<div>Taborstraße</div>
<div>Heckmannufer</div>
<div>Görlitzer Ufer</div>
<div>Görlitzer Park</div>
<div>Falckenstein Straße</div>
<div>Oppelner Straße</div>
<div>Sorauer Straße</div>
<div>Lübbener Straße</div>
<div>Plesser Straße</div>
<div>Krüllsstraße</div>
<div>Kiehlufer</div>
<div>Treptower Straße</div>
<div>Hüttenroder Weg</div>
<div>Onckenstraße</div>
<div>Lexisstraße</div>
<div>Grabowstraße</div>
<div>Wiener Straße</div>
<div>Reichenberger Straße</div>
<div>Paul-Lincke-Ufer</div>
<div>Glogauer Straße</div>
<div>Liegnitzer Straße</div>
<div>Forster Straße</div>
<div>Ohlauer Straße</div>
<div>Lausitzer Straße</div>
<div>Manteuffelstraße</div>
<div>Mariannenstraße</div>
<div>Muskauer Straße</div>
<div>Warschauer Straße</div>
<div>Revaler Straße</div>
<div>Simon-Dach-Straße</div>
<div>Boxhagener Platz</div>
<div>Kreuzberg</div>
<div>Neukölln</div>
</div>
<div>
<marquee><i><h1>PLAGUE RAVE 2020&nbsp;<progress></progress></h1></i></marquee>
<div class="rel">
<img src="img/mask.gif" />
<br/>
<img src="img/berghain.gif" />
</br>
<img src="img/TIER-scooter-final-1024x1024.png" />
</div>
<marquee><i><h1><progress></progress>&nbsp;PLAGUE RAVE 2020</h1></i></marquee>
<div class="rel">
<img src="img/source.gif" />
<img class="left" src="img/thumbnail.gif" />
<img src="img/Berlin_TV_Tower.png" />
</div>
<marquee><i><h1><progress></progress>&nbsp;PLAGUE RAVE 2020</h1></i></marquee>
</div>
<script type='text/javascript' src='js/jquery-3.5.1.slim.min.js'></script>
<script type='text/javascript' src='js/howler.min.js'></script>
<script type='text/javascript' src='js/html2canvas.min.js'></script>
<script type='text/javascript' src='js/kh.js'></script>
</body>
</html>