Restaurant Menu Html Css Codepen «360p | 1080p»
Title: "Deliciously Designed: A Restaurant Menu HTML CSS Codepen"
Introduction:
In today's digital age, having a strong online presence is crucial for restaurants to attract new customers and showcase their offerings. A well-designed restaurant menu is essential in enticing visitors to try your culinary delights. In this blog post, we'll explore a stunning restaurant menu HTML CSS codepen that you can use as inspiration for your own website.
The Codepen:
Here's a beautiful restaurant menu codepen created by [Codepen User]: restaurant menu html css codepen
<!-- HTML structure -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurant Menu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">Appetizers</a></li>
<li><a href="#">Entrees</a></li>
<li><a href="#">Desserts</a></li>
</ul>
</nav>
</header>
<main>
<section class="menu">
<h2>Appetizers</h2>
<ul>
<li>
<img src="image1.jpg" alt="Appetizer 1">
<h3>Grilled Shrimp Skewers</h3>
<p>$12.99</p>
</li>
<li>
<img src="image2.jpg" alt="Appetizer 2">
<h3>Spicy Calamari</h3>
<p>$10.99</p>
</li>
</ul>
</section>
<section class="menu">
<h2>Entrees</h2>
<ul>
<li>
<img src="image3.jpg" alt="Entree 1">
<h3>Grilled Steak</h3>
<p>$24.99</p>
</li>
<li>
<img src="image4.jpg" alt="Entree 2">
<h3>Pan-Seared Salmon</h3>
<p>$22.99</p>
</li>
</ul>
</section>
</main>
</body>
</html>
/* CSS styles */
/* Global Styles */
*
box-sizing: border-box;
margin: 0;
padding: 0;
body
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #f9f9f9;
header
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
header nav ul
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
header nav ul li
margin-right: 20px;
header nav a
color: #fff;
text-decoration: none;
.menu
display: flex;
flex-wrap: wrap;
justify-content: center;
.menu h2
margin-top: 0;
.menu ul
list-style: none;
margin: 0;
padding: 0;
.menu li
margin: 20px;
width: calc(33.33% - 20px);
.menu img
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 10px;
.menu h3
margin-top: 10px;
.menu p
font-size: 18px;
color: #666;
Features of this Codepen:
- Responsive Design: The menu is fully responsive and works well on different devices and screen sizes.
- CSS Flexbox: The codepen uses CSS Flexbox to create a flexible and efficient layout.
- CSS Grid: You can easily modify the codepen to use CSS Grid for a more complex layout.
- Customizable: You can easily customize the codepen to fit your restaurant's branding and style.
Tips and Variations:
- Add Images: You can add images to your menu items to make them more visually appealing.
- Use a Different Font: You can use a different font to match your restaurant's branding.
- Add Animations: You can add animations to your menu items to make them more engaging.
Conclusion:
This restaurant menu HTML CSS codepen is a great starting point for creating a beautiful and functional menu for your restaurant. You can easily customize it to fit your needs and add your own features and styles. Happy coding! Title: "Deliciously Designed: A Restaurant Menu HTML CSS
You can find the codepen here: [link to codepen]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Le Petit Gourmet | Artisan Menu</title>
<!-- Google Fonts + simple reset -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
<style>
*
margin: 0;
padding: 0;
box-sizing: border-box;
body
background: #faf7f2;
font-family: 'Inter', sans-serif;
color: #2c2418;
line-height: 1.4;
/* custom scroll */
::-webkit-scrollbar
width: 6px;
::-webkit-scrollbar-track
background: #e6dfd4;
::-webkit-scrollbar-thumb
background: #b48c5c;
border-radius: 12px;
/* main container */
.menu-container
max-width: 1280px;
margin: 0 auto;
padding: 2rem 1.5rem 4rem;
/* header & hero */
.menu-header
text-align: center;
margin-bottom: 3.5rem;
border-bottom: 2px dashed #e2cfb3;
padding-bottom: 2rem;
.restaurant-name
font-family: 'Playfair Display', serif;
font-size: 3.2rem;
font-weight: 600;
letter-spacing: -0.5px;
color: #3e2a1f;
margin-bottom: 0.5rem;
.restaurant-tagline
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 3px;
color: #b48c5c;
font-weight: 500;
margin-bottom: 1rem;
.menu-sub
font-size: 0.95rem;
color: #6f5a41;
max-width: 500px;
margin: 0 auto;
font-weight: 400;
/* category tabs (pure css, no js needed) */
.categories
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
margin-bottom: 3rem;
border-bottom: 1px solid #ece2d4;
padding-bottom: 0.75rem;
.category-btn
background: transparent;
border: none;
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 0.9rem;
padding: 0.5rem 1.5rem;
border-radius: 40px;
cursor: pointer;
transition: all 0.2s ease;
color: #5e4b34;
background: #f3ede5;
.category-btn.active
background: #c9a87b;
color: white;
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
.category-btn:hover:not(.active)
background: #e6d9cb;
color: #3e2a1f;
/* menu grid layout */
.menu-grid
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 2rem 1.8rem;
/* menu card */
.menu-item
background: white;
border-radius: 28px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.25s ease, box-shadow 0.3s;
display: flex;
flex-direction: column;
border: 1px solid #f1e9df;
.menu-item:hover
transform: translateY(-5px);
box-shadow: 0 20px 30px -12px rgba(60, 40, 20, 0.12);
/* item image placeholder (elegant icons) */
.item-img
height: 160px;
background-size: cover;
background-position: center;
position: relative;
display: flex;
align-items: flex-end;
justify-content: flex-start;
/* badge for diet */
.diet-badge
position: absolute;
top: 14px;
right: 14px;
background: rgba(0,0,0,0.65);
backdrop-filter: blur(3px);
padding: 0.2rem 0.7rem;
border-radius: 40px;
font-size: 0.7rem;
font-weight: 600;
color: white;
letter-spacing: 0.3px;
font-family: monospace;
.item-content
padding: 1.4rem 1.5rem 1.6rem;
flex: 1;
.item-header
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
margin-bottom: 0.6rem;
gap: 0.5rem;
.item-name
font-family: 'Playfair Display', serif;
font-size: 1.35rem;
font-weight: 600;
color: #2b241c;
letter-spacing: -0.2px;
.item-price
font-weight: 700;
font-size: 1.3rem;
color: #c28a4a;
font-family: 'Inter', monospace;
.item-desc
font-size: 0.85rem;
line-height: 1.45;
color: #6c5a48;
margin-bottom: 0.8rem;
.item-meta
display: flex;
gap: 1rem;
font-size: 0.7rem;
font-weight: 500;
color: #b48c5c;
text-transform: uppercase;
letter-spacing: 0.5px;
hr
margin: 0.5rem 0;
border: 0;
height: 1px;
background: #f0e5da;
/* category visibility (filter) */
.menu-item
display: flex;
/* footer / specials */
.footer-note
margin-top: 4rem;
text-align: center;
border-top: 1px solid #e2cfb3;
padding-top: 2rem;
font-size: 0.8rem;
color: #8f765a;
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
/* responsiveness */
@media (max-width: 700px)
.menu-container
padding: 1.2rem;
.restaurant-name
font-size: 2.4rem;
.menu-grid
grid-template-columns: 1fr;
gap: 1.5rem;
.category-btn
padding: 0.4rem 1rem;
font-size: 0.8rem;
/* simple animation */
@keyframes fadeSlide
0% opacity: 0; transform: translateY(12px);
100% opacity: 1; transform: translateY(0);
.menu-item
animation: fadeSlide 0.35s ease forwards;
</style>
</head>
<body>
<div class="menu-container">
<div class="menu-header">
<div class="restaurant-name">Le Petit Gourmet</div>
<div class="restaurant-tagline">— Art de la Table —</div>
<div class="menu-sub">Seasonal ingredients · French-Mediterranean soul · Handcrafted with passion</div>
</div>
<!-- filter categories (radio-like behavior with JS) -->
<div class="categories" id="categoryFilter">
<button class="category-btn active" data-category="all">ALL</button>
<button class="category-btn" data-category="starters">STARTERS</button>
<button class="category-btn" data-category="mains">MAINS</button>
<button class="category-btn" data-category="desserts">DESSERTS</button>
<button class="category-btn" data-category="drinks">DRINKS</button>
</div>
<!-- dynamic menu grid injected via JS (but static HTML fallback? we will generate from JS to keep data clean) -->
<div id="menuGrid" class="menu-grid"></div>
<div class="footer-note">
<span>✨ Add-ons available upon request</span>
<span>🍷 Ask our sommelier for pairing</span>
<span>🌿 Vegan & GF options marked</span>
</div>
</div>
<script>
// ------------------------------
// RESTAURANT MENU DATA
// each item: name, price, desc, category, diet (vegan/gluten), imagePlaceholder (css gradient or icon class)
// we'll use beautiful abstract gradients for food illustration style
// ------------------------------
const menuData = [
// STARTERS
id: 1, name: "Truffle Mushroom Arancini", price: "$14", desc: "Crispy risotto balls, wild mushrooms, parmesan foam & black truffle essence.", category: "starters", diet: "vegetarian", imgStyle: "linear-gradient(135deg, #e7cfb0, #d8b77d)" ,
id: 2, name: "Heirloom Tomato & Burrata", price: "$16", desc: "Organic tomatoes, creamy burrata, aged balsamic, basil gel & sourdough crisp.", category: "starters", diet: "vegetarian", imgStyle: "linear-gradient(145deg, #f4cfb0, #e6ac77)" ,
id: 3, name: "Seared Scallop Carpaccio", price: "$19", desc: "U10 scallops, yuzu vinaigrette, finger lime, fennel pollen & microgreens.", category: "starters", diet: "gluten-free", imgStyle: "linear-gradient(112deg, #cbd5c0, #a6b893)" ,
// MAINS
id: 4, name: "Herb-Crusted Lamb Rack", price: "$39", desc: "Roasted baby potatoes, garlic confit, rosemary jus & seasonal vegetables.", category: "mains", diet: "", imgStyle: "linear-gradient(120deg, #b5875a, #8b5a2b)" ,
id: 5, name: "Wild Mushroom Risotto", price: "$28", desc: "Carnaroli rice, porcini, truffle pecorino, parsley oil & aged parmesan.", category: "mains", diet: "vegetarian", imgStyle: "linear-gradient(135deg, #cbbf91, #b49a62)" ,
id: 6, name: "Pan-Seared Branzino", price: "$34", desc: "Mediterranean sea bass, saffron broth, fennel, orange & olive tapenade.", category: "mains", diet: "gluten-free", imgStyle: "linear-gradient(145deg, #8ba8b0, #5f7d86)" ,
id: 7, name: "Black Truffle Tagliatelle", price: "$32", desc: "Fresh egg pasta, wild mushrooms, parmesan cream & shaved black truffle.", category: "mains", diet: "", imgStyle: "linear-gradient(98deg, #dac09a, #c09f70)" ,
// DESSERTS
id: 8, name: "Salted Caramel Crème Brûlée", price: "$12", desc: "Velvety vanilla custard, caramelized sugar crust, fleur de sel.", category: "desserts", diet: "vegetarian", imgStyle: "linear-gradient(135deg, #f5d9b3, #e6bc87)" ,
id: 9, name: "Dark Chocolate Fondant", price: "$13", desc: "Molten 72% cocoa core, raspberry coulis, vanilla bean ice cream.", category: "desserts", diet: "vegetarian", imgStyle: "linear-gradient(142deg, #bb8b6b, #996a48)" ,
id: 10, name: "Lavender Honey Panna Cotta", price: "$11", desc: "Silky Italian pudding, lavender honeycomb, candied violet petals.", category: "desserts", diet: "gluten-free", imgStyle: "linear-gradient(125deg, #eed7bb, #dfc2a0)" ,
// DRINKS (crafted beverages)
id: 11, name: "Espresso Martini", price: "$15", desc: "Vodka, fresh espresso, coffee liqueur, vanilla syrup & three coffee beans.", category: "drinks", diet: "", imgStyle: "linear-gradient(105deg, #9e7c62, #7b5a42)" ,
id: 12, name: "Rosemary Pear Spritz", price: "$12", desc: "Pear nectar, prosecco, rosemary syrup, soda & dehydrated pear slice.", category: "drinks", diet: "vegan", imgStyle: "linear-gradient(150deg, #e3c29f, #c7a472)" ,
id: 13, name: "French 75", price: "$14", desc: "Gin, fresh lemon, champagne, cane sugar & lemon twist.", category: "drinks", diet: "", imgStyle: "linear-gradient(120deg, #e0cfaf, #cbb584)" ,
id: 14, name: "Non-Alcoholic Garden Mule", price: "$8", desc: "Seedlip garden, ginger beer, lime, mint & cucumber.", category: "drinks", diet: "vegan", imgStyle: "linear-gradient(135deg, #bfdcae, #97bc81)"
];
// helper: get diet badge text (show only if vegan/gluten-free/vegetarian)
function getDietBadge(diet)
if (diet === "vegan") return "🌱 VEGAN";
if (diet === "gluten-free") return "🚫 GLUTEN-FREE";
if (diet === "vegetarian") return "🥕 VEGETARIAN";
return "";
// function to render menu items based on selected category
function renderMenu(activeCategory = "all")
const gridContainer = document.getElementById("menuGrid");
if (!gridContainer) return;
// filter data
let filteredItems = [];
if (activeCategory === "all")
filteredItems = [...menuData];
else
filteredItems = menuData.filter(item => item.category === activeCategory);
if (filteredItems.length === 0)
gridContainer.innerHTML = `<div style="grid-column:1/-1; text-align:center; padding: 3rem; background:#faf4ea; border-radius: 48px;"><p style="font-size:1.1rem; color:#a4825a;">✨ No dishes in this section, but we'll surprise you soon ✨</p></div>`;
return;
// generate html cards
const cardsHtml = filteredItems.map(item =>
const badgeText = getDietBadge(item.diet);
// random fresh style: each card gets background gradient from item.imgStyle (makes each unique)
// also we add a small leaf pattern effect on image overlay.
return `
<div class="menu-item" data-category="$item.category">
<div class="item-img" style="background-image: $item.imgStyle; background-size: cover; background-blend-mode: overlay; position: relative;">
<div style="position: absolute; inset:0; background: radial-gradient(circle at 10% 20%, rgba(255,245,225,0.15) 0%, rgba(0,0,0,0.02) 90%);"></div>
$badgeText ? `<span class="diet-badge">$badgeText</span>` : ''
<div style="margin: 0 0 12px 16px; font-size: 1.8rem; filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.2));">🍽️</div>
</div>
<div class="item-content">
<div class="item-header">
<span class="item-name">$escapeHtml(item.name)</span>
<span class="item-price">$escapeHtml(item.price)</span>
</div>
<div class="item-desc">$escapeHtml(item.desc)</div>
<div class="item-meta">
<span>✦ $item.category.slice(0, -1).toUpperCase()</span>
$item.diet ? `<span>• $item.diet === 'vegan' ? 'plant-based' : item.diet === 'gluten-free' ? 'celiac safe' : 'veg-friendly'</span>` : ''
</div>
</div>
</div>
`;
).join('');
gridContainer.innerHTML = cardsHtml;
// simple XSS protection
function escapeHtml(str)
return str.replace(/[&<>]/g, function(m)
if (m === '&') return '&';
if (m === '<') return '<';
if (m === '>') return '>';
return m;
).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c)
return c;
);
// set up category switching (active class + filtering)
function initCategoryTabs()
const btns = document.querySelectorAll(".category-btn");
const grid = document.getElementById("menuGrid");
function setActive(activeBtn)
btns.forEach(btn => btn.classList.remove("active"));
activeBtn.classList.add("active");
const categoryValue = activeBtn.getAttribute("data-category");
renderMenu(categoryValue);
btns.forEach(btn =>
btn.addEventListener("click", (e) =>
setActive(btn);
);
);
// initial render (all items)
renderMenu("all");
// bonus: subtle smooth load effect, also ensure no layout shift
window.addEventListener("DOMContentLoaded", () =>
initCategoryTabs();
);
</script>
<!-- Add a little style for interactive hover & fine details -->
<style>
/* enhance premium feeling */
.menu-item
transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
.item-img
transition: transform 0.2s;
.menu-item:hover .item-img
transform: scale(1.01);
.item-img
transition: transform 0.3s ease;
.category-btn:focus-visible
outline: 2px solid #c9a87b;
outline-offset: 2px;
.menu-container
background: radial-gradient(circle at 10% 20%, rgba(250,245,235,0.6), #fefaf5);
.restaurant-name::after
content: "✨";
font-size: 1.8rem;
vertical-align: middle;
opacity: 0.7;
margin-left: 6px;
.footer-note span:first-child::before
content: "🍴 ";
.footer-note span:nth-child(2)::before
content: "🍾 ";
.footer-note span:last-child::before
content: "🌿 ";
@media (max-width: 500px)
.item-header
flex-direction: column;
align-items: flex-start;
.item-price
font-size: 1.1rem;
</style>
</body>
</html>
Creating a restaurant menu using HTML and CSS is a rite of passage for many web developers. It’s the perfect project to practice Flexbox, CSS Grid, and typography, while building something visually appetizing.
If you are looking for inspiration or a "restaurant menu html css codepen" to fork, this guide breaks down the essential structure and styling techniques to build a modern, responsive menu from scratch. 1. The HTML Structure: Clean and Semantic
A menu is essentially a list of items. We want to use semantic HTML to ensure it’s accessible to screen readers and search engines. /* CSS styles */ /* Global Styles */
