91 lines
1.9 KiB
HTML
91 lines
1.9 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<style>
|
|||
|
|
@font-face {
|
|||
|
|
font-family: "wrong font";
|
|||
|
|
src: url("https://files.pad.ma/ttf/wrongfont.woff") format("woff");
|
|||
|
|
}
|
|||
|
|
h1 {
|
|||
|
|
font-family: "wrong font";
|
|||
|
|
margin: auto;
|
|||
|
|
font-weight: normal;
|
|||
|
|
color: yellow;
|
|||
|
|
font-size: 66px;
|
|||
|
|
letter-spacing: 3px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
h2 {
|
|||
|
|
color: #6666ff;
|
|||
|
|
font-family: "wrong font";
|
|||
|
|
}
|
|||
|
|
#box {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
body {
|
|||
|
|
font-family: "wrong font";
|
|||
|
|
overflow: hidden;
|
|||
|
|
background: black;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#shadowBox {
|
|||
|
|
background-color: rgb(0, 0, 0);
|
|||
|
|
/* Fallback color */
|
|||
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|||
|
|
/* Black w/opacity/see-through */
|
|||
|
|
border: 3px solid;
|
|||
|
|
margin: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rainbow_text_animated {
|
|||
|
|
background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
|
|||
|
|
-webkit-background-clip: text;
|
|||
|
|
background-clip: text;
|
|||
|
|
color: transparent;
|
|||
|
|
animation: rainbow_animation 6s ease-in-out infinite;
|
|||
|
|
background-size: 400% 100%;
|
|||
|
|
}
|
|||
|
|
.reflection {
|
|||
|
|
transform: scaley(-1);
|
|||
|
|
opacity: 0.3;
|
|||
|
|
margin-top: -8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes rainbow_animation {
|
|||
|
|
0%,100% {
|
|||
|
|
background-position: 0 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
50% {
|
|||
|
|
background-position: 100% 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
<title>phantas.ma</title>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="box">
|
|||
|
|
<div id="shadowBox">
|
|||
|
|
<h1 class="rainbow rainbow_text_animated">Phantas.ma</h1>
|
|||
|
|
<h2></h2>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
path = document.location.pathname.slice(1)
|
|||
|
|
if (path) {
|
|||
|
|
document.querySelector('h1').innerHTML = 'Phantas.ma/' + path
|
|||
|
|
if (path == 'polis') {
|
|||
|
|
setTimeout(() => {
|
|||
|
|
document.querySelector('h2').innerHTML = 'Oct 30, 2021 – Mar 6, 2022'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|