01 website:done

8 years ago · 1e8a6062f3
parent 6bc7149809
commit 1e8a6062f3
30 changed files with 176 additions and 191 deletions
--- a/01/img/_DSC1931.jpg
+++ b/01/img/_DSC1931.jpg
--- a/01/img/_DSC1943.jpg
+++ b/01/img/_DSC1943.jpg
--- a/01/img/_DSC2013.jpg
+++ b/01/img/_DSC2013.jpg
--- a/01/img/_DSC2019.jpg
+++ b/01/img/_DSC2019.jpg
--- a/01/img/_DSC2066.jpg
+++ b/01/img/_DSC2066.jpg
--- a/01/img/_DSC2067.jpg
+++ b/01/img/_DSC2067.jpg
--- a/01/img/_DSC2254.jpg
+++ b/01/img/_DSC2254.jpg
--- a/01/img/_DSC2327.jpg
+++ b/01/img/_DSC2327.jpg
--- a/01/img/_DSC2334.jpg
+++ b/01/img/_DSC2334.jpg
--- a/01/img/op=op
+++ b/01/img/op=op
--- a/01/img/oplaunch/mpv-shot0002.png
+++ b/01/img/oplaunch/mpv-shot0002.png
--- a/01/img/oplaunch/mpv-shot0005.png
+++ b/01/img/oplaunch/mpv-shot0005.png
--- a/01/img/oplaunch/mpv-shot0015.png
+++ b/01/img/oplaunch/mpv-shot0015.png
--- a/01/img/oplaunch/mpv-shot0016.png
+++ b/01/img/oplaunch/mpv-shot0016.png
--- a/01/img/oplaunch/mpv-shot0017.png
+++ b/01/img/oplaunch/mpv-shot0017.png
--- a/01/img/oplaunch/mpv-shot0018.png
+++ b/01/img/oplaunch/mpv-shot0018.png
--- a/01/img/oplaunch/mpv-shot0031.png
+++ b/01/img/oplaunch/mpv-shot0031.png
--- a/01/img/oplaunch/mpv-shot0032.png
+++ b/01/img/oplaunch/mpv-shot0032.png
--- a/01/img/oplaunch/mpv-shot0033.png
+++ b/01/img/oplaunch/mpv-shot0033.png
--- a/01/img/oplaunch/mpv-shot0034.png
+++ b/01/img/oplaunch/mpv-shot0034.png
--- a/01/img/oplaunch/mpv-shot0036.png
+++ b/01/img/oplaunch/mpv-shot0036.png
--- a/01/img/oplaunch/mpv-shot0037.png
+++ b/01/img/oplaunch/mpv-shot0037.png
--- a/01/img/oplaunch/mpv-shot0038.png
+++ b/01/img/oplaunch/mpv-shot0038.png
--- a/01/img/oplaunch/mpv-shot0039.png
+++ b/01/img/oplaunch/mpv-shot0039.png
--- a/01/img/oplaunch/mpv-shot0040.png
+++ b/01/img/oplaunch/mpv-shot0040.png
--- a/01/img/oplaunch/mpv-shot0047.png
+++ b/01/img/oplaunch/mpv-shot0047.png
--- a/01/img/oplaunch/mpv-shot0054.png
+++ b/01/img/oplaunch/mpv-shot0054.png
--- a/01/img/trailer.gif
+++ b/01/img/trailer.gif
--- a/01/index.html
+++ b/01/index.html
@ -2,200 +2,83 @@
 <html>
  <head>
    <meta charset="UTF-8">
