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.
92 lines
3.2 KiB
HTML
92 lines
3.2 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><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> |