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.

304 lines
8.1 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A bed, a chair and a table Special Issue 4</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
<style>
@font-face {
font-family: 'LibreBaskerville-Regular';
src: url('LibreBaskerville-Regular.eot?#iefix') format('embedded-opentype'), url('LibreBaskerville-Regular.woff') format('woff'), url('LibreBaskerville-Regular.ttf') format('truetype'), url('LibreBaskerville-Regular.svg#LibreBaskerville-Regular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'LibreBaskerville-Italic';
src: url('LibreBaskerville-Italic.eot?#iefix') format('embedded-opentype'), url('LibreBaskerville-Italic.woff') format('woff'), url('LibreBaskerville-Italic.ttf') format('truetype'), url('LibreBaskerville-Italic.svg#LibreBaskerville-Italic') format('svg');
font-weight: normal;
font-style: normal;
}
* { box-sizing: border-box; }
::selection {
background: black;
color: #FFF;
}
/* und hiermit der Firefox >=1 */
::-moz-selection {
background: black;
color: #FFF;
}
body{
background: #FFFFFF;
padding: 0px;
margin: 0px;
font-weight: normal;
}
h1{
margin-top: 10px;
font-family: LibreBaskerville-Regular,serif;
font-size: 85px;
text-transform:uppercase;
font-weight: normal;
letter-spacing: 15px;
}
h2{
font-family: LibreBaskerville-Regular,serif;
font-size: 30px;
font-weight: normal;
margin-top: -40px;
}
p{
font-family: LibreBaskerville-Regular,serif;
font-size: 14px;
line-height: 24px;
}
italic{
font-family: LibreBaskerville-Italic,serif;
}
#textcontainer{
margin-left: 20px;
margin-right: 20px;
margin-bottom: 50px;
}
#textcontainer p{
column-count: 3;
column-gap: 40px;
text-align: justify;
}
#imagecontainer img{
margin-top: -10px;
}
#sidenote{
position: fixed;
right:-60px;
top:85px;
-ms-transform: rotate(-90deg); /* IE 9 */
-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
transform: rotate(-90deg);
}
#infocontainer{
cursor: move;
position: fixed;
margin-top: 4%;
margin-left: 4%;
width:85%;
height:85vh;
background: black;
overflow: scroll;
}
#infocontainer::-webkit-scrollbar {
display: none;
}
#infocontainer p{
color: white;
margin-left: 20px;
margin-right: 20px;
column-count: 1;
column-gap: 40px;
text-align: justify;
}
#infocontainer .flowtext{
color: white;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 40px;
column-count: 3;
column-gap: 40px;
text-align: justify;
}
#infocontainer .flowtext a{
color: white;
}
#infocontainer strong{
text-transform: uppercase;
letter-spacing: 2px;
}
#containment-wrapper{
position: fixed;
top:-80vh;
left:-80%;
width:260%;
height: 250vh;
}
@media screen and (max-width: 980px) {
#infocontainer .flowtext{
column-count: 2;
}
}
@media screen and (max-width: 680px) {
h1{
margin-top: 10px;
font-family: LibreBaskerville-Regular,serif;
font-size: 65px;
text-transform:uppercase;
font-weight: normal;
letter-spacing: 15px;
}
h2{
font-family: LibreBaskerville-Regular,serif;
font-size: 20px;
font-weight: normal;
margin-top: -40px;
}
#textcontainer p{
column-count: 1;
column-gap: 40px;
text-align: justify;
}
#infocontainer{
cursor: move;
position: fixed;
margin-top: 4%;
margin-left: 4%;
width:85%;
height:auto;
background: black;
overflow: scroll;
}
#containment-wrapper{
position: fixed;
top:-2000vh;
left:-2000%;
width:5000%;
height: 5000vh;
}
#infocontainer .flowtext{
column-count: 1;
}
}
</style>
</head>
<body>
<div id="containment-wrapper">
</div>
<div id="infocontainer">
<p>
<p class="flowtext">
<strong style="text-align:left;">A bed, a chair and a table </br> Booklaunch on the 7th of December 2017, 18:00 </br> Poortgebouw, Rotterdam</strong></br></br></br></br></br></br></br>
<p>
<p>
<strong>Schedule</strong></br>
</p>
<p>
Doors open: 18:00 </br>
Book Presentation: 18:30</br>
Dinner (on donation): 19:30</br>
Plus music by DJs Naam and Post-Toast!</br>
</br>
<p>
<strong>About</strong></br>
</p>
<p class="flowtext">
A Bed, A Chair and a Table is a publication about the Poortgebouw, a former squat and vibrant living community located in the South of Rotterdam. In this book, oral histories from inside and outside the Poortgebouw are interlaced with material from various institutional and personal archives. By bringing together these tales of resilience, political struggle, frustration and friendship with historical documents, this book brings forward new perspectives about the Poortgebouw's unique history and its importance in the contemporary city. The starting point of the book was the Autonomous Archive, a local archiving machine built from parts of different computers by the inhabitants of the Poortgebouw and a group of students from XPUB.
</br>
A Bed, A Chair and a Table is the fourth 'Special Issue' conceptualised, developed and produced by the students from the Experimental Publishing course (XPUB) of the Piet Zwart Institute Media Design Master. It provides a trigger for the reader to further explore the Poortgebouws past and to see this building, meet its community, and discuss a potential future amidst all of its complexities. It is a testament to the archive as not the end, but the beginning of a debate. Join us!
</br></br>
Get your copy of A Bed, A Chair and a Table at the launch on Thursday December 7, at 18:00 at the Poortgebouw, Stieltjesstraat 38 Rotterdam.
</br></br>
<italic> This publication is brought to you by Delphine Bedel, Natasha Berting, André Castro, Elisa Chaudet, Angeliki Diakrousi, Max Franklin, Giulia de Giovanelli, Francisco González, Joca van der Horst, Aymeric Mansoux, Michael Murtaugh, Alexander Roidl, Steve Rushton, Alice Strete, Zalán Szakács and the Autonomous Archive. XPUB is a two-year Media Design Master course that prepares students to critically engage with societal issues within the fast changing field of art, design and cultural production. The project was developed in the context of Architecture of Appropriation, a research project at Het Nieuwe Instituut, that examines how squatters have appropriated urban spaces using radical improvisation techniques, and how this has influenced the way we think about the contemporary city.</italic>
</br></br>
Special thanks to the inhabitants of Poortgebouw, the Autonomous Archive, the Architecture of Appropriation team/Het Nieuwe Instituut (Marina Otero Verzier and Katia Truijen), De Raddraaier and Antalis, Annet Dekker, Cia Franssens, Esther Krop, Wilco Lamberts, MayDay, Leslie Robbins and Zine Camp.
</br></br>
For more information about the work, visit XPUB (https://xpub.nl) and the Poortgebouw (https://poortgebouw.org).
Contact: Leslie Robbins l.j.drost-robbins@hr.nl
</p>
<p>
<strong>Links</strong></br>
</p>
<p class="flowtext">
<a href="http://www.pzwart.nl" target="_blank">www.pzwart.nl</a></br>
<a href="http://www.poortgebouw.org" target="_blank">www.poortgebouw.org</a></br>
<!--<a href="https://aa.xpub.nl" target="_blank">https://aa.xpub.nl</a>-->
</p>
</p>
</div>
<p id="sidenote">XPUB: <italic>SPECIAL ISSUE 4 </italic> </p>
<div id="textcontainer">
<h1>A bed, a chair and a table </h1>
<h2>Book launch Thursday 7th of December 2017, 18:00 at Poortgebouw, Rotterdam.</h2>
<p> </p>
</div>
<div id="imagecontainer">
<img src="img/01.jpeg" width="100%"/>
<img src="img/02.jpeg" width="100%"/>
<img src="img/03.jpeg" width="100%"/>
<img src="img/04.jpeg" width="100%"/>
<img src="img/05.jpeg" width="100%"/>
<img src="img/06.jpeg" width="100%"/>
<img src="img/07.jpeg" width="100%"/>
</div>
<script>
$( function() {
$( "#infocontainer" ).draggable({containment: "#containment-wrapper"});
} );
$( function() {
$( "#infocontainer" ).resizable();
} );
</script>
</body>
</html>