Bold 404 page with a giant gradient numeral, floating planets, twinkling starfield and a primary CTA back to safety. Pure CSS animation.
Bold 404 page with a giant gradient numeral, floating planets, twinkling starfield and a primary CTA back to safety. Pure CSS animation.
1<section class="cosmos-stage min-h-screen flex items-center justify-center px-4 relative overflow-hidden">
2 <span class="cosmos-stars" aria-hidden="true">
3 <span class="cosmos-star" style="--x:0%;--y:0%;--d:0s;--s:1px"></span><span class="cosmos-star" style="--x:17%;--y:53%;--d:1s;--s:2px"></span><span class="cosmos-star" style="--x:34%;--y:6%;--d:2s;--s:3px"></span><span class="cosmos-star" style="--x:51%;--y:59%;--d:3s;--s:1px"></span><span class="cosmos-star" style="--x:68%;--y:12%;--d:4s;--s:2px"></span><span class="cosmos-star" style="--x:85%;--y:65%;--d:5s;--s:3px"></span><span class="cosmos-star" style="--x:2%;--y:18%;--d:6s;--s:1px"></span><span class="cosmos-star" style="--x:19%;--y:71%;--d:0s;--s:2px"></span><span class="cosmos-star" style="--x:36%;--y:24%;--d:1s;--s:3px"></span><span class="cosmos-star" style="--x:53%;--y:77%;--d:2s;--s:1px"></span><span class="cosmos-star" style="--x:70%;--y:30%;--d:3s;--s:2px"></span><span class="cosmos-star" style="--x:87%;--y:83%;--d:4s;--s:3px"></span><span class="cosmos-star" style="--x:4%;--y:36%;--d:5s;--s:1px"></span><span class="cosmos-star" style="--x:21%;--y:89%;--d:6s;--s:2px"></span><span class="cosmos-star" style="--x:38%;--y:42%;--d:0s;--s:3px"></span><span class="cosmos-star" style="--x:55%;--y:95%;--d:1s;--s:1px"></span><span class="cosmos-star" style="--x:72%;--y:48%;--d:2s;--s:2px"></span><span class="cosmos-star" style="--x:89%;--y:1%;--d:3s;--s:3px"></span><span class="cosmos-star" style="--x:6%;--y:54%;--d:4s;--s:1px"></span><span class="cosmos-star" style="--x:23%;--y:7%;--d:5s;--s:2px"></span><span class="cosmos-star" style="--x:40%;--y:60%;--d:6s;--s:3px"></span><span class="cosmos-star" style="--x:57%;--y:13%;--d:0s;--s:1px"></span><span class="cosmos-star" style="--x:74%;--y:66%;--d:1s;--s:2px"></span><span class="cosmos-star" style="--x:91%;--y:19%;--d:2s;--s:3px"></span><span class="cosmos-star" style="--x:8%;--y:72%;--d:3s;--s:1px"></span><span class="cosmos-star" style="--x:25%;--y:25%;--d:4s;--s:2px"></span><span class="cosmos-star" style="--x:42%;--y:78%;--d:5s;--s:3px"></span><span class="cosmos-star" style="--x:59%;--y:31%;--d:6s;--s:1px"></span><span class="cosmos-star" style="--x:76%;--y:84%;--d:0s;--s:2px"></span><span class="cosmos-star" style="--x:93%;--y:37%;--d:1s;--s:3px"></span><span class="cosmos-star" style="--x:10%;--y:90%;--d:2s;--s:1px"></span><span class="cosmos-star" style="--x:27%;--y:43%;--d:3s;--s:2px"></span><span class="cosmos-star" style="--x:44%;--y:96%;--d:4s;--s:3px"></span><span class="cosmos-star" style="--x:61%;--y:49%;--d:5s;--s:1px"></span><span class="cosmos-star" style="--x:78%;--y:2%;--d:6s;--s:2px"></span><span class="cosmos-star" style="--x:95%;--y:55%;--d:0s;--s:3px"></span><span class="cosmos-star" style="--x:12%;--y:8%;--d:1s;--s:1px"></span><span class="cosmos-star" style="--x:29%;--y:61%;--d:2s;--s:2px"></span><span class="cosmos-star" style="--x:46%;--y:14%;--d:3s;--s:3px"></span><span class="cosmos-star" style="--x:63%;--y:67%;--d:4s;--s:1px"></span><span class="cosmos-star" style="--x:80%;--y:20%;--d:5s;--s:2px"></span><span class="cosmos-star" style="--x:97%;--y:73%;--d:6s;--s:3px"></span><span class="cosmos-star" style="--x:14%;--y:26%;--d:0s;--s:1px"></span><span class="cosmos-star" style="--x:31%;--y:79%;--d:1s;--s:2px"></span><span class="cosmos-star" style="--x:48%;--y:32%;--d:2s;--s:3px"></span><span class="cosmos-star" style="--x:65%;--y:85%;--d:3s;--s:1px"></span><span class="cosmos-star" style="--x:82%;--y:38%;--d:4s;--s:2px"></span><span class="cosmos-star" style="--x:99%;--y:91%;--d:5s;--s:3px"></span><span class="cosmos-star" style="--x:16%;--y:44%;--d:6s;--s:1px"></span><span class="cosmos-star" style="--x:33%;--y:97%;--d:0s;--s:2px"></span><span class="cosmos-star" style="--x:50%;--y:50%;--d:1s;--s:3px"></span><span class="cosmos-star" style="--x:67%;--y:3%;--d:2s;--s:1px"></span><span class="cosmos-star" style="--x:84%;--y:56%;--d:3s;--s:2px"></span><span class="cosmos-star" style="--x:1%;--y:9%;--d:4s;--s:3px"></span><span class="cosmos-star" style="--x:18%;--y:62%;--d:5s;--s:1px"></span><span class="cosmos-star" style="--x:35%;--y:15%;--d:6s;--s:2px"></span><span class="cosmos-star" style="--x:52%;--y:68%;--d:0s;--s:3px"></span><span class="cosmos-star" style="--x:69%;--y:21%;--d:1s;--s:1px"></span><span class="cosmos-star" style="--x:86%;--y:74%;--d:2s;--s:2px"></span><span class="cosmos-star" style="--x:3%;--y:27%;--d:3s;--s:3px"></span>
4 </span>
5 <span class="cosmos-planet cosmos-p-a"></span>
6 <span class="cosmos-planet cosmos-p-b"></span>
7 <span class="cosmos-planet cosmos-p-c"></span>
8
9 <div class="relative z-10 text-center max-w-xl">
10 <h1 class="cosmos-numeral font-black tracking-tight leading-none mb-5" style="font-size:clamp(7rem,18vw,12rem)">404</h1>
11 <h2 class="text-white font-bold text-2xl sm:text-3xl tracking-tight mb-3">You drifted off-course.</h2>
12 <p class="text-slate-300/80 text-base leading-relaxed mb-8 max-w-md mx-auto">The page you were looking for either got deleted, never existed, or is in another star system. Let's get you back.</p>
13 <div class="flex flex-wrap items-center justify-center gap-3">
14 <a href="#" class="cosmos-primary inline-flex items-center gap-2 px-6 py-3 rounded-full font-semibold text-[14px] text-white">
15 <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
16 Back home
17 </a>
18 <a href="#" class="cosmos-ghost inline-flex items-center gap-2 px-6 py-3 rounded-full font-semibold text-[14px] text-white">Browse components</a>
19 </div>
20 </div>
21</section>
macOS-style terminal mockup with auto-playing typewriter lines, syntax-coloured tokens, and a blinking caret. Pure CSS animation timing.

Three iridescent stat cards with a slowly rotating conic-gradient sheen, sparkline preview and a delta badge. Drop-in for any dashboard hero.

Three-plan pricing layout with a monthly/yearly toggle. Price values cross-fade with a slide animation, popular plan glows, yearly savings banner.

Interactive React stats panel on an aurora gradient. Click to randomise the three live counters — each animates a pulse ring driven by custom CSS keyframes, with hover glow on the card edges.

Profile skill panel where each progress bar fills from 0 to its value with an eased animation. Each bar's gradient is tinted to match the skill level.

Dashboard-style sidebar that smoothly collapses from a 240px expanded state to a 64px icon rail. Active item glow, hover highlight, group separators.
Hundreds of production-ready Bootstrap 5 snippets — cards, navbars, dashboards, pricing tables, modals. Live preview, one-click HTML download with the CDN pre-wired, MIT licensed.
517
Snippets
2629.2k
Views
86.2k
Downloads

Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.