diff options
| -rw-r--r-- | 404.html | 41 | ||||
| -rw-r--r-- | src/css/404.css | 104 |
2 files changed, 145 insertions, 0 deletions
diff --git a/404.html b/404.html new file mode 100644 index 00000000..286e082c --- /dev/null +++ b/404.html @@ -0,0 +1,41 @@ +<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+
+ <title>404</title>
+
+ <!-- Google font -->
+ <link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">
+
+ <!-- Custom stlylesheet -->
+ <link type="text/css" rel="stylesheet" href="dest/css/404.css" />
+
+ <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+ <!--[if lt IE 9]>
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+ <![endif]-->
+
+</head>
+
+<body>
+
+ <div id="notfound">
+ <div class="notfound">
+ <div class="notfound-404">
+ <h1>404</h1>
+ <h2>Page not found</h2>
+ </div>
+ <a href="/">Homepage</a>
+ </div>
+ </div>
+
+</body><!-- This templates was made by Colorlib (https://colorlib.com) -->
+
+</html>
diff --git a/src/css/404.css b/src/css/404.css new file mode 100644 index 00000000..0de41abb --- /dev/null +++ b/src/css/404.css @@ -0,0 +1,104 @@ +* {
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+body {
+ padding: 0;
+ margin: 0;
+}
+
+#notfound {
+ position: relative;
+ height: 100vh;
+ background: #030005;
+}
+
+#notfound .notfound {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ -webkit-transform: translate(-50%, -50%);
+ -ms-transform: translate(-50%, -50%);
+ transform: translate(-50%, -50%);
+}
+
+.notfound {
+ max-width: 767px;
+ width: 100%;
+ line-height: 1.4;
+ text-align: center;
+}
+
+.notfound .notfound-404 {
+ position: relative;
+ height: 180px;
+ margin-bottom: 20px;
+ z-index: -1;
+}
+
+.notfound .notfound-404 h1 {
+ font-family: 'Montserrat', sans-serif;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ -webkit-transform: translate(-50% , -50%);
+ -ms-transform: translate(-50% , -50%);
+ transform: translate(-50% , -50%);
+ font-size: 224px;
+ font-weight: 900;
+ margin-top: 0px;
+ margin-bottom: 0px;
+ margin-left: -12px;
+ color: #030005;
+ text-transform: uppercase;
+ text-shadow: -1px -1px 0px #8400ff, 1px 1px 0px #ff005a;
+ letter-spacing: -20px;
+}
+
+
+.notfound .notfound-404 h2 {
+ font-family: 'Montserrat', sans-serif;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 110px;
+ font-size: 42px;
+ font-weight: 700;
+ color: #fff;
+ text-transform: uppercase;
+ text-shadow: 0px 2px 0px #8400ff;
+ letter-spacing: 13px;
+ margin: 0;
+}
+
+.notfound a {
+ font-family: 'Montserrat', sans-serif;
+ display: inline-block;
+ text-transform: uppercase;
+ color: #ff005a;
+ text-decoration: none;
+ border: 2px solid;
+ background: transparent;
+ padding: 10px 40px;
+ font-size: 14px;
+ font-weight: 700;
+ -webkit-transition: 0.2s all;
+ transition: 0.2s all;
+}
+
+.notfound a:hover {
+ color: #8400ff;
+}
+
+@media only screen and (max-width: 767px) {
+ .notfound .notfound-404 h2 {
+ font-size: 24px;
+ }
+}
+
+@media only screen and (max-width: 480px) {
+ .notfound .notfound-404 h1 {
+ font-size: 182px;
+ }
+}
|