August 20, 2026

Aurum.

Frontend
HTML CSS JavaScript

A luxury dark-and-gold landing page for a fictional fine-dining restaurant, with a tasting menu and reservation form.

#landing-page #restaurant #fine-dining #dark-theme #one-day-one-code
Aurum

Description

Aurum is a luxury landing page for a fictional fine-dining restaurant in Jakarta. A cinematic dark-and-gold hero (“The art of dining reimagined”) leads into signature dishes, a seven-course tasting menu, the chef’s story, private dining, and a reservation form.

Background

This is an entry in my “One Day One Code” series of small, focused daily builds. The intent was to explore a refined, cinematic dark-and-gold restaurant aesthetic and to practice a careful type scale within a single-file page.

Goal

Deliver a self-contained fine-dining landing page in a day that feels genuinely upscale, using a gold-on-black palette, an elegant type scale, and subtle reveals, while covering the practical needs of a restaurant site such as a menu and a reservation form.

Features

  • Cinematic gold-on-black hero with an info strip (open days, 7-course tasting, 2 Michelin stars, dress code).
  • Signature dishes section highlighting standout plates.
  • Full seven-course tasting menu.
  • Chef’s story and private-dining sections.
  • Reservation booking form and a visit/location section.
  • Scroll-reveal animations across sections.

Technologies

  • HTML (single self-contained file)
  • Inline CSS for the refined type scale and dark-and-gold visuals
  • Vanilla JavaScript for scroll reveals
  • Cormorant Garamond and Lato via Google Fonts

How to Run

Clone the one-day-one-code repository and open 10. fine-dining/index.html directly in a browser; it is a self-contained single file. You can also serve the folder with a static server such as python3 -m http.server 8000. A live version is deployed at the demo URL above.

Technical Decisions

The page is one index.html with inline CSS and vanilla JavaScript, no framework and no build step. Most of the luxury feel comes from a deliberate type scale pairing Cormorant Garamond with Lato and a restrained gold-on-black palette, with plain-JS scroll reveals adding movement. Google Fonts load from a CDN, with system-font fallbacks so the layout still holds offline.

What I Learned

This build was a lesson in restraint: a fine-dining feel depends far more on spacing, type scale, and a disciplined palette than on effects. Structuring the tasting menu and reservation form also gave me practice translating a real restaurant’s content needs into a clean single-page layout.

Notes

Part of the shared one-day-one-code repository. A preview image is included with the project. This is a small daily build rather than a full production site.

Hey! I’m Fanny, the software engineer tending to this digital garden. You can read more about me, or subscribe by email.

Comments