diff options
Diffstat (limited to '404')
| -rw-r--r-- | 404/css/main.css | 78 | ||||
| -rw-r--r-- | 404/css/main.css.map | 9 | ||||
| -rw-r--r-- | 404/css/main.scss | 67 | ||||
| -rw-r--r-- | 404/js/main.js | 6 | ||||
| -rw-r--r-- | 404/not-found-page.html | 22 |
5 files changed, 182 insertions, 0 deletions
diff --git a/404/css/main.css b/404/css/main.css new file mode 100644 index 0000000..45b87fd --- /dev/null +++ b/404/css/main.css @@ -0,0 +1,78 @@ +html { + height: 100%; +} + +body { + height: 100%; + background: url("https://wallpapercave.com/wp/6SLzBEY.jpg") no-repeat left top; + background-size: cover; + overflow: hidden; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column wrap; + flex-flow: column wrap; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.text h1 { + color: #011718; + margin-top: -200px; + font-size: 15em; + text-align: center; + text-shadow: -5px 5px 0px rgba(0, 0, 0, 0.7), -10px 10px 0px rgba(0, 0, 0, 0.4), -15px 15px 0px rgba(0, 0, 0, 0.2); + font-family: monospace; + font-weight: bold; +} + +.text h2 { + color: black; + font-size: 5em; + text-shadow: -5px 5px 0px rgba(0, 0, 0, 0.7); + text-align: center; + margin-top: -150px; + font-family: monospace; + font-weight: bold; +} + +.text h3 { + color: white; + margin-left: 30px; + font-size: 2em; + text-shadow: -5px 5px 0px rgba(0, 0, 0, 0.7); + margin-top: -40px; + font-family: monospace; + font-weight: bold; +} + +.torch { + margin: -150px 0 0 -150px; + width: 200px; + height: 200px; + -webkit-box-shadow: 0 0 0 9999em #000000f7; + box-shadow: 0 0 0 9999em #000000f7; + opacity: 1; + border-radius: 50%; + position: fixed; + background: rgba(0, 0, 0, 0.1); +} + +.torch:after { + content: ''; + display: block; + border-radius: 50%; + width: 100%; + height: 100%; + top: 0px; + left: 0px; + -webkit-box-shadow: inset 0 0 40px 2px #000, 0 0 20px 4px rgba(13, 13, 10, 0.8); + box-shadow: inset 0 0 40px 2px #000, 0 0 20px 4px rgba(13, 13, 10, 0.8); +} +/*# sourceMappingURL=main.css.map */
\ No newline at end of file diff --git a/404/css/main.css.map b/404/css/main.css.map new file mode 100644 index 0000000..4d05cf9 --- /dev/null +++ b/404/css/main.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "AACA,AAAA,IAAI,CAAC;EACH,MAAM,EAAE,IAAI;CACb;;AAED,AAAA,IAAI,CAAC;EACH,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,+CAA+C,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG;EAC9E,eAAe,EAAE,KAAK;EACtB,QAAQ,EAAE,MAAM;EAEhB,OAAO,EAAE,IAAI;EACb,SAAS,EAAE,WAAW;EACtB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;CACpB;;AAED,AAAA,KAAK,CAAC,EAAE,CAAA;EACN,KAAK,EAAE,OAAO;EACf,UAAU,EAAE,MAAM;EACjB,SAAS,EAAE,IAAI;EAChB,UAAU,EAAE,MAAM;EAClB,WAAW,EAAG,IAAG,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAe,EAAG,KAAI,CAAC,IAAI,CAAC,GAAG,CAAC,kBAAe,EAAG,KAAI,CAAC,IAAI,CAAC,GAAG,CAAC,kBAAe;EACzG,WAAW,EAAE,SAAS;EACrB,WAAW,EAAE,IAAI;CAClB;;AAED,AAAA,KAAK,CAAC,EAAE,CAAA;EACN,KAAK,EAAE,KAAK;EACZ,SAAS,EAAE,GAAG;EACf,WAAW,EAAG,IAAG,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAe;EACzC,UAAU,EAAE,MAAM;EAClB,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,SAAS;EACrB,WAAW,EAAE,IAAI;CAClB;;AACD,AAAA,KAAK,CAAC,EAAE,CAAA;EACN,KAAK,EAAE,KAAK;EACb,WAAW,EAAE,IAAI;EAChB,SAAS,EAAE,GAAG;EACf,WAAW,EAAG,IAAG,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAe;EACzC,UAAU,EAAE,KAAK;EACjB,WAAW,EAAE,SAAS;EACrB,WAAW,EAAE,IAAI;CAClB;;AACD,AAAA,MAAM,CAAC;EACL,MAAM,EAAE,iBAAiB;EACzB,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,sBAAsB;EACnC,OAAO,EAAE,CAAC;EACT,aAAa,EAAE,GAAG;EAClB,QAAQ,EAAE,KAAK;EAChB,UAAU,EAAE,kBAAe;CAa3B;;AArBD,AAUE,MAVI,AAUH,MAAM,CAAC;EACN,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,aAAa,EAAE,GAAG;EAClB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,GAAG;EACT,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EACpC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,qBAAkB;CAC/B", + "sources": [ + "main.scss" + ], + "names": [], + "file": "main.css" +}
\ No newline at end of file diff --git a/404/css/main.scss b/404/css/main.scss new file mode 100644 index 0000000..97ce243 --- /dev/null +++ b/404/css/main.scss @@ -0,0 +1,67 @@ +
+html {
+ height: 100%;
+}
+
+body {
+ height: 100%;
+ background: url("https://wallpapercave.com/wp/6SLzBEY.jpg") no-repeat left top;
+ background-size: cover;
+ overflow: hidden;
+
+ display: flex;
+ flex-flow: column wrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.text h1{
+ color: #011718;
+ margin-top: -200px;
+ font-size: 15em;
+ text-align: center;
+ text-shadow: -5px 5px 0px rgba(0,0,0,0.7), -10px 10px 0px rgba(0,0,0,0.4), -15px 15px 0px rgba(0,0,0,0.2);
+ font-family: monospace;
+ font-weight: bold;
+}
+
+.text h2{
+ color: black;
+ font-size: 5em;
+ text-shadow: -5px 5px 0px rgba(0,0,0,0.7);
+ text-align: center;
+ margin-top: -150px;
+ font-family: monospace;
+ font-weight: bold;
+}
+.text h3{
+ color: white;
+ margin-left: 30px;
+ font-size: 2em;
+ text-shadow: -5px 5px 0px rgba(0,0,0,0.7);
+ margin-top: -40px;
+ font-family: monospace;
+ font-weight: bold;
+}
+.torch {
+ margin: -150px 0 0 -150px;
+ width: 200px;
+ height: 200px;
+ box-shadow: 0 0 0 9999em #000000f7;
+ opacity: 1;
+ border-radius: 50%;
+ position: fixed;
+ background: rgba(0,0,0,0.1);
+
+ &:after {
+ content: '';
+ display: block;
+ border-radius: 50%;
+ width: 100%;
+ height: 100%;
+ top: 0px;
+ left: 0px;
+ box-shadow: inset 0 0 40px 2px #000,
+ 0 0 20px 4px rgba(13,13,10,0.8);
+ }
+}
\ No newline at end of file diff --git a/404/js/main.js b/404/js/main.js new file mode 100644 index 0000000..8b45c65 --- /dev/null +++ b/404/js/main.js @@ -0,0 +1,6 @@ +$(document).mousemove(function (event) {
+ $('.torch').css({
+ 'top': event.pageY,
+ 'left': event.pageX
+ });
+ });
\ No newline at end of file diff --git a/404/not-found-page.html b/404/not-found-page.html new file mode 100644 index 0000000..c8859bb --- /dev/null +++ b/404/not-found-page.html @@ -0,0 +1,22 @@ +<!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 - 404</title>
+ <link rel="stylesheet" href="404/css/main.css">
+</head>
+<body>
+
+<div class="text">
+ <h1>404</h1>
+ <h2>Uh, Ohh</h2>
+ <h3>Sorry we cant find what you are looking for 'cos its so dark in here</h3>
+ </div>
+ <div class="torch"></div>
+
+ <script src="404/js/main.js"></script>
+
+</body>
+</html>
\ No newline at end of file |