Black Oak Pub — Modern Pub Menu

Meaning: Black Oak represents a strong, classic pub atmosphere with a premium and timeless character.

Category: Pub / Restaurant Menu

Tags: Pub, Menu, Dark, Drinks, Food, QR Menu, Nightlife, Responsive

Difficulty: Beginner–Intermediate

Description: Create a stylish static website for Black Oak Pub, a modern neighborhood pub with a dark, warm, premium atmosphere. The website is primarily a mobile-first digital menu accessed through a QR code.

Design Direction

• Dark charcoal / near-black background
• Warm amber and cream accents
• Premium pub atmosphere
• Elegant typography with strong menu headings
• Subtle wood, grain, or texture-inspired details
• Clean cards and dividers
• Large food and drink photography
• Smooth hover and scroll animations
• Mobile-first design optimized for QR-code visitors
• No backend, login, ordering system, or database

Pages / Sections

1. Header

• Black Oak Pub logo/name
• Navigation links
• Menu category navigation
• Compact mobile navigation

2. Hero

• Pub name: Black Oak Pub
• Tagline: Good Drinks. Great Food. Better Nights.
• Atmospheric pub background image
• CTA: View Menu

3. Today's Specials

Highlight 3–4 popular specials:

• Black Oak Burger
• Crispy Chicken Wings
• Loaded Pub Fries
• Steak & Ale Pie

Show:

• Image
• Description
• Price
• Popular/Special badge

4. Food Menu

Create categorized menu sections:

Starters

• Crispy Chicken Wings
• Loaded Nachos
• Mozzarella Sticks
• Garlic Parmesan Fries

Burgers & Sandwiches

• Black Oak Classic Burger
• BBQ Bacon Burger
• Crispy Chicken Burger
• Steak Sandwich

Mains

• Fish & Chips
• Steak & Ale Pie
• Grilled Chicken
• Pub-Style Fish Burger

Sides

• Pub Fries
• Sweet Potato Fries
• Coleslaw
• Onion Rings

5. Drinks Menu

Categories:

Beer

• Black Oak Lager
• IPA
• Pale Ale
• Guinness

Cocktails

• Old Fashioned
• Whiskey Sour
• Mojito
• Espresso Martini

Wine

• House Red
• House White
• Rosé
• Sparkling

Non-Alcoholic

• Cola
• Lemonade
• Ginger Beer
• Fresh Orange Juice

Include prices and small dietary/allergen indicators where appropriate.

6. Chef / Bartender Recommendation

Create a featured recommendation card with a large image and short description.

7. Happy Hour

Create a visually prominent section:

Happy Hour — 5:00 PM – 7:00 PM

Show selected drink and food discounts.

8. About the Pub

Short story about Black Oak Pub, its atmosphere, food, drinks, and community.

9. Opening Hours & Location

Display:

• Opening hours
• Address
• Phone
• Map-style location card

10. Footer

Include:

• Black Oak Pub
• Opening hours
• Social media icons
• Address
• “Please drink responsibly”
• Copyright

Interactions

Add lightweight frontend interactions using vanilla JavaScript:

• Sticky category navigation
• Smooth scrolling
• Menu category filtering
• Mobile navigation
• Food/drink item hover effects
• Scroll reveal animations
• Active category indicator
• Back-to-top button

Technical Requirements

Build this as a pure static website:

• HTML5
• CSS3
• Vanilla JavaScript
• Responsive design
• No backend
• No database
• No authentication
• No external framework
• Use semantic HTML
• Organize CSS and JavaScript cleanly
• Optimize for mobile QR-code visitors
• Make the entire menu easy to scan and read on a phone
• Use realistic placeholder images where necessary
• Ensure accessibility and good color contrast

The final result should feel like a premium modern pub's real digital QR menu, not a generic restaurant template.