Add waltermode

2019-07-28 15:28:53 +02:00
parent 8e2cf56134
commit 8fbaed01a3
3 changed files with 88 additions and 0 deletions
--- a/cgi-bin/vorbereitung/Hhh.jpg
+++ b/cgi-bin/vorbereitung/Hhh.jpg
--- a/cgi-bin/vorbereitung/money_longer.mp3
+++ b/cgi-bin/vorbereitung/money_longer.mp3
--- a/cgi-bin/vorbereitung/waltermode.html
+++ b/cgi-bin/vorbereitung/waltermode.html
@@ -0,0 +1,88 @@
+<!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: 30%;
+				height: 100%;
+			}
+			100% {
+				width: 100%;
+				height: 30%;
+			}
+}
+
+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;
+        }
+}
+</style>
+</head>
+<body>
+<audio autoplay loop>
+		<source src="./money_longer.mp3" type="audio/mpeg">
+</audio>
+
+<img id="walter" src="./Hhh.jpg">
+<h1><marquee direction="right" behaviour="slide" scrollamount="20">Keeping it final abstract!</marquee></h1>
+<h1><marquee direction="left" behaviour="slide" scrollamount="60">Keeping it final abstract!</marquee></h1>
+</body>
+
+</html>