Ember & Oak — Modern Fine Dining Restaurant Website

Create a complete, production-quality, visually exceptional fine-dining restaurant website called Ember & Oak using only vanilla HTML, CSS, and JavaScript.

The final website must look like a real restaurant website created by a professional digital agency.

This is NOT a generic restaurant template.

The website should immediately communicate:

• Fine dining
• Craft
• Warmth
• Exclusivity
• Culinary creativity
• Premium hospitality
• Modern sophistication

Avoid generic AI layouts consisting of a hero followed by many identical cards.

Create strong visual rhythm using editorial layouts, oversized food photography, typography-led sections, split compositions, full-width imagery, menu layouts, and restrained animation.

The finished website must be screenshot-worthy and convincing enough to be used as a real premium restaurant website after replacing placeholder information.

---

1. REQUIRED FILE STRUCTURE

Create exactly:

• index.html
• style.css
• script.js

Keep responsibilities separated.

All markup must be in:

index.html

All styling must be in:

style.css

All JavaScript must be in:

script.js

Correctly connect the CSS and JavaScript files from index.html.

The website must work immediately when these three files are placed together.

No installation should be required.

---

2. TECHNOLOGY RESTRICTIONS

Use ONLY:

• HTML5
• CSS3
• Vanilla JavaScript

Do NOT use:

• React
• Vue
• Angular
• Svelte
• Next.js
• Nuxt
• Tailwind CSS
• Bootstrap
• jQuery
• GSAP
• npm
• Node packages
• external JavaScript libraries
• backend code
• databases
• build tools

Use inline SVG for simple icons where appropriate.

The project must remain a true static website.

---

3. BRAND CONCEPT

Restaurant name:

Ember & Oak

Tagline:

Fire. Season. Craft.

Create a complete visual identity around this concept.

Ember represents:

• Fire
• Cooking
• Energy
• Transformation

Oak represents:

• Nature
• Craftsmanship
• Warmth
• Timelessness

The restaurant should feel like a contemporary fine-dining destination where seasonal ingredients are transformed using fire, smoke, fermentation, and careful technique.

Do not make the restaurant feel rustic or like a casual barbecue restaurant.

It should feel sophisticated and modern.

---

4. VISUAL DIRECTION

Create a cinematic dark editorial design.

Suggested palette:

• Deep charcoal
• Warm black
• Bone/off-white
• Burnt amber
• Muted copper
• Natural brown

Use accent colors sparingly.

The visual design should rely heavily on:

• Strong typography
• Large food photography
• Dramatic contrast
• Generous whitespace
• Editorial composition
• Thin borders
• Refined details

Avoid excessive:

• Gradients
• Glowing buttons
• Glassmorphism
• Rounded cards
• Neon
• Drop shadows

Not every element needs a container.

Allow typography and imagery to create structure naturally.

---

5. TYPOGRAPHY

Typography should feel like a premium hospitality brand.

Use an elegant editorial display style for:

• Hero headline
• Section titles
• Quotes
• Dish names

Use a highly readable modern sans-serif style for:

• Descriptions
• Navigation
• Metadata
• Prices
• Buttons

Create strong contrast between large display typography and small uppercase labels.

Use responsive sizing with CSS clamp().

Keep paragraphs at comfortable reading widths.

---

6. PAGE INTRODUCTION / PRELOADER

Create a very short elegant page entrance.

Show:

EMBER & OAK

and a subtle line or ember-inspired animation.

The intro should disappear quickly.

Do not make visitors wait more than approximately one second.

If JavaScript is disabled, the preloader must not block the website.

Respect prefers-reduced-motion.

---

7. NAVIGATION

Create a sophisticated transparent navigation over the hero.

Include:

• Ember & Oak wordmark
• Story
• Menu
• Experience
• Chef
• Journal
• Visit

Add a distinct:

Reserve a Table

button.

When scrolling, transition the navigation into a dark elevated state with:

• Slight transparency
• Subtle blur
• Thin border
• Controlled background

Do not make it overly glassy.

---

8. MOBILE NAVIGATION

Create an elegant full-screen or large-panel mobile navigation experience.

Include:

• Restaurant logo
• Navigation links
• Reservation CTA
• Opening hours
• Small location text

Requirements:

• Animated hamburger
• Escape key closes menu
• Selecting a link closes menu
• Proper ARIA state
• Background scrolling disabled while open
• Keyboard accessibility

Make the mobile menu feel like part of the restaurant brand.

---

9. HERO SECTION

Create a cinematic full-screen hero.

Use a dramatic fine-dining image showing:

