# One-Shot Prompt **Theme**: Elegant Restaurant **Generated**: Mon Apr 06 2026 ## Prompt Write complete HTML, CSS, and JavaScript in a single self-contained file for an immersive, cinematic website about an elegant fine‑dining restaurant called **Maison Vorieux**. The site must feel like a living brand experience—sections that breathe as you scroll, typography with weight and presence, and atmosphere you can almost taste. ### Visual Design - **Color palette**: near‑black (#0d0d0d), warm cream (#f5f0e8), gold (#c9a84c), deep burgundy accent (#8b2020) - **Typography**: Cormorant Garamond for display headings (import via Google Fonts), Inter for body text. - **Texture**: CSS grain overlay simulating candlelight warmth, using a fixed SVG noise filter with low opacity. - **Layout**: Full‑width sections with generous whitespace, centered typography, subtle parallax depth between background and foreground layers. ### Sections (in order) 1. **Hero** – Full‑viewport height, centered restaurant name “Maison Vorieux” in large display type, tagline “Fine dining, honest cooking” beneath, a subtle downward‑arrow hint. 2. **About** – Two‑column layout (text on left, a CSS‑drawn “candle” illustration on right) revealing the restaurant’s philosophy. Use Intersection Observer to fade in each column separately. 3. **Menu** – Horizontal scroll section for the tasting menu. Each dish card (appetizer, main, dessert) is a rectangle with a title, description, and a decorative gold line. The cards scroll horizontally via a CSS animation that pauses on hover. 4. **Wine** – Vertical list of wine pairings with animated “pour” fill on scroll (clip‑path liquid curve). Each bottle entry includes a vineyard name and tasting notes. 5. **Reservations** – Simple form‑like layout with a fictional phone number, email, and a “Book a table” button that hovers with a gold underline. 6. **Footer** – Small print: fictional address “12 Rue du Marais, Paris”, a SVG flame drawing that flickers via CSS animation, and a motto in French “La cuisine est un art de vivre”. ### Interactions & Animations - **Cursor**: A subtle 4px gold dot that follows the mouse (lightly lagged, opacity changes on click). - **Scroll‑triggered reveals**: Every section uses Intersection Observer (threshold 0.15) to add a `visible` class that fades and slides content into view. - **Parallax**: The background grain layer moves 30% slower than the foreground content on scroll. - **Hover states**: Gold underline on text links, slight scale‑up on menu cards, a gentle glow on the candle illustration. - **Horizontal ticker**: The tasting‑menu cards scroll automatically (30s linear infinite) but pause when hovered. - **Flame animation**: In the footer, an inline SVG flame with `fill‑opacity` cycling via `@keyframes` to mimic flickering. ### Technical Constraints - Single `.html` file, no external images, no CDN dependencies besides Google Fonts. - Vanilla JavaScript only (no frameworks). - Use CSS Grid/Flexbox for responsive layout; mobile‑friendly (stack columns, reduce font sizes). - Include `prefers‑reduced‑motion` media query to disable all animations. - Apply `will‑change: transform` on animated elements, `font‑display: swap` on fonts. - Smooth scroll behavior on `html` element. - All code must be written out in full—no placeholders, ellipses, or truncated sections. ### Polish Details - Add a `::selection` style with gold background and dark text. - Use `backdrop‑filter: blur(10px)` on a semi‑transparent header that appears after scrolling past the hero. - Include a “skip to content” accessibility link at the top. - Set `view‑port` meta tags for proper mobile scaling. - Write semantic HTML with `
`, `
`, `
`, `