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.

158 lines
5.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>test title</title>
<style>
body, html{
height: 100%;
}
body {
width: 100%;
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;
}
@-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%}
}
@keyframes gra {
0%{background-position:0% 47%}
50%{background-position:100% 54%}
100%{background-position:0% 47%}
}
audio{
position: relative;
top: 320px;
left: 2%;
width: 294px;
margin: 0;
padding: 0;
}
.streamlink{
vertical-align:top;
}
.title{
position:absolute;
display:inline-block;
left:2%;
color: white;
}
.playlist{
color: white;
line-height: 1.6;
position: absolute;
display: inline-block;
left: 2%;
top: 800px;
/*white-space: nowrap;*/
word-wrap:break-word;
white-space: normal;
}
.info1{
background-color: white;
box-shadow: 7px 7px 12px black;
width: 250px;;
padding: 1em;
position: absolute;
display: inline-block;
left: 36%;
top: 310px;
/*white-space: nowrap;*/
word-wrap:break-word;
white-space: normal;
}
</style>
</head>
<body>
<div class = "title">
<pre>
,--,
,---.'| ,----.. ,--. ,-.----.
| | : ,---,. .--.--. .--.--. / / \ ,--.'| .--.--. ,--, ,--, \ / \ ,---,.
: : | ,' .' | / / '. / / '. / . : ,--,: : | / / '. |'. \ / .`| | : \ ,--, ,' .' \
| ' : ,---.' || : /`. / | : /`. / . / ;. \,`--.'`| ' :| : /`. / ; \ `\ /' / ; | | .\ : ,'_ /|,---.' .' |
; ; ' | | .'; | |--` ; | |--` . ; / ` ;| : : | |; | |--` `. \ / / .' . : |: | .--. | | :| | |: |
' | |__ : : |-,| : ;_ | : ;_ ; | ; \ ; |: | \ | :| : ;_ \ \/ / ./ | | \ :,'_ /| : . |: : : /
| | :.'|: | ;/| \ \ `. \ \ `. | : | ; | '| : ' '; | \ \ `. \ \.' / | : . /| ' | | . .: | ;
' : ;| : .' `----. \ `----. \. | ' ' ' :' ' ;. ; `----. \ \ ; ; ; | |`-' | | ' | | || : \
| | ./ | | |-, __ \ \ | __ \ \ |' ; \; / || | | \ | __ \ \ | / \ \ \ | | ; : | | : ' ;| | . |
; : ; ' : ;/| / /`--' / / /`--' / \ \ ', / ' : | ; .' / /`--' / ; /\ \ \ : ' | | ; ' | | '' : '; |
| ,/ | | \'--'. / '--'. / ; : / | | '`--' '--'. / ./__; \ ; \ : : : : | : ; ; || | | ;
'---' | : .' `--'---' `--'---' \ \ .' ' : | `--'---' | : / \ \ ;| | : ' : `--' \ : /
| | ,' `---` ; |.' ; |/ \ ' |`---'.| : , .-./ | ,'
`----' '---' `---' `--` `---` `--`----' `----'
a temporary live broadcast hosted by Clara X Sugar
<br><br><br>
<b>PLAYLIST</b><br>
////////////////////////////////////////////////////////////<br>
The XPUB Department of Digital Records - Case Number: 92
MIPOLONI - Us
Mozzarella X Gouda - echo
Radio Legends - Macintosh and Windows share a little boogie<br>
////////////////////////////////////////////////////////////
</pre>
</div>
<img src="pic.jpg" style = "position:absolute; display: inline-block; width: 28%; top: 310px; left: 58%; z-index:2; box-shadow: 7px 7px 12px black; ">
<audio controls>
<source src="http://echo.lurk.org:999/clarasugar.ogg" type="audio/mpeg" controls autoplay>
</audio>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class= "info1">
<b>Testing 2, 1, 4. test. test.</b><br><br>
If technological systems are implicated in the structuring of knowledge and knowledge systems are implicated in how technology operates … how do we start to think the world otherwise?!<br><br>
Welcome to the second broadcast of XPUB year of 2021/2022. Tune in for a compilation of obscure sounds and voices of the moment.<br><br>
Laying the ground for many more experimental streams to come.<br><br>
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.
</div>
</body>
</html>