• Plated food
• Open-fire cooking
• Chef preparation
• Atmospheric restaurant interior

Add a subtle dark overlay for readability.

Small label:

CONTEMPORARY DINING · PHNOM PENH

Main headline:

Where fire meets season.

Supporting copy:

“A contemporary dining experience shaped by flame, local ingredients, and thoughtful craft.”

Primary CTA:

Reserve Your Table

Secondary CTA:

Discover the Menu

Add a small vertical or horizontal statement:

Dinner · Tuesday — Sunday

Add an elegant scroll indicator.

Do not clutter the hero with too many elements.

---

10. BRAND STATEMENT

Immediately after the hero, create a typography-led statement section.

Large text:

We cook with fire, follow the seasons, and let exceptional ingredients speak for themselves.

Highlight selected words subtly.

This section should have strong whitespace and almost no decorative UI.

---

11. THE STORY

Create an editorial section titled:

Our Story

Heading:

Rooted in place. Guided by fire.

Write realistic restaurant copy explaining Ember & Oak's philosophy.

Mention:

• Seasonal ingredients
• Relationships with growers
• Local produce
• Responsible sourcing
• Fire-based cooking
• Contemporary technique
• Constantly evolving menus

Use an asymmetrical composition with:

• One large restaurant/chef image
• One smaller ingredient/detail image
• Text content

Add:

Established 2024

as a subtle detail.

---

12. SIGNATURE DISHES

Create a visually striking signature dishes section.

Do not use six identical cards.

Show 4 signature dishes using alternating large image/text compositions.

Example dishes:

Charred River Prawn

Tamarind · fermented chili · garden herbs

$24

Ember-Roasted Duck

Smoked plum · black garlic · seasonal greens

$32

Dry-Aged Beef

Roasted shallot · pepper leaf · bone marrow jus

$38

Burnt Coconut

Coconut cream · palm sugar · cacao · sea salt

$12

Each dish should include:

• Large image
• Dish name
• Ingredients
• Price
• Small category label

Add subtle image hover/reveal effects on desktop.

---

13. INTERACTIVE MENU

Create a refined menu section.

Categories:

• Tasting Menu
• À La Carte
• From the Fire
• Desserts
• Drinks

Use vanilla JavaScript to switch categories.

Do not make the menu look like an e-commerce product grid.

Use a traditional elegant menu layout with:

Dish name ........ Price

and a smaller description underneath.

Create at least 4 realistic items per category.

Example:

Smoked Eggplant — $14 Sesame, preserved lemon, coriander

Add dietary indicators where appropriate:

• V
• VG
• GF

Include a small legend.

---

14. TASTING EXPERIENCE

Create a major visual section for:

The Ember Experience

Present a multi-course chef's tasting menu.

Example:

7 Courses

$95 per guest

Optional pairing

+$45

Include:

• Seasonal introduction
• Snack
• Seafood
• Fire course
• Main
• Pre-dessert
• Dessert

Explain that the exact menu evolves with season and availability.

CTA:

Reserve the Experience

Use an elegant split composition.

---

15. CHEF SECTION

Create a premium chef profile.

Name:

Chef Adrian Vale

Use this as fictional placeholder content.

Title:

Executive Chef

Add a large editorial portrait.

Write a believable short story about:

• Culinary background
• Philosophy
• Regional ingredients
• Fire-based cooking
• Simplicity
• Seasonality

Include a pull quote:

“Technique should support the ingredient, never compete with it.”

Add a stylized signature-like text treatment using CSS, not an external image.

---

16. INGREDIENT PHILOSOPHY

Create a section titled:

Closer to the source.

Show four ingredient/sourcing themes:

• Local Farms
• Day-Boat Seafood
• Seasonal Produce
• Responsible Producers

Use photography and concise text.

Explain the restaurant's commitment to thoughtful sourcing without making unverifiable environmental claims.

---

17. RESTAURANT EXPERIENCE

Create an atmospheric section showing the dining room.

Heading:

An evening designed to unfold slowly.

Include details about:

• Intimate dining room
• Open kitchen
• Warm lighting
• Chef's counter
• Private dining

Add large interior imagery.

---

18. CHEF'S COUNTER

Create a special feature:

The Counter

Describe an intimate chef's counter experience with a limited number of seats.

Example:

8 seats

Tuesday — Saturday

7:00 PM

Chef's tasting menu only

Add CTA:

Reserve the Counter

Give this section a visually distinct but brand-consistent treatment.

---

19. PRIVATE DINING

Create a private dining section.

Include:

• Private celebrations
• Business dinners
• Small events
• Custom menus

Add:

Up to 16 guests

