Ramen Noir - Dark Ramen Bar HTML Template

Most restaurant website templates are designed for cafés and brunch spots: bright photography, pastel accents, rounded cards. That look doesn't fit a ramen bar — dim lighting, an open kitchen, steam over the pass, a line at the door after dark.

Ramen Noir is a static HTML template built only for ramen-focused restaurants. The visual identity is dark navy and amber, sharp-edged with no rounded corners, built around a hand-drawn noren-curtain logo mark and wide-tracked uppercase type — closer to the branding of a late-night bar than a typical restaurant site.

It ships with the pages and functionality a ramen shop actually needs: a Menu page where guests customize spice level, toppings, quantity and notes and add straight to a working front-end cart; a Merch page for shirts, caps and mugs sharing that same cart; an Instagram-style photo gallery; and a walk-in-first Contact page instead of a table-reservation form.

The build is plain HTML, CSS and vanilla JavaScript — no npm, no build step, no framework to install. Menu items, prices, topping options, hours, and contact details all live in separate, commented data files, so you can rebrand the entire site — name, logo, colors, menu, photos — without editing a single line of HTML or JS logic.

Features

- 7 complete pages: Home, Menu/Order, Merch, About, Gallery, Contact, 404 - Front-end order cart with spice-level, topping, quantity and note customization, persisted with localStorage - One shared cart across Menu and Merch pages - Auto-rotating hero carousel with crossfade transitions and a slow Ken Burns zoom - Original noren-curtain (暖簾) logo mark, hand-built as SVG - Category sub-navigation on the Menu page with scroll-spy active-tab highlighting - FAQ accordion for walk-in policy, wait times, and dietary notes - Instagram-style photo strip on Home plus a full filterable gallery page with lightbox viewing - Google Maps embed color-treated to match the dark theme - Client-side contact form with inline validation, ready to connect to Formspree/EmailJS - Three color variants — amber (default), crimson, forest green — all WCAG AA contrast-checked - Scroll-triggered reveal animations, varied by content type - Fully responsive with distinct desktop, tablet and mobile layouts - Centralized data files for menu, hours, toppings, spice levels, merch, gallery and FAQ content - Mobile navigation as a full-screen overlay with focus trapping and keyboard support - On-brand 404 page with a CSS-only rising-steam animation - Accessibility: visible focus states, keyboard navigation, alt text, prefers-reduced-motion support - SEO basics: per-page meta tags, Open Graph tags, sitemap.xml, robots.txt - Zero external dependencies beyond Google Fonts — no jQuery, no icon-font CDN, no bundler

Requirements

No build tools required. Works with any static web host (FTP/SFTP upload). No npm, no database, no server-side language needed. Uses Google Fonts (Josefin Sans, Raleway) loaded via CDN — requires internet access at runtime. Any code editor for customization.

Instructions

Full setup, customization and deployment instructions are included in docs/README.md inside the download. Quick start: unzip, edit the files in /data to rebrand (logo, menu, contact info, hours), then upload the contents of the folder to your web host. No build step required.