Retro Food Review
Graph-paper background, terracotta/olive/mustard palette, fork ratings, a stamped score box, and vintage editorial layout. Use case: restaurant, food brand, or hospitality. Abril Fatface for the pull quote, Courier Prime for stamps and monospace meta.
Retro Food Review the 5th of 15 designs in the 15 CSS Testimonials & Reviews collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<section class="tm-ret" aria-label="Diner reviews">
<header class="tm-ret-stripe">
<div class="tm-ret-stripe-title">DINER'S DIGEST — VERIFIED REVIEWS</div>
<div class="tm-ret-stripe-sub">EST. 1971 · 4,820 VERIFIED DINERS</div>
</header>
<div class="tm-ret-layout">
<article class="tm-ret-cell tm-ret-big">
<span class="tm-ret-deco-circle" aria-hidden="true"></span>
<div class="tm-ret-dish-stamp">★ Review of the Month</div>
<div class="tm-ret-fork-row" aria-label="5 out of 5 forks">
<span class="tm-ret-fork" aria-hidden="true">★</span>
<span class="tm-ret-fork" aria-hidden="true">★</span>
<span class="tm-ret-fork" aria-hidden="true">★</span>
<span class="tm-ret-fork" aria-hidden="true">★</span>
<span class="tm-ret-fork" aria-hidden="true">★</span>
</div>
<blockquote class="tm-ret-big-pull">The truffle risotto alone is worth the trip from another city.</blockquote>
<p class="tm-ret-body-text">I've dined at three Michelin-starred restaurants this year and this kitchen competes with every one of them. The <em>risotto</em> has a depth of flavor that only comes from someone who has cooked it a thousand times and still cares. The service is unhurried. The lighting is exactly right. Come here for a birthday, an anniversary, or an ordinary Tuesday that deserves to feel extraordinary.</p>
<figcaption class="tm-ret-chef-tag">
<span class="tm-ret-chef-icon" aria-hidden="true">GH</span>
<span><cite class="tm-ret-chef-name">Gideon Harlow</cite><span class="tm-ret-chef-role">Food critic · The Table Magazine</span></span>
</figcaption>
</article>
<div class="tm-ret-cell tm-ret-tall">
<span class="tm-ret-vert-label" aria-hidden="true">Guest Reviews</span>
<div class="tm-ret-score-box">
<div class="tm-ret-score-num">9.4</div>
<div class="tm-ret-score-lbl">/ 10 · 4,820 diners</div>
</div>
<article>
<div class="tm-ret-fork-row" aria-label="5 out of 5 forks">
<span class="tm-ret-fork">★</span><span class="tm-ret-fork">★</span><span class="tm-ret-fork">★</span><span class="tm-ret-fork">★</span><span class="tm-ret-fork">★</span>
</div>
<blockquote class="tm-ret-sm-quote">"The pasta is handmade. You can taste it."</blockquote>
<figcaption class="tm-ret-chef-tag">
<span class="tm-ret-chef-icon tm-ret-icon-olive" aria-hidden="true">ML</span>
<span><cite class="tm-ret-chef-name">Mira Laszlo</cite><span class="tm-ret-chef-role">Regular diner</span></span>
</figcaption>
</article>
<article>
<div class="tm-ret-fork-row" aria-label="4 out of 5 forks">
<span class="tm-ret-fork">★</span><span class="tm-ret-fork">★</span><span class="tm-ret-fork">★</span><span class="tm-ret-fork">★</span><span class="tm-ret-fork tm-ret-fork-empty">★</span>
</div>
<blockquote class="tm-ret-sm-quote">"Best wood-fired bread in the neighbourhood. Period."</blockquote>
<figcaption class="tm-ret-chef-tag">
<span class="tm-ret-chef-icon tm-ret-icon-mustard" aria-hidden="true">PO</span>
<span><cite class="tm-ret-chef-name">Pablo Ortega</cite><span class="tm-ret-chef-role">Weekend regular</span></span>
</figcaption>
</article>
</div>
<article class="tm-ret-cell tm-ret-bot">
<div class="tm-ret-fork-row" aria-label="5 out of 5 forks">
<span class="tm-ret-fork">★</span><span class="tm-ret-fork">★</span><span class="tm-ret-fork">★</span><span class="tm-ret-fork">★</span><span class="tm-ret-fork">★</span>
</div>
<blockquote class="tm-ret-sm-quote">"I don't usually write reviews. I am writing this one."</blockquote>
<p class="tm-ret-body-text">Three courses, two hours, zero regrets. The panna cotta changed my mind about panna cotta.</p>
<figcaption class="tm-ret-chef-tag">
<span class="tm-ret-chef-icon" aria-hidden="true">SA</span>
<span><cite class="tm-ret-chef-name">Sofía Arenas</cite><span class="tm-ret-chef-role">First-time visitor</span></span>
</figcaption>
</article>
</div>
</section> /* Retro Food Review — graph-paper background contained inside the
wrapper (NOT body-level like the original mock). Terracotta /
olive / mustard palette evokes 1970s editorial food magazines.
Hover tints each cell to a slightly warmer cream. */
.tm-ret {
--tm-ret-bg: #f0e6c8;
--tm-ret-terracotta: #c4522a;
--tm-ret-olive: #5c6b2e;
--tm-ret-mustard: #d4a017;
--tm-ret-cream: #faf4e1;
--tm-ret-dark: #1e1a12;
--tm-ret-rust: #a83820;
--tm-ret-sage: #7a8c5a;
position: relative;
padding: clamp(28px, 4vw, 48px);
background: var(--tm-ret-bg);
background-image:
repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(0,0,0,0.04) 39px, rgba(0,0,0,0.04) 40px),
repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(0,0,0,0.04) 39px, rgba(0,0,0,0.04) 40px);
font-family: 'Karla', system-ui, sans-serif;
color: var(--tm-ret-dark);
min-height: 500px;
}
.tm-ret-stripe {
background: var(--tm-ret-terracotta);
color: var(--tm-ret-cream);
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 18px;
margin-bottom: 30px;
border: 2px solid var(--tm-ret-dark);
}
.tm-ret-stripe-title {
font-family: 'Abril Fatface', Georgia, serif;
font-size: 1.05rem;
letter-spacing: 0.05em;
}
.tm-ret-stripe-sub {
font-family: 'Courier Prime', 'Courier New', monospace;
font-size: 11px;
letter-spacing: 0.1em;
opacity: 0.85;
}
.tm-ret-layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 0;
border: 2px solid var(--tm-ret-dark);
}
.tm-ret-cell {
border: 1px solid var(--tm-ret-dark);
padding: 26px 22px;
position: relative;
background: var(--tm-ret-cream);
transition: background 0.2s;
}
.tm-ret-cell:hover { background: var(--tm-ret-bg); }
.tm-ret-big {
grid-column: 1 / 3;
grid-row: 1 / 2;
border-right: 2px solid var(--tm-ret-dark);
}
.tm-ret-tall {
grid-column: 3 / 4;
grid-row: 1 / 3;
border-left: none;
display: flex;
flex-direction: column;
gap: 22px;
}
.tm-ret-deco-circle {
position: absolute;
width: 90px;
height: 90px;
border-radius: 50%;
border: 1px dashed var(--tm-ret-terracotta);
opacity: 0.2;
top: -20px;
right: -20px;
pointer-events: none;
}
.tm-ret-dish-stamp {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--tm-ret-olive);
color: var(--tm-ret-cream);
font-family: 'Courier Prime', 'Courier New', monospace;
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 4px 10px;
margin-bottom: 14px;
}
.tm-ret-big-pull {
font-family: 'Abril Fatface', Georgia, serif;
font-size: clamp(1.4rem, 3vw, 1.85rem);
line-height: 1.15;
color: var(--tm-ret-dark);
margin: 0 0 18px;
position: relative;
}
.tm-ret-big-pull::before {
content: '"';
font-size: 4.5rem;
color: var(--tm-ret-terracotta);
opacity: 0.15;
position: absolute;
top: -20px;
left: -10px;
line-height: 1;
pointer-events: none;
}
.tm-ret-fork-row {
display: flex;
gap: 6px;
margin-bottom: 12px;
align-items: center;
}
.tm-ret-fork {
font-size: 14px;
color: var(--tm-ret-terracotta);
}
.tm-ret-fork-empty { color: #ccc; }
.tm-ret-body-text {
font-size: 0.85rem;
line-height: 1.7;
color: #3a3020;
font-style: italic;
margin: 0 0 18px;
}
.tm-ret-body-text em {
font-style: normal;
color: var(--tm-ret-terracotta);
font-weight: 700;
}
.tm-ret-chef-tag {
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
}
.tm-ret-chef-icon {
width: 40px;
height: 40px;
background: var(--tm-ret-terracotta);
color: var(--tm-ret-cream);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Abril Fatface', Georgia, serif;
font-size: 14px;
flex-shrink: 0;
}
.tm-ret-icon-olive { background: var(--tm-ret-olive); }
.tm-ret-icon-mustard { background: var(--tm-ret-mustard); color: var(--tm-ret-dark); }
.tm-ret-chef-name {
font-weight: 700;
font-size: 13px;
font-style: normal;
color: var(--tm-ret-dark);
line-height: 1.3;
display: block;
}
.tm-ret-chef-role {
font-family: 'Courier Prime', 'Courier New', monospace;
font-size: 10px;
color: var(--tm-ret-sage);
letter-spacing: 0.08em;
}
.tm-ret-sm-quote {
font-family: 'Abril Fatface', Georgia, serif;
font-size: 1.05rem;
line-height: 1.3;
color: var(--tm-ret-dark);
margin: 0 0 14px;
position: relative;
}
.tm-ret-sm-quote::after {
content: '';
display: block;
width: 30px;
height: 2px;
background: var(--tm-ret-mustard);
margin-top: 10px;
}
.tm-ret-vert-label {
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
font-family: 'Courier Prime', 'Courier New', monospace;
font-size: 9px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--tm-ret-terracotta);
opacity: 0.5;
position: absolute;
right: 10px;
top: 50%;
}
.tm-ret-score-box {
background: var(--tm-ret-mustard);
border: 2px solid var(--tm-ret-dark);
padding: 12px 14px;
text-align: center;
}
.tm-ret-score-num {
font-family: 'Abril Fatface', Georgia, serif;
font-size: 2.4rem;
color: var(--tm-ret-dark);
line-height: 1;
}
.tm-ret-score-lbl {
font-family: 'Courier Prime', 'Courier New', monospace;
font-size: 9px;
letter-spacing: 0.15em;
color: var(--tm-ret-rust);
text-transform: uppercase;
margin-top: 2px;
}
.tm-ret-bot {
background: var(--tm-ret-olive);
border-top: 2px solid var(--tm-ret-dark);
}
.tm-ret-bot:hover { background: #6c7b3e; }
.tm-ret-bot .tm-ret-sm-quote { color: var(--tm-ret-cream); }
.tm-ret-bot .tm-ret-sm-quote::after { background: var(--tm-ret-mustard); }
.tm-ret-bot .tm-ret-body-text { color: rgba(250,244,225,0.75); }
.tm-ret-bot .tm-ret-chef-icon { background: var(--tm-ret-cream); color: var(--tm-ret-olive); }
.tm-ret-bot .tm-ret-chef-name { color: var(--tm-ret-cream); }
.tm-ret-bot .tm-ret-chef-role { color: var(--tm-ret-sage); }
.tm-ret-bot .tm-ret-fork { color: var(--tm-ret-mustard); }
.tm-ret-bot .tm-ret-fork-empty { color: rgba(255,255,255,0.2); }
@media (max-width: 720px) {
.tm-ret-layout { grid-template-columns: 1fr; }
.tm-ret-big, .tm-ret-tall, .tm-ret-bot { grid-column: 1; grid-row: auto; }
.tm-ret-big { border-right: 1px solid var(--tm-ret-dark); }
}