-	<style>
+    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
-		@font-face {
+    <title>XPUB Special Issue #1 OP=OP</title>  
 			font-family: "cinetype";
 			src: url('font/GT-Cinetype-Bold.eot'); /* IE9 Compat Modes */
 			src: url('font/GT-Cinetype-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 				url('font/GT-Cinetype-Bold.otf') format("opentype"),
 				url('font/GT-Cinetype-Bold.ttf') format("truetype"),
 				url('font/GT-Cinetype-Bold.woff') format("woff");
 		}
    	body{
        margin: 0;
        padding: 0;
        border: 0;
        background-image: url("img/cropped-pattern.jpg");
        background-repeat: repeat;
        height:1480px;
        font-family: "cinetype", Helvetica, sans-serif;
        color:#ff662c;
    }
    a{
    color:#ff662c;
    }
    .big{
    font-size: 30px;
    text-align: right;
    line-height: 10px;
    }
    .small{
    font-size: 12px;
    text-align: justify;
    text-align-last: right;
    }
    .small-right{
    font-size: 12px;
    text-align: right;
    }
    .icons{
    width:20px;
    margin: 10px;
    }
        /*BIGGER THAN 800PX SCREEN*/
     @media (min-width: 800px){
    .big-two{
    font-size: 30px;
    text-align: right;
        line-height: 10px;
    }
         .info-op-is-op{
        position:fixed;
        right:50px;
        top:19px;
        width:650px;
        height:588px;
        background-color: white;
        padding:10px 20px 10px 30px;
 }
 }
     /*SMALLER THAN 800PX SCREEN*/
    @media (max-width: 800px){
              .big-two{
              font-size: 30px;
              text-align: right;
              line-height: 30px;
    }
       .info-op-is-op{
        position:relative;
        top:80px;       
        width:80%;
        /*height:588px;*/
        padding:10px 20px 10px 30px;
    }
        .info-op-is-op-transparent{
        position:fixed;
        width:100%;
        height:100%;
        background-color: white;
        opacity:0.8;
        padding:10px 20px 10px 30px;
        }
    }
    /*SMALLER THAN 480PX SCREEN*/
    @media (max-width: 480px) {
          .big-two{
              font-size: 30px;
              text-align: right;
              line-height: 30px;
    }
       .info-op-is-op{
        position:relative;
        top:80px;       
        width:80%;
        /*height:588px;*/
        padding:10px 20px 10px 30px;
    }
        .info-op-is-op-transparent{
        position:fixed;
        width:100%;
        height:100%;
        background-color: white;
        opacity:0.8;
        padding:10px 20px 10px 30px;
        }
 }
    </style>
  </head>
  <body>
-    <div class="info-op-is-op-transparent"></div>
+    <div class="parent">  
      <div class="info-op-is-op">
-        <p class="big">SAT 10.12.16</p>
+	<div class="white">	
-        <p class="big">19:00-23:00</p>
+          <h1>SAT 10.12.16</</h1>
 			     <h1>19:00-23:00</h1>
        </br>
-        <p class="big">WORM</p>
+        <h1>WORM</h1>
-        <p class="big-two">Boomgaardsstraat 71, Rotterdam</p>
+        <h1>Boomgaardsstraat 71, Rotterdam</h1>
    </br>
    <!--  <p class="small">OP=OP is a publication about scarcity of resources that takes the shape of a board game. It questions the capitalist system, and players compete to become wealthier fighting to get the available resources and complete a series of missions. Come get the publication and play the game with us on the 10th of December at 19:00 @ <a href="https://www.facebook.com/worm.rotterdam/" target="_blank">WORM</a>. Be ready for ‘dumpster diving’ food, drinks, dice and loads of fun.  
          </p> -->
-        <p class="small-right" style="margin-top:-10px; margin-bottom:25px;">19:00-19:30 - Presentation <br/>
+          <p class="small-right" >19:00-19:30 - Presentation <br/>
 	    19:30-23:00 - Game + drinks + snacks!</p>
-    <p class="small">OP=OP is the first special issue conceptualised, developed and produced this autumn by the students from the Experimental Publishing study path (XPUB) at the Media Design and Communication Master, Piet Zwart Institute. Derived from Monopoly, the publication takes the form of a board game that explores the topic of scarcity, with players competing for assets, services and raw materials, following their pre-defined agendas, establishing both regulated and unregulated trade transactions, while witnessing an accelerating depletion of all resources. By amplifying, modifying, and adding to the initial rules of Monopoly, OP=OP aims at triggering discussions on property, trades, ecology, and markets, thus breaking through the consumerist sugarcoating culture of the infamous board game, and bring back to light its origin as a critical device.</p>
+	  <p>OP=OP is the first special issue conceptualised, developed and produced this autumn by the students from the Experimental Publishing study path (XPUB) at the Media Design and Communication Master, Piet Zwart Institute. Derived from Monopoly, the publication takes the form of a board game that explores the topic of scarcity, with players competing for assets, services and raw materials, following their pre-defined agendas, establishing both regulated and unregulated trade transactions, while witnessing an accelerating depletion of all resources. By amplifying, modifying, and adding to the initial rules of Monopoly, OP=OP aims at triggering discussions on property, trades, ecology, and markets, thus breaking through the consumerist sugarcoating culture of the infamous board game, and bring back to light its origin as a critical device.</p>
-    <p class="small">Come get your copy of the limited publication/board hybrid and play the game with us on the 10th of December at 19:00 WORM Rotterdam (Slash Gallery)! We will serve special 'dumpster dived' food and snacks for all the players, and screen randomised extracts from WORM's Piratebay in relation to the special issue theme!</p>
+	  <p>Come get your copy of the limited publication/board hybrid and play the game with us on the 10th of December at 19:00 WORM Rotterdam (Slash Gallery)! We will serve special 'dumpster dived' food and snacks for all the players, and screen randomised extracts from WORM's Piratebay in relation to the special issue theme!</p>
-    <p class="small">This publication is brought to you by: Emily Buzzo, Karina Dukalska, Max Franklin, Giulia de Giovanelli, Clàudia Giralt, Pleun Gremmen, Francisco González, Julia Kul, Margreet Riphagen, Kimmy Spreeuwenberg, and Noémie Vidé.</p>
+	  <p>This publication is brought to you by: Emily Buzzo, Karina Dukalska, Max Franklin, Giulia de Giovanelli, Clàudia Giralt, Pleun Gremmen, Francisco González, Julia Kul, Margreet Riphagen, Kimmy Spreeuwenberg, and Noémie Vidé.</p>
          <p class="small" style="text-align:right;"><a href="https://www.instagram.com/xpub.pietzwart/" target="_blank"><img class="icons" src="img/Instagram%20Filled-50.png"/></a><a href="https://twitter.com/pzixpub" target="_blank"><img class="icons" src="img/Twitter-48.png"/></a><a href="https://www.facebook.com/xpub.pietzwart/" target="_blank"><img class="icons" src="img/Facebook-48.png"/></a></p>
 	</div>
 	<img src='img/oplaunch/mpv-shot0047.png' />
 	<img src='img/oplaunch/mpv-shot0054.png' />
 	<img src='img/oplaunch/mpv-shot0005.png' />
 	<img src='img/oplaunch/mpv-shot0015.png' />
 	<img src='img/oplaunch/mpv-shot0016.png' />
 	<img src='img/oplaunch/mpv-shot0017.png' />
 	<img src='img/oplaunch/mpv-shot0018.png' />
 	<img src='img/oplaunch/mpv-shot0031.png' />
 	<img src='img/oplaunch/mpv-shot0032.png' />
 	<img src='img/oplaunch/mpv-shot0033.png' />
 	<img src='img/oplaunch/mpv-shot0034.png' />
 	<img src='img/oplaunch/mpv-shot0036.png' />
 	<img src='img/oplaunch/mpv-shot0037.png' />
 	<img src='img/oplaunch/mpv-shot0038.png' />
 	<img src='img/oplaunch/mpv-shot0039.png' />
 	<img src='img/oplaunch/mpv-shot0040.png' />
      </div>
      <div class="images">
 	<!-- img src="img/op=op 2.0 scan for cover.jpg" / -->
 	<img src="img/_DSC1931.jpg" />
 	<img src="img/trailer.gif" />
 	<img src="img/_DSC1943.jpg" />
 	<img src="img/_DSC2013.jpg" />
 	<img src="img/_DSC2019.jpg" />
 	<img src="img/_DSC2066.jpg" />
 	<img src="img/_DSC2067.jpg" />
 	<!--
 	    <img src="img/_DSC2082.jpg" />
 	    <img src="img/_DSC2102.jpg" />
 	    <img src="img/_DSC2106.jpg" />
 	    <img src="img/_DSC2116.jpg" />
 	    <img src="img/_DSC2117.jpg" />
 	    <img src="img/_DSC2136.jpg" />
 	    <img src="img/_DSC2137.jpg" />
 	    <img src="img/_DSC2144.jpg" />
 	    <img src="img/_DSC2167.jpg" />
 	    <img src="img/_DSC2182.jpg" />
 	    -->
 	<img src="img/_DSC2254.jpg" />
 	<img src="img/_DSC2327.jpg" />
 	<img src="img/_DSC2334.jpg" />
      </div>
    </div>    
  </body>
 </html>
--- a/01/style.css
+++ b/01/style.css
@ -0,0 +1,102 @@
@font-face {
    font-family: "cinetype";
    src: url('font/GT-Cinetype-Bold.eot'); /* IE9 Compat Modes */
    src: url('font/GT-Cinetype-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('font/GT-Cinetype-Bold.otf') format("opentype"),
    url('font/GT-Cinetype-Bold.ttf') format("truetype"),
    url('font/GT-Cinetype-Bold.woff') format("woff");
 }
 body{
    margin: 0;
    padding: 0;
    border: 0;
    background-image: url("img/cropped-pattern.jpg");
    background-repeat: repeat;
    font-family: "cinetype", Helvetica, sans-serif;
    color:#ff662c;
    font-size:14pt;
 }
 a, a:visited{
    color:#ff662c;
    text-decoration:underline;
 }
 h1{
    font-size: 1.8em;
    margin-bottom: 0px;
    margin-top: 0px;
    text-align: right;
  }
 p { font-size: 1.2em;}
 .big{
    font-size: 30px;
    text-align: right;
    line-height: 10px;    
 }
 .small{
    font-size: 12px;
    text-align: justify;
    text-align-last: right;
 }
 .small-right{
    font-size: 12px;
    text-align: right;
 }
 .icons{
    width:20px;
    margin: 10px;
 }
 div.parent {   }
 .info-op-is-op{
    float:right;
    display:inline-block;
    padding: 10px 20px 10px 30px;
    text-align: left;
    margin-left: auto;
    margin-right: 10px;
    width:40%;    
 }
 div.white{    background-color: white;
 	      padding: 10px 20px 10px 30px;
 	 }
 div.images {
    float:left;
    display:inline-block;
    margin-left: 10px;
    margin-right: auto;
    width:40%;    
 } 
 img {
    width:100%;
    margin-top:10px;
    margin-bottom:10px;
 }
@media (max-width:900px){
    div.parent{margin-left: 100px;}
    div.white {margin:10px;}
    div.info-op-is-op{    width:100%;}    
    div.images {    width:100%;} 
 }