index.html 03

8 years ago · d28462e54e
parent 335cea768f
commit d28462e54e
1 changed files with 102 additions and 1 deletions
--- a/03/index.html
+++ b/03/index.html
@ -1,3 +1,104 @@
+<p>Test. How c<!DOCTYPE html>
+<html>
+<head>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
+</head>
+<style>
+body {
+    margin: 0;
+    /*font-family: 'Lato', sans-serif;*/
+    font-family: 'Playfair Display', serif;
+    text-align: center;
+        display: block;
+        margin: auto;
+        width: 40%;
+          background: red; /* For browsers that do not support gradients */
+          background: -webkit-linear-gradient(right,rgba(51,51,153,0),rgba(51,51,153,1)); /*Safari 5.1-6*/
+          background: -o-linear-gradient(left,rgba(51,51,153,0),rgba(51,51,153,1)); /*Opera 11.1-12*/
+          background: -moz-linear-gradient(left,rgba(51,51,153,0),rgba(51,51,153,1)); /*Fx 3.6-15*/
+          background: linear-gradient(to left, rgba(51,51,153,0),rgba(51,51,153,1)); /*Standard*/
+    
+}
+
+.overlay {
+    height: 0%;
+    width: 100%;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0, 0.9);
+    overflow-y: hidden;
+    transition: 0.5s;
+}
+
+.overlay-content {
+    position: relative;
+    top: 25%;
+    width: 100%;
+    text-align: center;
+    margin-top: 30px;
+}
+
+.overlay a {
+    padding: 8px;
+    text-decoration: none;
+    font-size: 36px;
+    color: #818181;
+    display: block;
+    transition: 0.3s;
+}
+
+.overlay a:hover, .overlay a:focus {
+    color: #f1f1f1;
+}
+
+.overlay .closebtn {
+    position: absolute;
+    top: 20px;
+    right: 45px;
+    font-size: 60px;
+}
+
+@media screen and (max-height: 450px) {
+  .overlay {overflow-y: auto;}
+  .overlay a {font-size: 20px}
+  .overlay .closebtn {
+    font-size: 40px;
+    top: 15px;
+    right: 35px;
+  }
+}
+</style>
+<body>
+
+<div id="myNav" class="overlay">
+  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+  <div class="overlay-content">
+    <a href="https://pzwiki.wdka.nl/mediadesign/Interfacing_the_law" target="_blank">Interfacing The Law</a>
+    <a href="https://issue.xpub.nl/" target="_blank">Special Issue Archive</a>
+    <a href="https://xpub.nl/" target="_blank">XPUB</a>
+    <a href="http://www.pzwart.nl/" target="_blank">Piet Zwart Institute</a>
+  </div>
+</div>
+
+<h2>Interfacing The Law</h2>
 <p>How can the right to access to knowledge be held up against claims of copyright? How can we battle the terror of the mind produced by the current intellectual property regime? Interfacing the law is an attempt to build a series of platforms, both in the sense of on-line interfaces and of public discourse, that allow us to experiment with, to openly discuss and to reflect while the next wave of court cases is waiting to happen. It is urgent that we find ways to make the public debate transcend the juridical binary of illegal vs. legal, and claim political legitimacy for acting out the potential of digital publishing, and the possibility of sharing digital books.</p>
+<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; More Info...</span>
+
+<script>
+function openNav() {
+    document.getElementById("myNav").style.height = "100%";
+}
+
+function closeNav() {
+    document.getElementById("myNav").style.height = "0%";
+}
+</script>
+     
+</body>
+</html>

-Issue in progress, for more info, see <a href="https://pzwiki.wdka.nl/mediadesign/Interfacing_the_law">https://pzwiki.wdka.nl/mediadesign/Interfacing_the_law</a>.