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.
110 lines
3.8 KiB
HTML
110 lines
3.8 KiB
HTML
<!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><p id="symbolA">A</p><br><br><br>
|
|
|
|
<p id="Liquid">Liquid</p><p id="symbolL">L</p><br><br><br>
|
|
|
|
<p id="Otherness">Otherness<p id="symbolO">O</p><br><br><br>
|
|
|
|
<p id="Eco">Eco-Swaraj<p id="symbolE">E</p><br><br><br>
|
|
|
|
<p id="M">!?<p id="symbolM">M</p><br><br><br>
|
|
|
|
<p id="Tense">Tense<p id="symbolT">T</p><br><br><br>
|
|
|
|
<p id="Hope">Hope<p id="symbolH">H</p><br><br><br>
|
|
|
|
<p id="Practical">Practical Vision<p id="symbolP">P</p><br><br><br>
|
|
|
|
<p id="Resurgence1">Resurgence<p id="symbolR">R</p><br><br><br>
|
|
|
|
<p id="Undecidability">Undecidability<p id="symbolU">U</p><br><br><br><br><br><br>
|
|
|
|
|
|
|
|
|
|
<!--<img id="Resurgence" src="grab.png"><br><br>
|
|
<img id="pic2" class="pic" src="IMAGES/resurgence/rock2.png"><br><br>
|
|
<br><br>
|
|
<img id="pic4" class="pic" src="IMAGES/practical/practical1.png"><br><br>
|
|
<img id="pic5" class="pic" src="IMAGES/practical/practical2.png"><br><br>
|
|
<img id="pic6" class="pic" src="IMAGES/practical/practical3.png"><br><br>-->
|
|
|
|
</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>
|
|
|
|
<button class="about" onclick=""><b>About</b></button>
|
|
<div class="container"><span class="close"><button> ×</button></span>THIS IS ABOUT </div>
|
|
|
|
<button class="colophon"><b>Colophon</b></button>
|
|
<div class="container">
|
|
<p> THIS IS THE COLOPHON</p> <span class="close"><button id="close"> ×</button></span>
|
|
|
|
<div>
|
|
|
|
|
|
<button class="licenses" onclick=""><b>Licenses</b></button></div>
|
|
<div class="container"><p> THIS IS THE LICENSES </p><span class="close"><button> ×</button></span></div>
|
|
|
|
<script src="script.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
const button = document.querySelector(".colophon");
|
|
const container = document.querySelector(".container");
|
|
const close = document.querySelector(".close");
|
|
const enter = document.querySelector(".enter");
|
|
const intro = document.querySelector(".intro");
|
|
|
|
button.addEventListener('click', () =>{
|
|
container.style.visibility = "visible";
|
|
container.style.opacity = 1;
|
|
|
|
});
|
|
|
|
|
|
button.addEventListener('click', () =>{
|
|
container.style.visibility = "visible";
|
|
container.style.opacity = 1;
|
|
|
|
});
|
|
|
|
close.addEventListener('click', () =>{
|
|
container.style.visibility = "hidden";
|
|
container.style.opacity = 0;
|
|
});
|
|
|
|
enter.addEventListener('click', () =>{
|
|
intro.style.visibility = "hidden";
|
|
intro.style.opacity = 0;
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|
|
|