83 lines
2.7 KiB
HTML
83 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>404 // LAUREL & VOW // FILE NOT FOUND</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="brutalist.css">
|
|
<style>
|
|
.err-wrap {
|
|
min-height: 100dvh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: stretch;
|
|
padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 2.5vw, 1.75rem);
|
|
gap: 2rem;
|
|
}
|
|
.err-bar {
|
|
font-family: var(--mono);
|
|
font-size: 0.625rem;
|
|
letter-spacing: 0.18em;
|
|
background: var(--ink);
|
|
color: var(--paper);
|
|
padding: 0.4rem clamp(1rem, 2.5vw, 1.75rem);
|
|
margin: -2rem -1rem 0;
|
|
}
|
|
.err-code {
|
|
font-family: var(--mono);
|
|
font-weight: 700;
|
|
font-size: clamp(6rem, 22vw, 18rem);
|
|
line-height: 0.85;
|
|
letter-spacing: -0.05em;
|
|
color: var(--accent);
|
|
margin: 0;
|
|
}
|
|
.err-msg {
|
|
font-family: var(--mono);
|
|
font-weight: 500;
|
|
font-size: clamp(1.5rem, 4vw, 3rem);
|
|
letter-spacing: -0.02em;
|
|
text-transform: uppercase;
|
|
margin: 0;
|
|
line-height: 1;
|
|
}
|
|
.err-meta {
|
|
font-family: var(--mono);
|
|
font-size: 0.8125rem;
|
|
color: var(--ink-2);
|
|
letter-spacing: 0.06em;
|
|
max-width: 60ch;
|
|
line-height: 1.65;
|
|
text-transform: uppercase;
|
|
}
|
|
.err-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
|
|
.err-line {
|
|
border-top: 2px solid var(--ink);
|
|
margin: 1rem 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="err-wrap">
|
|
<div class="err-bar">ERROR · 404 · LAUREL & VOW · PARIS · FR</div>
|
|
<p class="err-code">404<span class="cursor" aria-hidden="true">▌</span></p>
|
|
<h1 class="err-msg">FILE_NOT_FOUND.<br><span class="ital">page introuvable.</span></h1>
|
|
<div class="err-line"></div>
|
|
<p class="err-meta">
|
|
> LA PAGE QUE VOUS CHERCHEZ N'EXISTE PAS OU A ETE DEPLACEE.<br>
|
|
> SI C'EST UN BUG, ON L'ECOUTE. ECRIVEZ-NOUS.<br>
|
|
> STATUS_CODE: 404 / NOT_FOUND<br>
|
|
> TIMESTAMP: <span id="ts"></span>
|
|
</p>
|
|
<div class="err-actions">
|
|
<a class="cta cta--big" href="/">[ RETOUR A L'ACCUEIL ]</a>
|
|
<a class="cta cta--big" href="mailto:hello@laurelvow.fr?subject=404">[ HELLO@LAURELVOW.FR ]</a>
|
|
</div>
|
|
</main>
|
|
<script>document.getElementById('ts').textContent = new Date().toISOString();</script>
|
|
</body>
|
|
</html>
|