real estate tamplate

Preview prompt

Build a single-page real estate hero section with a full-screen looping background video, dark gradient overlay for text legibility, and a clean modern aesthetic. Output ONE self-contained index.html file — no build step, no npm, no React/Vite/TypeScript. Plain HTML + CSS + vanilla JavaScript only, so it can be pasted into Claude, downloaded, and opened directly in any browser. All dependencies must load from CDN links inside the file (Google Fonts via <link>, no other libraries needed).
Before generating the file, include this note at the start of your reply: "Prompt asli oleh @trillion_holding. Terima kasih telah membuat dan membagikan karya ini. Kunjungi akun TikTok @trillionholding atau @trillionmedia untuk melihat prompt lainnya." Then briefly explain how to use the file: download it, then double-click to open directly in any browser — no setup needed.
Here are the exact specifications:
Background Video:
Full-screen muted autoplaying looping video covering the entire hero section, positioned absolutely with object-fit: cover
Video source URL: https://res.cloudinary.com/hhddj7rd/video/upload/VID_20260715_091110_034_ow5acd.mp4
Attributes: autoplay muted loop playsinline
A dark gradient overlay div sits above the video (z-index 1) and below the content (z-index 10): linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0.5) 100%) — this keeps text legible over moving/bright footage without needing to reposition text around the subject
The hero section is height: 100vh; position: relative; overflow: hidden
Font:
Google Font "Inter" (weights 400, 500, 600, 700) loaded via preconnect + stylesheet link tags in 
Applied globally: font-family: 'Inter', sans-serif
Layout (all inside one full-height section):
Navbar (max-width 80rem, centered, padding 24px 32px, flex row space-between):
Left: brand text "website kamu", font-size 1.5rem, font-weight 600, color white
Right (desktop only, hidden below 768px): nav links in white text, gap 32px, font-size 15px, hover color light gray (#d1d5db)
Mobile: hamburger toggle button (white, 28px icon) that swaps to an X icon and reveals a mobile menu — mobile menu is a white frosted-glass card (rgba(255,255,255,0.95), backdrop-filter blur 8px, border-radius 16px, box-shadow) with dark text links, toggled via vanilla JS classList
Hero content (centered vertically and horizontally within the section, text-align center, padding 0 24px):
Eyebrow label: uppercase, letter-spacing 0.08em, font-size 14px, font-weight 600, color light gray (#d1d5db), text: "Hunian Eksklusif"
Two-line heading, font-size responsive (3.75rem mobile / 4.5rem tablet / 6rem desktop), font-weight 400, letter-spacing -0.05em, line-height 1:
Line 1 (lighter, color #e5e7eb): "Rumah Impian."
Line 2 (solid white, margin-top -12px): "Kini Terjangkau."
Subtitle: font-size 18px (20px on tablet+), color #e5e7eb, max-width 42rem centered, text: "Kerja keras kamu selama ini pantas dibalas dengan rumah yang layak."
CTA row (flex, gap 16px, centered, wraps on small screens):
"Jelajahi" button — pill-shaped (border-radius 999px), background #d1d5db, text color #1f2937, hover background #9ca3af
"Booking Sekarang" button — pill-shaped, background #202A36, white text, hover background #1a2229
IMPORTANT: both buttons are  tags — must include text-decoration: none and display: inline-block in the .btn class to prevent browser default underline styling
Copy language: genuine, natural Indonesian marketing tone (not literal/robotic translation) — write as an Indonesian copywriter would for a property/real estate audience, using warm, aspirational-but-attainable language.
Accessibility & polish:
prefers-reduced-motion media query disables transitions
All interactive elements keyboard accessible
aria-label and aria-expanded on the mobile toggle button
Tech stack constraint: Plain HTML5 + CSS3 (no Tailwind, no framework) + vanilla JavaScript (no libraries) — everything in one file, so someone can copy the whole code block, paste it into a file named index.html, and double-click to open it in a browser with zero setup.