CTA:

Enquire About Private Dining

This CTA can scroll to an inquiry form.

---

20. GALLERY

Create an immersive restaurant gallery.

Include images representing:

• Dishes
• Ingredients
• Chef
• Kitchen
• Dining room
• Fire
• Drinks

Use an editorial masonry-style CSS Grid.

Avoid making all images identical dimensions.

Clicking an image opens a custom accessible lightbox.

Lightbox requirements:

• Previous
• Next
• Close
• Escape key
• Keyboard navigation
• Touch-friendly controls
• Background scroll lock

Do not use an external lightbox library.

---

21. REVIEWS

Create a restrained review section.

Do not make it look like an online store testimonial carousel.

Use large editorial quotes.

Create 3 sample reviews.

Example:

“A confident menu where smoke and fire never overpower the ingredients.”

— Dining Guest

Include subtle rating indicators where appropriate.

Implement a simple vanilla JavaScript slider.

---

22. JOURNAL

Create a small journal/stories section.

Show 3 articles:

Cooking With Fire

A look inside our approach to flame and smoke.

Meet Our Growers

The relationships behind our seasonal menu.

A New Season

How the menu changes throughout the year.

Each article includes:

• Image
• Category
• Date
• Title
• Short excerpt
• Read Story link

The links can be placeholders.

---

23. RESERVATION SECTION

Create a beautiful reservation section.

Heading:

Your table awaits.

Add a frontend-only reservation form.

Fields:

• Full Name
• Email
• Phone
• Date
• Time
• Number of Guests
• Dining Experience
• Special Requests

Dining Experience options:

• Main Dining Room
• Chef's Counter
• Tasting Experience

Use realistic time options.

Validate fields with JavaScript.

Show inline errors.

After successful validation, display:

“Your reservation request is ready. This demonstration form is not connected to a live reservation system.”

Do NOT pretend that a real reservation has been confirmed.

---

24. RESERVATION INFORMATION

Next to the form, show useful information.

Example:

Reservations

Dinner Tuesday — Sunday 5:30 PM — 10:30 PM

Chef's Counter

Tuesday — Saturday 7:00 PM

Large Parties

For parties of 8 or more, please contact us directly.

Add a placeholder phone and email.

---

25. LOCATION

Create a polished Visit section.

Restaurant:

Ember & Oak

Location:

BKK1 · Phnom Penh, Cambodia

Use a clearly fictional placeholder street address.

Include:

• Address
• Phone
• Email
• Opening hours
• Directions button

Create an elegant map-style visual using HTML/CSS or a replaceable image placeholder.

Do not require a Google Maps API key.

---

26. FOOTER

Create a sophisticated dark footer.

Include:

EMBER & OAK

Tagline:

Fire. Season. Craft.

Navigation:

• Story
• Menu
• Chef
• Private Dining
• Journal
• Visit

Contact information.

Social links:

• Instagram
• Facebook
• TikTok

Add:

Reserve a Table

CTA.

Generate the current copyright year with JavaScript.

Include a subtle back-to-top control.

---

27. JAVASCRIPT FUNCTIONALITY

Implement in script.js:

• Short non-blocking intro/preloader
• Mobile navigation
• Scrolled navbar state
• Active navigation highlighting
• Smooth anchor scrolling
• Menu category switching
• Gallery lightbox
• Review slider
• Reservation validation
• Private dining inquiry interaction
• Scroll reveal
• Back-to-top
• Dynamic copyright year

Use IntersectionObserver where appropriate.

Do not create unnecessary animation loops.

---

28. MOTION DIRECTION

Animations should feel cinematic and refined.

Use:

• Image reveals
• Gentle fades
• Small vertical movement
• Text clipping/reveal where appropriate
• Slow controlled image scale on hover
• Subtle navigation transitions

Do NOT use:

• Bouncing
• Spinning
• Flying cards
• Particle explosions
• Constant cursor effects
• Excessive parallax

Animation should enhance atmosphere rather than demonstrate technical tricks.

Respect:

prefers-reduced-motion.

---

29. RESPONSIVE DESIGN

The website must be intentionally designed for:

• 320px phones
• 375px phones
• 430px phones
• Tablets
• Laptops
• Standard desktop
• Large desktop

Desktop can use dramatic editorial layouts.

Mobile should simplify them intelligently.

On mobile:

• Stack content logically
• Reduce image overlaps
• Preserve large food photography
• Keep menu prices aligned
• Make reservation fields comfortable
• Make gallery usable
• Make navigation touch-friendly
• Reduce decorative elements
• Maintain premium spacing

