Menu Cards

Why Data Attributes Matter

HTML has a feature called data attributes, custom attributes you invent yourself that start with data-. You can put any information on any element: data-category="starters", data-tab="mains", data-id="42".

Right now, all 12 menu cards will be visible at once; that's intentional. In Stage 3, JavaScript will read the data-category values and use them to show or hide cards when a tab button is clicked. You're setting up the data structure before you write the logic.

This is a pattern professionals use constantly: separate the data from the behavior.

Add the Menu Section CSS

Add this inside your existing <style> block, after the hero CSS:

• grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)), creates as many columns as fit, each at least 300px wide. Cards wrap automatically on smaller screens. No media queries needed.
• background: rgba(255,255,255,0.06), a very faint white overlay on the dark cedar background. Gives cards just enough separation to read as distinct elements.
• .tab-btn.active, this class does not exist in the HTML yet. JavaScript will add it when a button is clicked. The CSS is ready and waiting.

Add the Menu HTML

After the closing </section> of the hero, add the full menu section. Each card gets a data-category attribute:

The Full Menu Item List

Use these 12 items, 3 per category:

• Starters: Fry Bread Bruschetta $14, Three Sisters Soup $12, Walleye Fritters $16
• Mains: Manoomin Bowl $28, Venison Loin $36, Cedar-Plank Salmon $32
• Sides: Roasted Root Vegetables $10, Three Sisters Succotash $10, Traditional Frybread $8
• Desserts: Maple Birch Pudding $12, Wild Berry Crisp $11, Wojapi Cup $10

Use data-category="starters", data-category="mains", data-category="sides", or data-category="desserts" on each card. The value must match the data-tab value on the button exactly.