-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
181 lines (178 loc) · 6.64 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Holiday's Popup Bar Menu</title>
<style>
body {
font-family: Brie, sans-serif;
background-color: #f3f4f6;
color: #333;
margin: 0;
display: flex;
}
/* Sidebar */
.sidebar {
width: 100;
background-color: #1d2a49;
color: #fff;
padding: 20px;
position: fixed;
height: 100vh;
overflow-y: auto;
border-right: 1px solid #444;
box-shadow: 2px 0 5px rgba(0,0,0,0.2);
}
.sidebar h2 {
font-size: 26px;
color: #00bcd4; /* teal */
text-align: center;
border-bottom: 1px solid #555;
padding-bottom: 10px;
margin-top: 0;
}
.sidebar a {
color: #ddd;
text-decoration: none;
display: block;
margin: 10px 0;
padding: 8px;
border-radius: 4px;
transition: background-color 0.3s, color 0.3s;
}
/* Responsive Adjustments for Smaller Screens */
@media (max-width: 768px) {
.sidebar {
width: 120px; /* Width of the sidebar on mobile */
padding: 10px;
}
.main-content {
margin-left: 0; /* Remove left margin to center the content */
width: 100%; /* Full width to make the cards larger on mobile */
padding-left: 10px; /* Add padding for better spacing */
padding-right: 10px;
}
}
.sidebar a:hover {
background-color: #00bcd4; /* teal */
color: #fff;
}
/* Main Content */
.main-content {
margin-left: 150px;
padding: 30px;
width: calc(100% - 200px);
}
.recipe {
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 30px;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
transition: transform 0.2s ease;
}
.recipe:hover {
transform: scale(1.02);
}
.recipe h3 {
color: #ff7f50; /* orange */
font-weight: 500;
font-size: 22px;
margin-top: 0;
}
.recipe p {
line-height: 1.6;
color: #666;
}
.recipe img {
width: 50%; /* Image takes full width of container */
max-width: 300; /* Constrains maximum width */
height: 200; /* Sets a fixed height */
object-fit: cover; /* Maintains aspect ratio */
margin: 10px auto; /* Centers the image within the container */
border-radius: 8px;
border: 1px solid #370a0a;
display: block; /* Centers the image */
}
/* Responsive Adjustment for Smaller Screens */
@media (max-width: 768px) {
.recipe img {
max-width: 100%; /* Remove width limit on smaller screens */
width: 90%; /* Set width to 90% of the parent container */
height: auto; /* Auto height for aspect ratio */
}
}
</style>
</head>
<body>
<!-- Sidebar -->
<div class="sidebar">
<h2>Holiday's Menu</h2>
<a href="#apple-zen">Apple Zen</a>
<a href="#empire-blush">Empire Blush</a>
<a href="#timeless-classic">Timeless Classic</a>
<a href="#black-widow">Black Widow</a>
<a href="#moscow-magic">Moscow Magic</a>
<a href="#sunrise-dream">Sunrise Dream</a>
<a href="#ginger-spark">Ginger Spark</a>
<a href="#citrus-twist">Citrus Twist</a>
<a href="#skyline-breeze">Skyline Breeze</a>
<a href="#pomegranate-splash">Pomegranate Splash</a>
</div>
<!-- Main Content -->
<div class="main-content">
<div class="recipe" id="apple-zen">
<h3>Apple Zen</h3>
<p>A balanced blend of apple essence, a hint of orange, and warming spices. Garnished with an apple slice.</p>
<img src="appletini.png" alt="Apple Zen Image Placeholder">
</div>
<div class="recipe" id="empire-blush">
<h3>Empire Blush</h3>
<p>A citrusy delight with a deep red wine float for a sophisticated twist.</p>
<img src="whiskeysour.png" alt="Empire Blush Image Placeholder">
</div>
<div class="recipe" id="timeless-classic">
<h3>Timeless Classic</h3>
<p>A whiskey-forward indulgence with a touch of cherry sweetness.</p>
<img src="manhattan.png" alt="Timeless Classic Image Placeholder">
</div>
<div class="recipe" id="black-widow">
<h3>Black Widow</h3>
<p>Only the bravest will try, and only the strongest will survive. </p>
<img src="bw.png" alt="Black Widow Image Placeholder">
</div>
<div class="recipe" id="moscow-magic">
<h3>Moscow Magic</h3>
<p>A refreshing blend of lime, ginger, and vodka served over ice.</p>
<img src="moscow.png" alt="Moscow Magic Image Placeholder">
</div>
<div class="recipe" id="sunrise-dream">
<h3>Sunrise Dream</h3>
<p>A burst of tequila and orange, with a dreamy gradient of color.</p>
<img src="ts.png" alt="Sunrise Dream Image Placeholder">
</div>
<div class="recipe" id="ginger-spark">
<h3>Virgin Spark</h3>
<p>Feeling a little too shwifty already? Take a break with this delicious mocktail.</p>
<img src="gl.png" alt="Ginger Spark Image Placeholder">
</div>
<div class="recipe" id="citrus-twist">
<h3>Citrus Twist</h3>
<p>A crisp and tart martini with the essence of citrus.</p>
<img src="ldm.png" alt="Citrus Twist Image Placeholder">
</div>
<div class="recipe" id="skyline-breeze">
<h3>Skyline Breeze</h3>
<p>An elevated gin blend with a hint of pomegranate.</p>
<img src="aviation.png" alt="Skyline Breeze Image Placeholder">
</div>
<div class="recipe" id="pomegranate-splash">
<h3>Pomegranate Splash</h3>
<p>A vibrant, tangy pomegranate martini with a twist of lime.</p>
<img src="pm.png" alt="Pomegranate Splash Image Placeholder">
</div>
</div>
</body>
</html>