diff options
| -rw-r--r-- | index.html | 44 | ||||
| -rw-r--r-- | styles.css | 49 |
2 files changed, 91 insertions, 2 deletions
@@ -5,12 +5,54 @@ <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Space+Mono"> <link rel="stylesheet" href="styles.css"> <title>404</title> </head> <body> -<div id="starBackground"></div> +<div id="starBackground" class="starBackground"></div> + +<div class="contentWrapper"> + <div class="content"> + <b>Fook:</b> O Deep Thought computer, the task we have designed you to perform is this. + We want you to tell us... The Answer. + <br> + <b>Deep Thought:</b> The Answer? The Answer to what? + <br> + <b>Fook:</b> Life! + <br> + <b>Lunkwill:</b> The Universe! + <br> + <b>Fook and Lunkwill:</b> Everything - including this web request! + <br> + <b>Deep Thought:</b> Tricky... There is an answer. But, I'll have to think about it. + <br> + <hr> + <b>7 1/2 million years later...</b> + <hr> + <b>Phouchg:</b> Do you have... er, that is... + <br> + <b>Deep Thought:</b> An Answer for you? Yes, I have. + <br> + <b>Loonsuawl:</b> Tell us! + <br> + <b>Deep Thought:</b> You're really not going to like it though. + <br> + <b>Loonsuawl and Phouchg:</b> Doesn't matter! We must know it! Now! + <br> + <b>Deep Thought:</b> Okay. The Answer to the ultimate question of Life, the Universe and Everything - including + this web request... + <br> + <b>Phouchg:</b> Yes..? + <br> + <b>DeepThought:</b> Is... + <br> + <b>Loonsuawl:</b> Yes..!!!...? + <br> + <b>Deep Thought:</b> Four-o-four. + </div> +</div> <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script> <script src="script.js"></script> @@ -1,8 +1,55 @@ -body { +html, body { + overflow: hidden; margin: 0; + font-family: 'Space Mono', monospace; background-color: #0c0c1c; + height: 100%; + width: 100%; } +/* + Background + */ canvas { display: block; + vertical-align: bottom; +} + +.starBackground { + position: absolute; + z-index: 1; + width: 100%; + height: 100%; +} + +/* + Content + */ +.contentWrapper { + position: relative; + height: 100%; + width: 100%; +} + +.content { + position: absolute; + text-align: center; + color: #fff; + font-size: 2vh; + max-width: 85%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +@media only screen and (max-width: 600px) { + .content { + width: 95%; + } +} + +@media only screen and (max-width: 400px) { + .content { + font-size: 1.5vh; + } }
\ No newline at end of file |