-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
513 lines (465 loc) 路 22.8 KB
/
Copy pathindex.html
File metadata and controls
513 lines (465 loc) 路 22.8 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
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
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0" />
<link rel="icon" href="../imgs/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="./css/style.css" />
<title>Fastkart.</title>
</head>
<body>
<header class="header">
<section class="header__main ">
<section class="bg-green" >
<section class="header__green-content bg-green container container-sm container-lg container-sm text-white d-flex flex-row align-content-center justify-content-between align-items-center mx-auto p-2">
<span class="buy__text"
>Somethng you love is now on sale!
<a href="" class="text-decoration-none text-white fw-bold border-bottom">Buy Now!</a>
</span>
<li class="d-flex pointer-event">
<section class="d-flex gap-2 align-content-center align-items-center flex-nowrap flex-row flex-nowrap container-fluid">
<figure class="d-flex gap-2 align-content-center align-items-center p-0 m-0" >
<img src="./imgs/en.png" alt="flags" width="25px" height="25px"/>
<select name="idioms" id="idioms" class= "w-20 h-2 border-0 bg-green text-white">
<option value="en">English</option>
<option value="es">Spanish</option>
</select>
</figure>
<select name="currency" id="currency" class=" d-flex border-0 bg-green text-white ">
<option value="USD">USD</option>
<option value="COP">COP</option>
</select>
</section>
</section>
</section>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content modal__shopping">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body d-flex flex-column align-content-center justify-content-center align-items-start container-cart">
</div>
<div class="modal-footer">
<div class="buy">
<span>Total:</span>
<span class="total-price"></span>
</div>
<div class="buttons">
<button type="button" class="btn btn-outline-success " id="view-cart" data-bs-dismiss="modal">View Cart</button>
<button type="button" class="btn bg-green text-white btn-checkout check-out">Checkout</button>
</div>
</div>
</div>
</div>
</div>
</section>
</header>
<!-- Modal -->
<!-- Toast -->
<div class="toast-container">
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="addToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<a href="./index.html">
<img src="./imgs/logo.png" class="rounded me-2" style="width: 64px;">
</a>
<strong class="me-auto"></strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Se ha agregado al producto al carrito
</div>
</div>
</div>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="removeToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="./imgs/logo.png" class="rounded me-2" alt="" style="width: 64px;" >
<strong class="me-auto"></strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Se ha eliminado el producto correctamente
</div>
</div>
</div>
</div>
<!-- Toast -->
<div id="bg-white" >
<!-- pt-3 d-flex justify-content-between align-items-center container -->
<div class="d-flex pt-3 justify-content-between align-content-center container " id="navbar_top">
<section class="pt-2 d-flex align-items-center navbar__content">
<figure class="">
<img src="./imgs/logo.png" alt="" srcset="" class="d-flex logo" style="width: 150.65px;height:26.863px;">
</figure>
</section>
<section class="d-flex ">
<div class="d-flex ">
<button type="button" class="rounded-1 w-5 h-30 border-0" >
<span class="material-symbols-outlined p-2 bg-grey w-100" id="location__ico">
location_on
</span>
</button>
<form class="d-flex " role="search">
<input class="form-control ms-2" type="search" placeholder="I'm searching for..." aria-label="Search" style="width: 450px;">
<button class="btn bg-search " type="submit"><span class="material-symbols-outlined " id="search__ico">
search
</span></button>
</form>
</div>
</section>
<section class="d-flex section__buttons ">
<button type="button" id="phone" class="text-dark border-0 pointer-event bg-white ps-2 pe-3 border-end">
<span class="material-symbols-outlined"> phone_in_talk </span>
</button>
<button type="button" id="favorite" class="text-dark border-0 pointer-event bg-white ps-2 pe-3 border-end favorites">
<span class="material-symbols-outlined"> favorite </span>
</button>
<button type="button" id="cart" class="text-dark border-0 pointer-event bg-white ps-2 pe-3 border-end shopping" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
<!-- <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button> -->
<span class="material-symbols-outlined position-relative "> shopping_cart <span class="position-absolute top-0 start-100 translate-middle badge rounded-1 bg-red alertpop">
<span id="cart-items">0</span>
<span class="visually-hidden">unread messages</span>
</span></span>
</button>
<button type="button" id="account" class="text-dark border-0 pointer-event bg-white ps-2 pe-3">
<a href="" class="text-decoration-none text-black"> <span class="material-symbols-outlined">person </span></a>
</button>
</section>
</div>
</section>
</div>
<section class="pt-4 justify-content-between align-items-center container d-flex section__btn-light" >
<button type="button" id="all__category" class="d-flex border-0 align-items-center justify-content-center flex-shrink-0 pointer-event rounded-1 bg-green text-white" style="padding: 26.950px 13.650px; width: 207.550px; height:51.300px ;">
<span class="material-symbols-outlined" id="span__all" > list </span
> <a href="#category" class="text-decoration-none text-reset">All Categories</a>
</button>
<nav class="d-flex gap-5 ps-5 nav__expand">
<ul class="d-flex gap-5 list-unstyled">
<li class="d-flex pointer-event">
Home
<span class="material-symbols-outlined"> expand_more </span>
</li>
<li class="d-flex pointer-event">
Shop
<span class="material-symbols-outlined"> expand_more </span>
</li>
<li class="d-flex pointer-event">
Products
<span class="material-symbols-outlined"> expand_more </span>
</li>
<li class="d-flex pointer-event">
Mega Menu
<span class="material-symbols-outlined"> expand_more </span>
</li>
<li class="d-flex pointer-event">
Blog
<span class="material-symbols-outlined"> expand_more </span>
</li>
<li class="d-flex pointer-event">
Pages
<span class="material-symbols-outlined"> expand_more </span>
</li>
<li class="d-flex pointer-event">
Contact
<span class="material-symbols-outlined"> expand_more </span>
</li>
</ul>
</nav>
<button class="light d-flex bg-success-subtle border-0 p-2 rounded-1 text-success pointer-event light-btn">
<span class="material-symbols-outlined"> bolt </span>
</button>
</section>
</section>
</header>
<main class="main container">
<section class="main__section container pt-4 custom-container">
<section class="grid row gap-4">
<section class="main__big col-md-8">
<div class="imagen__big">
<!-- <figure>
<img src="./imgs/big-off.png" alt="" srcset="" />
</figure> -->
</div>
<div class="big__text">
<span class="offer__tittle">Exclusive offer <span class="span__off0">30% Off</span></span>
<span class="h1__text">STAY HOME & DELIVERED YOUR<span class="high__light">DAILY NEEDS</span></span>
<span class="big__small__font mb-5">Vegetables contain many vitamins and minerals that are good for your health</span>
<button type="button" class="shop__now">Shop Now! <i class="fa-solid fa-arrow-right-long ps-1 fs-6 hvr-forward "></i></button>
</div>
</section>
<div class="grid row col-4 gap-4 small__two-cards">
<section class="main__small__1 small1 g-col-md-12" >
<div class="small__text">
<span class="small__off">45%<span class="test">OFF</span></span>
<span class="small__header1">Nut Collection</span>
<span class="small__p">We deliver organic vetetables & fruits</span>
<button type="button">Shop now <i class="fa-solid fa-arrow-right-long ps-1 fs-6 hvr-forward "></i></button>
</div>
</section>
<section class="main__small__2 small1 col-md-12">
<div class="small__text">
<span class="small__header1">Healthy Food</span>
<span class="small__header2">Organic Market</span>
<span class="small__p">Start your daily shopping with som...</span>
<button type="button" class="">Shop now <i class="fa-solid fa-arrow-right-long ps-1 fs-6 hvr-forward "></i></button>
</div>
</section>
</section>
<section class="grid row align-items-center gap-4 pt-4 col-md-12 flex-nowrap align-content-between three__cards" >
<section class="main__small__3 col-md-4 ps-0">
<div class="small__text2">
<section class="small__main__text ps-3">
<span class="small__off__text ">5% OFF</span>
<span class="small__header fw-bold">Hot Deals on New Items</span>
<span class="small__p2">Daily Essentials Eggs & Dairy</span>
</section>
<button type="button" class="ps-2 text-white">Shop now <i class="fa-solid fa-arrow-right-long ps-1 fs-6 hvr-forward "></i></button>
</div>
</section>
</div>
<section class="main__small__4 col-md-4 ps-0">
<div class="small__text2">
<section class="small__main__text ps-3">
<span class="small__off__text">5% OFF</span>
<span class="small__header fw-bold">Buy More & Save More</span>
<span class="small__p2">Fresh Vegetables</span>
</section>
<button type="button" class="ps-2 text-white ">Shop now <i class="fa-solid fa-arrow-right-long ps-1 fs-6 hvr-forward "></i></button>
</div>
</section>
<section class="main__small__5 col-md-4 ps-0">
<div class="small__text2">
<section class="small__main__text ps-3">
<span class="small__off__text ">5% OFF</span>
<span class="small__header fw-bold">Organic Meat Preapared</span>
<span class="small__p2">Delivered to Your Home</span>
</section>
<button type="button" class="ps-2 text-white">Shop now <i class="fa-solid fa-arrow-right-long ps-1 fs-6 hvr-forward "></i></button>
</div>
</section>
</section>
</section>
</section>
<section class="row" id="category">
<aside class="col-3 lista">
<div class=" category d-flex flex-column align-items-baseline gap-4 mt-4 pt-4 pe-4 pb-4 ps-2 rounded mb-3 ">
<div class="position-relative box ps-2">
<h1 class=" fs-5" >Category</h1>
</div>
<ul class="list-unstyled">
<li class="" hidden>
<button name="all" hidden class="d-none">All</button>
</li>
<li>
<img src="./imgs/vegetable.svg" alt="" srcset="">
<button type="button" name="Vegetables&Fruit">Vegetables & Fruit </button>
</li>
<li>
<img src="./imgs/cup.svg" alt="" srcset="">
<button name="Beverages">Beverages</button>
</li>
<li>
<img src="./imgs/meats.svg" alt="" srcset="">
<button type="button" name="Meats&SeaFood">Meats & Seafood</button>
</li>
<li>
<img src="./imgs/breakfast.svg" alt="" srcset="">
<button type="button" name="Breakfast&Dairy">Breakfast & Dairy</button>
</li>
<li>
<img src="./imgs/frozen.svg" alt="" srcset="">
<button type="button" name="FrozenFoods">Frozen Foods</button>
</li>
<li>
<img src="./imgs/biscuit.svg" alt="s" srcset="">
<button type="button" name="Biscuits&Snacks">Biscuits & Snacks</button>
</li>
<li>
<img src="./imgs/grocery.svg" alt="" srcset="">
<button type="button" name="Grocery&Staples">Grocery & Staples</button>
</li>
<li>
<img src="./imgs/drink.svg" alt="" srcset="">
<button type="button" name="alcohol">Wines & Alcochol Drinks</button>
</li>
</ul>
</div>
</aside>
<section class="col-9 mb-3 products-container">
<section class="top__save">
<h1 class="top pt-4">Top Save Today</h1>
<div class="pb-4 container">
<figure class="title-leaf m-0 d-flex align-content-between justify-content-between align-baseline">
<span class="material-symbols-outlined plant">
psychiatry
</span>
<button type="button" class="expire-time ms-0 mt-0" id="demo"></button>
</figure>
<span
>Don't mis this opportunity at a special discount just for this
week.</span>
</div>
</section>
<div class="products__cards container row h-50 containerProducts" id="containerProducts">
</div>
</section>
</section>
</section>
</main>
<div class="footer-bg pt-5">
<footer class="footer container">
<div class="row d-lfex align-content-center align-items-start justify-content-center footer__content">
<div class="footer__col1 col-3">
<figure class="">
<img src="./imgs/logo.png" alt="" srcset="" class="" class="d-flex" style="width: 150.65px;height:26.863px;">
</figure>
<span class=""
>In publishing and graphic desing, lorem ipsum is a place holder text
commonly used to demostrate the visual form</span
>
<div class="mt-3 d-flex flex-column justify-content-center align-content-center">
<span class="d-flex mb-3"><span class="material-symbols-outlined pe-1 fw-light">
home
</span> 1418 Riverwood Drive, CA 96052, US</span>
<span class="d-flex"> <span class="material-symbols-outlined pe-1 fw-light">
mail
</span> support@fastkart.com</span>
</div>
</div>
<div class="footer__col2 col-2">
<h3>Categories</h3>
<div class="footer-cat">
<span>Vegetables & Fruit</span>
<span>Beverages</span>
<span>Meats & Seafood</span>
<span>Frozen Foods</span>
<span>Biscuits & Snacks</span>
<span>Grocery & Staples</span>
</div>
</div>
<div class="footer__col3 col-2">
<h3>Useful Links</h3>
<span>Home</span>
<span>Shop</span>
<span>About Us</span>
<span>Contact US</span>
</div>
<div class="footer__col4 col-2">
<h3>Help Center</h3>
<span>Your Order</span>
<span>Your Account</span>
<span>Track Oder</span>
<span>Your Wishlist</span>
<span>Search</span>
<span>FAQ</span>
</div>
<div class="footer__col5 col-3">
<h3>Contact us</h3>
<div class="col5__number border-bottom mb-3">
<span class="phone mb-0">
<span class="material-symbols-outlined fw-light me-2">
call
</span>
<span class="hotline mb-0"> Hotline 24/7:</span>
</span>
<span class="fw-bold d-flex mb-4 number">+91 888 104 2340</span>
</div>
<div class="col5__email border-bottom mb-3">
<span class="email mb-0"><span class="material-symbols-outlined pe-1 fw-light me-2">
mail
</span> <span class="hotline mb-0">
Email Address
</span>
</span>
<span class="fw-bold d-flex mb-4 position-relative email-2">fastkart@hotmail.com</span>
</div>
<div class="col5__download">
<span class="download">Download App:</span>
<figure class="app-icons">
<img src="./imgs/playstore.png" alt="" srcset="" />
<img src="./imgs/appstore.png" alt="" srcset="" />
</figure>
</div>
</div>
<section class="footer__cc col-12 d-flex justify-content-between align-items-center ">
<div class="col-3 copy__right">
<span class="footer__copyright">© 2022 Fastkart All rights reserved</span>
</div>
<figure class="col-3 payment-icons">
<img src="./imgs/payment.png" alt="" srcset="" />
</figure>
<div class="social-media col-2 d-flex">
<span style="font-size: 15px;" class="me-3">Stay connected:</span>
<ul class="list-unstyled gap-2 social">
<li>
<a href="_blank"><i class="fa-brands fa-facebook-f"></i></a>
</li>
<li>
<a href=""><i class="fa-brands fa-twitter"></i></a>
</li>
<li>
<a href=""><i class="fa-brands fa-instagram"></i></a>
</li>
<li>
<a href=""><i class="fa-brands fa-pinterest-p"></i></a>
</li>
</ul>
</div>
</section>
</div>
</footer>
</div>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML =` <span class="material-symbols-outlined timer d-flex align-conten-evenly gap-2 align-tems-center">
schedule
<span class="timer pt-1">Expires in: ${days} : ${hours} : ${minutes} : ${seconds}
</span>
</span>
`;
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://kit.fontawesome.com/a538994658.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="./script/script.js" type="module"></script>
<!-- <script src="./script/wishlist.js" type="module"></script> -->
<script src="./script/style.js"></script>
<!-- <script src="./script/cart.js" type="module"></script> -->
</body>
</html>