Pages Medium
Italian Trattoria Landing — Trattoria del Forno
Rustic trattoria landing — cream + tomato + olive, Playfair Display + Dancing Script handwritten accents, checkered tablecloth divider, Italian menu copy.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
/* ────────────────────────────────────────────
TRATTORIA DEL FORNO — Italian palette
Cream · tomato red · olive · espresso
────────────────────────────────────────────── */
:root {
--cream: #f6efdf;
--cream-2: #efe5d0;
--paper: #fbf6e7;
--tomato: #b6402a;
--tomato-d: #8e2e1c;
--olive: #5e6a3a;
--olive-d: #3f4824;
--espresso: #3a2a1a;
--ink: #2a1d10;
--mute: #8a7a64;
--rule: rgba(58, 42, 26, 0.14);
--font-display: "Playfair Display", Georgia, serif;
--font-script: "Dancing Script", "Playfair Display", cursive;
--font-body: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
background: var(--cream);
color: var(--ink);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* ── Nav ── */
.nav {
position: sticky;
top: 0;
z-index: 30;
display: flex;
align-items: center;
gap: 24px;
padding: 14px 28px;
background: rgba(246, 239, 223, 0.88);
backdrop-filter: blur(8px);
border-bottom: 2px solid var(--tomato);
}
.brand {
display: inline-flex;
align-items: baseline;
gap: 8px;
text-decoration: none;
color: var(--ink);
}
.brand-script {
font-family: var(--font-script);
font-weight: 700;
font-size: 1.6rem;
color: var(--tomato);
}
.brand-serif {
font-family: var(--font-display);
font-weight: 500;
font-size: 0.95rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.nav-links {
display: flex;
gap: 22px;
margin-left: auto;
}
.nav-links a {
color: var(--espresso);
text-decoration: none;
font-family: var(--font-display);
font-style: italic;
font-size: 1.05rem;
font-weight: 500;
}
.nav-links a:hover {
color: var(--tomato);
}
.nav-cta {
background: var(--tomato);
color: var(--cream);
border-radius: 4px;
padding: 10px 18px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
}
.nav-cta:hover {
background: var(--tomato-d);
}
@media (max-width: 720px) {
.nav-links {
display: none;
}
}
/* ── Hero ── */
.hero {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 56px;
max-width: 1180px;
margin: 0 auto;
padding: 76px 28px 64px;
align-items: center;
}
.kicker {
font-size: 0.74rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--olive-d);
font-weight: 700;
margin-bottom: 14px;
}
.hero h1 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(2.6rem, 6vw, 4.4rem);
line-height: 1.05;
letter-spacing: -0.015em;
}
.hero h1 .script,
.script {
font-family: var(--font-script);
font-weight: 700;
color: var(--tomato);
font-size: 1.05em;
display: inline-block;
}
.hero h1 em {
font-style: italic;
color: var(--olive);
}
.sub {
margin-top: 18px;
font-size: 1.05rem;
color: var(--ink);
max-width: 480px;
}
.sub-en {
margin-top: 8px;
font-size: 0.9rem;
color: var(--mute);
font-style: italic;
max-width: 460px;
}
.actions {
margin-top: 24px;
display: flex;
gap: 10px;
}
.btn {
padding: 12px 22px;
font-family: var(--font-body);
font-size: 0.84rem;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
text-decoration: none;
display: inline-block;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-red {
background: var(--tomato);
color: var(--cream);
}
.btn-red:hover {
background: var(--tomato-d);
}
.btn-quiet {
background: transparent;
border-color: var(--ink);
color: var(--ink);
}
.btn-quiet:hover {
background: var(--ink);
color: var(--cream);
}
/* Quote card (handwritten) */
.quote-card {
position: relative;
background: var(--paper);
border: 1px solid var(--rule);
padding: 32px 32px 26px;
box-shadow: 4px 5px 0 var(--tomato);
transform: rotate(-1.2deg);
}
.quote-mark {
font-family: var(--font-display);
font-size: 4rem;
line-height: 0.6;
color: var(--tomato);
position: absolute;
top: 14px;
left: 16px;
}
.quote-script {
font-family: var(--font-script);
font-weight: 600;
font-size: 1.7rem;
line-height: 1.25;
color: var(--espresso);
margin-top: 20px;
}
.quote-attr {
margin-top: 18px;
font-family: var(--font-display);
font-style: italic;
font-size: 0.92rem;
color: var(--olive-d);
}
@media (max-width: 880px) {
.hero {
grid-template-columns: 1fr;
padding: 48px 24px;
}
}
/* ── Checkered divider ── */
.check {
height: 28px;
background: repeating-linear-gradient(45deg, var(--tomato) 0 14px, var(--cream-2) 14px 28px);
border-top: 1px solid var(--tomato-d);
border-bottom: 1px solid var(--tomato-d);
margin: 12px 0 0;
}
/* ── Cucina ── */
.cucina {
max-width: 1180px;
margin: 0 auto;
padding: 88px 28px 64px;
scroll-margin-top: 80px;
}
.section-head {
text-align: center;
margin-bottom: 36px;
}
.section-head h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(2rem, 4.5vw, 3rem);
letter-spacing: -0.01em;
line-height: 1.05;
margin-top: 4px;
}
.section-head h2 em {
font-style: italic;
color: var(--tomato);
}
.section-head .kicker {
margin-bottom: 4px;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
@media (max-width: 880px) {
.grid-3 {
grid-template-columns: 1fr;
}
}
.card {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 6px;
padding: 28px 26px 24px;
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover {
transform: translateY(-3px);
box-shadow: 6px 8px 0 var(--olive);
}
.card-feat {
background: var(--cream-2);
border-color: var(--tomato);
}
.card-feat:hover {
box-shadow: 6px 8px 0 var(--tomato);
}
.card-icon {
font-size: 2rem;
}
.card-badge {
position: absolute;
top: 18px;
right: 18px;
background: var(--tomato);
color: var(--cream);
font-family: var(--font-script);
font-size: 1rem;
font-weight: 700;
padding: 4px 14px;
border-radius: 999px;
transform: rotate(4deg);
}
.card h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.4rem;
letter-spacing: -0.005em;
}
.card-it {
color: var(--ink);
font-size: 0.96rem;
}
.card-en {
color: var(--mute);
font-size: 0.85rem;
font-style: italic;
}
/* ── Nonna ── */
.nonna {
background: var(--olive);
padding: 64px 28px;
scroll-margin-top: 80px;
}
.board {
max-width: 760px;
margin: 0 auto;
background: var(--paper);
border: 8px solid var(--espresso);
border-radius: 8px;
padding: 36px 36px 28px;
position: relative;
box-shadow: 0 18px 40px rgba(58, 42, 26, 0.35);
}
.board::before,
.board::after {
content: "";
position: absolute;
width: 8px;
height: 24px;
background: var(--espresso);
top: -8px;
border-radius: 2px 2px 0 0;
}
.board::before {
left: 30px;
}
.board::after {
right: 30px;
}
.board header {
text-align: center;
margin-bottom: 18px;
}
.board .kicker {
color: var(--tomato);
}
.board h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.8rem, 4vw, 2.5rem);
letter-spacing: -0.01em;
line-height: 1.1;
}
.board h2 .script {
color: var(--tomato);
}
.board-week {
display: block;
font-style: italic;
color: var(--olive-d);
font-size: 0.86em;
}
.dishes {
list-style: none;
display: flex;
flex-direction: column;
}
.dishes li {
display: grid;
grid-template-columns: 48px 1fr auto auto;
align-items: baseline;
gap: 12px;
padding: 10px 0;
font-family: var(--font-display);
font-size: 1.05rem;
border-bottom: 1px dotted var(--rule);
}
.day {
font-family: var(--font-mono);
font-weight: 700;
font-size: 0.74rem;
color: var(--tomato);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.dish {
font-weight: 500;
color: var(--ink);
}
.dot-leader {
border-bottom: 1px dotted var(--mute);
height: 0;
min-width: 24px;
align-self: end;
margin: 0 4px 6px;
}
.price {
font-family: var(--font-mono);
font-weight: 700;
color: var(--olive-d);
}
.board-note {
margin-top: 16px;
text-align: center;
font-family: var(--font-script);
font-size: 1.15rem;
color: var(--tomato);
}
/* ── Vino ── */
.vino {
max-width: 1180px;
margin: 0 auto;
padding: 88px 28px 56px;
scroll-margin-top: 80px;
}
.vino-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
.vino-text h2 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(1.8rem, 4vw, 2.6rem);
line-height: 1.05;
letter-spacing: -0.01em;
margin-top: 4px;
}
.vino-text h2 em {
font-style: italic;
color: var(--tomato);
}
.vino-text p {
margin-top: 16px;
font-size: 1rem;
max-width: 460px;
}
.vino-en {
font-style: italic;
color: var(--mute);
font-size: 0.9rem !important;
}
.vino-list {
list-style: none;
display: flex;
flex-direction: column;
}
.vino-list li {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 16px;
padding: 14px 0;
border-bottom: 1px solid var(--rule);
}
.vino-list li:last-child {
border-bottom: none;
}
.vino-name {
font-family: var(--font-display);
font-weight: 500;
font-size: 1.15rem;
}
.vino-meta {
grid-column: 1;
font-size: 0.8rem;
color: var(--mute);
letter-spacing: 0.04em;
}
.vino-price {
grid-row: 1 / span 2;
font-family: var(--font-mono);
font-weight: 700;
color: var(--tomato-d);
align-self: center;
font-size: 1.05rem;
}
@media (max-width: 880px) {
.vino-inner {
grid-template-columns: 1fr;
gap: 36px;
}
}
/* ── Trovaci ── */
.trovaci {
background: var(--cream-2);
padding: 80px 28px 64px;
scroll-margin-top: 80px;
}
.trovaci-grid {
max-width: 880px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 720px) {
.trovaci-grid {
grid-template-columns: 1fr;
}
}
.info {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 6px;
padding: 26px 28px 22px;
}
.info h3 {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.3rem;
margin-bottom: 12px;
}
.info ul {
list-style: none;
}
.info li {
display: flex;
justify-content: space-between;
padding: 7px 0;
border-bottom: 1px dotted var(--rule);
font-size: 0.92rem;
}
.info li:last-child {
border-bottom: none;
}
.info li span:last-child {
font-family: var(--font-mono);
font-weight: 600;
}
.info li.closed span:last-child {
color: var(--mute);
}
.info address {
font-style: normal;
line-height: 1.8;
font-size: 0.96rem;
}
.info-note {
margin-top: 14px;
padding-top: 14px;
border-top: 1px dotted var(--rule);
font-style: italic;
color: var(--olive-d);
font-size: 0.86rem;
}
/* ── Prenota ── */
.prenota {
padding: 96px 28px;
scroll-margin-top: 80px;
}
.prenota-inner {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.prenota .kicker {
color: var(--olive-d);
}
.prenota h2 {
font-family: var(--font-script);
font-weight: 700;
font-size: clamp(3rem, 7vw, 5rem);
color: var(--tomato);
line-height: 1;
margin-top: 6px;
}
.prenota-sub {
margin-top: 18px;
color: var(--ink);
font-size: 1.02rem;
}
.prenota-sub em {
font-style: italic;
color: var(--olive-d);
}
.prenota-form {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 6px;
padding: 28px 30px;
display: flex;
flex-direction: column;
gap: 12px;
}
.form-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.prenota-form label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--espresso);
font-weight: 700;
}
.prenota-form input,
.prenota-form select {
background: var(--cream);
border: 1px solid var(--rule);
color: var(--ink);
padding: 10px 13px;
font-family: inherit;
font-size: 0.94rem;
outline: none;
border-radius: 4px;
}
.prenota-form input:focus,
.prenota-form select:focus {
border-color: var(--tomato);
}
.full {
width: 100%;
}
.prenota-form .btn {
align-self: flex-start;
margin-top: 4px;
}
.ok {
color: var(--olive-d);
font-family: var(--font-script);
font-weight: 700;
font-size: 1.3rem;
}
@media (max-width: 880px) {
.prenota-inner {
grid-template-columns: 1fr;
gap: 36px;
}
}
/* ── Footer ── */
.footer {
background: var(--espresso);
color: var(--cream);
text-align: center;
padding: 48px 28px;
}
.foot-script {
font-family: var(--font-script);
font-weight: 700;
font-size: 2.2rem;
color: var(--tomato);
}
.foot-meta {
font-size: 0.86rem;
color: rgba(246, 239, 223, 0.65);
margin-top: 6px;
}
.foot-meta:last-child {
font-style: italic;
}// Update "Specialità della settimana" week label to current Mon-Sun span (in Italian)
const MONTHS_IT = [
"gennaio",
"febbraio",
"marzo",
"aprile",
"maggio",
"giugno",
"luglio",
"agosto",
"settembre",
"ottobre",
"novembre",
"dicembre",
];
function setWeek() {
const el = document.getElementById("boardWeek");
if (!el) return;
const now = new Date();
const dow = (now.getDay() + 6) % 7; // Monday = 0
const mon = new Date(now);
mon.setDate(now.getDate() - dow);
const sun = new Date(mon);
sun.setDate(mon.getDate() + 6);
el.textContent = `dal ${mon.getDate()} al ${sun.getDate()} ${MONTHS_IT[sun.getMonth()]}`;
}
setWeek();
// Default reservation date to tomorrow
const di = document.querySelector('input[name="d"]');
if (di) {
const t = new Date();
t.setDate(t.getDate() + 1);
di.value = t.toISOString().slice(0, 10);
}
const form = document.getElementById("form");
const ok = document.getElementById("ok");
form.addEventListener("submit", (e) => {
e.preventDefault();
ok.hidden = false;
const btn = form.querySelector("button");
btn.disabled = true;
setTimeout(() => {
ok.hidden = true;
btn.disabled = false;
}, 2800);
});<!doctype html>
<html lang="it">
<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:ital,wght@0,500;0,700;1,500&family=Dancing+Script:wght@600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap"
/>
<link rel="stylesheet" href="style.css" />
<title>Trattoria del Forno</title>
</head>
<body>
<header class="nav">
<a class="brand" href="#top">
<span class="brand-script">Trattoria</span>
<span class="brand-serif">del Forno</span>
</a>
<nav class="nav-links">
<a href="#cucina">La cucina</a>
<a href="#nonna">Specialità</a>
<a href="#vino">Il vino</a>
<a href="#trovaci">Trovaci</a>
</nav>
<a class="nav-cta" href="#prenota">Prenota</a>
</header>
<main id="top">
<!-- Hero -->
<section class="hero">
<div class="hero-inner">
<p class="kicker">Dal 1962 · Trastevere, Roma</p>
<h1>
<span class="script">Mangia bene,</span><br />
ridi spesso, <em>ama molto.</em>
</h1>
<p class="sub">
Una trattoria di quartiere a Trastevere — pasta tirata a mano,
forno a legna, vini della nonna. Aperti dal 1962, cucinati ogni
giorno.
</p>
<p class="sub-en">
A neighbourhood trattoria in Trastevere — hand-pulled pasta, a
wood-fired oven, our grandmother's wines. Open since 1962, cooking
every day.
</p>
<div class="actions">
<a class="btn btn-red" href="#prenota">Prenota un tavolo</a>
<a class="btn btn-quiet" href="#cucina">La carta</a>
</div>
</div>
<aside class="quote-card">
<p class="quote-mark">"</p>
<p class="quote-script">
Il segreto è la lievitazione lunga.<br />
Quaranta ore. Sempre.
</p>
<p class="quote-attr">— Nonna Lucia · Capo cucina, dal 1962</p>
</aside>
</section>
<!-- Checkered divider -->
<div class="check" aria-hidden="true"></div>
<!-- La cucina -->
<section class="cucina" id="cucina">
<header class="section-head">
<p class="kicker">La cucina · The kitchen</p>
<h2>Pasta & pizza, <em>fatta in casa.</em></h2>
</header>
<div class="grid-3">
<article class="card">
<span class="card-icon">🍝</span>
<h3>Pasta tirata a mano</h3>
<p class="card-it">
Otto formati, tutti tirati al mattino. Tagliatelle, pappardelle,
tonnarelli, ravioli al brasato.
</p>
<p class="card-en">
Eight shapes, all pulled in the morning. Tagliatelle,
pappardelle, tonnarelli, beef-braise ravioli.
</p>
</article>
<article class="card card-feat">
<span class="card-icon">🔥</span>
<span class="card-badge">Specialità</span>
<h3>Forno a legna</h3>
<p class="card-it">
Pizza romana sottile e croccante. Lievitazione di quaranta ore.
Solo a cena.
</p>
<p class="card-en">
Thin Roman pizza. Forty-hour fermentation. Evenings only.
</p>
</article>
<article class="card">
<span class="card-icon">🌿</span>
<h3>Verdure di stagione</h3>
<p class="card-it">
Dal mercato di Campo de' Fiori ogni mattina. Carciofi alla
romana, puntarelle, cicoria ripassata.
</p>
<p class="card-en">
From Campo de' Fiori market each morning. Roman-style artichokes,
puntarelle, sautéed chicory.
</p>
</article>
</div>
</section>
<!-- Specialità di Nonna -->
<section class="nonna" id="nonna">
<div class="board">
<header>
<p class="kicker">Specialità di Nonna · this week</p>
<h2>
<span class="script">Le specialità</span>
<span class="board-week" id="boardWeek">della settimana</span>
</h2>
</header>
<ol class="dishes">
<li>
<span class="day">Mar</span>
<span class="dish">Cacio e pepe</span>
<span class="dot-leader"></span>
<span class="price">€14</span>
</li>
<li>
<span class="day">Mer</span>
<span class="dish">Saltimbocca alla romana</span>
<span class="dot-leader"></span>
<span class="price">€22</span>
</li>
<li>
<span class="day">Gio</span>
<span class="dish">Gnocchi al sugo</span>
<span class="dot-leader"></span>
<span class="price">€16</span>
</li>
<li>
<span class="day">Ven</span>
<span class="dish">Baccalà fritto</span>
<span class="dot-leader"></span>
<span class="price">€19</span>
</li>
<li>
<span class="day">Sab</span>
<span class="dish">Coda alla vaccinara</span>
<span class="dot-leader"></span>
<span class="price">€24</span>
</li>
<li>
<span class="day">Dom</span>
<span class="dish">Pollo all'arrabbiata</span>
<span class="dot-leader"></span>
<span class="price">€20</span>
</li>
</ol>
<p class="board-note">
Ogni giorno cambia · check what's on, every day.
</p>
</div>
</section>
<!-- Il vino -->
<section class="vino" id="vino">
<div class="vino-inner">
<div class="vino-text">
<p class="kicker">Il vino · The wine</p>
<h2>Una lista <em>onesta.</em></h2>
<p>
Vini locali del Lazio e qualche bottiglia di Toscana. Niente
ricarichi assurdi — quello che paghi in negozio, più dieci euro.
Onesto, come dovrebbe essere.
</p>
<p class="vino-en">
Wines from Lazio and a few from Tuscany. No silly mark-ups — what
you'd pay in a shop plus ten euros. Honest, as it should be.
</p>
</div>
<ul class="vino-list">
<li>
<span class="vino-name">Cesanese del Piglio</span>
<span class="vino-meta">Lazio · Rosso</span>
<span class="vino-price">€26</span>
</li>
<li>
<span class="vino-name">Frascati Superiore</span>
<span class="vino-meta">Lazio · Bianco</span>
<span class="vino-price">€22</span>
</li>
<li>
<span class="vino-name">Chianti Classico</span>
<span class="vino-meta">Toscana · Rosso</span>
<span class="vino-price">€32</span>
</li>
<li>
<span class="vino-name">Prosecco di Conegliano</span>
<span class="vino-meta">Veneto · Spumante</span>
<span class="vino-price">€24</span>
</li>
</ul>
</div>
</section>
<!-- Trovaci -->
<section class="trovaci" id="trovaci">
<header class="section-head">
<p class="kicker">Trovaci · Find us</p>
<h2>Vicolo del Forno, 12 · Trastevere</h2>
</header>
<div class="trovaci-grid">
<article class="info">
<h3>Aperti</h3>
<ul>
<li><span>Mar – Gio</span><span>12:30 · 19:00 – 23:00</span></li>
<li><span>Ven – Sab</span><span>12:30 – 15:00 · 19:00 – 23:30</span></li>
<li><span>Domenica</span><span>12:30 – 16:00</span></li>
<li class="closed"><span>Lunedì</span><span>Chiuso · Closed</span></li>
</ul>
</article>
<article class="info">
<h3>Contatto</h3>
<address>
Vicolo del Forno, 12<br />
00153 Roma · Italia<br />
+39 06 555 1962<br />
ciao@delforno.it
</address>
<p class="info-note">
Prenotazione consigliata, soprattutto per il sabato sera.
</p>
</article>
</div>
</section>
<!-- Prenota -->
<section class="prenota" id="prenota">
<div class="prenota-inner">
<div>
<p class="kicker">Prenota un tavolo</p>
<h2 class="script">Ti aspettiamo.</h2>
<p class="prenota-sub">
We hold the table for 15 minutes. <em>Cancellazione gratuita</em>
up to 2 hours before — just send a note.
</p>
</div>
<form class="prenota-form" id="form">
<div class="form-row">
<label>
<span>Persone</span>
<select name="g">
<option>2</option><option>3</option><option>4</option>
<option>5</option><option>6</option><option>7+</option>
</select>
</label>
<label>
<span>Data</span>
<input type="date" name="d" />
</label>
<label>
<span>Ora</span>
<select name="t">
<option>19:00</option><option>19:30</option>
<option selected>20:00</option>
<option>20:30</option><option>21:00</option>
</select>
</label>
</div>
<label class="full">
<span>Nome & email</span>
<input type="text" name="n" placeholder="Mario Rossi · mario@…" />
</label>
<button class="btn btn-red" type="submit">Prenota ora</button>
<p class="ok" id="ok" hidden>✓ Tavolo riservato. A presto!</p>
</form>
</div>
</section>
</main>
<footer class="footer">
<p class="foot-script">Trattoria del Forno</p>
<p class="foot-meta">Vicolo del Forno, 12 · 00153 Roma</p>
<p class="foot-meta">Aperti dal 1962 · sempre con la stessa famiglia.</p>
</footer>
<script src="script.js"></script>
</body>
</html>Trattoria del Forno
A warm, rustic Italian trattoria. Cream + tomato + olive palette, Playfair Display for the classic serif weight, Dancing Script for the handwritten accent on the chef quote and menu of the day. Section copy in Italian (la cucina, il forno, il vino) with English glosses. Includes a checkered-tablecloth CSS divider, a wood-paddle pizza of the day, and a “Nonna’s specials this week” board.