added web files
parent
70fe7023ae
commit
69a61088c4
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Practical Vision</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>PRACTICAL<BR>VISIONS</h1>
|
||||
</header>
|
||||
|
||||
<div class="panel">
|
||||
<nav class="navigation">
|
||||
<button id="practical" onclick=""><b>Practical Visions</b></a>
|
||||
<button id="complexities" onclick=""><b>Complexities</b></a>
|
||||
<button id="gramviz" onclick=""><b>A Data Visualization</b></a>
|
||||
<button id="collang" onclick=""><b>Colonial Languages</b></a>
|
||||
<button id="bot" onclick=""><b>Practical Bot</b></a>
|
||||
|
||||
<button id="print" onclick=""><b>Print</b></a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="legenda">
|
||||
<ul>
|
||||
<li>element 1</li>
|
||||
<li>element 2</li>
|
||||
<li>element 3</li>
|
||||
<li>element 4</li>
|
||||
<li>element 5</li>
|
||||
<li>element 6</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="contents">
|
||||
<p>daghe</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script src="script.js" async defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,137 @@
|
||||
:root{
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
--background-color: white;
|
||||
--regular: 30px
|
||||
}
|
||||
|
||||
body{
|
||||
margin: 0 ;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: var(--background-color);
|
||||
background-image: url('grid.png');
|
||||
background-size: 5cm;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
header{
|
||||
z-index: 120;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
transform: rotate(-13deg);
|
||||
font-size: 7vw;
|
||||
color: rgb(227, 224, 240);
|
||||
margin: 0 10%;
|
||||
animation: cycle 1s linear ;
|
||||
color: rgba(0,0,0,0);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
button{
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
padding: 0.5vw 1.5em;
|
||||
color: blue;
|
||||
font-size: var(--regular);
|
||||
text-decoration: none;
|
||||
margin-bottom: 1.5vw;
|
||||
background-color: rgba(104, 96, 226, 0.164);
|
||||
border-radius: 40px;
|
||||
box-shadow: 3px 8px 20px rgba(78, 78, 219, 0.76);
|
||||
}
|
||||
|
||||
nav{
|
||||
z-index: 100;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
-webkit-box-align: start;
|
||||
align-items: flex-start;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
flex-direction: column;
|
||||
z-index: 110;
|
||||
color: blue;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#print{
|
||||
color: red;
|
||||
background-color: rgba(226, 96, 96, 0.164);
|
||||
border-radius: 50px 4px;
|
||||
box-shadow: 3px 8px 20px rgba(214, 29, 53, 0.76);
|
||||
position: absolute;
|
||||
bottom:1vw;
|
||||
left:1vw;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contents{
|
||||
display: none;
|
||||
z-index: 90;
|
||||
background-color: white;
|
||||
box-shadow: 1px 3px 90px 20px rgba(4, 14, 70, 0.76) ;
|
||||
border: blue 0.5vw;
|
||||
width: 70vw;
|
||||
height: 70vh;
|
||||
margin-left: 10vw;
|
||||
}
|
||||
|
||||
.legenda{
|
||||
columns: 2;
|
||||
padding: 0.3vw;
|
||||
z-index: 170;
|
||||
border: black dashed 0.3vw;
|
||||
width: 15%;
|
||||
height: 15%;
|
||||
|
||||
position:absolute;
|
||||
bottom:1vw;
|
||||
right:1vw;
|
||||
}
|
||||
|
||||
ul{
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-around;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
|
||||
li{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
font-size: 1vw;
|
||||
/* align-content: stretch; */
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@keyframes cycle {
|
||||
0% { text-shadow: rgb(43, 98, 201) 10px 10px 20px;}
|
||||
20% {color: darkblue;}
|
||||
40% {text-shadow:darkblue 10px 10px 20px;}
|
||||
60% {text-shadow: rgb(43, 98, 201) 10px 10px 200px;}
|
||||
80% { color: rgba(227, 224, 240,0);}
|
||||
90% {visibility: hidden;}
|
||||
}
|
||||
Loading…
Reference in New Issue