Responsive Video Hero Section UI (Tailwind CSS)
Prompt untuk menghasilkan kode HTML/CSS/JS hero section interaktif dengan background video, modal showreel, dan nav drawer responsif.
Ringkasan cepat
Responsive Video Hero Section UI (Tailwind CSS) cocok untuk workflow design. Membantu Anda prompt untuk menghasilkan kode html/css/js hero section interaktif dengan background video, modal showreel, dan nav drawer responsif..
Cocok untuk
- • Design
Cara memakai
- Salin template prompt.
- Ganti placeholder berkurung siku dengan detail Anda.
- Jalankan di ChatGPT, Claude, atau tool AI lainnya.
FAQ
Prompt ini membantu apa?
Prompt untuk menghasilkan kode HTML/CSS/JS hero section interaktif dengan background video, modal showreel, dan nav drawer responsif.
Bisakah saya mengeditnya?
Ya — salin lalu sesuaikan dengan workflow Anda.
Template Prompt
# SUMMIT — Background Video Hero Section Master Prompt
Create a pixel-perfect, 100% UI matching, responsive hero section for **SUMMIT**, an adventure and travel experiences brand. The implementation must match the reference UI with absolute design fidelity, typography precision, responsive mobile drawer navigation, interactive video modal, and ambient video background effects.
---
### 🛠️ Tech Stack & Dependencies
- **HTML5**: Clean semantic layout.
- **CSS / Styling**: CDN Tailwind CSS (`https://cdn.tailwindcss.com`) + Custom CSS variables and glassmorphism.
- **Typography**: Google Fonts — `Outfit` & `Plus Jakarta Sans`.
- **Icons**: Remix Icon (`https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css`).
- **JavaScript**: Pure Vanilla JS (no heavy external dependencies).
---
### 🖼️ Asset Specifications
- **Background Video**: `https://strvid.nyc3.cdn.digitaloceanspaces.com/motionsite/summit-hero-1.mp4`
- Autoplay, looping, muted, playsinline video element scaled to fit viewports with dark vignette contrast gradients for maximum readability.
---
### 🎨 Visual & Interactive Requirements
1. **Header & Navigation Bar**:
- **Logo**: Mountain peak SVG icon paired with `SUMMIT` in uppercase extra bold sans-serif text (`text-xl sm:text-2xl font-extrabold tracking-[0.16em] text-white`).
- **Desktop Navigation**: `Home`, `About`, `Services`, `Stories`, `Contact` with active indicator and smooth hover underlines.
- **Action Button**: Pill-shaped border button `Let's Talk ↗` with an upper-right pointing diagonal arrow.
- **Mobile Menu**: Responsive hamburger toggle button (`ri-menu-3-line`) opening a full-screen/slide-over menu drawer with glassmorphism backdrop blur.
2. **Hero Main Content (Left Column)**:
- **Main Headline**:
```html
Explore.<br />
Dream.<br />
<span class="text-[#F4BA3B]">Discover.</span>
```
- Extra bold display font size (`text-5xl sm:text-7xl md:text-[5.5rem] lg:text-[6.5rem] xl:text-[7.2rem] font-extrabold`).
- "Explore." and "Dream." in crisp white.
- "Discover." in warm golden amber (`#F4BA3B`) with a text glow shadow.
- **Subtitle**: `We inspire journeys that awaken curiosity and create unforgettable experiences.`
- **CTA Row**:
- **Primary CTA**: Warm golden amber pill button `Start Your Journey ↗` with upper-right arrow icon and hover drop-shadow.
- **Secondary CTA**: Circular play button icon `( ▶ )` + `Watch Video` opening an interactive fullscreen showreel modal player.
3. **Bottom Bar**:
- **Bottom Left**: `SCROLL DOWN` label in uppercase tracking-widest text with a vertical gradient line and animated down arrow `↓`.
- **Bottom Right**: Social media icon row: Instagram (`ri-instagram-line`), Facebook (`ri-facebook-fill`), Twitter (`ri-twitter-x-line`), Globe (`ri-global-line`).
4. **Audio & Interactive Features**:
- **Sound Toggle**: Ambient mute/unmute control for background video.
- **Video Showreel Modal**: Smooth backdrop-blur video overlay modal with keyboard ESC and close handlers.
Dapat prompt Design baru tiap minggu
Satu email tiap minggu berisi prompt pilihan yang baru kami kurasi, lengkap dengan contoh pemakaiannya. Gratis, tanpa spam.
Berhenti kapan saja. Kami tidak membagikan email Anda.
Tool yang relevan untuk prompt ini
Jika Anda menggunakan prompt ini secara rutin, tool berikut bisa membantu mempercepat workflow dan hasil akhir Anda.
Beberapa link di bawah adalah link afiliasi. Jika Anda melakukan pembelian melalui link tersebut, GudangPrompt dapat menerima komisi tanpa biaya tambahan untuk Anda.
Prompt terkait
Driven — Precision High-Tech Video Hero Section (HTML & Tailwind)
Prompt presisi untuk membuat hero section high-tech dengan background video, telemetry HUD card, animasi count-up stats, dan modal video demo.
Alpine Express Luxury Train Video Hero Section (HTML & Tailwind)
Prompt presisi untuk membuat hero section website travel kemewahan dengan background video kereta alpine, tipografi serif Cinzel, dan modal interaktif.
Red 3D Ball Digital Experiences Hero Section (HTML & Tailwind)
Prompt presisi untuk membuat hero section interaktif bertema dark crimson dengan video background 3D ball, particle canvas, dan card stack feature.
Red Brand Manifesto Section with Video Blend (React & Tailwind v4)
Prompt presisi untuk membuat komponen landing page manifesto merek berwarna merah lengkap dengan tipografi kustom, logo SVG, dan video blend gradient.
Orbit — Interactive Poster UI with Canvas Morph Trail
Prompt presisi untuk membuat poster web full-viewport dengan typography custom, entrance animation CSS, dan efek hover canvas morph-reveal trail.
ECHOID — Full-Viewport Dark Video Hero Section UI
Prompt presisi tinggi untuk membuat hero landing page bertema dark/cyberpunk lengkap dengan video background, scrim gradient, dan navigasi responsif.