.section-title font-size: 1.5rem;
.menu-sub font-size: 0.95rem; color: #6f5a41; max-width: 500px; margin: 0 auto; font-weight: 400;
Features filtering functionality, allowing users to click buttons to see specifically "Appetizers" or "Main Courses."
CSS:
.section-title font-size: 1.5rem;
<section class="menu-section"> <h2 class="section-title"><i class="fas fa-utensil-spoon"></i> Main Courses</h2> <div class="menu-items"> <div class="menu-item"> <div class="item-info"> <h3>Grilled Salmon <span class="price">$18.99</span></h3> <p>Wild salmon with lemon dill sauce, roasted asparagus, and wild rice.</p> </div> </div> <div class="menu-item"> <div class="item-info"> <h3>Classic Burger <span class="price">$12.99</span></h3> <p>Angus beef, cheddar, lettuce, tomato, onion, and special sauce on brioche.</p> </div> </div> <div class="menu-item"> <div class="item-info"> <h3>Margherita Pizza <span class="price">$14.99</span></h3> <p><i class="fas fa-leaf diet-icon" data-tooltip="Vegetarian"></i> San Marzano tomatoes, fresh mozzarella, basil, and olive oil.</p> </div> </div> </div> </section>
Outline:
Sustainably sourced sea bass, saffron risotto, asparagus spears, citrus butter sauce.
You’ve just built a professional, responsive, and beautiful restaurant menu using nothing but HTML and CSS – and you can share it instantly with CodePen. The approach is perfect for restaurant owners, freelance developers, and students who want a quick, elegant solution without complex frameworks.
: This video tutorial (also available as a Pen) explains how to transition from a single-column mobile view to a dual-column desktop layout. Designing a Menu Website (Coursera) restaurant menu html css codepen
If you are looking for a step-by-step breakdown of how these menus are built, these guides are highly recommended: Create a Restaurant Menu with HTML & CSS Grid + Flexbox
.menu-item display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-bottom: 1px dotted #f0e3d4;
That gives a lovely fine‑dining “linen” feel. : This video tutorial (also available as a
Design Examples and Themes