-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
372 lines (372 loc) · 22.6 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
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
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DSugar</title>
<link rel="shortcut icon" href="/public/images/logo/logo-dsugar.png" type="image/x-icon">
<link rel="stylesheet" href="/public/library/animate.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./public/style.css">
<link rel="stylesheet" href="./public/responsive.css">
</head>
<body>
<main>
<section class="section-1">
<div class="content-1">
<div class="content-top">
<div class="content-left">
<img class="wow fadeInUp" data-wow-delay="0.3s" src="./public/images/logo/logo-dsugar.png" alt="">
<div class="content-text">
<h4 class="wow fadeInUp" data-wow-delay="0.4s">Cùng Balo Xinh Khám Phá Thế Giới !</h4>
<h1 class="wow fadeInUp" data-wow-delay="0.5s">Sale <span>off 50%</span> tất cả các loại balo !</h1>
<ul>
<li class="wow fadeInUp" data-wow-delay="0.2s">Kiểu dáng thời trang, hiện đại</li>
<li class="wow fadeInUp" data-wow-delay="0.3s">Màu sắc đa dạng, phù hợp với mọi phong cách</li>
<li class="wow fadeInUp" data-wow-delay="0.4s">Chất liệu cao cấp, bền đẹp</li>
<li class="wow fadeInUp" data-wow-delay="0.5s">Freeship toàn quốc - Mua ngay!</li>
</ul>
<a href="" class="call-action wow fadeInUp" data-wow-delay="0.5s">Xem ngay</a>
</div>
</div>
<div class="content-right">
<img id="img-main" class="wow fadeInUp" data-wow-delay="0.4s" src="./public/images/products/product-1.jpg" alt="">
</div>
</div>
<div class="content-bottom wow fadeInUp" data-wow-delay="0.5s">
<div class="box-img wow fadeInUp" data-wow-delay="0.5s">
<img class="active" src="./public/images/products/product-1.jpg" alt="">
<img src="./public/images/products/product-2.jpg" alt="">
<img src="./public/images/products/product-4.jpg" alt="">
<img src="./public/images/products/product-5.jpg" alt="">
</div>
</div>
</div>
</section>
<section class="section-2">
<div class="content-2">
<div class="content-left-2">
<div class="box-rotate"></div>
<div class="content-left-item-2 active wow fadeInUp" data-wow-delay="0.3s">
<h1>1</h1>
<h3>Thiết kế đa dạng</h3>
<p>Balo thể thao, balo du lịch, và nhiều mẫu khác đang chờ bạn.</p>
</div>
<div class="content-left-item-2 wow fadeInUp" data-wow-delay="0.4s">
<h1>2</h1>
<h3>Chất lượng hàng đầu</h3>
<p>Balo bền, chống thấm nước, và đáng tin cậy.</p>
</div>
<div class="content-left-item-2 wow fadeInUp" data-wow-delay="0.5s">
<h1>3</h1>
<h3>Bảo hành dài hạn</h3>
<p>Chúng tôi cam kết bảo hành sản phẩm trong thời gian dài.</p>
</div>
<div class="content-left-item-2 wow fadeInUp" data-wow-delay="0.6s">
<h1>4</h1>
<h3>Here’s your reasons</h3>
<p>Nhận balo trong thời gian ngắn nhất.</p>
</div>
</div>
<div class="content-right-2">
<h1 class="wow fadeInUp" data-wow-delay="0.2s">Tại Sao Chọn DSugar?</h1>
<h4 class="wow fadeInUp" data-wow-delay="0.3s">Balo độc đáo - Thể hiện phong cách riêng của bạn!</h4>
<p class="wow fadeInUp" data-wow-delay="0.4s">Khám phá bộ sưu tập balo độc đáo tại DSugar - nơi bạn có thể tìm thấy những chiếc balo thú vị và phản ánh phong cách riêng của bạn. Từ những mẫu thiết kế độc đáo đến những xu hướng mới nhất, DSugar mang đến cho bạn sự lựa chọn hoàn hảo để thể hiện cá tính và phong cách cá nhân của mình.</p>
<a href="" class="call-action wow fadeInUp" data-wow-delay="0.5s">Khám phá ngay</a>
</div>
</div>
</section>
<section class="section-3">
<div class="content-3">
<div class="content-bg"></div>
<div class="content-item-3">
<img class="wow fadeInUp" data-wow-delay="0.3s" src="./public/images/products/product-5.jpg" alt="">
<div class="box-1">
<img class="wow fadeInUp" data-wow-delay="0.3s" src="./public/images/products/product-6.jpg" alt="">
<div class="box-text wow fadeInUp" data-wow-delay="0.4s">
<h1>Sự Phong Phú Trong Sự Lựa Chọn</h1>
<span>Đến với DSugar, bạn sẽ khám phá một thế giới của sự đa dạng và sự lựa chọn. Từ những mẫu balo cổ điển đến những xu hướng mới.</span>
</div>
</div>
<div class="box-2">
<div class="box-text wow fadeInUp" data-wow-delay="0.3s">
<h1>Balo chất lượng cao</h1>
<span>DSugar - lựa chọn tin cậy cho phong cách và tiện ích. Chất liệu và thiết kế hoàn hảo mang lại sự đẳng cấp và niềm tin trong mọi chuyến đi.</span>
</div>
<img class="wow fadeInUp" data-wow-delay="0.4s" src="./public/images/products/product-7.jpg" alt="">
</div>
</div>
</div>
</section>
<section class="section-4">
<div class="content-4">
<h1 class="wow fadeInUp" data-wow-delay="0.3s">Những Đánh Giá Của <span>Khách Hàng</span></h1>
<p class="wow fadeInUp" data-wow-delay="0.4s">Đây là một số đánh giá của khách hàng khi trải nghiệm sản phẩm của DSugar</p>
<div class="evaluate">
<div class="evaluate-item wow fadeInUp" data-wow-delay="0.4s">
<img src="./public/images/users/user-1.jpg" alt="">
<div class="evaluate-content">
<h4>Thanh Lam</h4>
<p>Tôi hoàn toàn hài lòng với sản phẩm mà tôi đã mua từ DSugar! Balo không chỉ đẹp mắt mà còn rất chất lượng và tiện ích.</p>
<div class="star">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
</div>
<div class="evaluate-item wow fadeInUp" data-wow-delay="0.5s">
<img src="./public/images/users/user-2.jpg" alt="">
<div class="evaluate-content">
<h4>Thanh Nhã</h4>
<p>Đây là lần đầu tiên tôi mua balo từ DSugar và tôi rất ấn tượng! Sản phẩm đúng như mô tả, chất lượng rất tốt và giá cả hợp lý.</p>
<div class="star">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
</div>
<div class="evaluate-item wow fadeInUp" data-wow-delay="0.6s">
<img src="./public/images/users/user-3.jpg" alt="">
<div class="evaluate-content">
<h4>Thành Đường</h4>
<p>DSugar thực sự là một điểm đến tin cậy cho balo chất lượng! Sản phẩm tuyệt vời, dịch vụ tuyệt vời và giá cả hợp lý.</p>
<div class="star">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-5">
<div class="content-5">
<h1 class="wow fadeInUp" data-wow-delay="0.3s"><span>DSugar</span> Mang Lại Sự Tự Tin và Phong Cách Riêng Cho Mỗi Khách Hàng</h1>
<div class="hr-group">
<span></span>
<span><i class="fa-regular fa-gem"></i></span>
<span></span>
</div>
<p class="wow fadeInUp" data-wow-delay="0.4s">Dưới sự đồng hành của DSugar, mỗi khách hàng sẽ khám phá sự tự tin và phong cách riêng của mình. Với các sản phẩm chất lượng và độc đáo, chúng tôi cam kết làm nổi bật cá tính của bạn trong mọi bước đi.</p>
<div class="content-group-5">
<div class="content-group-item-5 wow fadeInUp" data-wow-delay="0.4s">
<i class="fa-solid fa-hands-asl-interpreting"></i>
<h3>Tiếng Nói và Phong Cách</h3>
<p>Chúng tôi luôn tôn trọng sự cá nhân hóa và tính độc đáo của từng khách hàng. </p>
</div>
<div class="content-group-item-5 wow fadeInUp" data-wow-delay="0.5s">
<i class="fa-solid fa-users"></i>
<h3>Khách Hàng</h3>
<p>Khách hàng luôn là trung tâm trong mọi hoạt động của chúng tôi.</p>
</div>
<div class="content-group-item-5 wow fadeInUp" data-wow-delay="0.6s">
<i class="fa-solid fa-code-commit"></i>
<h3>Tương Lai và Cam Kết</h3>
<p>Tương lai của chúng tôi: Cộng đồng mạnh mẽ, đồng hành cùng bạn mỗi chuyến đi.</p>
</div>
<div class="content-group-item-5 wow fadeInUp" data-wow-delay="0.7s">
<i class="fa-solid fa-bullseye"></i>
<h3>Sứ Mệnh và Mục Tiêu</h3>
<p>Tự tin, tiện ích. DSugar - Lựa chọn hàng đầu cho balo chất lượng và phong cách.</p>
</div>
</div>
</div>
</section>
<section class="section-6">
<div class="content-6">
<h1 class="wow fadeInUp" data-wow-delay="0.3s">Khám Phá Balo Chất Lượng từ DSugar - <span>Xem Ngay!</span></h1>
<p class="wow fadeInUp" data-wow-delay="0.4s">Đắm chìm trong thế giới của sự độc đáo và chất lượng với bộ sưu tập balo từ DSugar. Từ thiết kế tinh tế đến chất liệu cao cấp, mỗi chiếc balo tại DSugar là một biểu tượng của phong cách và sự tiện ích.</p>
<div class="products">
<div class="product-item wow fadeInUp" data-wow-delay="0.4s">
<img src="./public/images/products/product-5.jpg" alt="">
<h3>Brasilia Bag</h3>
<div class="price">
<span>800.000<sup>đ</sup></span>
<del>1.600.000<sup>đ</sup></del>
</div>
<a href="" class="call-action-2">Chi tiết</a>
</div>
<div class="product-item wow fadeInUp" data-wow-delay="0.5s">
<img src="./public/images/products/product-6.jpg" alt="">
<h3>WHO.A.U STEVE</h3>
<div class="price">
<span>600.000<sup>đ</sup></span>
<del>1.200.000<sup>đ</sup></del>
</div>
<a href="" class="call-action-2">Chi tiết</a>
</div>
<div class="product-item wow fadeInUp" data-wow-delay="0.6s">
<img src="./public/images/products/product-4.jpg" alt="">
<h3>Tarp Backpack</h3>
<div class="price">
<span>1.400.000<sup>đ</sup></span>
<del>700.000<sup>đ</sup></del>
</div>
<a href="" class="call-action-2">Chi tiết</a>
</div>
</div>
</div>
</section>
<section class="section-7">
<div class="content-7">
<h1 class="wow fadeInUp" data-wow-delay="0.4s">Tạo Nên Phong Cách Riêng 1 Số Thống Kê từ DSugar</h1>
<div class="statiscal">
<div class="statiscal-item wow fadeInUp" data-wow-delay="0.4s">
<h2>45k</h2>
<span>Sản phẩm đã bán</span>
</div>
<div class="statiscal-item wow fadeInUp" data-wow-delay="0.5s">
<h2>23k</h2>
<span>Theo dõi instagram</span>
</div>
<div class="statiscal-item wow fadeInUp" data-wow-delay="0.6s">
<h2>19k</h2>
<span>Theo dõi tiktok</span>
</div>
<div class="statiscal-item wow fadeInUp" data-wow-delay="0.7s">
<h2>33k</h2>
<span>Theo dõi facebook</span>
</div>
</div>
</div>
</section>
<section class="section-8">
<div class="content-8">
<div class="content-left-8">
<div class="content-left-item-8">
<h4>Đăng ký nhận thông tin</h4>
<p>Điền thông tin của bạn dưới đây để nhận thông tin mới nhất từ chúng tôi.</p>
<form action="">
<input type="text" placeholder="Tên của bạn" required>
<input type="email" placeholder="Email của bạn" required>
<input type="number" placeholder="Số điện thoại của bạn" required>
<button>Đăng ký</button>
</form>
</div>
<div class="content-left-item-8">
<p>Thời hạn ưu đãi</p>
<div class="time">
<div class="time-item">
<span class="days">01</span>
<span>ngày</span>
</div>
<div class="time-item">
<span class="hours">01</span>
<span>Giờ</span>
</div>
<div class="time-item">
<span class="minutes">01</span>
<span>Phút</span>
</div>
<div class="time-item">
<span class="seconds">01</span>
<span>Giây</span>
</div>
<div class="d-none" style="position: relative;">
<i class="fa-solid fa-comment"></i>
<div class="price-2">
<del>1.600.000<sup>đ</sup></del>
<span>800.000<sup>đ</sup></span>
</div>
</div>
</div>
<div class="countdown" style="color: red;"></div>
</div>
</div>
<div class="content-right-8">
<h1 class="wow fadeInUp" data-wow-delay="0.4s">Lí do bạn nên chọn <span>DSugar</span></h1>
<p class="wow fadeInUp" data-wow-delay="0.5s">Bởi vì chúng tôi mang đến cho bạn sản phẩm chất lượng, dịch vụ tận tâm và trải nghiệm mua sắm tiện lợi nhất.</p>
<div class="box">
<div class="box-item wow fadeInUp" data-wow-delay="0.5s">
<i class="fa-solid fa-shapes"></i>
<span>Sản phẩm chất lượng tốt.</span>
</div>
<div class="box-item wow fadeInUp" data-wow-delay="0.6s">
<i class="fa-solid fa-shapes"></i>
<span>Độc đáo và phong cách mới mẽ.</span>
</div>
<div class="box-item wow fadeInUp" data-wow-delay="0.7s">
<i class="fa-solid fa-shapes"></i>
<span>Dịch vụ khách hàng tận tâm</span>
</div>
</div>
<div class="list-img">
<img class="wow fadeInUp" data-wow-delay="0.6s" src="./public/images/products/product-9.jpg" alt="">
<img class="wow fadeInUp" data-wow-delay="0.5s" src="./public/images/products/product-8.jpg" alt="">
<img class="wow fadeInUp" data-wow-delay="0.4s" src="./public/images/products/product-10.jpg" alt="">
</div>
</div>
</div>
</section>
<footer>
<div class="footer-content">
<ul class="wow fadeInUp" data-wow-delay="0.4s">
<h2>dsugar.com - DSUGAR</h2>
<li>
<i class="fa-solid fa-location-dot"></i>
<p>Địa chỉ: Đà Nẵng, quận Liên Chiểu, phường Hòa Minh</p>
</li>
<li>
<i class="fa-solid fa-phone"></i>
<p>Hotline: <a href="tel:0815416086">0815416086</a></p>
</li>
<li>
<i class="fa-regular fa-envelope"></i>
<p>Email: <a href="mailto:duongnt3009@gmail.com">duongnt3009@gmail.com</a></p>
</li>
<li>
<i class="fa-solid fa-globe"></i>
<p>Website: <a href="https://sugar.id.vn/" target="_blank">dsugar.com</a></p>
</li>
<li>
<a href="https://www.facebook.com/profile.php?id=100093887452815" target="_blank"><i class="fa-brands fa-facebook"></i></a>
<a href="https://www.instagram.com/tinhsocode/" target="_blank"><i class="fa-brands fa-instagram"></i></a>
<a href="" target="_blank"><i class="fa-brands fa-tiktok"></i></a>
<a href="https://www.linkedin.com/in/duong-nguyen-thanh-23538427a/" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
<a href="https://github.com/Duong04" target="_blank"><i class="fa-brands fa-github"></i></a>
</li>
</ul>
<div class="policy wow fadeInUp" data-wow-delay="0.5s">
<h2>Dịch vụ khách hàng</h2>
<ul>
<li>
<i class="fa-solid fa-cart-plus"></i>
<span>Chính sách hoàn trả và vận chuyển</span>
</li>
<li>
<i class="fa-solid fa-shield-halved"></i>
<span>Chính sách bảo mật</span>
</li>
<li>
<i class="fa-solid fa-book"></i>
<span>Điều khoản sử dụng</span>
</li>
<li>
<i class="fa-regular fa-address-card"></i>
<span>Liên hệ chúng tôi</span>
</li>
</ul>
<div class="certificate wow fadeInUp" data-wow-delay="0.6s">
<img src="https://w.ladicdn.com/5c7362c6c417ab07e5196b05/visa-20200311062250-20200312040726.svg" alt="">
<img src="https://w.ladicdn.com/5c7362c6c417ab07e5196b05/mastercard-20200311062250-20200312040745.svg" alt="">
<img src="https://w.ladicdn.com/5c7362c6c417ab07e5196b05/bo-cong-thuong-20200311062345-20200312040731.svg" alt="">
</div>
</div>
</div>
</footer>
<div class="copy-right">©2024 copy right duongnt3092004</div>
<a href="#" class="return"><i class="fa-solid fa-arrow-up"></i></a>
</main>
<script src="/public/library/wow.min.js"></script>
<script src="./public/main.js"></script>
</body>
</html>