File size: 12,437 Bytes
4ab1fb2
5533b22
4ab1fb2
 
 
6d6bdc7
4ab1fb2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2a8a842
 
 
 
 
4ab1fb2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5533b22
4ab1fb2
90628fa
4ab1fb2
2a8a842
 
 
4ab1fb2
2a8a842
 
 
 
4ab1fb2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2a8a842
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
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HomeFoody - Thực phẩm sạch</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
	<meta name="viewport" content ="width=device-width, initial-scale=1.0"/>
</head>
<body>
    <div id="top">
        <div id="top-content">
            <div id="top-left">
                <span>Hotline: <b>19001008</b></span>
                <span class="address">Địa chỉ: Số 1 Đỗ Thế Diên, Nhân Hòa, Mỹ Hào, Hưng Yên</span>
            </div>
            <div id="top-right">
                <a href="login.html">Đăng nhập</a> hoặc 
                <a href="signup.html">Đăng ký</a>
            </div>
        </div>
    </div>
    
	 <div id="banner">
        <div id="banner-content">
            <div id="logo" >
                <img src="dualeo.jpg" alt="Logo" />
            </div>
            <div id="deliver">
                <img src="xeoto.jpg" alt="Delivery" />
                <div class="text-block">
                    <span>Miễn phí vẫn chuyển</span><br />
                    <span>bán kính 10km</span>
                </div>
            </div>
            <div id="support">
                <img src="@.jpg" alt="Support" />
                <div class="text-block">
                    <span>Hỗ trợ 24/7</span><br />
                    <span>Hotline: 19001008</span>
                </div>
            </div>
            <div id="time">
                <img src="dongho.jpg" alt="Time" />
                <div class="text-block">
                    <span>Thời gian làm việc</span><br />
                    <span>T2-T7, 8:00-17:00</span>
                </div>
            </div>
            <div id="cart">
                <a href="#">Giỏ hàng(0)</a>
            </div>
        </div>
	</div>
    <script>
		//alert("Hello JavaScript!");
		//document.write("Hello JavaScript!");
		//document.getElementById("banner").innerHTML="<h1>Thuc pham sach HomeFoody</h1>"
	</script>
    <div id="menu">
		<div id="menu-content">
            <!-- Hamburger Menu Button (chỉ hiện trên mobile) -->
            <div class="hamburger-menu">
                <button class="hamburger-btn" onclick="toggleMenu()">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </div>
            
            <!-- Menu chính -->
            <ul id="main-menu">
                <li><a href="#"> Trang chủ</a></li>
                <li><a href="#"> Giới thiệu</a></li>
                <li><a href="#"> Sản phẩm</a>
                    <ul>
                        <li><a>Hoa quả sạch</a></li>
                        <li><a>Hoa quả nhập khẩu</a></li>
                        <li><a>Hoa quả tươi</a></li>
                        <li><a>Hoa quả Việt</a></li>
                        <li><a>Hoa quả bốn mùa</a></li>
                    </ul>
                </li>
                <li><a href="#"> Tin Tức</a>
                    <ul >
                        <li><a>Tin quốc tế</a></li>
                        <li><a>Tin trong nước</a></li>
                        <li><a>Tin 24h </a></li>
                    </ul>
                </li>
                <li><a href="#"> Khuyến mại</a></li>
                <li><a href="#"> Liên hệ</a></li>
            </ul>
		</div>
	</div>
    <script src="script.js"></script>
    <div id="slideshow">
		<img id="slide" src="slide_1.jpg" alt="silde" />
		<img id="btnBack" src="back.jpg" alt="back" onclick="back()" />
		<img id="btnNext" src="next.jpg" alt="next" onclick="next()"/>
	</div>
	<script>
		setInterval(next,10000)
	
	</script>
    <div id="container">
        <div id="content">
            <div class="cate">
                <h1 class="cate-title">Hoa quả sạch</h1>
                <div class="list-products">
					<div class="col-s-12 col-m-4 col-x-3">
						<div class="product">
							<img class="photo" src="nho.jpg" alt="Nho Mỹ"/><br />
							<a class="name" href="#">Nho Mỹ</a><br />	
							<span class="price">250.000đ</span><br />
							<input class="buy" type="button" value="Chọn mua"/>
						</div>
					</div>
					<div class="col-s-12 col-m-4 col-x-3">
						<div class="product">
							<img class="photo" src="duagang.jpg" alt="Dưa lưới"/><br />
							<a class="name" href="#">Dưa lưới</a><br />
							<span class="price">180.000đ</span><br />
							<input class="buy" type="button" value="Chọn mua"/>
						</div>
					</div>
					<div class="col-s-12 col-m-4 col-x-3">
						<div class="product">
							<img class="photo" src="hongngam.jpg" alt="Hồng Mỹ"/><br />
							<a class="name" href="#">Hồng Mỹ</a><br />
							<span class="price">120.000đ</span><br />
							<input class="buy" type="button" value="Chọn mua"/>
						</div>
					</div>
					<div class="col-s-12 col-m-4 col-x-3">
						<div class="product">
							<img class="photo" src="tao.jpg" alt="Táo Mỹ"/><br />
							<a class="name" href="#">Táo Mỹ</a><br />
							<span class="price">120.000đ</span><br />
							<input class="buy" type="button" value="Chọn mua"/>
						</div>
					</div>
                </div>
				<div class="list-products">
					<div class="col-s-12 col-m-4 col-x-3">
						<div class="product">
							<img class="photo" src="nho.jpg" alt="Nho Mỹ"/><br />
							<a class="name" href="#">Nho Mỹ</a><br />
							<span class="price">250.000đ</span><br />
							<input class="buy" type="button" value="Chọn mua"/>
						</div>
					</div>
					<div class="col-s-12 col-m-4 col-x-3">
						<div class="product">
							<img class="photo" src="duagang.jpg" alt="Dưa lưới"/><br />
							<a class="name" href="#">Dưa lưới</a><br />
							<span class="price">180.000đ</span><br />
							<input class="buy" type="button" value="Chọn mua"/>
						</div>
					</div>
					<div class="col-s-12 col-m-4 col-x-3">
						<div class="product">
							<img class="photo" src="hongngam.jpg" alt="Hồng Mỹ"/><br />
							<a class="name" href="#">Hồng Mỹ</a><br />
							<span class="price">120.000đ</span><br />
							<input class="buy" type="button" value="Chọn mua"/>
						</div>
					</div>
					<div class="col-s-12 col-m-4 col-x-3">
						<div class="product">
							<img class="photo" src="tao.jpg" alt="Táo Mỹ"/><br />
							<a class="name" href="#">Táo Mỹ</a><br />
							<span class="price">120.000đ</span><br />
							<input class="buy" type="button" value="Chọn mua"/>
						</div>
					</div>
                </div>
            </div>
        </div>
    </div>
	<div id="container">
        <div id="content">
            <div class="cate">
                <h1 class="cate-title">Hoa quả sạch</h1>
                <div class="list-products">
					<div class="col-s-12 col-m-4 col-x-3">
						<div class="product">
							<img class="photo" src="nho.jpg" alt="Nho Mỹ"/><br />
							<a class="name" href="#">Nho Mỹ</a><br />
							<span class="price">250.000đ</span><br />
							<input class="buy" type="button" value="Chọn mua"/>
						</div>
					</div>
					<div class="col-s-12 col-m-4 col-x-3">
						<div class="product">
							<img class="photo" src="duagang.jpg" alt="Dưa lưới"/><br />
							<a class="name" href="#">Dưa lưới</a><br />
							<span class="price">180.000đ</span><br />
							<input class="buy" type="button" value="Chọn mua"/>
						</div>
					</div>
					<div class="col-s-12 col-m-4 col-x-3">
						<div class="product">
							<img class="photo" src="hongngam.jpg" alt="Hồng Mỹ"/><br />
							<a class="name" href="#">Hồng Mỹ</a><br />
							<span class="price">120.000đ</span><br />
							<input class="buy" type="button" value="Chọn mua"/>
						</div>
					</div>
					<div class="col-s-12 col-m-4 col-x-3">
						<div class="product">
							<img class="photo" src="tao.jpg" alt="Táo Mỹ"/><br />
							<a class="name" href="#">Táo Mỹ</a><br />
							<span class="price">120.000đ</span><br />
							<input class="buy" type="button" value="Chọn mua"/>
						</div>
					</div>
                </div>
				<div class="list-products">
					<div class="col-s-12 col-m-4 col-x-3">
						<div class="product">
							<img class="photo" src="nho.jpg" alt="Nho Mỹ"/><br />
							<a class="name" href="#">Nho Mỹ</a><br />
							<span class="price">250.000đ</span><br />
							<input class="buy" type="button" value="Chọn mua"/>
						</div>
					</div>
					<div class="col-s-12 col-m-4 col-x-3">
						<div class="product">
							<img class="photo" src="duagang.jpg" alt="Dưa lưới"/><br />
							<a class="name" href="#">Dưa lưới</a><br />
							<span class="price">180.000đ</span><br />
							<input class="buy" type="button" value="Chọn mua"/>
						</div>
					</div>
					<div class="col-s-12 col-m-4 col-x-3">
						<div class="product">
							<img class="photo" src="hongngam.jpg" alt="Hồng Mỹ"/><br />
							<a class="name" href="#">Hồng Mỹ</a><br />
							<span class="price">120.000đ</span><br />
							<input class="buy" type="button" value="Chọn mua"/>
						</div>
					</div>
					<div class="col-s-12 col-m-4 col-x-3">
						<div class="product">
							<img class="photo" src="tao.jpg" alt="Táo Mỹ"/><br />
							<a class="name" href="#">Táo Mỹ</a><br />
							<span class="price">120.000đ</span><br />
							<input class="buy" type="button" value="Chọn mua"/>
						</div>
					</div>
                </div>
            </div>
        </div>
    </div>
	<div id ="chat">
		<a href="https://www.facebook.com/homefooody1" target="_blank">
			<img src="fb.png" alt="Facebook">
		</a>
		<a href="https://bit.ly/4d3QNQf" target="_blank">
			<img src="zl.png" alt="Chat Zalo">
		</a>
		<a href="tel:19001008">
			<img src="dt.png" alt="Gọi điện">
		</a>
		</div>
	</div>
    <div id="footer">
		<div class="footer-container">
			<!-- Cột thông tin liên hệ -->
			<div class="footer-column">
				<h2>📋 Thông tin liên hệ</h2>
				<p><strong>Home Foody</strong> - Chuyên cung cấp thực phẩm sạch, an toàn cho sức khỏe</p>
				<p>📞 Hotline: <b>19001008</b></p>
				<p>🕒 Mở cửa: Thứ 2 - Thứ 7 (8:00 - 17:00)</p>
				<p>✉ Email: [email protected]</p>
				<p>📍 Địa chỉ: Số 1 Đỗ Thế Diên, Nhân Hòa, Mỹ Hào, Hưng Yên</p>
			</div>

			<!-- Cột hỗ trợ khách hàng -->
			<div class="footer-column1">
				<h2>🗣 Hỗ trợ khách hàng</h2>
				<ul class="footer-links">
					<li><a href="#">Trang chủ</a></li>
					<li><a href="#">Sản phẩm</a></li>
					<li><a href="#">Tin tức</a></li>
					<li><a href="#">Giới thiệu</a></li>
					<li><a href="#">Liên hệ</a></li>
					<li><a href="#">Demo Tùy chọn</a></li>
				</ul>
			</div>

			<!-- Cột bản đồ -->
			<div class="footer-column footer-map">
				<h2>📍 Đường đến cửa hàng DUALEO-X</h2>
				<iframe 
					src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3726.2817185209333!2d106.05655447499821!3d20.94119879078073!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135a47e1e283027%3A0x3040976f2392b403!2zMSDEkMaw4budbmcgxJDhu5cgVGjhur8gRGnDqm4sIFRULiBC4bqnbiBZw6puIE5ow6JuLCBN4bu5IEjDoG8sIEjGsG5nIFnDqm4sIFZp4buHdCBOYW0!5e0!3m2!1svi!2s!4v1746700288500!5m2!1svi!2s"
					width="100%" 
					height="250" 
					style="border:0; border-radius: 8px;" 
					allowfullscreen="" 
					loading="lazy">
				</iframe>
			</div>
		</div>
    </div>

    <!-- JavaScript cho hamburger menu -->
    <script>
        function toggleMenu() {
            const menu = document.getElementById('main-menu');
            const hamburger = document.querySelector('.hamburger-btn');
            
            menu.classList.toggle('menu-open');
            hamburger.classList.toggle('active');
        }
        
        // Đóng menu khi click ra ngoài
        document.addEventListener('click', function(event) {
            const menu = document.getElementById('main-menu');
            const hamburger = document.querySelector('.hamburger-menu');
            
            if (!hamburger.contains(event.target) && !menu.contains(event.target)) {
                menu.classList.remove('menu-open');
                document.querySelector('.hamburger-btn').classList.remove('active');
            }
        });
    </script>
</body>
</html>