Restaurant Menu Html Css Codepen Here

/* no results message */ .no-results grid-column: 1 / -1; text-align: center; padding: 3rem; background: #faf6f0; border-radius: 48px; font-size: 1rem; color: #b18762;

// Helper: render filter buttons function renderFilters() let buttonsHtml = `<button class="filter-btn $activeCategory === null ? 'active' : ''" data-filter="all"><i class="fas fa-utensils"></i> All</button>`; uniqueCategories.forEach(cat => buttonsHtml += `<button class="filter-btn $activeCategory === cat ? 'active' : ''" data-filter="$cat"><i class="fas fa-tag"></i> $cat</button>`; ); filterContainer.innerHTML = buttonsHtml; restaurant menu html css codepen

/* 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; /* no results message */