404 Planet

网站 · 404 · 免费
404 Planet 预览

在云境TS 中打开并复制 →

内容预览

Build a full-page 404 error page for a hosting company called "NEXOVA". The entire page is a single viewport-height layout with a looping background video, a navigation bar, a centered hero/404 section, and a multi-column footer. Use React + Tailwind CSS + Lucide React icons. No other UI libraries. --- **FONT** Load "Helvetica Now Var" via this stylesheet in `index.html`: ``` ``` Apply it globally on the root container via inline style: ``` fontFamily: '"Helvetica Now Var", Helvetica, Arial, sans-serif' ``` --- **BACKGROUND VIDEO** A `` element with `autoPlay muted loop playsInline`, positioned `absolute inset-0 w-full h-full object-cover` behind all content. The video source URL is: ``` https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260613_180732_a54afbf6-b30d-470e-861f-669871f09f67.mp4 ``` This is a cinematic dark-blue Earth-from-space shot. --- **LAYOUT STRUCTURE** The root is `relative min-h-screen flex flex-col`. Inside it: 1. The background `` (absolute, behind everything) 2. A content wrapper `relative z-10 flex flex-col min-h-screen` containing nav, hero, and footer --- **NAVIGATION BAR** - Flex row, `items-center justify-between`, padding `px-6 md:px-12 lg:px-16 py-5` - **Logo (left):** A custom SVG icon (4 quarter-circle leaf shapes forming a circle, white fill, `w-8 h-8`) next to the text "NEXOVA" in `text-white text-xl font-bold tracking-wider`. The exact SVG path is: ``` M480 240a240 240 0 0 0-240 240 240 240 0 0 0 240-240Z M240 0A240 

……(完整源码请在站内查看)