cw-hans/Bar-menu-and-calendar-events
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: landing page, menu tabs + brunch, events calendar

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Hans Heinemann
2026-03-17 10:46:25 -04:00
parent 61799aa5a2
commit 9126181279
4 changed files with 1417 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

488
index.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Axis — Menu</title>
<title>Axis — Junction's Oldest Bar</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
@@ -15,392 +15,124 @@
<span></span><span></span><span></span>
</button>
<ul class="navbar__links" id="nav-links">
<li><a href="index.html" class="active">Menu</a></li>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="events.html">Events</a></li>
</ul>
</nav>
<!-- ===== Hero ===== -->
<header class="page-hero">
<p class="page-hero__eyebrow">Est. 2018 &mdash; Downtown</p>
<h1 class="page-hero__title">Our Menu</h1>
<p class="page-hero__sub">Handcrafted cocktails &middot; Curated spirits &middot; Small plates</p>
</header>
<!-- ===== Main Content ===== -->
<main>
<div class="container">
<!-- ============ DRINKS ============ -->
<section class="menu-section" id="drinks">
<h2 class="section-title">Drinks</h2>
<!-- Cocktails -->
<p class="section-subtitle">Cocktails</p>
<div class="menu-grid">
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Caesar</div>
<div class="menu-item__desc">2oz vodka</div>
</div>
<div class="menu-item__price">$13</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Margarita</div>
<div class="menu-item__desc">2oz tequila, 1/2oz triple sec</div>
</div>
<div class="menu-item__price">$14</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Long Island Iced Tea</div>
<div class="menu-item__desc">2oz LIIT mix</div>
</div>
<div class="menu-item__price">$13</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Mimosa</div>
<div class="menu-item__desc">2.5oz champagne</div>
</div>
<div class="menu-item__price">$9</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Old Fashioned</div>
<div class="menu-item__desc">2oz whiskey</div>
</div>
<div class="menu-item__price">$13</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Screwdriver</div>
<div class="menu-item__desc">2oz vodka</div>
</div>
<div class="menu-item__price">$13</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Martini</div>
<div class="menu-item__desc">2oz vodka or gin, 1/2oz dry vermouth</div>
</div>
<div class="menu-item__price">$14</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Cosmopolitan</div>
<div class="menu-item__desc">2oz vodka</div>
</div>
<div class="menu-item__price">$13</div>
</div>
</div>
<!-- Sangria -->
<p class="section-subtitle">Sangria</p>
<div class="menu-grid">
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Glass Sangria</div>
<div class="menu-item__desc">Red or white &mdash; 3oz wine, 1oz rum</div>
</div>
<div class="menu-item__price">$15</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Pitcher Sangria</div>
<div class="menu-item__desc">Red or white &mdash; 9oz wine, 2oz rum</div>
</div>
<div class="menu-item__price">$27</div>
</div>
</div>
<!-- Wine -->
<p class="section-subtitle">Wine <small style="font-weight:normal;font-size:0.75rem;">(6oz / 9oz / &frac12; litre / bottle)</small></p>
<div class="menu-grid">
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">House Red / White</div>
</div>
<div class="menu-item__price">$9 / $13 / $24 / $30</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Other Red / White</div>
</div>
<div class="menu-item__price">$11 / $15 / $26 / $34</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Prosecco</div>
</div>
<div class="menu-item__price">$11 / $35</div>
</div>
</div>
<!-- Draught Beer -->
<p class="section-subtitle">Draught Beer <small style="font-weight:normal;font-size:0.75rem;">(pint / pitcher)</small></p>
<div class="menu-grid">
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">Stella Artois</div></div>
<div class="menu-item__price">$10 / $28</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">Alexander Keith's</div></div>
<div class="menu-item__price">$8 / $24</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">Juicy AF IPA</div></div>
<div class="menu-item__price">$9 / $24</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">Space Invaders IPA</div></div>
<div class="menu-item__price">$9 / $24</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">Amsterdam Blonde</div></div>
<div class="menu-item__price">$9 / $24</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">Steam Whistle</div></div>
<div class="menu-item__price">$8 / $23</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">Moosehead</div></div>
<div class="menu-item__price">$8 / $23</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">Beau's Lug Tread</div></div>
<div class="menu-item__price">$8 / $23</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">High Park Ale</div></div>
<div class="menu-item__price">$8 / $23</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">High Park Lager</div></div>
<div class="menu-item__price">$8 / $23</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">Guinness</div></div>
<div class="menu-item__price">$10 / $28</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">Cider</div></div>
<div class="menu-item__price">$10 / $28</div>
</div>
</div>
<!-- Cans -->
<p class="section-subtitle">Cans</p>
<div class="menu-grid">
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">Moosehead</div><div class="menu-item__desc">473ml</div></div>
<div class="menu-item__price">$7</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">Sapporo</div><div class="menu-item__desc">500ml</div></div>
<div class="menu-item__price">$8</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">Tuborg</div><div class="menu-item__desc">473ml</div></div>
<div class="menu-item__price">$8</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">3 Speed Tall Can</div><div class="menu-item__desc">568ml</div></div>
<div class="menu-item__price">$8</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">Brickworks Cider</div><div class="menu-item__desc">473ml</div></div>
<div class="menu-item__price">$8</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">Stiegl</div><div class="menu-item__desc">500ml</div></div>
<div class="menu-item__price">$8</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">White Claw</div><div class="menu-item__desc">473ml</div></div>
<div class="menu-item__price">$5</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">Stiegl Radler</div><div class="menu-item__desc">500ml</div></div>
<div class="menu-item__price">$9</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">PBR</div><div class="menu-item__desc">473ml</div></div>
<div class="menu-item__price">$6</div>
</div>
</div>
<!-- Bottles -->
<p class="section-subtitle">Bottles</p>
<div class="menu-grid">
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Budweiser, Canadian, Coors Light, or Labatt Blue</div>
<div class="menu-item__desc">341ml</div>
</div>
<div class="menu-item__price">$6</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">MGD</div>
<div class="menu-item__desc">341ml&ndash;355ml</div>
</div>
<div class="menu-item__price">$6</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Smirnoff Ice, Stella, Heineken, or Corona</div>
<div class="menu-item__desc">330ml</div>
</div>
<div class="menu-item__price">$8</div>
</div>
</div>
<!-- Non-Alcoholic -->
<p class="section-subtitle">Non-Alcoholic</p>
<div class="menu-grid">
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">Red Bull</div></div>
<div class="menu-item__price">$5</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">Perrier</div></div>
<div class="menu-item__price">$4</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">0% Guinness</div></div>
<div class="menu-item__price">$6</div>
</div>
<div class="menu-item">
<div class="menu-item__info"><div class="menu-item__name">0% Beer</div></div>
<div class="menu-item__price">$5</div>
</div>
</div>
</section>
<hr class="divider" />
<!-- ============ FOOD ============ -->
<section class="menu-section" id="food">
<h2 class="section-title">Food</h2>
<!-- Small Plates -->
<p class="section-subtitle">Small Plates &amp; Shareables</p>
<div class="menu-grid">
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Truffle Fries</div>
<div class="menu-item__desc">Hand-cut fries, black truffle oil, parmesan, fresh thyme, aioli</div>
</div>
<div class="menu-item__price">$14</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Charcuterie Board</div>
<div class="menu-item__desc">Cured meats, aged cheeses, cornichons, grainy mustard, crostini</div>
</div>
<div class="menu-item__price">$22</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Spiced Lamb Skewers</div>
<div class="menu-item__desc">Harissa-marinated lamb, tzatziki, sumac onions, grilled pita</div>
</div>
<div class="menu-item__price">$18</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Burrata &amp; Heirloom Tomato</div>
<div class="menu-item__desc">Creamy burrata, heirloom tomatoes, basil oil, fleur de sel, balsamic</div>
</div>
<div class="menu-item__price">$16</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Crispy Calamari</div>
<div class="menu-item__desc">Lightly breaded, served with lemon aioli & smoked paprika dipping sauce</div>
</div>
<div class="menu-item__price">$15</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Korean BBQ Wings</div>
<div class="menu-item__desc">Gochujang glaze, sesame, scallions, pickled daikon — 8 wings</div>
</div>
<div class="menu-item__price">$17</div>
</div>
</div>
<!-- Mains -->
<p class="section-subtitle">Mains</p>
<div class="menu-grid">
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Axis Burger</div>
<div class="menu-item__desc">Double smash patty, aged cheddar, caramelized onion, house sauce, brioche</div>
</div>
<div class="menu-item__price">$20</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Pan-Seared Salmon</div>
<div class="menu-item__desc">Miso-glazed salmon, jasmine rice, bok choy, yuzu beurre blanc</div>
</div>
<div class="menu-item__price">$28</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Steak Frites</div>
<div class="menu-item__desc">8 oz hanger steak, chimichurri, pomme frites, watercress salad</div>
</div>
<div class="menu-item__price">$34</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Wild Mushroom Risotto</div>
<div class="menu-item__desc">Porcini &amp; cremini, aged parmesan, truffle oil, crispy sage (v)</div>
</div>
<div class="menu-item__price">$24</div>
</div>
</div>
<!-- Desserts -->
<p class="section-subtitle">Desserts</p>
<div class="menu-grid">
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Chocolate Lava Cake</div>
<div class="menu-item__desc">Warm dark chocolate, vanilla bean ice cream, gold dust</div>
</div>
<div class="menu-item__price">$12</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Crème Brûlée</div>
<div class="menu-item__desc">Classic vanilla custard, caramelized sugar crust, fresh berries</div>
</div>
<div class="menu-item__price">$11</div>
</div>
<div class="menu-item">
<div class="menu-item__info">
<div class="menu-item__name">Affogato</div>
<div class="menu-item__desc">Double espresso over vanilla gelato, optional Frangelico shot</div>
</div>
<div class="menu-item__price">$10</div>
</div>
</div>
</section>
<section class="landing-hero">
<div class="landing-hero__overlay"></div>
<div class="landing-hero__content">
<h1 class="landing-hero__title">AXIS</h1>
<p class="landing-hero__subtitle">Junction's Oldest Bar</p>
<p class="landing-hero__address">3048 Dundas Street West</p>
<div class="landing-hero__ctas">
<a href="menu.html" class="btn btn--gold">View Menu</a>
<a href="events.html" class="btn btn--outline">Upcoming Events</a>
</div>
</div>
</main>
</section>
<!-- ===== About ===== -->
<section class="about-section">
<div class="container about-section__inner">
<div class="about-section__text">
<p class="section-eyebrow">Est. 1987</p>
<h2 class="section-heading">A Junction Institution</h2>
<p>Axis has been pouring pints and pulling neighbours together since 1987. Tucked along Dundas Street West, we've watched the Junction transform around us — but our commitment to a cold beer, a warm welcome, and a no-fuss good time has never changed.</p>
<p>Over three decades, we've become the spot where regulars have a stool with their name on it, where strangers become friends over a round of trivia, and where live music on a Monday night can turn an ordinary week around. We're not trendy. We're better than that — we're yours.</p>
<p>Whether you're stopping in for a quiet pint after work, settling in for brunch with friends on a Sunday morning, or catching a band on a Friday night, Axis is the kind of bar that feels like it was made for you specifically. Because, in a way, it was.</p>
<div class="about-section__hours">
<div class="about-section__hours-block">
<strong>Bar Hours</strong>
<p>Tuesday–Sunday &middot; 5pm–2am</p>
</div>
<div class="about-section__hours-block">
<strong>Brunch</strong>
<p>Thursday–Sunday &middot; 9am–3pm</p>
</div>
</div>
<p class="about-section__addr">3048 Dundas Street West, Toronto</p>
</div>
<div class="about-section__image">
<img
src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&q=80&auto=format&fit=crop"
alt="Axis bar interior"
loading="lazy"
/>
</div>
</div>
</section>
<!-- ===== What's On ===== -->
<section class="whats-on-section">
<div class="container">
<h2 class="section-heading section-heading--center">What's On</h2>
<div class="poster-grid">
<div class="poster-card">
<div class="poster-card__icon">&#9670;</div>
<div class="poster-card__tag">Weekly</div>
<h3 class="poster-card__name">Trivia Night</h3>
<p class="poster-card__when">Every Tuesday &middot; 8pm</p>
<p class="poster-card__desc">Teams of up to 6. Prizes include bar tabs and Axis swag. Arrive early to grab a table.</p>
</div>
<div class="poster-card">
<div class="poster-card__icon">&#9836;</div>
<div class="poster-card__tag">Recurring</div>
<h3 class="poster-card__name">Live Music</h3>
<p class="poster-card__when">Every Monday &amp; Friday &middot; 9pm</p>
<p class="poster-card__desc">Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.</p>
</div>
<div class="poster-card">
<div class="poster-card__icon">&#9823;</div>
<div class="poster-card__tag">Monthly</div>
<h3 class="poster-card__name">Board Games &amp; Chess Night</h3>
<p class="poster-card__when">2nd Thursday of the month &middot; 7pm</p>
<p class="poster-card__desc">Bring your A-game. Classic board games, chess sets, and cold drinks. All skill levels welcome.</p>
</div>
</div>
<p class="whats-on-link"><a href="events.html">See full calendar &rarr;</a></p>
</div>
</section>
<!-- ===== Promotions ===== -->
<section class="promos-section">
<div class="container">
<h2 class="section-heading section-heading--center">Specials</h2>
<div class="promo-grid">
<div class="promo-card">
<h3 class="promo-card__title">Happy Hour</h3>
<p class="promo-card__when">Tuesday–Friday &middot; 5pm–7pm</p>
<p class="promo-card__desc">$2 off all draught pints. Kick off your evening right.</p>
</div>
<div class="promo-card">
<h3 class="promo-card__title">Weekend Brunch</h3>
<p class="promo-card__when">Thursday–Sunday &middot; 9am–3pm</p>
<p class="promo-card__desc">Eggs benny, poutine, french toast, and mimosas. The only brunch you need.</p>
</div>
<div class="promo-card">
<h3 class="promo-card__title">Live Music</h3>
<p class="promo-card__when">Every Monday &amp; Friday from 9pm</p>
<p class="promo-card__desc">No cover charge. Just great music and a full bar. Every week.</p>
</div>
</div>
</div>
</section>
<!-- ===== Footer ===== -->
<footer>
<p><span>Axis</span> &mdash; Open Tue–Sun, 5pm–2am &mdash; 44 Commerce St</p>
<p style="margin-top:0.4rem;">Please drink responsibly. Must be 21+ to consume alcohol.</p>
<p><span>Axis</span> &mdash; 3048 Dundas Street West &mdash; Open Tue–Sun 5pm–2am &mdash; Brunch Thu–Sun 9am–3pm</p>
<p style="margin-top:0.4rem;">Please drink responsibly. Must be of legal drinking age.</p>
</footer>
<script>