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