diff --git a/favicon-01.png b/favicon-01.png new file mode 100644 index 0000000..2e340a1 Binary files /dev/null and b/favicon-01.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..98c4242 --- /dev/null +++ b/index.html @@ -0,0 +1,58 @@ + + + + + + + + + + Broken Phone + + + + +
+ +
+ +
+Broken Phone  +
+ + + +

+ + +
🡢   There are many ways to call this internationally known children's game, often quite dubious and loaded with a colonial heritage. For today we chose to call it the "Broken phone", a broadcast of the master experimental publishing, Piet Zwart Institute Rotterdam and hosted by Martin and Euna. +

+The game is often played like this, the first person whispers a sentence to its neighbor, and the pattern continues. At the end of the loop, the first speaker is supposed to hear back what it first said, but most of the time, the stories is something radically different from the original. +

+What you'll hear first is the recording of the original text, The Rainbow, the 12th chapter of Exercises de Styles from Raymond Queneau published in 1947. One group of Xpub1 students modified this original audio file and the next group reused the previous group's recording and so on and on and on! The goal of this 5th radio session is to experiment with the unexpected audio distortion of an audio source that is being transformed, and retransformed, and on and on and on! +

+The Broken Phone is followed by 'between arepas and kartoffelsalat' (some badly translated tasty cooking sounds). +

+This week broadcast is hosted by: Euna Martin
+We would like to thank our contributors: Louisa, Jacopo , Kendal, Federico, Clara and Camillo
+ +Enjoy! +
+ +

+ + + + + + + + + +
+Radio broadcas n°5 (part of Radio Implicanties), hosted this week by: Euna Lee and Martin Foucaut.
If you'are currently using an IOS device, you might encounter some issues (brand policy) to play the mp3 file.
If so, please redirect to another device.
Font is use: Brute grotesque (Bureau Brut)
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..7b5f903 --- /dev/null +++ b/style.css @@ -0,0 +1,290 @@ + +/*----------------- FONTS --------------------*/ + +@font-face { + font-family: 'Brut_Grotesque-Text'; + src: url(typefaces/Brut_Grotesque-Text.woff); + font-weight: normal; + font-style: normal; +} + +/*----------------- CURSOR --------------------*/ + +html { + cursor: url(symboles/CURSEUR.png), pointer; min-height: 100%; + font-family: 'Brut_Grotesque-Text'; + /*background-image: url(background/rainbow.gif);*/ + background-repeat: no-repeat; + background-position: center; + background-size: cover; + width: 100%; + box-sizing: border-box; +} + +/*----------------- TEXT --------------------*/ + +@media only screen and (max-width: 10000px) { + +body{ + color:white; + position: center; + padding-left: 2%; + padding-right: 2%; + background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet); + background-size: 1000% 1000%; + -webkit-animation: gra 20s ease infinite; + -moz-animation: gra 20s ease infinite; + animation: gra 20s 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{ + width: 90%; + padding-left: 2%; + padding-right: 2%; + padding-bottom: 15px; + text-align: left; + margin:auto; + position: fixed; + +} +a:link { + color: #00b6f0; +} +a:visited { + color: #00b6f0; +} +a:hover { + color: #00b6f0; +} +a:active { + color: #00b6f0; +} +.responsive { + width: 100%; + height: auto; +} +/*.audio-player { + position: fixed; + height: 60px; + width: 95%; + border-radius: 10px; + font-family: 'Brut_Grotesque-Text'; + color: white; +}*/ +.rec { + height: 25px; + width: 25px; + background-color: red; + border-radius: 50%; + display: inline-block; + z-index: 5; + -webkit-animation: fadeinout 4s linear infinite; + animation: fadeinout 4s linear infinite; +} + @-webkit-keyframes fadeinout { + 0%,100% { opacity: 0; } + 50% { opacity: 1; } +} + +@keyframes fadeinout { + 0%,100% { opacity: 0; } + 50% { opacity: 1; } +} +.title { + text-align: left; + font-size: 4vw; + line-height: 110%; + padding-top: 80px; + color: white; + z-index:4; + font-family: 'Brut_Grotesque-Text'; +} + +.title2 { + text-align: left; + font-size: 3vw; + line-height: 110%; + color: white; + z-index:3; + font-family: 'Brut_Grotesque-Text'; + +} + +.intro { + text-align: left; + font-size: 1.5vw; + line-height: 110%; + color: white; + z-index:2; + margin-right: 25%; + font-family: 'Brut_Grotesque-Text'; + +} +.infos{ + font-size: 1vw; + line-height: 110%; + color: white; + z-index:1; + font-family: 'Brut_Grotesque-Text'; +} +.logos{ + font-size: 1vw; + line-height: 110%; + color: white; + display: flex; + flex-direction: row; + align-items: last baseline; + position: fixed; + bottom: 2%; + left: 2%; + right: 2%; + font-family: 'Brut_Grotesque-Text'; + +} +} + +@media only screen and (max-width: 1200px) { + +body{ + color:white; + position: center; + padding-left: 2%; + padding-right: 2%; +} +.title { + text-align: left; + font-size: 6vw; + line-height: 110%; + padding-top: 80px; + color: white; + z-index:4; + font-family: 'Brut_Grotesque-Text'; +} + +.title2 { + text-align: left; + font-size: 3vw; + line-height: 110%; + color: white; + z-index:3; + font-family: 'Brut_Grotesque-Text'; + +} + +.intro { + text-align: left; + font-size: 2.5vw; + line-height: 110%; + color: white; + z-index:2; + margin-right: 2%; + font-family: 'Brut_Grotesque-Text'; + +} +.infos{ + font-size: 1.5vw; + line-height: 110%; + color: white; + z-index:1; + display: flex; + font-family: 'Brut_Grotesque-Text'; + vertical-align: bottom; +} +.logos{ + font-size: 1.5vw; + line-height: 110%; + color: white; + display: flex; + flex-direction: row; + align-items: last baseline; + position: fixed; + bottom: 2%; + left: 2%; + right: 2%; + font-family: 'Brut_Grotesque-Text'; + +} + +} +@media only screen and (max-width: 800px) { + +body{ + color:white; + position: center; + padding-left: 2%; + padding-right: 2%; +} +.title { + text-align: left; + font-size: 6vw; + line-height: 110%; + padding-top: 80px; + color: white; + z-index:4; + font-family: 'Brut_Grotesque-Text'; +} + +.title2 { + text-align: left; + font-size: 3vw; + line-height: 110%; + color: white; + z-index:3; + font-family: 'Brut_Grotesque-Text'; + +} + +.intro { + text-align: left; + font-size: 3vw; + line-height: 110%; + color: white; + z-index:2; + margin-right: 2%; + font-family: 'Brut_Grotesque-Text'; + +} +.infos{ + font-size: 1.4vw; + line-height: 110%; + color: white; + z-index:1; + font-family: 'Brut_Grotesque-Text'; + vertical-align: bottom; +} +.logos{ + font-size: 1vw; + line-height: 110%; + color: white; + display: flex; + flex-direction: row; + align-items: last baseline; + position: fixed; + bottom: 2%; + left: 2%; + right: 2%; + font-family: 'Brut_Grotesque-Text'; + +} +} + +