You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

208 lines
6.2 KiB
HTML

4 years ago
<!DOCTYPE html>
<html>
4 years ago
<head>
4 years ago
<meta charset="utf-8">
4 years ago
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LES SONS XPUB</title>
4 years ago
<script src="plain-draggable.min.js"></script>
4 years ago
<style>
4 years ago
4 years ago
body {
4 years ago
/* width: 100%; */
/* margin: 20vw; */
4 years ago
background: linear-gradient(71deg, #050505, #b4b2b4, #4946ce, #eeb4a2, #7c26c1, #daf2be);
background-size: 1200% 1200%;
-webkit-animation: gra 40s ease infinite;
-moz-animation: gra 40s ease infinite;
animation: gra 40s ease infinite;
font-family: monospace;
4 years ago
}
4 years ago
@-webkit-keyframes gra {
0%{background-position:0% 47%}
50%{background-position:100% 54%}
100%{background-position:0% 47%}
}
@-moz-keyframes gra {
0%{background-position:0% 47%}
50%{background-position:100% 54%}
100%{background-position:0% 47%}
4 years ago
}
4 years ago
@keyframes gra {
0%{background-position:0% 47%}
50%{background-position:100% 54%}
100%{background-position:0% 47%}
}
4 years ago
.title{
width: 100%;
}
.title p{
font-size: 2vw
}
4 years ago
audio{
4 years ago
/* position: relative;
4 years ago
top: 320px;
left: 2%;
width: 294px;
margin: 0;
4 years ago
padding: 0; */
}
img{
box-shadow: 7px 7px 12px black;
width: 40%;
position: absolute;
4 years ago
}
4 years ago
/* .streamlink{
4 years ago
vertical-align:top;
4 years ago
} */
4 years ago
4 years ago
/* .title{
4 years ago
position:absolute;
display:inline-block;
left:2%;
color: white;
4 years ago
} */
4 years ago
4 years ago
#playlist{
4 years ago
color: white;
4 years ago
/* line-height: 16px; */
/* position: absolute; */
4 years ago
display: inline-block;
left: 2%;
top: 800px;
/*white-space: nowrap;*/
4 years ago
word-wrap:break-word;
4 years ago
white-space: normal;
4 years ago
font-size: 1vw;
}
4 years ago
4 years ago
#info1{
4 years ago
background-color: white;
box-shadow: 7px 7px 12px black;
4 years ago
4 years ago
padding: 1em;
position: absolute;
display: inline-block;
left: 36%;
top: 310px;
4 years ago
font-size: 1vw;
width: 30%;
4 years ago
/*white-space: nowrap;*/
word-wrap:break-word;
white-space: normal;
}
4 years ago
pre{
font-size: 1vw;
}
@media only screen and (max-width: 600px) {
#info1{
width: 45%;
font-size: 3vw;
}
img{
width: 60%;
}
#playlist{
font-size: 3vw;
}
.title p{
font-size: 3vw
}
}
4 years ago
</style>
</head>
4 years ago
<body>
4 years ago
<div class = "title">
<pre>
,--,
,---.'| ,----.. ,--. ,-.----.
| | : ,---,. .--.--. .--.--. / / \ ,--.'| .--.--. ,--, ,--, \ / \ ,---,.
: : | ,' .' | / / '. / / '. / . : ,--,: : | / / '. |'. \ / .`| | : \ ,--, ,' .' \
| ' : ,---.' || : /`. / | : /`. / . / ;. \,`--.'`| ' :| : /`. / ; \ `\ /' / ; | | .\ : ,'_ /|,---.' .' |
; ; ' | | .'; | |--` ; | |--` . ; / ` ;| : : | |; | |--` `. \ / / .' . : |: | .--. | | :| | |: |
' | |__ : : |-,| : ;_ | : ;_ ; | ; \ ; |: | \ | :| : ;_ \ \/ / ./ | | \ :,'_ /| : . |: : : /
| | :.'|: | ;/| \ \ `. \ \ `. | : | ; | '| : ' '; | \ \ `. \ \.' / | : . /| ' | | . .: | ;
' : ;| : .' `----. \ `----. \. | ' ' ' :' ' ;. ; `----. \ \ ; ; ; | |`-' | | ' | | || : \
| | ./ | | |-, __ \ \ | __ \ \ |' ; \; / || | | \ | __ \ \ | / \ \ \ | | ; : | | : ' ;| | . |
; : ; ' : ;/| / /`--' / / /`--' / \ \ ', / ' : | ; .' / /`--' / ; /\ \ \ : ' | | ; ' | | '' : '; |
| ,/ | | \'--'. / '--'. / ; : / | | '`--' '--'. / ./__; \ ; \ : : : : | : ; ; || | | ;
'---' | : .' `--'---' `--'---' \ \ .' ' : | `--'---' | : / \ \ ;| | : ' : `--' \ : /
| | ,' `---` ; |.' ; |/ \ ' |`---'.| : , .-./ | ,'
`----' '---' `---' `--` `---` `--`----' `----'
4 years ago
</pre>
4 years ago
4 years ago
<p>a temporary live broadcast hosted by Clara X Sugar </p>
</div>
4 years ago
<br><br><br>
4 years ago
<audio controls>
<source src="secondweek.mp3" type="audio/mpeg" controls autoplay>
</audio>
<br><br><br><br>
<div id="playlist">
<b>PLAYLIST</b>
<p>////////////////////////////<br><br>
4 years ago
The XPUB Department of Digital Records - Case Number: 92
MIPOLONI - Us
Mozzarella X Gouda - echo
4 years ago
Radio Legends - Macintosh and Windows share a little boogie<br><br>
////////////////////////////// </p>
4 years ago
</div>
4 years ago
4 years ago
4 years ago
<img class="plain-draggable" id="img"src="pic.jpg">
4 years ago
4 years ago
<div class="plain-draggable" id= "info1">
<b>Testing 2, 1, 4. test. test.</b>
<br><br>
<p>LIVE The 2nd episode of Radio Implicancies by XPUB1. Join the live session composed of echoing voices; vocals performed as instruments; scraped chats which turn into new conversations and a musical dialogue between operating sound systems.<br>Laying the ground for many more experimental streams to come. Eight weekly broadcasts emit the signals of different constellations within the ten of us, bringing forth different responses and creating new approaches to the way knowledge and technology interplay and create inherent structures.</p>
4 years ago
</div>
4 years ago
<script>
// alert("Drag the boxes!")
draggable = new PlainDraggable(document.getElementById('info1'));
draggable.containment = {left: 0, top: 0, width: '100%', height: '1000%'};
4 years ago
4 years ago
draggable2 = new PlainDraggable(document.getElementById('img'));
draggable2.containment = {left: 0, top: 0, width: '100%', height: '1000%'};
4 years ago
4 years ago
</script>
4 years ago
</body>
</html>