Pages Easy
Restaurant About / Our Story
Editorial About page — chef portrait, founding story, 4-step timeline, team grid, values and a press wall — in the shared warm restaurant palette.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--cream: #f5f0e8;
--cream-2: #ece4d4;
--bone: #faf7f1;
--terracotta: #c1714a;
--terracotta-d: #a05a38;
--forest: #2d4a3e;
--forest-d: #1e3329;
--gold: #c9a84c;
--gold-light: #e6c97a;
--ink: #2c1a0e;
--ink-2: #4a3828;
--warm-gray: #7a6a58;
--success: #4f7a3a;
--danger: #b3432a;
--warning: #d99020;
--font-display: "Playfair Display", Georgia, serif;
--font-body: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--shadow-1: 0 1px 2px rgba(44, 26, 14, 0.08), 0 2px 6px rgba(44, 26, 14, 0.06);
--shadow-2: 0 8px 24px rgba(44, 26, 14, 0.12);
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-body);
background: var(--cream);
color: var(--ink);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
/* Nav */
.nav {
padding: 18px 28px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(44, 26, 14, 0.08);
background: var(--bone);
}
.nav-brand {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 800;
color: var(--ink);
text-decoration: none;
}
.nav-back {
font-size: 0.84rem;
color: var(--ink-2);
text-decoration: none;
font-weight: 600;
}
.nav-back:hover {
color: var(--terracotta-d);
}
/* Intro pull-quote */
.intro {
max-width: 920px;
margin: 0 auto;
padding: 84px 28px 56px;
text-align: center;
}
.kicker {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--terracotta);
font-weight: 600;
margin-bottom: 12px;
}
.intro h1 {
font-family: var(--font-display);
font-size: clamp(2.2rem, 5.5vw, 3.6rem);
font-weight: 500;
letter-spacing: -0.015em;
line-height: 1.15;
}
.intro h1 em {
font-style: italic;
color: var(--terracotta-d);
}
.byline {
margin-top: 28px;
font-size: 0.86rem;
color: var(--warm-gray);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 700;
}
/* Chef */
.chef {
max-width: 1080px;
margin: 0 auto;
padding: 40px 28px 80px;
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 56px;
align-items: center;
}
@media (max-width: 720px) {
.chef {
grid-template-columns: 1fr;
gap: 28px;
}
}
.chef-portrait {
position: relative;
aspect-ratio: 3 / 4;
border-radius: var(--r-lg);
overflow: hidden;
display: grid;
place-items: center;
}
.portrait-bg {
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(193, 113, 74, 0.5), transparent 50%),
radial-gradient(circle at 70% 70%, rgba(45, 74, 62, 0.4), transparent 55%),
linear-gradient(135deg, var(--cream-2) 0%, var(--gold-light) 100%);
}
.portrait-glyph {
position: relative;
font-size: 6rem;
filter: drop-shadow(0 8px 16px rgba(44, 26, 14, 0.25));
}
.chef-portrait figcaption {
position: absolute;
bottom: 14px;
left: 14px;
right: 14px;
font-size: 0.74rem;
font-style: italic;
color: var(--ink);
background: rgba(250, 247, 241, 0.86);
padding: 6px 10px;
border-radius: var(--r-sm);
backdrop-filter: blur(6px);
}
.chef-body p {
font-size: 1.02rem;
color: var(--ink-2);
margin-bottom: 16px;
}
.chef-body p:last-child {
margin-bottom: 0;
}
/* Section base */
.section,
.press {
max-width: 1080px;
margin: 0 auto;
padding: 72px 28px;
}
.section-head {
text-align: center;
margin-bottom: 36px;
}
.section-head h2 {
font-family: var(--font-display);
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 700;
letter-spacing: -0.015em;
}
/* Timeline */
.timeline {
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
position: relative;
}
.timeline::before {
content: "";
position: absolute;
top: 32px;
left: 5%;
right: 5%;
height: 2px;
background: linear-gradient(90deg, var(--terracotta), var(--gold), var(--forest));
border-radius: 999px;
opacity: 0.4;
}
.timeline li {
background: var(--bone);
border: 1px solid rgba(44, 26, 14, 0.08);
border-radius: var(--r-md);
padding: 22px 18px 18px;
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
}
.timeline li::before {
content: "";
position: absolute;
top: -8px;
left: 22px;
width: 14px;
height: 14px;
border-radius: 999px;
background: var(--terracotta);
border: 3px solid var(--bone);
box-shadow: 0 0 0 1px var(--terracotta);
}
.timeline li:nth-child(2)::before {
background: var(--gold);
box-shadow: 0 0 0 1px var(--gold);
}
.timeline li:nth-child(3)::before {
background: var(--success);
box-shadow: 0 0 0 1px var(--success);
}
.timeline li:nth-child(4)::before {
background: var(--forest);
box-shadow: 0 0 0 1px var(--forest);
}
.year {
font-family: var(--font-mono);
font-size: 0.86rem;
font-weight: 700;
color: var(--warm-gray);
letter-spacing: 0.06em;
}
.timeline h3 {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 700;
}
.timeline p {
font-size: 0.88rem;
color: var(--ink-2);
}
@media (max-width: 880px) {
.timeline {
grid-template-columns: 1fr;
}
.timeline::before {
display: none;
}
}
/* Team */
.team {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}
.member {
text-align: center;
background: var(--bone);
border: 1px solid rgba(44, 26, 14, 0.08);
border-radius: var(--r-md);
padding: 22px 16px 18px;
}
.avatar {
width: 88px;
height: 88px;
border-radius: 999px;
margin: 0 auto 14px;
display: grid;
place-items: center;
font-family: var(--font-display);
font-weight: 800;
font-size: 2rem;
color: var(--bone);
}
.avatar-a {
background: linear-gradient(135deg, var(--terracotta), var(--terracotta-d));
}
.avatar-b {
background: linear-gradient(135deg, var(--forest), var(--forest-d));
}
.avatar-c {
background: linear-gradient(135deg, var(--gold), var(--gold-light));
color: var(--ink);
}
.avatar-d {
background: linear-gradient(135deg, var(--warm-gray), var(--ink-2));
}
.member h3 {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 700;
}
.member p {
font-size: 0.82rem;
color: var(--warm-gray);
margin-top: 2px;
}
/* Values */
.values {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.value {
background: var(--bone);
border: 1px solid rgba(44, 26, 14, 0.08);
border-radius: var(--r-md);
padding: 24px 22px 22px;
display: flex;
flex-direction: column;
gap: 8px;
}
.value-icon {
font-size: 1.8rem;
}
.value h3 {
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 700;
}
.value p {
font-size: 0.92rem;
color: var(--ink-2);
}
/* Press */
.press {
text-align: center;
border-top: 1px solid rgba(44, 26, 14, 0.08);
border-bottom: 1px solid rgba(44, 26, 14, 0.08);
background: var(--bone);
max-width: none;
}
.press-grid {
max-width: 1080px;
margin: 24px auto 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}
.press-card {
background: var(--cream);
border-radius: var(--r-md);
padding: 22px 22px 20px;
text-align: left;
}
.press-pub {
font-size: 0.72rem;
font-weight: 700;
color: var(--terracotta);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 10px;
}
.press-quote {
font-family: var(--font-display);
font-size: 1.05rem;
font-style: italic;
color: var(--ink);
line-height: 1.45;
}
/* CTA strip */
.cta-strip {
text-align: center;
padding: 60px 28px 80px;
}
.cta-strip h2 {
font-family: var(--font-display);
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 700;
margin-bottom: 18px;
}
.btn-primary {
display: inline-block;
background: var(--forest);
color: var(--bone);
text-decoration: none;
border-radius: 999px;
padding: 13px 26px;
font-weight: 700;
}
.btn-primary:hover {
background: var(--forest-d);
}
/* Footer */
.footer {
border-top: 1px solid rgba(44, 26, 14, 0.08);
background: var(--bone);
text-align: center;
padding: 32px 28px;
}
.footer-brand {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 800;
letter-spacing: -0.005em;
}
.footer-meta {
font-size: 0.84rem;
color: var(--warm-gray);
margin-top: 4px;
}
/* Reveal on scroll */
.timeline li,
.member,
.value,
.press-card {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.timeline li.is-in,
.member.is-in,
.value.is-in,
.press-card.is-in {
opacity: 1;
transform: none;
}// CSS-only fade is handled by the .is-in class; we just observe and toggle.
const targets = document.querySelectorAll(".timeline li, .member, .value, .press-card");
if ("IntersectionObserver" in window) {
const io = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("is-in");
io.unobserve(entry.target);
}
});
},
{ threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
);
targets.forEach((el) => io.observe(el));
} else {
targets.forEach((el) => el.classList.add("is-in"));
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap"
/>
<link rel="stylesheet" href="style.css" />
<title>Our story · Casa Olivar</title>
</head>
<body>
<header class="nav">
<a class="nav-brand" href="#">Casa Olivar</a>
<a class="nav-back" href="#">← Back to home</a>
</header>
<main>
<!-- Pulled-quote intro -->
<section class="intro">
<p class="kicker">Our story</p>
<h1>
“We cook the garden, not the menu —<br />
<em>the menu just follows.”</em>
</h1>
<p class="byline">
Aitor Mendizabal · Chef & co-founder
</p>
</section>
<!-- Chef portrait + story -->
<section class="chef">
<figure class="chef-portrait" aria-label="Chef Aitor Mendizabal">
<div class="portrait-bg"></div>
<span class="portrait-glyph">👨🍳</span>
<figcaption>Aitor in the kitchen, Tuesday morning prep.</figcaption>
</figure>
<div class="chef-body">
<p>
Casa Olivar started as a thirty-cover dining room in a converted
carriage house on Calle del Olivar in late 2017. Aitor had spent
six years cooking in San Sebastián and a year in a friend's
wood-fired bakery; Iria, the floor's quiet engine, came back to
Madrid from a wine bar in Porto.
</p>
<p>
What the room had then is what it has now: one hearth, twelve
tables, three people on the line, and a half-hectare garden in
Aravaca that produces seventy percent of our vegetables May to
October.
</p>
<p>
The menu changes weekly. The constants are bread made daily,
hand-cut pasta on Wednesdays, a whole grilled fish on weekends,
and a dry-aged steak that runs the year. Everything else is a
conversation with the garden.
</p>
</div>
</section>
<!-- Timeline -->
<section class="section">
<header class="section-head">
<p class="kicker">Milestones</p>
<h2>Seven seasons in.</h2>
</header>
<ol class="timeline">
<li>
<span class="year">2017</span>
<h3>The lease</h3>
<p>
Aitor signs a five-year lease on a former carriage house. The
kitchen has one wood-fired hearth and no walk-in.
</p>
</li>
<li>
<span class="year">2019</span>
<h3>The garden</h3>
<p>
We take over a neglected half-hectare in Aravaca. The first
harvest is fourteen kilos of cherry tomatoes — they last six
days on the menu.
</p>
</li>
<li>
<span class="year">2021</span>
<h3>The wine list</h3>
<p>
Iria builds a 140-bottle natural-wine list across Spain,
Portugal, and the Loire. Two by-the-glass producers stay on
year-round.
</p>
</li>
<li>
<span class="year">2024</span>
<h3>The second sitting</h3>
<p>
We add a 21:30 sitting Thursday–Saturday. The kitchen still
closes at midnight; the bar stays open until one.
</p>
</li>
</ol>
</section>
<!-- Team -->
<section class="section section-team">
<header class="section-head">
<p class="kicker">The team</p>
<h2>Twelve people. One hearth.</h2>
</header>
<div class="team">
<article class="member">
<div class="avatar avatar-a">A</div>
<h3>Aitor Mendizabal</h3>
<p>Chef · co-founder</p>
</article>
<article class="member">
<div class="avatar avatar-b">I</div>
<h3>Iria Costa</h3>
<p>Floor · wine · co-founder</p>
</article>
<article class="member">
<div class="avatar avatar-c">L</div>
<h3>Lina Mendoza</h3>
<p>Sous-chef</p>
</article>
<article class="member">
<div class="avatar avatar-d">S</div>
<h3>Sofía Reyes</h3>
<p>Floor lead · pastry</p>
</article>
</div>
</section>
<!-- Values -->
<section class="section section-values">
<header class="section-head">
<p class="kicker">What we believe</p>
<h2>Three things, mostly.</h2>
</header>
<div class="values">
<article class="value">
<span class="value-icon">🌱</span>
<h3>Garden first</h3>
<p>
The menu starts in Aravaca on Monday morning. If a thing isn't
ready, it doesn't go on the menu — substitutions over forcing.
</p>
</article>
<article class="value">
<span class="value-icon">🔥</span>
<h3>Live fire</h3>
<p>
The hearth runs olive and oak. The grill cools to coal-only by
second service so the room stays calm.
</p>
</article>
<article class="value">
<span class="value-icon">🤝</span>
<h3>Honest pricing</h3>
<p>
No platform fees on direct reservations, no minimum spend, no
corkage on bottles you bring under €40 retail.
</p>
</article>
</div>
</section>
<!-- Press -->
<section class="press">
<p class="kicker">In the press</p>
<div class="press-grid">
<article class="press-card">
<p class="press-pub">El País · 2024</p>
<p class="press-quote">
"A room where the garden does the talking and the chef
listens."
</p>
</article>
<article class="press-card">
<p class="press-pub">Eater Madrid · 2023</p>
<p class="press-quote">
"The dry-aged ribeye is worth the trip — the bread is worth the
wait."
</p>
</article>
<article class="press-card">
<p class="press-pub">World of Fine Wine · 2024</p>
<p class="press-quote">
"One of the best small wine lists on the Peninsula, hands
down."
</p>
</article>
</div>
</section>
<section class="cta-strip">
<h2>See you Tuesday?</h2>
<a class="btn-primary" href="#reserve">Reserve a table</a>
</section>
</main>
<footer class="footer">
<p class="footer-brand">Casa Olivar</p>
<p class="footer-meta">42 Calle del Olivar · Madrid · +34 910 555 042</p>
<p class="footer-meta">© 2026 · Crafted with stone and fire</p>
</footer>
<script src="script.js"></script>
</body>
</html>Restaurant About / Our Story
The longer-form page diners read when they want to know who’s behind the food. Chef portrait pulled-quote, founding story in two paragraphs, a four-step timeline (2017 lease → 2019 garden → 2021 wine list → 2024 second sitting), team grid with four headshots, three values cards, and a press wall.
Mostly static; one CSS-only on-scroll fade for the timeline.