Skip to content
Permalink
main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

cocktails/index.html

Go to file
 
 
Cannot retrieve contributors at this time
63 lines (58 sloc) 2.4 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Holiday Cocktails</title>
<link rel="stylesheet" href="cocktail.css">
<script src="jquery-3.6.0.js"></script>
</head>
<body>
<header>
<h1>Holiday Cocktails</h1>
</header>
<div class="container">
<aside class="sidebar-left">
<h2>About These Drinks</h2>
<p>Enjoy festive cocktails and mocktails perfect for the holiday season. Hover to reveal recipes, and click to see calories.</p>
</aside>
<main>
<div class="cocktail-cards">
<div class="card" data-calories="150">
<img src="Mistletoe_Martini.png" alt="Cocktail 1">
<h3>Mistletoe Martini</h3>
<p>Main Ingredients: Vodka, cranberry juice, lime</p>
</div>
<div class="card" data-calories="120">
<img src="Snowfall_sangria.png" alt="Cocktail 2">
<h3>Snowfall Sangria</h3>
<p>Main Ingredients: White wine, apple cider, cinnamon</p>
</div>
<div class="card" data-calories="90">
<img src="winterwonderlang.png" alt="Mocktail 1">
<h3>Winter Wonderland</h3>
<p>Main Ingredients: Sparkling water, pomegranate juice, rosemary</p>
</div>
<div class="card" data-calories="200">
<img src="holiday_mule.png" alt="Cocktail 3">
<h3>Holiday Mule</h3>
<p>Main Ingredients: Vodka, ginger beer, cranberry</p>
</div>
<div class="card" data-calories="80">
<img src="Festive_Berry_Punch.png" alt="Mocktail 2">
<h3>Festive Berry Punch</h3>
<p>Main Ingredients: Mixed berries, sparkling water, mint</p>
</div>
</div>
</main>
<aside class="sidebar-right">
<h2>Instructions</h2>
<p>Hover over each card to see the recipe. Click the card to display calorie information. Move your cursor away to reset.</p>
</aside>
</div>
<footer>
<p>© 2024 Holiday Cocktails</p>
</footer>
<script src="app.js"></script>
</body>
</html>