-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmenu.html
More file actions
308 lines (277 loc) · 13.2 KB
/
menu.html
File metadata and controls
308 lines (277 loc) · 13.2 KB
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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu | Choco Hoho</title>
<link rel="stylesheet" href="css/menu.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Overlock:wght@400;700;900&family=Pacifico&family=Taviraj:wght@400;700&display=swap"
rel="stylesheet">
</head>
<body>
<header id="main-header">
<nav class="primary">
<div class="brand">
<h1 class="my-pacifico">Choco Hoho</h1>
</div>
<ul class="nav-links">
<li><a href="home.html">Home</a></li>
<li><a href="menu.html" class="active-page">Menu</a></li>
<li><a href="aboutus.html">About Us</a></li>
</ul>
</nav>
</header>
<section class="category-bar">
<div class="category">
<div class="search">
<form class="search-bar-wrapper" id="searchWrapper">
<button type="button" class="search-toggle-btn" id="searchToggleBtn">
<img src="images/menu/search.png" alt="Tìm kiếm" class="search-icon">
</button>
<input type="text" placeholder="Food" class="search-input">
</form>
</div>
<nav class="list">
<a class="bread"><img src="images/menu/bread.png" alt="Bánh mì" class="category-icon">
<p>Bread</p>
</a>
<a class="cake"><img src="images/menu/cake.png" alt="Bánh kem" class="category-icon">
<p>Cake</p>
</a>
<a class="pastry"><img src="images/menu/pastry.png" alt="Bánh ngọt"
class="category-icon">
<p>Pastry</p>
</daiv>
<a class="coffee"><img src="images/menu/coffee.png" alt="Cà phê" class="category-icon">
<p>Coffee</p>
</a>
<a class="tea"><img src="images/menu/tea.png" alt="Trà" class="category-icon">
<p>Tea</p>
</a>
</nav>
<button class="cart-toggle-btn" id="cartToggleBtn">
<img src="images/menu/cart.png" alt="Giỏ hàng">
<span class="cart-item-count">0</span>
</button>
</div>
</section>
<header id="sticky-header" class="hidden">
<nav class="sticky">
<div class="nav-container">
<div class="hamburger" id="hamburger">☰</div>
<div class="sub-brand">
<h1 class="my-pacifico">Choco Hoho</h1>
</div>
</div>
</nav>
</header>
<div class="overlay" id="overlay"></div>
<aside class="side-menu" id="sideMenu">
<button id="closeBtn">☰</button>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="aboutus.html">About Us</a></li>
</ul>
</aside>
<section class="breadcrumb-container hidden" id="breadcrumbContainer">
<section class="breadcrumb-bar" id="breadcrumbBar">
<div class="breadcrumb-content"></div>
</section>
</section>
<main id="main-content-area">
<section id="bread" class="content-block intro-block my-overlock bg-left">
<div class="content-wrapper">
<div class="image-block">
<img src="images/menu/banhmi.jpg" alt="Basket of fresh bread" class="intro-image">
</div>
<div class="text-block">
<h2 class="title">Bread — The Original Flavor, Fresh from the Oven</h2>
<p class="description">
From the simplest ingredients, we craft loaves full of character - where the aroma of flour,
yeast, and heat blends into perfection.
</p>
<ul class="summary-list">
<li><strong>Classic Breads:</strong> Baguette, Ciabatta, Focaccia - crisp crust and soft, airy
crumb.</li>
<li><strong>Sourdough & Rye Breads:</strong> Naturally fermented, slightly tangy and
gut-friendly.</li>
<li><strong>Whole Wheat & Multigrain:</strong> Rich in fiber, hearty and wholesome taste.</li>
<li><strong>Stuffed & Cheese Breads:</strong> Buttery aroma, rich and flavorful in every bit.
</li>
</ul>
<p class="description button-spacing">
Perfect for breakfast, picnics, or a quick, energizing snack - a good slice of bread can
brighten your entire day.
</p>
<button class="btn bread-link">Discover more</button>
</div>
</div>
</section>
<section id="pastry" class="content-block intro-block my-overlock bg-right">
<div class="content-wrapper layout-right">
<div class="image-block">
<img src="images/menu/banhngot.jpg" alt="Assortment of fresh pastries" class="intro-image">
</div>
<div class="text-block">
<h2 class="title">Pastry — Buttery Layers of Delicate Perfection</h2>
<p class="description">
From golden, flaky layers to rich buttery aroma, each pastry is baked to bring a taste of pure
indulgence.
</p>
<ul class="summary-list">
<li><strong>Croissant & Pain au Chocolate:</strong> Flaky and golden, rich in buttery aroma.
</li>
<li><strong>Danish Pastries:</strong> Sweet layers filled with custard, fruit or cream cheese.
</li>
<li><strong>Puff Pastry Treats:</strong> Light, crispy, and melts gently in every bite.</li>
<li><strong>Savory Pastries:</strong> Cheese, ham, or mushroom fillings with rich flavors.</li>
</ul>
<p class="description button-spacing">
Ideal for an elegant tea time or a sweet indulgence, each pastry adds a touch of joy and
elegance to your day.
</p>
<button class="btn pastry-link">Discover more</button>
</div>
</div>
</section>
<section id="cake" class="content-block intro-block my-overlock bg-left">
<div class="content-wrapper">
<div class="image-block">
<img src="images/menu/banhkem.jpg" alt="Celebration Cake" class="intro-image">
</div>
<div class="text-block">
<h2 class="title">Cake — Sweet Creations for Every Celebration</h2>
<p class="description">
Soft, moist, and artfully crafted — each cake is a blend of flavor, texture, and beauty made to
delight every occasion.
</p>
<ul class="summary-list">
<li><strong>Classic Cakes:</strong> Tiramisu, Cheesecake, Chocolate Cake - smooth, rich, and
timeless.</li>
<li><strong>Fruit & Mousse Cakes:</strong> Fresh fruit, light mousse, perfectly balanced
sweetness.</li>
<li><strong>Layer & Cream Cakes:</strong> Soft sponge layers with creamy, delicate fillings.
</li>
<li><strong>Mini & Specialty Cakes:</strong> Cupcakes, Roll Cakes, and signature creations.</li>
</ul>
<p class="description button-spacing">
Perfect for birthdays, gatherings, or a quiet afternoon treat - our cakes bring joy, sweetness,
and a touch of celebration to every moment.
</p>
<button class="btn cake-link">Discover more</button>
</div>
</div>
</section>
<section id="story" class="content-block my-pacifico">
<div class="story-wrap bg-left">
<h3 class="story-title">"Freshly Baked Every Day"</h3>
<div class="story-body">
<div class="story-logo-box">
<img src="images/menu/logo-choco.png" alt="Choco Hoho Bakery Logo" class="story-logo">
</div>
<p class="story-desc">
It's more than just a promise — it's our way of baking. Each morning, our bakers craft
everything from scratch using only quality, handpicked ingredients. From golden breads to
buttery pastries and soft cakes, every piece is made with care and warmth. So every visit feels
like the first — fresh, comforting, and full of flavor.
</p>
</div>
</div>
</section>
<section id="product-grid-area" class="content-block hidden"></section>
</main>
<section id="banner" class="content-block my-overlock">
<div class="banner-wrap">
<h2 class="banner-title">Find CHOCO HOHO Near Me</h2>
<button class="btn banner-btn">Find a store</button>
</div>
</section>
<footer>
<div class='footer-content-container'>
<!-- Cột 1 -->
<div class='footer-column1'>
<!-- Dòng chứ logo và brand -->
<div class="footer-brand-container">
<img src="images/menu/logo-choco.png" alt="Logo Choco Hoho" class="footer-logo">
<h2 class="footer-brand">Choco Hoho</h2>
</div>
<!-- Dòng chứa icon mạng xã hội -->
<div class='footer-socials'>
<a href=""><img src="images/menu/facebook.png" alt="icon facebook"></a>
<a href=""><img src="images/menu/youtube.png" alt="icon youtube"></a>
<a href=""><img src="images/menu/trello.png" alt="icon trello"></a>
<a href=""><img src="images/menu/slack.png" alt="icon slack"></a>
<a href=""><img src="images/menu/envelope.png" alt="icon envelope"></a>
</div>
<!-- Dòng điện thoại -->
<div class="footer-contact">
<img src="images/menu/phone-call.png" alt="icon phone">
<span>113-114-115-911</span>
</div>
</div>
<!-- Cột 2 Company -->
<div class='footer-column2'>
<h3 class="footer-title2">COMPANY</h3>
<ul>
<li>Locations</li>
<li>Community</li>
<li>Careers</li>
</ul>
</div>
<!-- Cột 3 Help -->
<div class='footer-column3'>
<h3 class="footer-title3">HELP</h3>
<ul>
<li>FAQs</li>
<li>Contact Us</li>
</ul>
</div>
<!-- Cột 4 Choco's in your box -->
<div class='footer-column4'>
<h3 class="footer-title4">CHOCO'S IN YOURS INBOX</h3>
<ul>
<li>Our story</li>
<li>For special offers, new goodies, and the latest news join our mailing list.</li>
</ul>
<form>
<input type="email" id="email" name="email" placeholder="Enter your email here" />
<input type="submit" value="Send" />
</form>
</div>
<div class="footer-bottom">
<nav class="footer-legal-links">
<a href="#">Privacy Policy</a>
<a href="#">CA Privacy Act</a>
<a href="#">Accessibility</a>
<a href="#">Terms</a>
</nav>
<p class="footer-copyright">
©2025 Choco Hoho's Bakery & Cafe™ All rights reserved.
</p>
</div>
</div>
</footer>
<div class="cart-sidebar" id="cartSidebar">
<div class="cart-header">
<h3>My Cart</h3>
<button class="cart-close-btn" id="cartCloseBtn">×</button>
</div>
<div class="cart-body">
<p>Your cart is empty</p>
</div>
<div class="cart-footer">
<div class="cart-total">
<span>Total:</span>
<span id="cartTotalPrice">$0</span>
</div>
<button class="checkout-btn">Check Out</button>
</div>
</div>
<div class="overlay" id="cartOverlay"></div>
<script src="js/menu.js"></script>
</body>
</html>