custom 404 page

Author: gxben

layouts/404.html

@@ -1,7 +1,39 @@
 {{ define "main" -}}
 <div class="td-content">
-  <h1>Not found</h1>
-  <p>Oops! This page doesn't exist. Try going back to the <a href="{{ "" | relURL }}">home page</a>.</p>
-  <p>You can learn how to make a 404 page like this in <a href="https://gohugo.io/templates/404/">Custom 404 Pages</a>.</p>
+  <style id="" media="all">@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCs16Hw5aX8.ttf) format('truetype');
+}
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCuM73w5aX8.ttf) format('truetype');
+}
+
+*{-webkit-box-sizing:border-box;box-sizing:border-box}body{padding:0;margin:0}#notfound{position:relative;height:100vh}#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:520px;width:100%;text-align:center;line-height:1.4}.notfound .notfound-404{height:190px}.notfound .notfound-404 h1{font-family:montserrat,sans-serif;font-size:146px;font-weight:700;margin:0;color:#232323}.notfound .notfound-404 h1>span{display:inline-block;width:120px;height:120px;background-image:url(https://storage.de.cloud.ovh.net/v1/AUTH_85c721b6b20c4d1b8a59f0307e78889e/public/kowabunga2.png);background-size:cover;-webkit-transform:scale(1.4);-ms-transform:scale(1.4);transform:scale(1.4);z-index:-1}.notfound h2{font-family:montserrat,sans-serif;font-size:22px;font-weight:700;margin:0;text-transform:uppercase;color:#232323}.notfound p{font-family:montserrat,sans-serif;color:#787878;font-weight:300}.notfound a{font-family:montserrat,sans-serif;display:inline-block;padding:12px 30px;font-weight:700;background-color:#f99827;color:#fff;border-radius:40px;text-decoration:none;-webkit-transition:.2s all;transition:.2s all}.notfound a:hover{opacity:.8}@media only screen and (max-width:767px){.notfound .notfound-404{height:115px}.notfound .notfound-404 h1{font-size:86px}.notfound .notfound-404 h1>span{width:86px;height:86px}}
+
+  </style>
+
+  <!--[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]-->
+
+   <div id="notfound">
+     <div class="notfound">
+       <div class="notfound-404">
+         <h1>4<span></span>4</h1>
+       </div>
+       <h2>Oops! Page Not Be Found</h2>
+       <p>Sorry but the page you are looking for does not exist, have been removed. name changed or is temporarily unavailable</p>
+       <a href="{{ "" | relURL }}">Back to homepage</a>
+     </div>
+   </div>
+
 </div>
 {{- end }}