Correo certificado
Esta dirección no existe.
El cartero ha llamado dos veces y nadie abre en la página 404. Comprueba la dirección o vuelve al inicio.
Volver al inicioHTML + CSS404
Returned mail 404
An airmail envelope with a wax seal and a return to sender stamp; open it and a letter explains no page 404 lives here.
Settings
1x
Code
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="noindex" />
<title>404 · Page not found</title>
<style>
body { margin: 0; background: #000; }
.n4-mail {
--accent: #d62828;
--k: 1;
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
container-type: size;
display: grid;
place-items: center;
background: #000;
color: #f5f5f7;
font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",system-ui,sans-serif;
-webkit-font-smoothing: antialiased;
text-align: center;
line-height: 1.4;
}
.n4-mail *,.n4-mail *::before,.n4-mail *::after {
box-sizing: border-box;
}
.n4-mail .n4-copy {
position: relative;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.6cqmin;
width: 100%;
max-width: 680px;
padding: 0 6cqw;
}
.n4-mail .n4-title {
margin: 0;
font-size: clamp(17px,4.2cqmin,36px);
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.15;
text-wrap: balance;
}
.n4-mail .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-mail .n4-tag {
font: 600 clamp(10px,1.9cqmin,13px)/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
}
.n4-mail .n4-cta {
margin-top: 1.8cqmin;
display: inline-flex;
align-items: center;
gap: .5em;
padding: .85em 1.5em;
border-radius: 999px;
background: #f5f5f7;
color: #000;
font-size: clamp(13px,2.2cqmin,16px);
font-weight: 600;
text-decoration: none;
transition: transform .3s cubic-bezier(.25,.1,.25,1),box-shadow .3s cubic-bezier(.25,.1,.25,1);
}
.n4-mail .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-mail .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-mail .n4-stars,.n4-mail .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-mail .n4-stars {
background-image: radial-gradient(1px 1px at 8% 12%,#fff 60%,transparent),radial-gradient(1px 1px at 22% 68%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 35% 24%,#fff 60%,transparent),radial-gradient(1px 1px at 48% 82%,#fff 60%,transparent),radial-gradient(1px 1px at 57% 9%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 66% 44%,#fff 60%,transparent),radial-gradient(1px 1px at 74% 72%,#fff 60%,transparent),radial-gradient(1px 1px at 86% 18%,#fff 60%,transparent),radial-gradient(1.5px 1.5px at 93% 58%,#fff 60%,transparent),radial-gradient(1px 1px at 14% 42%,#fff 60%,transparent),radial-gradient(1px 1px at 40% 55%,#fff 60%,transparent),radial-gradient(1px 1px at 81% 90%,#fff 60%,transparent),radial-gradient(1px 1px at 4% 88%,#fff 60%,transparent),radial-gradient(1px 1px at 62% 30%,#fff 60%,transparent);
opacity: .75;
animation: n4-mail-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-mail .n4-stars2 {
background-image: radial-gradient(2px 2px at 18% 30%,rgba(255,255,255,.9) 50%,transparent),radial-gradient(1.5px 1.5px at 72% 20%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 30% 85%,rgba(255,255,255,.7) 50%,transparent),radial-gradient(1.5px 1.5px at 88% 70%,rgba(255,255,255,.8) 50%,transparent),radial-gradient(2px 2px at 52% 60%,rgba(255,255,255,.6) 50%,transparent),radial-gradient(1.5px 1.5px at 6% 55%,rgba(255,255,255,.8) 50%,transparent);
opacity: .55;
animation: n4-mail-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-mail [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-mail-tw {
from {
opacity: .3;
}
}
@keyframes n4-mail-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-mail-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-mail *,.n4-mail *::before,.n4-mail *::after {
animation: none!important;
transition: none!important;
}
}
.n4-mail {
background: radial-gradient(70% 60% at 50% 30%,#fbf5ea,#e9d8bc 75%);
color: #2b2118;
}
.n4-mail .n4-env {
position: relative;
display: block;
width: 30em;
height: 19em;
font-size: min(1.9cqmin,13px);
margin: 3em 0 1.8cqmin;
padding: 0;
border: 0;
background: none;
color: inherit;
cursor: pointer;
perspective: 60em;
transition: transform .3s cubic-bezier(.3,1.4,.5,1);
animation: n4-mail-nudge calc(4s / var(--k)) ease-in-out 1.6s infinite;
}
.n4-mail .n4-env:hover {
transform: translateY(-.3em) rotate(-1deg);
}
.n4-mail .n4-env:active {
transform: scale(.98);
}
.n4-mail .n4-env:focus-visible {
outline: 2px solid var(--accent);
outline-offset: .5em;
border-radius: .4em;
}
.n4-mail .n4-env[aria-expanded="true"] {
animation: none;
}
.n4-mail .n4-back,.n4-mail .n4-front,.n4-mail .n4-flap {
position: absolute;
inset: 0;
border-radius: .4em;
}
.n4-mail .n4-back {
background: #b8925f;
box-shadow: 0 1.4em 2em -1em rgba(60,40,15,.5);
}
.n4-mail .n4-env .n4-letter {
position: absolute;
z-index: 1;
left: 1.4em;
right: 1.4em;
top: .9em;
bottom: .8em;
display: grid;
align-content: start;
gap: .5em;
padding: 1.1em 1.3em;
text-align: left;
background: repeating-linear-gradient(#fffdf6 0 1.6em,#e9e2d0 1.6em calc(1.6em + 1px)),#fffdf6;
color: #2b2118;
font: 400 1.1em/1.45 "Segoe Print","Bradley Hand","Chalkboard SE","Comic Sans MS",cursive;
box-shadow: 0 .2em .4em rgba(0,0,0,.15);
transition: transform calc(.6s / var(--k)) cubic-bezier(.3,1.2,.5,1);
}
.n4-mail .n4-letter b {
font-weight: 700;
}
.n4-mail .n4-letter em {
justify-self: end;
font-style: normal;
}
.n4-mail .n4-env[aria-expanded="true"] .n4-letter {
transform: translateY(-62%);
transition-delay: calc(.35s / var(--k));
}
.n4-mail .n4-front {
z-index: 2;
background: linear-gradient(160deg,#e4c899,#d3ae79);
clip-path: polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);
border: .5em solid transparent;
border-image: repeating-linear-gradient(-45deg,#d62828 0 .9em,#fdfaf3 .9em 1.8em,#1d4e89 1.8em 2.7em,#fdfaf3 2.7em 3.6em) 12;
}
.n4-mail .n4-flap {
z-index: 3;
transform-origin: 50% 0;
clip-path: polygon(0 0,100% 0,50% 58%);
background: linear-gradient(#dcbd8f,#c9a676);
transition: transform calc(.5s / var(--k)) cubic-bezier(.5,0,.3,1),z-index 0s calc(.25s / var(--k));
}
.n4-mail .n4-env[aria-expanded="true"] .n4-flap {
transform: rotateX(180deg);
z-index: 0;
}
.n4-mail .n4-seal {
position: absolute;
z-index: 4;
left: 50%;
top: 58%;
display: grid;
place-items: center;
width: 3.6em;
height: 3.6em;
translate: -50% -50%;
border-radius: 46% 54% 50% 50%/52% 48% 52% 48%;
background: radial-gradient(circle at 38% 32%,#e05a5a,#a4161a 60%,#7a0f12);
box-shadow: 0 .15em .3em rgba(0,0,0,.35),inset 0 0 0 .4em rgba(0,0,0,.12);
color: rgba(255,215,215,.85);
font: 800 .85em/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
transition: transform .3s,opacity .3s;
}
.n4-mail .n4-env[aria-expanded="true"] .n4-seal {
transform: scale(.3) rotate(40deg);
opacity: 0;
}
.n4-mail .n4-stamp {
position: absolute;
z-index: 4;
left: 5%;
bottom: 24%;
padding: .4em .7em;
border: .24em double #c1121f;
border-radius: .3em;
color: #c1121f;
font: 800 .85em/1.1 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
letter-spacing: .08em;
text-transform: uppercase;
rotate: -9deg;
opacity: .85;
mix-blend-mode: multiply;
animation: n4-mail-thump calc(.5s / var(--k)) cubic-bezier(.3,1.6,.5,1) .5s both;
}
.n4-mail .n4-lbl {
position: absolute;
z-index: 4;
right: 6%;
bottom: 9%;
padding: .45em .6em;
background: #ffe066;
color: #3d2c00;
font: 700 .8em/1.2 ui-monospace,"SF Mono",Menlo,Consolas,monospace;
rotate: 3deg;
box-shadow: 0 .1em .2em rgba(0,0,0,.2);
}
.n4-mail .n4-tag {
color: var(--accent);
}
.n4-mail .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 700;
letter-spacing: -.025em;
}
.n4-mail .n4-sub {
color: #6b5a48;
}
.n4-mail .n4-cta {
background: var(--accent);
color: #fff;
}
@keyframes n4-mail-nudge {
0%,88%,100% {
rotate: 0deg;
}
91% {
rotate: -2deg;
}
94% {
rotate: 2deg;
}
97% {
rotate: -1deg;
}
}
@keyframes n4-mail-thump {
from {
transform: scale(2.4);
opacity: 0;
}
}
</style>
</head>
<body>
<main class="n4-mail">
<div class="n4-copy">
<button class="n4-env" type="button" aria-expanded="false" aria-label="Open the envelope">
<span class="n4-back" aria-hidden="true"></span>
<span class="n4-letter" aria-hidden="true"><b>Dear reader,</b><span>We've walked the whole street and no page 404 lives here.</span><em>The postman</em></span>
<span class="n4-front" aria-hidden="true"></span>
<span class="n4-flap" aria-hidden="true"></span>
<span class="n4-seal" aria-hidden="true" translate="no">404</span>
<span class="n4-stamp" aria-hidden="true">Return to sender</span>
<span class="n4-lbl" aria-hidden="true">Recipient unknown</span>
</button>
<span class="n4-tag">Registered mail</span>
<h1 class="n4-title">This address doesn't exist.</h1>
<p class="n4-sub">The postman rang twice and nobody answered at page 404. Check the address or go back home.</p>
<a class="n4-cta" href="/">Back to home</a>
</div>
</main>
<script>
document.querySelectorAll(".n4-mail").forEach((el) => {
const env = el.querySelector(".n4-env");
env.addEventListener("click", () => env.setAttribute("aria-expanded", String(env.getAttribute("aria-expanded") !== "true")));
});
</script>
</body>
</html>
Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in 404
See all 404Where to use it
This error page treats a broken link like a letter that could not be delivered. A kraft envelope with an airmail striped border is closed with a red wax seal stamped 404, a rubber stamp lands on it saying return to sender, and a yellow sticker reports an unknown recipient.
The envelope is a button: click it or press Enter and the flap folds back in 3D while a handwritten letter from the postman slides out. It gives a small nudge now and then to invite a click. Adjust the red accent and link the button home.