summaryrefslogtreecommitdiff
path: root/doge
diff options
context:
space:
mode:
authors1n <[email protected]>2019-07-28 19:16:07 +0200
committerGitHub <[email protected]>2019-07-28 19:16:07 +0200
commitf4051118a414214ac85c3d7db0c04fc873a05521 (patch)
tree4791882905394e95117643058a93d278f7754ab1 /doge
parentadd dino game actually (diff)
downloads1n.pw-admin-f4051118a414214ac85c3d7db0c04fc873a05521.tar.xz
s1n.pw-admin-f4051118a414214ac85c3d7db0c04fc873a05521.zip
add doge in space lol
Diffstat (limited to 'doge')
-rw-r--r--doge/css/main.css159
-rw-r--r--doge/css/main.scss104
-rw-r--r--doge/favicon.pngbin0 -> 9191 bytes
-rw-r--r--doge/index.html30
4 files changed, 293 insertions, 0 deletions
diff --git a/doge/css/main.css b/doge/css/main.css
new file mode 100644
index 0000000..d182707
--- /dev/null
+++ b/doge/css/main.css
@@ -0,0 +1,159 @@
+body {
+ background-image: url("http://fay.io/w/space.jpg");
+ background-repeat: repeat;
+ background-position: top center;
+}
+
+.rotate-container-1 {
+ -webkit-animation: shrink 6s linear infinite, fade 6s linear infinite;
+ animation: shrink 6s linear infinite, fade 6s linear infinite;
+}
+
+.rotate-container-1 .rotate {
+ -webkit-animation: spin 6s linear infinite;
+ animation: spin 6s linear infinite;
+}
+
+.rotate-container-1 .rotate-object {
+ background: url("http://fay.io/w/doge.png") no-repeat;
+ background-size: 100%;
+}
+
+.rotate-container-2 {
+ -webkit-animation: shrink 6s linear infinite 2s, fade 6s linear infinite 2s;
+ animation: shrink 6s linear infinite 2s, fade 6s linear infinite 2s;
+}
+
+.rotate-container-2 .rotate {
+ -webkit-animation: spin 6s linear infinite 2s;
+ animation: spin 6s linear infinite 2s;
+}
+
+.rotate-container-2 .rotate-object {
+ background: url("http://fay.io/w/wrecking-ball(1).png") no-repeat;
+ background-size: 100%;
+}
+
+.rotate-container-3 {
+ -webkit-animation: shrink 6s linear infinite 4s, fade 6s linear infinite 4s;
+ animation: shrink 6s linear infinite 4s, fade 6s linear infinite 4s;
+}
+
+.rotate-container-3 .rotate {
+ -webkit-animation: spin 6s linear infinite 2s;
+ animation: spin 6s linear infinite 2s;
+}
+
+.rotate-container-3 .rotate-object {
+ background: url("http://fay.io/w/grumpy-cat.png") no-repeat;
+ background-size: 100%;
+}
+
+.rotate-container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ width: 1em;
+ height: 1em;
+ margin: auto;
+ -webkit-backface-visibility: hidden;
+ -webkit-perspective: 1000;
+}
+
+.rotate {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 1em;
+ height: 20em;
+ margin-left: -.5em;
+ -webkit-transform-origin: 50% 0;
+ transform-origin: 50% 0;
+}
+
+.rotate-object {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ width: 5em;
+ height: 5em;
+ margin-left: -2.5em;
+ -webkit-animation: spin 20s linear infinite;
+ animation: spin 20s linear infinite;
+}
+
+@-webkit-keyframes spin {
+ from {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ to {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes spin {
+ from {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ to {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+}
+
+@-webkit-keyframes shrink {
+ from {
+ -webkit-transform: scale(3);
+ transform: scale(3);
+ }
+ to {
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ }
+}
+
+@keyframes shrink {
+ from {
+ -webkit-transform: scale(3);
+ transform: scale(3);
+ }
+ to {
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ }
+}
+
+@-webkit-keyframes fade {
+ 0% {
+ opacity: 0;
+ }
+ 5% {
+ opacity: 1;
+ }
+ 80% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+
+@keyframes fade {
+ 0% {
+ opacity: 0;
+ }
+ 5% {
+ opacity: 1;
+ }
+ 80% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
diff --git a/doge/css/main.scss b/doge/css/main.scss
new file mode 100644
index 0000000..2153e46
--- /dev/null
+++ b/doge/css/main.scss
@@ -0,0 +1,104 @@
+body {
+ background-image: url('http://fay.io/w/space.jpg');
+ background-repeat: repeat;
+ background-position: top center;
+ }
+
+ .rotate-container-1 {
+ animation: shrink 6s linear infinite,
+ fade 6s linear infinite;
+ .rotate {
+ animation: spin 6s linear infinite;
+ }
+ .rotate-object {
+ background: url('http://fay.io/w/doge.png') no-repeat;
+ background-size: 100%;
+ }
+ }
+
+ .rotate-container-2 {
+ animation: shrink 6s linear infinite 2s,
+ fade 6s linear infinite 2s;
+ .rotate {
+ animation: spin 6s linear infinite 2s;
+ }
+ .rotate-object {
+ background: url('http://fay.io/w/wrecking-ball(1).png') no-repeat;
+ background-size: 100%;
+ }
+ }
+
+ .rotate-container-3 {
+ animation: shrink 6s linear infinite 4s,
+ fade 6s linear infinite 4s;
+ .rotate {
+ animation: spin 6s linear infinite 2s;
+ }
+ .rotate-object {
+ background: url('http://fay.io/w/grumpy-cat.png') no-repeat;
+ background-size: 100%;
+ }
+ }
+
+ .rotate-container {
+ position: absolute;
+ top: 0; left: 0; right: 0; bottom: 0;
+ width: 1em;
+ height: 1em;
+ margin: auto;
+ -webkit-backface-visibility: hidden;
+ -webkit-perspective: 1000;
+ }
+
+ .rotate {
+ position: absolute;
+ top: 50%;;
+ left: 50%;
+ width: 1em;
+ height: 20em;
+ margin-left: -.5em;
+ transform-origin: 50% 0;
+ }
+
+ .rotate-object {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ width: 5em;
+ height: 5em;
+ margin-left: -2.5em;
+ animation: spin 20s linear infinite;
+ }
+
+ @keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ }
+
+ @keyframes shrink {
+ from {
+ transform: scale( 3 );
+ }
+ to {
+ transform: scale( 0 );
+ }
+ }
+
+ @keyframes fade {
+ 0% {
+ opacity: 0;
+ }
+ 5% {
+ opacity: 1;
+ }
+ 80% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+ } \ No newline at end of file
diff --git a/doge/favicon.png b/doge/favicon.png
new file mode 100644
index 0000000..b8838f1
--- /dev/null
+++ b/doge/favicon.png
Binary files differ
diff --git a/doge/index.html b/doge/index.html
new file mode 100644
index 0000000..1ae2f87
--- /dev/null
+++ b/doge/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <title>s1nical - Doge in space</title>
+ <link rel="stylesheet" href="css/main.css">
+ <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
+</head>
+<body>
+ <div class="rotate-container rotate-container-1">
+ <div class="rotate">
+ <div class="rotate-object"></div>
+ </div>
+ </div>
+
+ <div class="rotate-container rotate-container-2">
+ <div class="rotate">
+ <div class="rotate-object"></div>
+ </div>
+ </div>
+
+ <div class="rotate-container rotate-container-3">
+ <div class="rotate">
+ <div class="rotate-object"></div>
+ </div>
+ </div>
+</body>
+</html> \ No newline at end of file