From 3052f4212882540457ab1174919065f9bd104f03 Mon Sep 17 00:00:00 2001 From: Nathanwoodburn Date: Mon, 23 Nov 2020 17:10:15 +1100 Subject: [PATCH] Made a new fun 404 Page --- 404.css | 145 ++++++++------------------------------ 404.html | 25 ++++--- Invaders/404.js => 404.js | 0 Invaders/404.css | 37 ---------- Invaders/404.html | 24 ------- Invaders/index.html | 24 ------- old 404/404.css | 122 ++++++++++++++++++++++++++++++++ old 404/404.html | 25 +++++++ 8 files changed, 189 insertions(+), 213 deletions(-) rename Invaders/404.js => 404.js (100%) delete mode 100644 Invaders/404.css delete mode 100644 Invaders/404.html delete mode 100644 Invaders/index.html create mode 100644 old 404/404.css create mode 100644 old 404/404.html diff --git a/404.css b/404.css index 0634f04..ebbffd2 100644 --- a/404.css +++ b/404.css @@ -1,122 +1,37 @@ -@import "https://fonts.googleapis.com/css?family=Inconsolata"; -html { - min-height: 100%; -} - -body { - box-sizing: border-box; - height: 100%; - background-color: #000000; - background-image: radial-gradient(#11581E, #041607), url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif"); - background-repeat: no-repeat; - background-size: cover; - font-family: 'Inconsolata', Helvetica, sans-serif; - font-size: 1.5rem; - color: rgba(128, 255, 128, 0.8); - text-shadow: 0 0 1ex #33ff33, 0 0 2px rgba(255, 255, 255, 0.8); -} - -.noise { - pointer-events: none; - position: absolute; - width: 100%; - height: 100%; - background-image: url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif"); - background-repeat: no-repeat; - background-size: cover; - z-index: -1; - opacity: .02; -} - -.overlay { - pointer-events: none; - position: absolute; - width: 100%; - height: 100%; - background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%); - background-size: auto 4px; - z-index: 1; -} - -.overlay::before { - content: ""; - pointer-events: none; - position: absolute; +.center{text-align:center} +#space-invaders { + margin: 0 auto; display: block; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - background-image: -webkit-gradient(linear, left bottom, left top, from(transparent), color-stop(2%, rgba(32, 128, 32, 0.2)), color-stop(3%, rgba(32, 128, 32, 0.8)), color-stop(3%, rgba(32, 128, 32, 0.2)), to(transparent)); - background-image: linear-gradient(0deg, transparent 0%, rgba(32, 128, 32, 0.2) 2%, rgba(32, 128, 32, 0.8) 3%, rgba(32, 128, 32, 0.2) 3%, transparent 100%); - background-repeat: no-repeat; - -webkit-animation: scan 7.5s linear 0s infinite; - animation: scan 7.5s linear 0s infinite; + background: white } - -@-webkit-keyframes scan { - 0% { - background-position: 0 -100vh; - } - 35%, 100% { - background-position: 0 100vh; - } -} - -@keyframes scan { - 0% { - background-position: 0 -100vh; - } - 35%, 100% { - background-position: 0 100vh; - } -} -.terminal { - box-sizing: inherit; - position: absolute; - height: 100%; - width: 1000px; - max-width: 100%; - padding: 4rem; +t2 { + position: relative; text-transform: uppercase; -} - -.output { - color: rgba(128, 255, 128, 0.8); - text-shadow: 0 0 1px rgba(51, 255, 51, 0.4), 0 0 2px rgba(255, 255, 255, 0.8); -} - -.output::before { - content: "> "; -} - -/* -.input { - color: rgba(192, 255, 192, 0.8); - text-shadow: - 0 0 1px rgba(51, 255, 51, 0.4), - 0 0 2px rgba(255, 255, 255, 0.8); -} - -.input::before { - content: "$ "; -} -*/ -a { - color: #fff; + letter-spacing: 6px; + font-size: 22px; + text-align: center; + font-weight: 900; text-decoration: none; + color: black; + position: absolute; + left: 38.5%; + background-size: 120% 100%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + -moz-background-clip: text; + -moz-text-fill-color: transparent; + -ms-background-clip: text; + -ms-text-fill-color: transparent; + background-clip: text; + background-color: #000000; + animation: 0.2s shake infinite alternate; } -a::before { - content: "["; -} - -a::after { - content: "]"; -} - -.errorcode { - color: white; +@keyframes shake { + 0% { transform: skewX(-15deg); } + 5% { transform: skewX(15deg); } + 10% { transform: skewX(-15deg); } + 15% { transform: skewX(15deg); } + 20% { transform: skewX(0deg); } + 100% { transform: skewX(0deg); } } \ No newline at end of file diff --git a/404.html b/404.html index e4ecd97..d433329 100644 --- a/404.html +++ b/404.html @@ -3,23 +3,22 @@ Nathan Woodburn - + - - + - + -
-
-
-

Error 404

-

The page you are looking for might have been removed, had its name changed or is temporarily unavailable.

-

Please try to go back or return to the homepage.

-

Good luck.

-
+




+

Space Invaders destroyed this page!

+Take revenge on them! +




Use Space to shoot and ← → to move!    or

+ + - + + diff --git a/Invaders/404.js b/404.js similarity index 100% rename from Invaders/404.js rename to 404.js diff --git a/Invaders/404.css b/Invaders/404.css deleted file mode 100644 index ebbffd2..0000000 --- a/Invaders/404.css +++ /dev/null @@ -1,37 +0,0 @@ -.center{text-align:center} -#space-invaders { - margin: 0 auto; - display: block; - background: white -} -t2 { - position: relative; - text-transform: uppercase; - letter-spacing: 6px; - font-size: 22px; - text-align: center; - font-weight: 900; - text-decoration: none; - color: black; - position: absolute; - left: 38.5%; - background-size: 120% 100%; - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - -moz-background-clip: text; - -moz-text-fill-color: transparent; - -ms-background-clip: text; - -ms-text-fill-color: transparent; - background-clip: text; - background-color: #000000; - animation: 0.2s shake infinite alternate; -} - -@keyframes shake { - 0% { transform: skewX(-15deg); } - 5% { transform: skewX(15deg); } - 10% { transform: skewX(-15deg); } - 15% { transform: skewX(15deg); } - 20% { transform: skewX(0deg); } - 100% { transform: skewX(0deg); } -} \ No newline at end of file diff --git a/Invaders/404.html b/Invaders/404.html deleted file mode 100644 index d433329..0000000 --- a/Invaders/404.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - Nathan Woodburn - - - - - - - -




-

Space Invaders destroyed this page!

-Take revenge on them! -




Use Space to shoot and ← → to move!    or

- - - - - - - diff --git a/Invaders/index.html b/Invaders/index.html deleted file mode 100644 index 5fad7d8..0000000 --- a/Invaders/index.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - Nathan Woodburn - - - - - - - -




-

Space Invaders destroyed this page!

-Take revenge on them! -




Use Space to shoot and ← → to move!    or

- - - - - - - diff --git a/old 404/404.css b/old 404/404.css new file mode 100644 index 0000000..0634f04 --- /dev/null +++ b/old 404/404.css @@ -0,0 +1,122 @@ +@import "https://fonts.googleapis.com/css?family=Inconsolata"; +html { + min-height: 100%; +} + +body { + box-sizing: border-box; + height: 100%; + background-color: #000000; + background-image: radial-gradient(#11581E, #041607), url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif"); + background-repeat: no-repeat; + background-size: cover; + font-family: 'Inconsolata', Helvetica, sans-serif; + font-size: 1.5rem; + color: rgba(128, 255, 128, 0.8); + text-shadow: 0 0 1ex #33ff33, 0 0 2px rgba(255, 255, 255, 0.8); +} + +.noise { + pointer-events: none; + position: absolute; + width: 100%; + height: 100%; + background-image: url("https://media.giphy.com/media/oEI9uBYSzLpBK/giphy.gif"); + background-repeat: no-repeat; + background-size: cover; + z-index: -1; + opacity: .02; +} + +.overlay { + pointer-events: none; + position: absolute; + width: 100%; + height: 100%; + background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%); + background-size: auto 4px; + z-index: 1; +} + +.overlay::before { + content: ""; + pointer-events: none; + position: absolute; + display: block; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + background-image: -webkit-gradient(linear, left bottom, left top, from(transparent), color-stop(2%, rgba(32, 128, 32, 0.2)), color-stop(3%, rgba(32, 128, 32, 0.8)), color-stop(3%, rgba(32, 128, 32, 0.2)), to(transparent)); + background-image: linear-gradient(0deg, transparent 0%, rgba(32, 128, 32, 0.2) 2%, rgba(32, 128, 32, 0.8) 3%, rgba(32, 128, 32, 0.2) 3%, transparent 100%); + background-repeat: no-repeat; + -webkit-animation: scan 7.5s linear 0s infinite; + animation: scan 7.5s linear 0s infinite; +} + +@-webkit-keyframes scan { + 0% { + background-position: 0 -100vh; + } + 35%, 100% { + background-position: 0 100vh; + } +} + +@keyframes scan { + 0% { + background-position: 0 -100vh; + } + 35%, 100% { + background-position: 0 100vh; + } +} +.terminal { + box-sizing: inherit; + position: absolute; + height: 100%; + width: 1000px; + max-width: 100%; + padding: 4rem; + text-transform: uppercase; +} + +.output { + color: rgba(128, 255, 128, 0.8); + text-shadow: 0 0 1px rgba(51, 255, 51, 0.4), 0 0 2px rgba(255, 255, 255, 0.8); +} + +.output::before { + content: "> "; +} + +/* +.input { + color: rgba(192, 255, 192, 0.8); + text-shadow: + 0 0 1px rgba(51, 255, 51, 0.4), + 0 0 2px rgba(255, 255, 255, 0.8); +} + +.input::before { + content: "$ "; +} +*/ +a { + color: #fff; + text-decoration: none; +} + +a::before { + content: "["; +} + +a::after { + content: "]"; +} + +.errorcode { + color: white; +} \ No newline at end of file diff --git a/old 404/404.html b/old 404/404.html new file mode 100644 index 0000000..e4ecd97 --- /dev/null +++ b/old 404/404.html @@ -0,0 +1,25 @@ + + + + + Nathan Woodburn + + + + + + + + +
+
+
+

Error 404

+

The page you are looking for might have been removed, had its name changed or is temporarily unavailable.

+

Please try to go back or return to the homepage.

+

Good luck.

+
+ + + +