117 lines
2.5 KiB
HTML
117 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<title>WaLtErMoDe!1!</title>
|
|
|
|
<style>
|
|
#walter {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 0px;
|
|
//height: 70%;
|
|
z-index: 3;
|
|
|
|
animation-name: stretchyWalter;
|
|
animation-duration: 1.8s;
|
|
animation-timing-function: linear;
|
|
animation-direction: alternate;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
@keyframes stretchyWalter {
|
|
0% {
|
|
width: 10%;
|
|
height: 90%;
|
|
}
|
|
100% {
|
|
width: 90%;
|
|
height: 10%;
|
|
}
|
|
}
|
|
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
margin: 0px;
|
|
|
|
animation-name: lsd;
|
|
animation-duration: 0.6s;
|
|
animation-timing-function: linear;
|
|
animation-direction: alternate;
|
|
animation-iteration-count: infinite;
|
|
|
|
}
|
|
|
|
h1 {
|
|
animation-name: lsd;
|
|
animation-duration: 0.6s;
|
|
animation-timing-function: linear;
|
|
animation-direction: alternate;
|
|
animation-iteration-count: infinite;
|
|
animation-delay: 2s;
|
|
|
|
}
|
|
|
|
@keyframes lsd {
|
|
0% {
|
|
background-color: yellow;
|
|
}
|
|
20% {
|
|
background-color: green;
|
|
}
|
|
40% {
|
|
background-color: red;
|
|
}
|
|
60% {
|
|
background-color: cyan;
|
|
}
|
|
80% {
|
|
background-color: violet;
|
|
}
|
|
100% {
|
|
background-color: blue;
|
|
}
|
|
}
|
|
|
|
.howard {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
height: 30%;
|
|
width: 30%;
|
|
z-index: 3;
|
|
|
|
animation-name: howardspin;
|
|
animation-duration: 2.4s;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
|
|
}
|
|
|
|
@keyframes howardspin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<audio autoplay loop>
|
|
<source src="./fortnite.mp3" type="audio/mpeg">
|
|
</audio>
|
|
|
|
<img id="walter" src="./Hhh.jpg">
|
|
<h1><marquee direction="right" behaviour="slide" scrollamount="20">420</marquee></h1>
|
|
<h1><marquee direction="left" behaviour="slide" scrollamount="60">Blaze it!</marquee></h1>
|
|
<h1><a href="https://www.youtube.com/watch?v=x84cV3iikmU"><marquee direction="left" behaviour="slide" scrollamount="60">https://www.youtube.com/watch?v=x84cV3iikmU</marquee></a></h1>
|
|
<img class="howard" src="https://media.giphy.com/media/1oE3Ee4299mmXN8OYb/giphy.gif">
|
|
|
|
</body>
|
|
|
|
</html>
|