<!Doctype html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Baloo+Paaji|Bowlby+One+SC|Overpass+Mono" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<span id="javascript">
<span id="j">J</span>
<span id="a1">a</span>
<span id="v">v</span>
<span id="a2">a</span>
<span id="s">s</span>
<span id="c">c</span>
<span id="r">r</span>
<span id="i">i</span>
<span id="p">p</span>
<span id="t">t</span>
</span>
<br>
<span id="kurs"> kurs</span>
</body>
<html>
body{
background-color: rgb(73, 201, 252);
overflow: hidden;
}
#javascript{
height: 20vh;
position:relative;
left:54%;
top:66vh;
font-family: 'Overpass Mono', monospace;
font-family: 'Bowlby One SC', cursive;
font-family: 'Baloo Paaji', cursive;
font-size:15vh;
color:white;
letter-spacing: -1vh;
text-shadow: 2px 3px 4px black;
}
#kurs{
position:absolute;
right:-150%;
font-family: 'Overpass Mono', monospace;
font-family: 'Bowlby One SC', cursive;
font-family: 'Baloo Paaji', cursive;
font-size:9vh;
color:white;
letter-spacing: 1vh;
text-shadow: 2px 3px 4px black;
animation:1s kurs forwards;
animation-delay: 0.3s;
z-index: 2;
}
@keyframes kurs{
from{right:-150%;}
to{right:38%;top:60vh;}
}
#j{
animation:0.8s from_up forwards;
top:0vh;
position:relative;
left: 1%
}
@keyframes from_up{
from{top:-90vh;left:-130vh;}
to{top:0vh;left:0vh;}
}
#a1{
animation:0.8s a1 forwards;
top:0vh;
position: relative;
left:0%;
}
@keyframes a1{
from{top:70vh; left:-38vh;}
to{top:0vh;}
}
#v{
animation:0.8s v forwards;
top:0vh;
position:relative;
left:0%;
}
@keyframes v{
from{top:220vh;left:50vh;}
to{top:0vh;}
}
#a2{
animation:0.8s a2 forwards;
top:0vh;
position:relative;
left:0%;
}
@keyframes a2{
from{top:-80vh;left:-12vh;}
to{top:0vh;}
}
#s{
animation:0.7s s forwards;
top:0vh;
position:relative;
left:0%;
}
@keyframes s{
from{top:150vh;left:-37vh;}
to{top:0vh;}
}
#c{
animation:0.81s c forwards;
top:0vh;
position:relative;
left:0%;
}
@keyframes c{
from{top:140vh; left:140vh;}
to{top:0vh;}
}
#r{
animation:0.61s r forwards;
top:0vh;
position:relative;
left:0%;
}
@keyframes r{
from{top:150vh;left:-190vh;}
to{top:0vh;}
}
#i{
animation:0.8s i forwards;
top:0vh;
position:relative;
left:0%;
}
@keyframes i{
from{top:-60vh;left:130vh;}
to{top:0vh;}
}
#p{
animation:0.8s p forwards;
top:0vh;
position:relative;
left:0%;
}
@keyframes p{
from{top:100vh;left:200vh;}
to{top:0vh;}
}
#t{
animation:0.8s t forwards;
top:0vh;
position:relative;
left:0%;
}
@keyframes t{
from{top:0vh;left:600vh;}
to{top:0vh;}
}
</style>