Restaurant Menu Html Css Codepen Link

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

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; restaurant menu html css codepen

// 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

/* category filter (optional interactive tabs) */ .filter-tabs display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-bottom: 2.8rem; .filter-btn background: transparent; border: 1.5px solid #e2cfb5; padding: 0.6rem 1.6rem; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.9rem; border-radius: 60px; cursor: pointer; transition: all 0.2s ease; color: #4f3a28; background: white; .filter-btn i margin-right: 6px; font-size: 0.85rem; .filter-btn.active background: #c17b4c; border-color: #c17b4c; color: white; box-shadow: 0 6px 12px -8px rgba(193,123,76,0.4); .filter-btn:hover:not(.active) background: #f2e6db; border-color: #cb9e78; i class="fas fa-utensils"&gt

<div class="filter-tabs" id="filterTabs">  </div>

// DOM elements const filterContainer = document.getElementById("filterTabs"); const menuGrid = document.getElementById("menuGrid");