Esta lección no está en el temario.
La página que buscas se ha borrado de la pizarra. Saca el cuaderno y vuelve al índice del curso.
Volver al aulaHTML + CSS404
School chalkboard 404
A green chalkboard in a wooden frame where invisible chalk writes out the 404 sum and sets the homework.
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-school {
--accent: #fde68a;
--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-school *,.n4-school *::before,.n4-school *::after {
box-sizing: border-box;
}
.n4-school .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-school .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-school .n4-sub {
margin: 0;
max-width: 34em;
font-size: clamp(13px,2.4cqmin,18px);
color: #a1a1a6;
text-wrap: balance;
}
.n4-school .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-school .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-school .n4-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px var(--accent);
}
.n4-school .n4-cta:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.n4-school .n4-stars,.n4-school .n4-stars2 {
position: absolute;
inset: -4%;
pointer-events: none;
}
.n4-school .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-school-tw calc(5s / var(--k)) ease-in-out infinite alternate;
}
.n4-school .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-school-tw calc(7s / var(--k)) ease-in-out infinite alternate-reverse;
}
.n4-school [data-depth] {
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@keyframes n4-school-tw {
from {
opacity: .3;
}
}
@keyframes n4-school-spin {
to {
transform: rotate(1turn);
}
}
@keyframes n4-school-fade {
from {
opacity: 0;
transform: translateY(10px);
}
}
@media (prefers-reduced-motion:reduce) {
.n4-school *,.n4-school *::before,.n4-school *::after {
animation: none!important;
transition: none!important;
}
}
.n4-school {
background: linear-gradient(180deg,#f5ead7 0 84%,#c9a77c 84%);
color: #2b2118;
}
.n4-school .n4-slate {
position: relative;
width: min(80cqmin,560px);
aspect-ratio: 16/8;
margin-bottom: 3cqmin;
padding: 4cqmin 5cqmin;
border: min(2.2cqmin,15px) solid #8b5a2b;
border-radius: .6cqmin;
background: radial-gradient(40% 30% at 30% 40%,rgba(255,255,255,.06),transparent),radial-gradient(30% 25% at 75% 65%,rgba(255,255,255,.05),transparent),#23463a;
box-shadow: inset 0 0 3cqmin rgba(0,0,0,.45),0 2cqmin 3cqmin -1cqmin rgba(0,0,0,.35);
text-align: left;
font-family: "Chalkboard SE","Chalkduster","Segoe Print","Comic Sans MS",cursive;
color: #f8fafc;
}
.n4-school .n4-slate p {
margin: 0;
width: max-content;
font-size: clamp(14px,4.2cqmin,34px);
line-height: 1.35;
text-shadow: 0 0 1px rgba(255,255,255,.6);
clip-path: inset(0 100% 0 0);
animation: n4-school-write calc(1.4s / var(--k)) steps(16) forwards;
}
.n4-school .n4-l2 {
animation-delay: calc(1.5s / var(--k))!important;
}
.n4-school .n4-l3 {
color: var(--accent);
animation-delay: calc(3s / var(--k))!important;
}
.n4-school .n4-circ {
position: absolute;
left: 3cqmin;
top: 1.6cqmin;
width: min(34cqmin,240px);
height: auto;
overflow: visible;
}
.n4-school .n4-circ path {
fill: none;
stroke: var(--accent);
stroke-width: 2.2;
stroke-linecap: round;
stroke-dasharray: 1;
stroke-dashoffset: 1;
opacity: .85;
animation: n4-school-circ calc(1s / var(--k)) calc(4.4s / var(--k)) ease-out forwards;
}
.n4-school .n4-ledge {
position: absolute;
left: -2.2cqmin;
right: -2.2cqmin;
bottom: calc(-1 * min(2.2cqmin,15px) - 1.6cqmin);
height: 1.6cqmin;
background: #6b4423;
border-radius: .3cqmin;
}
.n4-school .n4-chalk {
position: absolute;
left: 18%;
bottom: 100%;
width: 5cqmin;
height: 1.1cqmin;
border-radius: .5cqmin;
background: #f8fafc;
}
.n4-school .n4-eraser {
position: absolute;
right: 16%;
bottom: 100%;
width: 10cqmin;
height: 2.6cqmin;
border-radius: .4cqmin;
background: linear-gradient(#7c5b3d 55%,#cbd5e1 55%);
}
.n4-school .n4-title {
font-size: clamp(20px,5cqmin,42px);
font-weight: 700;
letter-spacing: -.02em;
}
.n4-school .n4-sub {
color: #5b4636;
}
.n4-school .n4-cta {
background: #23463a;
color: #f8fafc;
}
@keyframes n4-school-write {
to {
clip-path: inset(0 0 0 0);
}
}
@keyframes n4-school-circ {
to {
stroke-dashoffset: 0;
}
}
@media (prefers-reduced-motion:reduce) {
.n4-school .n4-slate p {
clip-path: none;
}
.n4-school .n4-circ path {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<main class="n4-school">
<div class="n4-copy">
<div class="n4-slate" aria-hidden="true">
<p class="n4-l1">404 − 0 = 404</p>
<p class="n4-l2"><span>page</span> = ?</p>
<p class="n4-l3"><span>Homework: find it</span></p>
<svg class="n4-circ" viewBox="0 0 120 60"><path pathLength="1" d="M10 34C8 14 50 6 84 10s30 30-6 38-70 4-64-16"/></svg>
<i class="n4-ledge"><i class="n4-chalk"></i><i class="n4-eraser"></i></i>
</div>
<h1 class="n4-title">This lesson isn't on the syllabus.</h1>
<p class="n4-sub">The page you're looking for was wiped off the board. Grab your notebook and go back to the course index.</p>
<a class="n4-cta" href="/">Back to class</a>
</div>
</main>
</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
Schools, academies and online courses reorganize their content every term, and old lesson links break along the way. This page sets a green slate in a wooden frame on a classroom wall. Line by line, invisible chalk writes a simple sum ending in 404, asks where the page went and sets finding it as homework, then circles the result with a quick yellow stroke.
A chalk ledge holds a stick of chalk and a felt eraser. The handwriting font falls back to friendly system faces, the lines are translatable text, and reduced motion shows the finished board. Send the button to your course index or timetable.