Cinematic Parallax Landing Page
A dark, cinematic architecture landing page with layered parallax, a horizontal project reel, and a commission form.
Restaurant Landing Page
A warm, responsive page for a neighborhood restaurant, with hours, a sample menu, and a reservation form.
Use this free Cedar & Rye page as a starting point for a restaurant or cafe. The layout is a single HTML file with CSS variables for color, a seasonal menu grid, and a demo reservation form you can connect later.
What's included
- Sticky navigation with a mobile menu
- Hero with hours card and primary reservation CTA
- Seasonal menu grid with prices
- Story, location, and private dining notes
- Accessible reservation form that does not pretend to book a table
Responsive support
This template is built as a full page and adapts to desktop, tablet, and mobile widths. Use the live preview to check each viewport before you copy the code.
Template source
Copy the HTML below into your project. A short README in the template folder explains colors, content, and placeholder visuals.
<!--
Cedar & Rye — Restaurant landing page template
See README.md in this folder for usage, colors, content, and placeholder visuals.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cedar & Rye — Neighborhood kitchen</title>
<meta name="description" content="Cedar & Rye is a wood-fired neighborhood kitchen in Portland. Seasonal plates, a short wine list, and a room you can linger in.">
<style>
:root {
--bg: #f7f1e8;
--bg-strong: #efe4d4;
--ink: #2c1810;
--muted: #6b4f43;
--card: #fffaf3;
--line: #e4d5c3;
--accent: #7c2d12;
--accent-dark: #5c1d0e;
--pine: #3f5d4a;
--radius: 20px;
--font: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
--ui: "Avenir Next", "Segoe UI", sans-serif;
--max: 1080px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
color: var(--ink);
background: var(--bg);
font-family: var(--ui);
line-height: 1.55;
}
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
.skip-link {
position: absolute;
left: 1rem;
top: -40px;
background: var(--ink);
color: #fff;
padding: 0.5rem 0.75rem;
z-index: 20;
}
.skip-link:focus { top: 1rem; }
.wrap { width: min(var(--max), calc(100% - 2rem)); margin: 0 auto; }
.site-header {
position: sticky;
top: 0;
z-index: 10;
background: rgba(247, 241, 232, 0.94);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--line);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 76px;
}
.logo {
text-decoration: none;
font-family: var(--font);
font-size: 1.35rem;
letter-spacing: -0.03em;
}
.nav-links { display: flex; align-items: center; gap: 1.2rem; }
.nav-links a:not(.btn) { text-decoration: none; color: var(--muted); }
.nav-links a:not(.btn):hover { color: var(--ink); }
.nav-links .btn-primary { color: #fff; }
.nav-links .btn-primary:hover { color: #fff; background: var(--accent-dark); }
.nav-toggle {
display: none;
border: 1px solid var(--line);
background: var(--card);
border-radius: 10px;
padding: 0.45rem 0.7rem;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
padding: 0.8rem 1.2rem;
text-decoration: none;
font-weight: 600;
cursor: pointer;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { background: transparent; border: 1px solid var(--ink); }
.hero {
padding: 4.5rem 0 3rem;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 2.5rem;
align-items: center;
}
.eyebrow {
color: var(--pine);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 0.76rem;
margin: 0 0 0.8rem;
}
h1, h2, h3 { font-family: var(--font); letter-spacing: -0.03em; line-height: 1.15; }
h1 { font-size: clamp(2.5rem, 5vw, 4.2rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 0 0 0.7rem; }
h3 { font-size: 1.2rem; margin: 0 0 0.35rem; }
.lede { font-size: 1.12rem; color: var(--muted); max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.hours-card {
background: var(--card);
border: 1px solid var(--line);
border-radius: 28px;
padding: 1.4rem;
box-shadow: 0 24px 50px rgba(44, 24, 16, 0.08);
}
.hours-card ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.hours-card li {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.45rem 0;
border-top: 1px solid var(--line);
}
.plate {
height: 180px;
border-radius: 24px;
margin-bottom: 1rem;
background:
radial-gradient(circle at 50% 55%, #fffaf3 0 28%, transparent 29%),
radial-gradient(circle at 50% 55%, #7c2d12 0 46%, transparent 47%),
linear-gradient(160deg, #efe4d4, #d6c3ab);
}
section { padding: 3.5rem 0; }
.menu-grid, .info-grid, .story-grid {
display: grid;
gap: 1rem;
}
.menu-grid { grid-template-columns: repeat(3, 1fr); margin-top: 1.6rem; }
.story-grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
.info-grid { grid-template-columns: 1fr 1fr; }
.dish, .panel {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.2rem;
}
.price { color: var(--pine); font-weight: 700; }
.hearth {
min-height: 280px;
border-radius: 28px;
background:
linear-gradient(180deg, rgba(124,45,18,0.18), transparent 40%),
repeating-linear-gradient(90deg, #3f5d4a 0 18px, #345040 18px 22px);
border: 1px solid var(--line);
}
form { display: grid; gap: 0.85rem; }
label { font-weight: 600; font-size: 0.92rem; }
input, select, textarea {
width: 100%;
background: var(--bg);
border: 1px solid var(--line);
border-radius: 12px;
padding: 0.75rem 0.9rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
.form-status { min-height: 1.4em; color: var(--muted); }
.site-footer {
border-top: 1px solid var(--line);
padding: 2.4rem 0;
color: var(--muted);
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 1.5rem;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 860px) {
.hero, .menu-grid, .story-grid, .info-grid, .footer-grid, .form-row { grid-template-columns: 1fr; }
.nav-toggle { display: inline-flex; }
.nav-links {
display: none;
position: absolute;
left: 1rem;
right: 1rem;
top: 76px;
background: var(--card);
border: 1px solid var(--line);
border-radius: 16px;
padding: 1rem;
flex-direction: column;
align-items: stretch;
}
.nav-links.is-open { display: flex; }
}
</style>
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="site-header">
<div class="wrap nav">
<a class="logo" href="#top">Cedar & Rye</a>
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav">Menu</button>
<nav id="site-nav" class="nav-links" aria-label="Primary">
<a href="#menu">Menu</a>
<a href="#story">The room</a>
<a href="#visit">Visit</a>
<a class="btn btn-primary" href="#reserve">Reserve a table</a>
</nav>
</div>
</header>
<main id="main">
<section class="wrap hero" id="top">
<div>
<p class="eyebrow">Wood-fired kitchen · Portland</p>
<h1>A quiet room, a short menu, and a fire that starts at four.</h1>
<p class="lede">Cedar & Rye cooks from what the week brings in: vegetables from nearby farms, bread from our oven, and a wine list you can finish reading before the first pour.</p>
<div class="hero-actions">
<a class="btn btn-primary" href="#reserve">Reserve a table</a>
<a class="btn btn-ghost" href="#menu">See tonight’s plates</a>
</div>
</div>
<aside class="hours-card" aria-labelledby="hours-heading">
<div class="plate" aria-hidden="true"></div>
<h2 id="hours-heading">Hours</h2>
<ul>
<li><span>Tuesday – Thursday</span><span>17:00 – 21:30</span></li>
<li><span>Friday – Saturday</span><span>17:00 – 22:00</span></li>
<li><span>Sunday lunch</span><span>12:00 – 15:00</span></li>
<li><span>Monday</span><span>Closed</span></li>
</ul>
</aside>
</section>
<section class="wrap" id="menu" aria-labelledby="menu-heading">
<h2 id="menu-heading">From the hearth</h2>
<p class="lede">A sample of what we cook this season. Replace these plates with your real menu or link out to a current PDF.</p>
<div class="menu-grid">
<article class="dish">
<h3>Chicories, walnut, aged cheddar</h3>
<p>Bitter leaves, warm vinaigrette, and bread you can use as a spoon.</p>
<p class="price">14</p>
</article>
<article class="dish">
<h3>Trout, brown butter, rye crumb</h3>
<p>Pan-roasted, with pickled mustard seed and a handful of herbs.</p>
<p class="price">28</p>
</article>
<article class="dish">
<h3>Wood-fired squash, chili honey</h3>
<p>Delicata, ricotta, and a little heat. Share it or don’t.</p>
<p class="price">18</p>
</article>
<article class="dish">
<h3>Lamb shoulder, salsa verde</h3>
<p>Slow, then finished in the oven. Served with farro and greens.</p>
<p class="price">34</p>
</article>
<article class="dish">
<h3>Olive oil cake, citrus</h3>
<p>Still warm if you time it right. Cream on the side.</p>
<p class="price">12</p>
</article>
<article class="dish">
<h3>House rye, cultured butter</h3>
<p>Baked twice a day. Ask for extra if the table is hungry.</p>
<p class="price">7</p>
</article>
</div>
</section>
<section class="wrap" id="story" aria-labelledby="story-heading">
<div class="story-grid">
<div>
<h2 id="story-heading">Built around one oven</h2>
<p class="lede">We opened Cedar & Rye because we wanted a neighborhood room that still felt like a proper restaurant: cloth on the table, a short menu, and a kitchen you can see from the door.</p>
<p>The interior drawing on the right is a CSS placeholder. Swap it for a photo of your dining room, the pass, or the street at dusk.</p>
</div>
<div class="hearth" role="img" aria-label="Placeholder for a dining room photograph."></div>
</div>
</section>
<section class="wrap" id="visit" aria-labelledby="visit-heading">
<h2 id="visit-heading">Find us</h2>
<div class="info-grid">
<article class="panel">
<h3>The dining room</h3>
<p>412 Splinter Street<br>Portland, OR 97214</p>
<p>Walk-ins for the bar. Tables for two to six by reservation.</p>
</article>
<article class="panel">
<h3>Private dining</h3>
<p>The back room seats 12. Write through the form if you are planning a lunch or a long dinner.</p>
</article>
</div>
</section>
<section class="wrap" id="reserve" aria-labelledby="reserve-heading">
<h2 id="reserve-heading">Reserve a table</h2>
<p class="lede">This demo form does not book a real table. Connect it to your reservation tool before you publish.</p>
<form id="reserve-form" class="panel" style="margin-top: 1.2rem;">
<div class="form-row">
<div>
<label for="guest-name">Name</label>
<input id="guest-name" name="name" type="text" autocomplete="name" required>
</div>
<div>
<label for="guest-email">Email</label>
<input id="guest-email" name="email" type="email" autocomplete="email" required>
</div>
</div>
<div class="form-row">
<div>
<label for="guest-date">Date</label>
<input id="guest-date" name="date" type="date" required>
</div>
<div>
<label for="guest-party">Party size</label>
<select id="guest-party" name="party" required>
<option value="2">2 people</option>
<option value="3">3 people</option>
<option value="4">4 people</option>
<option value="5">5 people</option>
<option value="6">6 people</option>
</select>
</div>
</div>
<div>
<label for="guest-note">Note</label>
<textarea id="guest-note" name="note" rows="3" placeholder="Allergies, a celebration, or a preferred time."></textarea>
</div>
<button class="btn btn-primary" type="submit">Request a table</button>
<p class="form-status" id="reserve-status" role="status" aria-live="polite"></p>
</form>
</section>
</main>
<footer class="site-footer">
<div class="wrap footer-grid">
<div>
<a class="logo" href="#top">Cedar & Rye</a>
<p>A sample restaurant page from Designyff. Replace the name, menu, and address before you ship.</p>
</div>
<div>
<h3>Visit</h3>
<p>412 Splinter Street<br>Portland, OR 97214</p>
</div>
<div>
<h3>Kitchen</h3>
<p><a href="#menu">Menu</a></p>
<p><a href="#reserve">Reservations</a></p>
</div>
</div>
<div class="wrap" style="margin-top: 1.5rem;">
<p>© <span id="year"></span> Cedar & Rye. Template by Designyff. Sample address only.</p>
</div>
</footer>
<script>
document.getElementById('year').textContent = new Date().getFullYear();
const toggle = document.querySelector('.nav-toggle');
const nav = document.getElementById('site-nav');
toggle.addEventListener('click', () => {
const open = toggle.getAttribute('aria-expanded') === 'true';
toggle.setAttribute('aria-expanded', String(!open));
nav.classList.toggle('is-open', !open);
});
const form = document.getElementById('reserve-form');
const status = document.getElementById('reserve-status');
form.addEventListener('submit', (event) => {
event.preventDefault();
status.textContent = 'This demo form does not send data. Connect it to OpenTable, Resy, or your own inbox.';
form.reset();
});
</script>
</body>
</html>
Related templates
Creative Agency Landing Page
A studio marketing page with case studies, capabilities, process, team, and a project inquiry form.
Modern SaaS Landing Page
A complete responsive landing page for a SaaS product, with navigation, pricing, FAQ, and a final call to action.