Html Css Codepen - Restaurant Menu

/* menu grid layout */ .menu-grid display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2rem;

body background: #f9f6ef; font-family: 'Inter', sans-serif; color: #2c2418; line-height: 1.4; scroll-behavior: smooth; restaurant menu html css codepen

<div class="footer-note"> <span><i class="fas fa-leaf"></i> Locally sourced</span> <span><i class="fas fa-wine-bottle"></i> Wine pairing available</span> <span><i class="fas fa-clock"></i> Tue–Sun 5PM – 11PM</span> </div> </div> /* menu grid layout */

// simple XSS prevention 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; ); body background: #f9f6ef

/* main container */ .menu-container max-width: 1280px; margin: 2rem auto; padding: 2rem 1.5rem 3rem; background: #fffdf9; border-radius: 32px; box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.08);

// State: currently active filter category (null = show all) let activeCategory = null; // null means "All"

if (filteredItems.length === 0) menuGrid.innerHTML = `<div class="no-results"><i class="fas fa-utensils"></i> No dishes found in this category.<br>Try another delicious section ✨</div>`; return;