website/assets/errors/403.html
2025-02-23 17:44:46 -06:00

179 lines
4.2 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>G2's Website | 403 - Forbidden</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<style>
@import url('/assets/fonts/fonts.css');
* {
margin: 0;
box-sizing: border-box;
}
::selection {
color: #1e1e2e;
background-color: #a6e3a1;
}
body {
height: 100vh;
width: 100vw;
display: flex;
background-color: #111114;
color: white;
font-family: 'Roboto', 'Noto Sans', sans-serif;
font-size: 16pt;
overflow: hidden;
}
main {
max-width: 100vw;
max-height: 100vh;
margin: auto;
}
h1 {
font-size: 10em;
text-align: center;
}
h3 {
font-weight: 500;
margin: 0 10px;
text-align: center;
}
p {
margin: auto;
padding: 0 5px;
text-align: center;
max-width: 540px;
opacity: 0;
overflow: hidden;
text-overflow: ellipsis;
}
a {
text-decoration: none;
}
a:link {
color: DeepSkyBlue;
}
a:visited {
color: #7289DA;
}
a:hover {
color: DarkTurquoise;
}
hr {
margin: 20px 10px;
color: #f9e2af;
}
button {
width: 75%;
margin: 20px auto;
position: relative;
display: block;
font-size: 18pt;
font-weight: bold;
padding: 10px 0;
border-radius: 2em;
border: 2px solid #74c7ec;
background-color: #74c7ec;
color: #2C2F33;
transition-duration: 500ms;
cursor: pointer;
}
button:hover {
background-color: transparent;
color: #74c7ec;
}
button:hover::before, button:hover::after {
content: '↜';
position: absolute;
left: 25%;
animation-duration: 1s;
animation-name: slideright;
animation-fill-mode: forwards;
}
button:hover::after {
left: unset;
right: 25%;
}
button:active {
background-color: #74c7ec55;
color: #7dd8ff;
}
.text-box {
display: flex;
flex-direction: column;
height: 4em;
}
.slide-up {
animation-duration: 1s;
animation-name: slideup;
animation-fill-mode: forwards;
position: relative;
display: block;
}
.fade-in {
animation-duration: 1s;
animation-name: fadein;
animation-fill-mode: forwards;
position: relative;
display: block;
}
.cat {
position: absolute;
top: 31px;
left: calc(50% - 1px);
transform: translatex(-50%);
}
#cookies {
font-weight: bold;
}
@keyframes slideright {
from {
transform: translatex(100%);
opacity: 0;
}
to {
transform: translatey(0%);
opacity: 1;
}
}
@keyframes slideup {
from {
transform: translatey(100%);
opacity: 0;
}
to {
transform: translatey(0%);
opacity: 1;
}
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<main class="fade-in">
<div style="position:relative;display:flex;justify-content: center;">
<h1>403</h1>
</div>
<hr>
<h3 id="notFound">Forbidden. You do not have access to this page.</h3>
<a href="/"><button>Home</button></a>
</main>
</body>
</html>