TheOnlyWayUp/404.html

## 404.html
<!DOCTYPE html>
<html lang="en">

<head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="keywords" content="{{ status_code }}, {{ detail }}">
        <meta charset="utf-8">

        <meta property="og:title" content="">
        <meta property="og:type" content="website">
        <meta property="og:image" content="{{ url_for('static', path='/images/favicon.png') }}">
        <meta name="og:description" content="">
        <meta name="theme-color" content="#ff0024">
        <meta name="description" content="">
        <link type="application/json+oembed" href="{{ url_for('static', path='/embed/embed.json') }}" />


        <title>Oops! Something broke</title>

        <link rel="icon" type="image/svg+xml" href="{{ url_for('static', path='/images/favicon.svg') }}" sizes="any">
        <link rel="icon" type="image/png" href="{{ url_for('static', path='/images/favicon.png') }}">

        <!-- Google font -->
        <link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">

        <!-- Custom stlylesheet -->
        <style>
                * {
                        -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;
                        }
                  }
        </style>

        <!-- 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>{{ status_code }}</h1>
                                <h2><br>{{ detail }}</h2>
                        </div>
                        <br><br><br><br><br>

                        <a href="{{ home_url }}">Homepage</a>
                </div>
        </div>

</body><!-- This templates was made by Colorlib (https://colorlib.com) -->

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>

	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="keywords" content="{{ status_code }}, {{ detail }}">
	<meta charset="utf-8">

	<meta property="og:title" content="">
	<meta property="og:type" content="website">
	<meta property="og:image" content="{{ url_for('static', path='/images/favicon.png') }}">
	<meta name="og:description" content="">
	<meta name="theme-color" content="#ff0024">
	<meta name="description" content="">
	<link type="application/json+oembed" href="{{ url_for('static', path='/embed/embed.json') }}" />


	<title>Oops! Something broke</title>

	<link rel="icon" type="image/svg+xml" href="{{ url_for('static', path='/images/favicon.svg') }}" sizes="any">
	<link rel="icon" type="image/png" href="{{ url_for('static', path='/images/favicon.png') }}">

	<!-- Google font -->
	<link href="https://fonts.googleapis.com/css?family=Montserrat:700,900" rel="stylesheet">

	<!-- Custom stlylesheet -->
	<style>
	* {
	-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;
	}
	}
	</style>

	<!-- 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>{{ status_code }}</h1>
	<h2><br>{{ detail }}</h2>
	</div>
	<br><br><br><br><br>

	<a href="{{ home_url }}">Homepage</a>
	</div>
	</div>

	</body><!-- This templates was made by Colorlib (https://colorlib.com) -->

	</html>