No horizontal overflow is allowed.

---

30. IMAGE DIRECTION

Photography is critical.

Use high-quality remote placeholder imagery suitable for a contemporary fine-dining restaurant.

Images should represent:

• Fine-dining dishes
• Open-fire cooking
• Chef preparation
• Seasonal ingredients
• Elegant dark restaurant interiors
• Wine/cocktails
• Kitchen atmosphere

Avoid:

• Fast food
• Burgers
• Pizza-shop imagery
• Generic buffet photos
• Unrelated lifestyle photography

Maintain a consistent cinematic photography direction.

Use meaningful alt text.

Lazy-load below-the-fold images.

Maintain image aspect ratios to reduce layout shifts.

---

31. ACCESSIBILITY

Use semantic HTML5.

Ensure:

• Logical heading hierarchy
• One H1
• Keyboard-accessible navigation
• Accessible menu tabs
• Accessible lightbox
• Accessible review controls
• Form labels
• Inline validation messages
• Visible focus states
• Good contrast
• Alt text
• Appropriate ARIA attributes

Do not use clickable div elements where buttons should be used.

---

32. SEO

Add professional restaurant SEO metadata.

Include:

• Page title
• Meta description
• Canonical placeholder
• Open Graph title
• Open Graph description
• Open Graph image placeholder
• Twitter card
• Theme color

Add Restaurant structured data using JSON-LD.

Use clearly fictional/sample values for:

• Address
• Phone
• Price range
• Opening hours

Do not invent awards or certifications.

---

33. PERFORMANCE

Keep the site lightweight.

Requirements:

• No framework
• No animation library
• No background video
• Lazy-loaded images
• Efficient JavaScript
• Stable image containers
• Minimal layout shift
• Efficient CSS
• No unnecessary event listeners

The site should feel fast on mobile connections.

---

34. CODE QUALITY

Organize CSS logically:

1. Variables
2. Reset
3. Base
4. Typography
5. Layout
6. Navigation
7. Hero
8. Sections
9. Menu
10. Gallery
11. Forms
12. Footer
13. Animations
14. Responsive rules
15. Reduced motion

Use:

• CSS variables
• Grid
• Flexbox
• clamp()
• aspect-ratio
• Modern CSS

Avoid excessive absolute positioning.

Avoid unnecessary !important.

Write clean JavaScript with:

• Clear function names
• Guards for missing elements
• Minimal global state
• No console errors

---

35. CONTENT QUALITY

Do not use Lorem Ipsum.

Write realistic restaurant copy specifically for Ember & Oak.

The writing style should be:

• Concise
• Sophisticated
• Warm
• Confident
• Culinary
• Human

Avoid generic AI marketing phrases.

Do not repeatedly use words such as:

• Premium
• Exceptional
• Unforgettable
• Innovative
• World-class

Let the visual design and specific writing communicate quality.

---

36. VISUAL RHYTHM

This is extremely important.

Do NOT create:

Navbar Hero Card grid Card grid Card grid Card grid Footer

Instead create visual variation:

Cinematic hero

→ Typography statement

→ Editorial story layout

→ Large signature dish

→ Menu typography

→ Full-width image

→ Chef profile

→ Ingredient grid

→ Atmospheric restaurant imagery

→ Chef's counter

→ Gallery

→ Reviews

→ Reservation

→ Location

→ Footer

The page should feel like a carefully art-directed restaurant experience.

---

37. FINAL QUALITY CHECK

Before returning the code, verify:

• All three files connect correctly
• Navigation works
• Mobile menu works
• Menu categories switch correctly
• Gallery lightbox works
• Review slider works
• Reservation validation works
• All anchors reference real sections
• No undefined JavaScript variables
• No console errors
• No horizontal overflow
• Images have alt text
• Forms have labels
• Keyboard navigation works
• Reduced-motion support works
• Desktop layout looks premium
• Mobile layout looks intentionally designed
• No framework dependencies exist

Fix any issue you identify before returning the final code.

---

38. FINAL OUTPUT FORMAT

Return exactly three complete code sections:

index.html

Provide the entire HTML document.

style.css

Provide all CSS required by the website.

script.js

Provide all JavaScript required by the website.

Do NOT write:

“remaining code”

“same as above”

“add more items here”

“implement this yourself”

Do not return pseudo-code.

Do not omit sections to save response length.

Everything must be fully implemented.

The website must work immediately after copying the three files into a static website editor.

The final result should be production-quality, cinematic, responsive, accessible, distinctive, screenshot-worthy, and visually convincing enough that viewers would believe Ember & Oak is a real contemporary fine-dining restaurant.