<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Wor(l)ds for the Future</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="plain-draggable.min.js"></script> <script data-require="p5.js@0.5.7" data-semver="0.5.7" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script> <script data-require="p5.dom.js@0.5.7" data-semver="0.5.7" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.min.js"></script> <link rel="stylesheet" type="text/css" href="louisa.css" media="screen"/> </head> <body> <map name="image-map"> <area target="" alt="" title="" href="LIQUID/" coords="766,1156,942,1272" shape="rect"> <area target="" alt="" title="" href="OTHERNESS/" coords="1740,264,2009,372" shape="rect"> <area target="" alt="" title="" href="ECO-SWARAJ/" coords="166,1315,128" shape="circle"> </map> <div id="container"> <p id="atata">Atata</p><br> <p id="Liquid">Liquid</p><br><br> <p id="!?">!?</p><br><br> <p id="Otherness">Otherness</p><br><br><br><br><br> <img id="Resurgence" src="grab.png"> <img id="pic" class="pic" src="IMAGES/resurgence/resurgence-icon-01-01.png"> <img id="pic2" class="pic" src="IMAGES/resurgence/rock2.png"> <img id="pic3" class="pic" src="IMAGES/liquid/liquidsym2.png"> <img id="pic4" class="pic" src="IMAGES/practical/practical1.png"> <img id="pic5" class="pic" src="IMAGES/practical/practical2.png"> <img id="pic6" class="pic" src="IMAGES/practical/practical3.png"> </div> <button id="practical" onclick=""><b>Practical Visions</b></button> <button id="complexities" onclick=""><b>Complexities</b></button> <button id="gramviz" onclick=""><b>A Data Visualization</b></button> <button id="collang" onclick=""><b>Colonial Languages</b></button> <button id="bot" onclick=""><b>Practical Bot</b></button> <button class="colophon"><b>Colophon</b></button> <div class="container">THIS IS THE COLOPHON <span class="close"><button> ×</button></span> <div> <div class="intro">WELCOME TO WOR(L)DS FOR THE FUTURE BLABLA DRAW OR DRAG AND DROP OR WHATEVER<button class="enter"><b>ENTER</b></button> <div> <script> const button = document.querySelector(".colophon"); const container = document.querySelector(".container"); const close = document.querySelector(".close"); //const trailer2 = document.querySelector(".trailer2"); //const close2 = document.querySelector(".close2"); button.addEventListener('click', () =>{ container.style.visibility = "visible"; container.style.opacity = 1; }); close.addEventListener('click', () =>{ container.style.visibility = "hidden"; container.style.opacity = 0; }); //close2.addEventListener('click', () =>{ //trailer2.style.visibility = "hidden"; //trailer2.style.opacity = 0; //coin3.style.visibility = "visible"; //coin3.style.opacity = 1; </script> <script src="script.js"></script> </body> </html>