<!--.:◂◀▸v▶¤◀v∫∫v▶¤◀v∫∫‡####‡‡‡‡###‡‡‡###‡‡####‡∫∫v▶¤◀v∫∫v▶¤◀v◂▶▸:.
| |
| Filename : EH_togehter_parabolic.html |
| Label : Playground |
| Author : Elias Hübner |
| Size : 6.184 bytes |
| Created : 15. February 2024 at 13:44 |
| |
::◂◀▸v▶¤◀v∫∫v▶¤‡‡##‡‡‡‡‡‡‡‡###‡‡###‡‡‡‡##‡‡‡‡##‡‡¤◀v∫∫v▶¤◀v◂▶▸::-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Together</title>
<style>
@font-face {
font-family: Konsole;
src: url(../_fonts/Konsolev1.1-VF.ttf);
}
body {
font-family: Konsole;
font-size: 4.7vh;
overflow: hidden; height: 100vh;
}
p {
padding: 0;
/* defines the space between the text lines */
padding-bottom: 2px;
/* defines the space between the text letters */
margin: 0;
/* aligns the text to the left side */
text-align: left;
/* defines the duration of the animation */
animation-duration: 3s;
/* defines the number of times the animation should be played */
animation-iteration-count: infinite;
/* defines the direction of the animation */
animation-direction: alternate;
/* defines the speed curve of the animation */
animation-timing-function: linear;
}
/* defines the animation name */
@keyframes class-1 {
0% {
/* defines its maximum letter spacing */
letter-spacing: 49px;
}
100% {
/* defines its minimum letter spacing */
letter-spacing: -7px;
}
}
.class-1 {animation-name: class-1;}
@keyframes class-2 {
0% {
letter-spacing: 36px;
}
100% {
letter-spacing: -7px;
}
}
.class-2 {animation-name: class-2;}
@keyframes class-3 {
0% {
letter-spacing: 25px;
}
100% {
letter-spacing: -7px;
}
}
.class-3 {animation-name: class-3;}
@keyframes class-4 {
0% {
letter-spacing: 16px;
}
100% {
letter-spacing: -7px;
}
}
.class-4 {animation-name: class-4;}
@keyframes class-5 {
0% {
letter-spacing: 9px;
}
100% {
letter-spacing: -7px;
}
}
.class-5 {animation-name: class-5;}
@keyframes class-6 {
0% {
letter-spacing: 4px;
}
100% {
letter-spacing: -7px;
}
}
.class-6 {animation-name: class-6;}
@keyframes class-7 {
0% {
letter-spacing: 1px;
}
100% {
letter-spacing: -7px;
}
}
.class-7 {animation-name: class-7;}
@keyframes class-8 {
0% {
letter-spacing: 0px;
}
100% {
letter-spacing: -7px;
}
}
.class-8 {animation-name: class-8;}
@keyframes class-9 {
0% {
letter-spacing: 1px;
}
100% {
letter-spacing: -7px;
}
}
.class-9 {animation-name: class-9;}
@keyframes class-10 {
0% {
letter-spacing: 4px;
}
100% {
letter-spacing: -7px;
}
}
.class-10 {animation-name: class-10;}
@keyframes class-11 {
0% {
letter-spacing: 9px;
}
100% {
letter-spacing: -7px;
}
}
.class-11 {animation-name: class-11;}
@keyframes class-12 {
0% {
letter-spacing: 16px;
}
100% {
letter-spacing: -7px;
}
}
.class-12 {animation-name: class-12;}
@keyframes class-13 {
0% {
letter-spacing: 25px;
}
100% {
letter-spacing: -7px;
}
}
.class-13 {animation-name: class-13;}
@keyframes class-14 {
0% {
letter-spacing: 36px;
}
100% {
letter-spacing: -7px;
}
}
.class-14 {animation-name: class-14;}
@keyframes class-15 {
0% {
letter-spacing: 49px;
}
100% {
letter-spacing: -7px;
}
}
.class-15 {animation-name: class-15;}
@keyframes class-16 {
0% {
letter-spacing: 64px;
}
100% {
letter-spacing: -7px;
}
}
.class-16 {animation-name: class-16;}
@keyframes class-17 {
0% {
letter-spacing: 81px;
}
100% {
letter-spacing: -7px;
}
}
.class-17 {animation-name: class-17;}
@keyframes class-18 {
0% {
letter-spacing: 100px;
}
100% {
letter-spacing: -7px;
}
}
.class-18 {animation-name: class-18;}
</style>
</head>
<body>
<div>
<p class="class-1">TOGETHER</p>
<p class="class-2">TOGETHER</p>
<p class="class-3">TOGETHER</p>
<p class="class-4">TOGETHER</p>
<p class="class-5">TOGETHER</p>
<p class="class-6">TOGETHER</p>
<p class="class-7">TOGETHER</p>
<p class="class-8">TOGETHER</p>
<p class="class-9">TOGETHER</p>
<p class="class-10">TOGETHER</p>
<p class="class-11">TOGETHER</p>
<p class="class-12">TOGETHER</p>
<p class="class-13">TOGETHER</p>
<p class="class-14">TOGETHER</p>
<p class="class-15">TOGETHER</p>
<p class="class-16">TOGETHER</p>
<p class="class-17">TOGETHER</p>
<p class="class-18">TOGETHER</p>
</div>
</body>
</html>
