-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
521 lines (499 loc) · 40.4 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
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
514
515
516
517
518
519
520
521
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Next Level - Games Shop - Encontra tu proximo juego aca!</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon">
</head>
<body class = "fondo-articulos" >
<!-- header -->
<header class ="grid grid-cols-1 w-full">
<div class ="mx-auto bg-white grid grid-cols-12 justify-between items-center opacity-90 border-2 border-y-rose-600">
<div class="col-start-1 col-end-2">
<a href="./index.html"><img class ="border rounded-xl" src="./image/logo.jpg" alt="logo gift"></a>
</div>
<div class="flex col-start-2 col-end-8 pt-2 pl-3 search-container">
<div id="resultadosBusqueda" class="resultados z-50 border-2 border-yellow-300 buscador-hidden text-white font-thin italic">
<ul class="flex flex-row">
<!-- acamostramos resultrados busqueda -->
</ul>
</div>
<input id="inputBuscar" class ="input placeholder:italic placeholder:text-blue-950 border-2 mx-auto rounded-3xl drop-shadow-xl p-5 w-11/12 lg:w-9/12 h-2/3 font-thin" placeholder="Busca aqui tu producto!">
<button class=" col-start-8 py-2 px-4">
<img class="boton-buscador cursor-pointer w-1/3 lg:w-1/4 hover:shadow-rose-600" src="./assets/Svg/./coin.svg" alt="boton_buscar">
</button>
</div>
<div class ="col-start-10 font-bold">
<br>
<img class ="w-2/3 lg:w-2/5 cursor-pointer" id="btn-login" src="./assets/Svg/female.svg" alt="Log In">
<h3 class="hidden lg:inline cursor-pointer text-blue-950 hover:text-rose-700"> Log in </h3>
</div>
<div class="col-start-11 font-bold">
<br>
<img class ="w-2/3 lg:w-2/5 cursor-pointer" id="mostrarCrearCuenta" src="./assets/male.svg" alt="Sign up">
<h3 class="hidden lg:inline cursor-pointer text-blue-950 hover:text-rose-700"> Sign up</h3>
</div>
<div class="col-start-12 font-bold">
<h2>
<span id="cantidadProductos" class="text-rose-700">0</span>
</h2>
<img class="w-2/3 lg:w-2/5 cursor-pointer" src="./assets/Svg/buck.svg" alt="carrito" id="mostrar-carrito">
<h3 class="hidden lg:inline cursor-pointer text-blue-950 hover:text-rose-700"> Carrito</h3>
</div>
</div>
</header>
<!-- main -->
<main class="w-full">
<!-- aside derecho carrito-->
<section>
<aside id="carrito" class="fixed carrito-fondo opacity-90 top-0 right-0 h-full w-1/3 bg-gray-900 text-white p-4 transform translate-x-full transition-transform duration-300 ease-in-out">
<!-- Carrito de compras -->
<div class="container minimizar-carrito">
<img class="minimizar-carrito cursor-pointer transform scale-100 hover:scale-125" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAABJNJREFUWEfVmFuoVVUUhv9/zbnKlLIyw+xQhicFMcqXiHoxxG52T4ResjuRWkl4q8hISrs81EmxCMuQHpIok5RC6QpJL5JdoKiMEsPSogtRceZYf8x91t6us/dae+/jBWy+nTXHGPtb/xhzzLEOcYQtHmE8+P8DSRoFs0syYDqlySBPBjA6V3ovpJ9FfpYAW+Dc2yR/GUoWulZI0sjM7BECdwBwXf6ICVidOHc/yT+68ekKSCFcI2ANgBO6CVpis4/A7fT+9U7+HYFktljS8qZAfwp4NQE2wLmvAewGYABOg9mZGXA1gZkAji36kVxE5x5vB9UWyEJYSWBOIcAeko8hSZ4l+U+7wJKGIcvmSFoIINZZbQlY5byfW+VbCSSzeyU9WXB8g85dT/LvTrIX9yWNkNnLAK6qPye5kM49URanFEghXCZgU+GtVjrv5w0FpNnWQugj0IhBYAa939xs1wIkyclsZ60eahrrA3o/laQOBkgSZfYOgKl5nO/p3HiSsfYaqxUohFsFPJ9b7KNzE0n+ejAwDaWlUTL7EsBJ8RmBW+j9C22BshC+AzCu5kDOpXOrDgVMA8psnqS+/O+diffjK4EkTZHZ9txgV+L9QNpKlkKYnUlnVO0nwPtM03fL9rMQYpsYW3tp5yaT/KJuNyhlMlsq6aGB0lGfS9O7K4GkHpltA9BTCiwtc2n6YNmehbA67/gxC0vo3IpSoCyErQCm1cili5imW9qlS9K4HGpMs53aACmEKwRszH02Jd5fXg7U3/8VyAm5lKeT/KFT/UjqldnnAI4u2kp62KXp0gr1JubFHVPxSZKmU6oU+gvA8JgxOpc2H8kK+Z8h0NJ52yokHSez3/N4PyXeNxQeVENZCP8COCoCJd4nndSxEJphfgNwfF6D7RQaKbNoG1dboP1H3rkekvE0tKzY5DKz5wjcVt+MvSuOGTL7CEBvh5RNktnAyZJ2JGl6TlUNbQN5Xl7UFzJN3ysp1gizlsANBZh1iXOzYzeXNCYWuqR1VacsH2dey/3fSry/tBSoeBzjxerSdEELUAg3CnixALM+Gbh0s8YzqQdm0+j9SxV1t4bAzXlql7s0va8USCHMEPBmvvlt4n1viUKJzNYDuA7ABjo3s5viL8bJQtjbuD6cO59k7Ge1NbgxSsNkFmfgeNLi5k30fm0JlEeWLUaSrCAZylSoeiazRZLqjXBP4v0pRduWy9X6+5eRfCA3+pHOTSJZP6JD+e2ywzA27z+1SZLkPXTu6bZAkobLbBeAE3PDrYn30w+KZOAqokL4EOQFeaw4fvQ2K1w1oM0S8EqhcA/FgDaoZ1GaxjSN89Gg1W6EXSLp0YL15ryAhzrCRsXjy+2/r8j5dO6pMtUP55B/DLLszkM25DfSZbZAUvOnS/wM2pjEtDr3Tf4ZFF1i/5mQAbMIXAlgxKCCbRo1hqxQAyqEawXEKe/UAyzu3QTuovf17lwZpuOHYtEzTomS5oM8uyswaTvJvqqOfcAKlTTG0TC7OAPOJXAWgDrgDkmfJuTHB/KPhpZO3dVbH2ajIaXsMLPUwh9xQP8ByxouQ0TfJrAAAAAASUVORK5CYII="/>
<h2 class=" text-xl lg:text-2xl mb-4 text-center font-bold text-rose-600 hover:underline">Tu Carrito</h2>
<h3 class=" text-sm lg:text-base my-4 font-bold">Productos seleccionados</h3>
<ul id="listaProductos">
<!-- Lista de productos seleccionados -->
</ul>
<h4>Cantidad de Articulos: <span id="cantidadProductos2">0</span></h4>
<h2>Total: $<span id="totalCarrito">0</span></h2>
<button class="comprar-carrito text-xs lg:text-base text-bold bg-blue-950 border-2 border-rose-200 m-1 lg:m-5 p-2 rounded-xl text-white shadow-xl hover:bg-rose-900">Comprar</button>
<button class="vaciar-carrito text-xs lg:text-base bg-blue-950 border-2 border-rose-200 m-1 lg:m-5 p-2 rounded-xl text-white shadow-xl font-thin font-sm hover:bg-rose-900">Vaciar Carrito</button>
</div>
</aside>
</section>
<!-- Alert login -->
<section class="log">
<aside id="login" class="login-alert hidden fixed transform -translate-x-1/2 -translate-y-1/2 bg-gray-900 text-white p-6 w-full lg:w-90 xl:w-90 rounded-xl flex flex-col items-center justify-center">
<img class="minimizar-login flex item-left cursor-pointer transform scale-100 hover:scale-125" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAABJNJREFUWEfVmFuoVVUUhv9/zbnKlLIyw+xQhicFMcqXiHoxxG52T4ResjuRWkl4q8hISrs81EmxCMuQHpIok5RC6QpJL5JdoKiMEsPSogtRceZYf8x91t6us/dae+/jBWy+nTXHGPtb/xhzzLEOcYQtHmE8+P8DSRoFs0syYDqlySBPBjA6V3ovpJ9FfpYAW+Dc2yR/GUoWulZI0sjM7BECdwBwXf6ICVidOHc/yT+68ekKSCFcI2ANgBO6CVpis4/A7fT+9U7+HYFktljS8qZAfwp4NQE2wLmvAewGYABOg9mZGXA1gZkAji36kVxE5x5vB9UWyEJYSWBOIcAeko8hSZ4l+U+7wJKGIcvmSFoIINZZbQlY5byfW+VbCSSzeyU9WXB8g85dT/LvTrIX9yWNkNnLAK6qPye5kM49URanFEghXCZgU+GtVjrv5w0FpNnWQugj0IhBYAa939xs1wIkyclsZ60eahrrA3o/laQOBkgSZfYOgKl5nO/p3HiSsfYaqxUohFsFPJ9b7KNzE0n+ejAwDaWlUTL7EsBJ8RmBW+j9C22BshC+AzCu5kDOpXOrDgVMA8psnqS+/O+diffjK4EkTZHZ9txgV+L9QNpKlkKYnUlnVO0nwPtM03fL9rMQYpsYW3tp5yaT/KJuNyhlMlsq6aGB0lGfS9O7K4GkHpltA9BTCiwtc2n6YNmehbA67/gxC0vo3IpSoCyErQCm1cili5imW9qlS9K4HGpMs53aACmEKwRszH02Jd5fXg7U3/8VyAm5lKeT/KFT/UjqldnnAI4u2kp62KXp0gr1JubFHVPxSZKmU6oU+gvA8JgxOpc2H8kK+Z8h0NJ52yokHSez3/N4PyXeNxQeVENZCP8COCoCJd4nndSxEJphfgNwfF6D7RQaKbNoG1dboP1H3rkekvE0tKzY5DKz5wjcVt+MvSuOGTL7CEBvh5RNktnAyZJ2JGl6TlUNbQN5Xl7UFzJN3ysp1gizlsANBZh1iXOzYzeXNCYWuqR1VacsH2dey/3fSry/tBSoeBzjxerSdEELUAg3CnixALM+Gbh0s8YzqQdm0+j9SxV1t4bAzXlql7s0va8USCHMEPBmvvlt4n1viUKJzNYDuA7ABjo3s5viL8bJQtjbuD6cO59k7Ge1NbgxSsNkFmfgeNLi5k30fm0JlEeWLUaSrCAZylSoeiazRZLqjXBP4v0pRduWy9X6+5eRfCA3+pHOTSJZP6JD+e2ywzA27z+1SZLkPXTu6bZAkobLbBeAE3PDrYn30w+KZOAqokL4EOQFeaw4fvQ2K1w1oM0S8EqhcA/FgDaoZ1GaxjSN89Gg1W6EXSLp0YL15ryAhzrCRsXjy+2/r8j5dO6pMtUP55B/DLLszkM25DfSZbZAUvOnS/wM2pjEtDr3Tf4ZFF1i/5mQAbMIXAlgxKCCbRo1hqxQAyqEawXEKe/UAyzu3QTuovf17lwZpuOHYtEzTomS5oM8uyswaTvJvqqOfcAKlTTG0TC7OAPOJXAWgDrgDkmfJuTHB/KPhpZO3dVbH2ajIaXsMLPUwh9xQP8ByxouQ0TfJrAAAAAASUVORK5CYII="/>
<form class=" flex-col p-4 md:p-8 mx-auto my-10 mb-16 bg-gray-300 opacity-90 text-center md:w-2/5 lg:w-2/3 xl:w-2/3 rounded-xl">
<div>
<h2 class="pb-4 text-2xl text-blue-950">Log in</h2>
</div>
<input class="input p-2 px-5 m-3 text-blue-950 italic opacity-80 rounded-xl placeholder-red-700" id="login-mail" placeholder="Ingrese aqui su e-mail"required="@" type="email">
<input class="input p-2 px-5 m-3 text-blue-950 italic opacity-80 rounded-xl placeholder-red-700" id ="login-contrasena" placeholder="Ingrese aqui su password" required="" type="pass">
<div class= "p-10">
<button type="submit" class="login-ingresar p-2 px-4 text-lg border-2 border-gray-500 hover:bg-rose-800 bg-rose-500 rounded-xl text-white cursor-pointer mt-3">Log In</button>
</div>
</form>
</aside>
</section>
<!-- alert crear cuenta -->
<section class = "w-full">
<aside id="crearCuenta" class=" login-alert mostrar-crearCuenta hidden fixed transform -translate-x-1/2 -translate-y-1/2 bg-gray-900 text-white p-6 w-full lg:w-90 xl:w-90 rounded-xl flex flex-col items-center justify-center">
<img id="ocultarCrearCuenta" class="flex item-left cursor-pointer transform scale-100 hover:scale-125" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAABJNJREFUWEfVmFuoVVUUhv9/zbnKlLIyw+xQhicFMcqXiHoxxG52T4ResjuRWkl4q8hISrs81EmxCMuQHpIok5RC6QpJL5JdoKiMEsPSogtRceZYf8x91t6us/dae+/jBWy+nTXHGPtb/xhzzLEOcYQtHmE8+P8DSRoFs0syYDqlySBPBjA6V3ovpJ9FfpYAW+Dc2yR/GUoWulZI0sjM7BECdwBwXf6ICVidOHc/yT+68ekKSCFcI2ANgBO6CVpis4/A7fT+9U7+HYFktljS8qZAfwp4NQE2wLmvAewGYABOg9mZGXA1gZkAji36kVxE5x5vB9UWyEJYSWBOIcAeko8hSZ4l+U+7wJKGIcvmSFoIINZZbQlY5byfW+VbCSSzeyU9WXB8g85dT/LvTrIX9yWNkNnLAK6qPye5kM49URanFEghXCZgU+GtVjrv5w0FpNnWQugj0IhBYAa939xs1wIkyclsZ60eahrrA3o/laQOBkgSZfYOgKl5nO/p3HiSsfYaqxUohFsFPJ9b7KNzE0n+ejAwDaWlUTL7EsBJ8RmBW+j9C22BshC+AzCu5kDOpXOrDgVMA8psnqS+/O+diffjK4EkTZHZ9txgV+L9QNpKlkKYnUlnVO0nwPtM03fL9rMQYpsYW3tp5yaT/KJuNyhlMlsq6aGB0lGfS9O7K4GkHpltA9BTCiwtc2n6YNmehbA67/gxC0vo3IpSoCyErQCm1cili5imW9qlS9K4HGpMs53aACmEKwRszH02Jd5fXg7U3/8VyAm5lKeT/KFT/UjqldnnAI4u2kp62KXp0gr1JubFHVPxSZKmU6oU+gvA8JgxOpc2H8kK+Z8h0NJ52yokHSez3/N4PyXeNxQeVENZCP8COCoCJd4nndSxEJphfgNwfF6D7RQaKbNoG1dboP1H3rkekvE0tKzY5DKz5wjcVt+MvSuOGTL7CEBvh5RNktnAyZJ2JGl6TlUNbQN5Xl7UFzJN3ysp1gizlsANBZh1iXOzYzeXNCYWuqR1VacsH2dey/3fSry/tBSoeBzjxerSdEELUAg3CnixALM+Gbh0s8YzqQdm0+j9SxV1t4bAzXlql7s0va8USCHMEPBmvvlt4n1viUKJzNYDuA7ABjo3s5viL8bJQtjbuD6cO59k7Ge1NbgxSsNkFmfgeNLi5k30fm0JlEeWLUaSrCAZylSoeiazRZLqjXBP4v0pRduWy9X6+5eRfCA3+pHOTSJZP6JD+e2ywzA27z+1SZLkPXTu6bZAkobLbBeAE3PDrYn30w+KZOAqokL4EOQFeaw4fvQ2K1w1oM0S8EqhcA/FgDaoZ1GaxjSN89Gg1W6EXSLp0YL15ryAhzrCRsXjy+2/r8j5dO6pMtUP55B/DLLszkM25DfSZbZAUvOnS/wM2pjEtDr3Tf4ZFF1i/5mQAbMIXAlgxKCCbRo1hqxQAyqEawXEKe/UAyzu3QTuovf17lwZpuOHYtEzTomS5oM8uyswaTvJvqqOfcAKlTTG0TC7OAPOJXAWgDrgDkmfJuTHB/KPhpZO3dVbH2ajIaXsMLPUwh9xQP8ByxouQ0TfJrAAAAAASUVORK5CYII="/>
<form class="p-4 md:p-8 mx-auto my-10 mb-16 bg-gray-300 opacity-90 text-center md:w-2/5 lg:w-2/3 xl:w-2/3 rounded-xl">
<div>
<h2 class="create-account pb-4 text-2xl text-blue-950">Sign up</h2>
</div>
<div class="icons my-auto flex justify-around md:pl-10 md:pr-10">
<div>
<img src="./assets/bxl-facebook-square.svg" alt="facebook" class="w-9 md:w-auto cursor-pointer hover:bg-rose-200">
</div>
<div>
<img src="./assets/bxl-instagram-alt.svg" alt="insta" class="w-9 md:w-auto cursor-pointer hover:bg-rose-200">
</div>
<div>
<img src="./assets/bxl-twitter.svg" alt="twitter" class="w-9 md:w-auto cursor-pointer hover:bg-rose-200">
</div>
</div>
<div class="pt-4">
<input id="form-nombre" class="input p-1 m-3 text-blue-950 italic opacity-80 rounded-xl placeholder-red-700" placeholder="Nombre">
<input id="mail-form" class="input p-1 m-3 text-blue-950 italic opacity-80 rounded-xl placeholder-red-700" type="email" placeholder="Email">
<input id="contrasena-form" class="input p-1 m-3 text-blue-950 italic opacity-80 rounded-xl placeholder-red-700" type="password" placeholder="Password">
<input id="btn-crearCuenta" class="p-1 text-lg border-2 border-gray-500 hover:bg-rose-800 bg-rose-500 rounded-xl text-white cursor-pointer mt-3" type="button" value="Sign up">
</div>
</form>
</aside>
</section>
<section class="flex slider-cards space-x-4">
</section>
<!-- slider novedades -->
<section class = "slider-container z-10">
<div class="slider z-10">
<img class ="z-10" src="./image/1-slide-1684170258455-4473921703-4a9f25171a168189c07a382a80ccdd101684170260-1920-1920.webp" alt="foto_estrenos_1">
<img src="./image/1040-banner-mk1-banner-3620.jpg" alt="foto_estrenos_2" >
<img src="./image/1-slide-1689964916955-6877443007-a7cfb592463703473ec8d69409c6ef0a1689964855-1920-1920.webp" alt="foto_estrenos_3" >
<img src="./image/alfabeta.1690357143.1979.webp" alt="mario_maker_2" >
</div>
</section>
<!-- section estrenos -->
<div class="estrenos text-Left w-full mx-auto w-full text-2xl font-bold text-blue-950 bg-white opacity-75 border-2 border-y-rose-400">
<h2 class="hover:underline estrenos">Estrenos</h2>
</div>
<section>
<div class="relative slider-container-cards">
<button class=" absolute prev-btn left-0 top-1/2 z-10 transform -translate-y-1/2 bg-gray-800 text-white px-4 py-2 rounded-l-lg cursor-pointer"><</button>
<button class=" absolute next-btn right-0 top-1/2 z-10 transform -translate-y-1/2 bg-gray-800 text-white px-4 py-2 rounded-r-lg cursor-pointer">></button>
<div id="sliderEstrenos" class="flex slider-cards space-x-4">
<!-- cargado de cards con productos -->
</div>
</div>
</section>
<!-- slider Sale -->
<section class = "slider-container">
<div class="slider">
<img src="./image/mario_kart.jpg" alt="foto_sale_1">
<img src="./image/pokemon-unite.jpg" alt="foto_sale_2">
<img src="./image/Sonic-Origins-1-www.culturageek.com_.ar_.jpg" alt="foto_sale_3">
<img src="./image/switch_mario_maker.jpg" alt="foto_sale_4">
</div>
</section>
<!-- section sale -->
<section>
<div class="text-Left grid grid-cols-1 mx-auto w-full text-2xl font-bold text-blue-950 bg-white opacity-75 border-2 border-y-rose-400">
<h2 class="hover:underline">Ofertas</h2>
</div>
<div class="relative slider-container-cards">
<button class="absolute prev-btn left-0 top-1/2 z-10 transform -translate-y-1/2 bg-gray-800 text-white px-4 py-2 rounded-l-lg cursor-pointer"><</button>
<button class=" absolute next-btn right-0 top-1/2 z-10 transform -translate-y-1/2 bg-gray-800 text-white px-4 py-2 rounded-r-lg cursor-pointer">></button>
<div id="sliderSale" class="flex slider-cards space-x-4">
<!-- cargado de cards con productos -->
</div>
</div>
</section>
<!-- slider RETRO -->
<section class = "slider-container">
<div class="slider">
<img src="./image/nes.webp" alt="foto_retro_2">
<img src="./image/n64.jpg" alt="foto_retro_1">
<img src="./image/snes.jpg" alt="foto_retro_3">
<img src="./image/gb_advance.jpg" alt="foto_retro_4">
</div>
</section>
<div class="text-Left grid grid-cols-1 mx-auto w-full text-2xl font-bold text-blue-950 bg-white opacity-75 border-2 border-y-rose-400">
<h2 class="hover:underline">Retro</h2>
</div>
<section>
<div class="relative slider-container-cards">
<button class="absolute prev-btn left-0 top-1/2 z-10 transform -translate-y-1/2 bg-gray-800 text-white px-4 py-2 rounded-l-lg cursor-pointer"><</button>
<button class=" absolute next-btn right-0 top-1/2 z-10 transform -translate-y-1/2 bg-gray-800 text-white px-4 py-2 rounded-r-lg cursor-pointer">></button>
<div id="sliderRetro" class="flex slider-cards space-x-4">
<!-- cargado de cards con productos -->
</div>
</div>
</section>
<!-- slider PREVENTAS -->
<section class = "slider-container">
<div class="slider">
<img src="./image/1-slide-1693515506937-8046084764-fdf7c4eb406cc1dc890a82ff79c544121693515358-1920-1920.webp" alt="foto_preventa_1">
<img src="./image/picmin4.jpg" alt="foto_preventa_3">
<img src="./image/1-slide-1691787470831-6102750034-a102626dc85be7e896997e6b9be5b4811691787364-1920-1920.webp" alt="foto_preventa_4">
<img src="./image/mario_rpg.jpg" alt="foto_preventa_2">
</div>
</section>
<!-- section preventas -->
<div class="text-Left grid grid-cols-1 mx-auto w-full text-2xl font-bold text-blue-950 bg-white opacity-75 border-2 border-y-rose-400">
<h2 class="hover:underline">Preventas</h2>
</div>
<section>
<div class="relative slider-container-cards">
<button class=" absolute prev-btn left-0 top-1/2 z-10 transform -translate-y-1/2 bg-gray-800 text-white px-4 py-2 rounded-l-lg cursor-pointer"><</button>
<button class="absolute next-btn right-0 top-1/2 z-10 transform -translate-y-1/2 bg-gray-800 text-white px-4 py-2 rounded-r-lg cursor-pointer">></button>
<div id="sliderPreventas" class="flex slider-cards space-x-4">
<!-- cargado de cards con productos -->
</div>
</div>
</section>
<!-- compramos usados y link a catalogo -->
<section class="mx-auto bg-white w-full grid grid-cols-1 border-2 border-y-violet-200 pb-5">
<div class="h-100">
<svg class="bg-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#be185d" fill-opacity="1" d="M0,96L60,101.3C120,107,240,117,360,112C480,107,600,85,720,106.7C840,128,960,192,1080,202.7C1200,213,1320,171,1380,149.3L1440,128L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"></path>
</svg>
</div>
<div class="col-span-12 md:col-span-12 p-3">
<h1 class="text-center font-bold text-2xl text-rose-500 hover:underline"><span class="text-rose-900">EN NEXT LEVEL! </span> PODES COMPRAR JUEGOS NUEVOS, RETRO, CONSOLAS, AMIIBOS Y MUCHO MAS!</h1>
<div class="flex flex-wrap justify-between p-3 mx-auto">
<div class=" w-1/6">
<img id="btnMostrarJuegos"class="cursor-pointer" src="./assets/icons8-joy-con-100.png" alt="switch">
<h2 class="text-xl hover:underline">Juegos</h2>
</div>
<div class="w-1/5">
<img id="btnMostrarAccesorios"class="cursor-pointer"src="./assets/icons8-nintendo-switch-pro-controller-100.png" alt="retro">
<h2 class="text-xl hover:underline">Accesorios</h2>
</div>
<div class=" w-1/6">
<img id="btnMostrarConsolas"class="cursor-pointer" src="./assets/icons8-joystick-100.png" alt="juegos">
<h2 class="text-xl hover:underline">Consolas</h2>
</div>
</div>
</div>
</div>
<div class="receptorProductos" id="productos">
<!-- cargado de cards con productos -->
</div>
</section>
<!-- compramos tu usado cotizar -->
<section>
<div class="bg-gray-800 text-white max-w-md mx-auto rounded-xl shadow-md overflow-hidden md:max-w-2xl m-5 hover:shadow-2xl hover:bg-blue-950 transition-all duration-500 ease-in-out">
<div class="md:flex">
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-rose-500 font-semibold">Hola!, Bienvenidos a Next Level!</div>
<p class="block mt-1 text-lg leading-tight font-medium text-white">Compramos tu usado, no dudes en consultarnos!!!</p>
<p class="mt-2 text-gray-400">Damos los mejores precios, seras atendido para que tus productos sean revisados y probados por expertos en la materia, valoramos rareza, funcionamiento, reparaciones que haya que hacerle!. <br><br><span class="text-white font-bold">Comunicate con nosotros por nuestro canal de discord! o dejanos un comentario aqui abajo!</span></p>
</div>
<div class="flex items-center justify-between mt-4 space-x-4">
<button style="margin-right: 20px" class="text-red-500 hover:text-white">
<a href="#"><img src="./assets/discord-alt-logo-24.png" alt="mail"></a>
Discord
</button>
</div>
</div>
</div>
</section>
<!-- QUIENES SOMOS? -->
<section class="mx-auto w-full grid grid-cols-1 py-12 quienes">
<div class = "text-start font-bold p-2 bg-white text-xl text-rose-500 opacity-90">
<h2>Quienes somos?</h2>
</div>
<div class="text-center font-bold p-5 bg-white opacity-90 text-thin text-blue-950">
<h3>Somos un grupo de coleccionistas amantes de los videojuegos tanto actuales como retro que queremos que se siga expandiendo,
y no se pierdan aquellos juegos retro que tanto quisimos de chicos y hoy de grande tambien!
</h3>
</div>
<div class="text-end font-bold p-2 bg-white text-xl text-rose-500 opacity-90">
<h2>Enjoy!</h2>
</div>
</section>
<!-- Garantias y responsabilidad -->
<section class="mx-auto w-full py-12 bg-white">
<div class="container mx-auto">
<div class="md:flex md:justify-between">
<div class="md:w-1/3 p-2 text-center">
<h2 class="text-xl font-bold pb-3 text-rose-500 hover:underline">Compra Tranquilo</h2>
<p class="text-thin text-blue-950">Todos nuestros productos cuentan con garantía de 3 a 6 meses (con posibilidad de extenderla). Además, costeamos los gastos de envío si tu pedido fue enviado local o internacionalmente.</p>
</div>
<div class="md:w-1/3 p-2 text-center">
<h2 class="text-xl font-bold pb-3 text-rose-500 hover:underline">Política de Satisfacción</h2>
<p class="text-thin text-blue-950">¿Te arrepentiste de la compra o te regalaron un producto que ya tenías? No te preocupes, te brindamos la posibilidad de devolverlo y recuperar el dinero.</p>
</div>
<div class="md:w-1/3 p-2 text-center">
<h2 class="text-xl font-bold pb-3 text-rose-500 hover:underline">Compromiso con el Cliente</h2>
<p class="text-thin text-blue-950">Sabemos que lo más importante es recibir una buena atención. Queremos que tengas una buena experiencia, ya sea personalmente o de manera remota, y que vuelvas a comprar.</p>
</div>
</div>
</div>
</section>
<!-- compartimos comentarios de otros compradores -->
<section class = "flex flex-wrap p-5">
<div class="flex flex-col p-8 rounded-2xl my-5 bg-white w-1/3 m-auto w-full sm:w-1/2 md:w-1/2 lg:w-1/4 xl:w-1/4 p-4">
<div class="flex">
<div class="flex gap-4">
<img class="w-2/5" src="./image/3ds_animal_crossing.gif" alt="valen_gif">
<div class="flex flex-col gap-1">
<div class="flex gap-2 items-center -mt-1">
<p class="font-semibold cursor-pointer">Valen_ciaga15</p>
<p class="text-sm text-[#ff6154] cursor-pointer">Follow</p>
</div>
<div class="font-light text-md text-[#4b587c]">Goooood</div>
</div>
</div>
</div>
<div class="mt-4 text-[#005ef6] text-xl tracking-[2px]">
★★★★★
</div>
<div class="italic mt-2 text-[18px] text-[#4b587c] font-normal">
Siii, Next Level!!! la mejor tienda, la preventa cumplieron y me la entregaron 3 dias antes de lo acordado!, no se ni como hicieron! cracks.
</div>
<div class="flex gap-6 text-[#4b587c] text-[12px] mt-4">
<span class="flex items-center gap-1 cursor-pointer"><span class="text-[8px]">▲</span>Helpful</span>
<span class="cursor-pointer hover:text-[#ff6154]">Share</span>
<span class="cursor-pointer">Dic 10</span>
<span class="-mt-3 text-xl tracking-[1px]">...</span>
</div>
</div>
<div class="flex flex-col my-5 p-8 rounded-2xl bg-white w-1/3 m-auto w-full sm:w-1/2 md:w-1/2 lg:w-1/4 xl:w-1/4 p-4">
<div class="flex">
<div class="flex gap-4">
<img class="w-2/5" src="./image/girl_pixel-computer.jpg" alt="avatar_fofi">
<div class="flex flex-col gap-1">
<div class="flex gap-3 items-center -mt-1">
<p class="font-semibold cursor-pointer">Fofimovi21</p>
<p class="text-sm text-[#ff6154] cursor-pointer">Follow</p>
</div>
<div class="font-light text-md text-[#4b587c]">En este Dia</div>
</div>
</div>
</div>
<div class="mt-4 text-[#005ef6] text-xl tracking-[2px]">
★★★★
</div>
<div class="italic mt-2 text-[18px] text-[#4b587c] font-normal">
Me llego el paquete en el dia, El unico lugar en Argentina donde pude encontrar un GameBoy color en buen estado!!!.
</div>
<div class="flex gap-6 text-[#4b587c] text-[12px] mt-4">
<span class="flex items-center gap-1 cursor-pointer"><span class="text-[8px]">▲</span>Helpful</span>
<span class="cursor-pointer hover:text-[#ff6154]">Share</span>
<span class="cursor-pointer">Feb 20</span>
<span class="-mt-3 text-xl tracking-[1px]">...</span>
</div>
</div>
<div class="flex flex-col my-5 p-8 rounded-2xl bg-white w-1/3 m-auto w-full sm:w-1/2 md:w-1/2 lg:w-1/4 xl:w-1/4 p-4">
<div class="flex">
<div class="flex gap-4">
<img class="w-1/5" src="./image/pixel_link.jpg" alt="avatar">
<div class="flex flex-col gap-1">
<div class="flex gap-3 items-center -mt-1">
<p class="font-semibold cursor-pointer">Menta_Tdf2021</p>
<p class="text-sm text-[#ff6154] cursor-pointer">Follow</p>
</div>
<div class="font-light text-md text-[#4b587c]">Dame Pollito</div>
</div>
</div>
</div>
<div class="mt-4 text-[#005ef6] text-xl tracking-[2px]">
★★★★★
</div>
<div class="italic mt-2 text-[18px] text-[#4b587c] font-normal">
Tardaron unas horas en responderme, pero mas que recomendados!!! Excelentes precios. Woffff!
</div>
<div class="flex gap-6 text-[#4b587c] text-[12px] mt-4">
<span class="flex items-center gap-1 cursor-pointer"><span class="text-[8px]">▲</span>Helpful</span>
<span class="cursor-pointer hover:text-[#ff6154]">Share</span>
<span class="cursor-pointer">July 28</span>
<span class="-mt-3 text-xl tracking-[1px]">...</span>
</div>
</div>
</section>
<!-- deja comentario y cotiza vedicion exclusivva -->
<section class="mx-auto w-full grid grid-cols-1 py-10 experiencias">
<div class="grid grid-cols-12 gap-4 container mx-auto bg-white opacity-90">
<div class="col-span-6 p-2 text-center">
<h2 class="text-xl font-bold pb-3 text-rose-500">Queres una edicion exclusiva?</h2>
<p class="font-bold text-blue-950">Contactanos! y contamos que edicion tanto actual o retro de consola o juego estas buscando. Te ayudamos a buscarlo y brindamos presupuesto pertinente para este tan presiado articulo</p>
</div>
<div class="col-span-6 p-2 text-center">
<h2 class="text-xl font-bold pb-3 text-rose-500">Queres cotizar y vender tu edicion exclusiva?</h2>
<p class="font-bold text-blue-950">Te arrepentiste de la compra o te queres deshacer de tu edicion coleccionista, cotizalo con nosotros y te lo compramos, tambien tenemos una comunidad en discord! que puede estar interesada en tu articulo.</p>
</div>
</div>
</section>
<div class="bg-pink-700 border border-transparent grid grid-cols-6 gap-2 p-2 text-sm pt-10">
<h1 class="text-center text-white text-xl font-bold col-span-6">Contactanos!, solicita tu cotizacion de Edicion Especial o simplemente dejanos tu comentario!</h1>
<textarea placeholder="Your feedback..." class="bg-slate-100 text-slate-600 h-28 placeholder:text-slate-600 placeholder:opacity-50 border border-slate-200 col-span-6 resize-none outline-none rounded-lg p-2 duration-300 focus:border-slate-600"></textarea>
<button class="fill-slate-600 col-span-1 flex justify-center items-center rounded-lg p-2 duration-300 bg-slate-100 hover:border-slate-600 focus:fill-blue-200 focus:bg-blue-400 border border-slate-200">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 512 512">
<path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm177.6 62.1C192.8 334.5 218.8 352 256 352s63.2-17.5 78.4-33.9c9-9.7 24.2-10.4 33.9-1.4s10.4 24.2 1.4 33.9c-22 23.8-60 49.4-113.6 49.4s-91.7-25.5-113.6-49.4c-9-9.7-8.4-24.9 1.4-33.9s24.9-8.4 33.9 1.4zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path>
</svg>
</button>
<button class="fill-slate-600 col-span-1 flex justify-center items-center rounded-lg p-2 duration-300 bg-slate-100 hover:border-slate-600 focus:fill-blue-200 focus:bg-blue-400 border border-slate-200">
<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 512 512">
<path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM174.6 384.1c-4.5 12.5-18.2 18.9-30.7 14.4s-18.9-18.2-14.4-30.7C146.9 319.4 198.9 288 256 288s109.1 31.4 126.6 79.9c4.5 12.5-2 26.2-14.4 30.7s-26.2-2-30.7-14.4C328.2 358.5 297.2 336 256 336s-72.2 22.5-81.4 48.1zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"></path></svg>
</button>
<span class="col-span-2"></span>
<button class="bg-slate-100 stroke-slate-600 border border-slate-200 col-span-2 flex justify-center rounded-lg p-2 duration-300 hover:border-slate-600 hover:text-white focus:stroke-blue-200 focus:bg-blue-400">
<svg fill="none" viewBox="0 0 24 24" height="30px" width="30px" xmlns="http://www.w3.org/2000/svg">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" d="M7.39999 6.32003L15.89 3.49003C19.7 2.22003 21.77 4.30003 20.51 8.11003L17.68 16.6C15.78 22.31 12.66 22.31 10.76 16.6L9.91999 14.08L7.39999 13.24C1.68999 11.34 1.68999 8.23003 7.39999 6.32003Z"></path>
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1.5" d="M10.11 13.6501L13.69 10.0601"></path>
</svg>
</button>
</div>
<section id="terminos" class="hidden">
<div class= "bg- p-6 text-center w-11/12 mx-auto">
<h1 class=" text-3xl font-bold pb-3 text-gray-300 hover:underline"> Terminos y condiciones de Next Level</h1>
</div>
<div class="px-8 w-11/12 mx-auto">
<p class ="pb-15 text-left">
<span class="font-bold hover:underline text-gray-300">1. Aceptación de los Términos y Condiciones</span> <br>
Por favor, lea detenidamente estos Términos y Condiciones antes de utilizar nuestro sitio web Next Level (en adelante, el "Sitio web"). Al utilizar el Sitio web, usted acepta estar sujeto a estos Términos y Condiciones y acepta cumplir con ellos. Si no está de acuerdo con estos Términos y Condiciones, no debe utilizar el Sitio web. <br>
<span class="font-bold hover:underline text-gray-300">2. Descripción del Servicio </span><br>
Next Level proporciona una plataforma en línea que permite a los usuarios comprar y vender productos electrónicos originales de Nintendo, incluyendo productos retro y actuales (en adelante, los "Productos"). Los usuarios pueden crear cuentas, listar Productos para la venta y comprar Productos a través del Sitio <br>
<span class="font-bold hover:underline text-gray-300">3. Cuentas de Usuario </span><br>
a. Registro: Para utilizar ciertas funciones del Sitio web, puede ser necesario crear una cuenta de usuario. Usted acepta proporcionar información precisa y actualizada durante el proceso de registro y mantener la seguridad de su contraseña <br>
b. Responsabilidad de la cuenta: Usted es responsable de todas las actividades que ocurran en su cuenta y debe notificarnos de inmediato cualquier uso no autorizado de su cuenta. <br>
<span class="font-bold hover:underline text-gray-300">4. Compra y Venta de Productos</span> <br>
a. Listados de Productos: Los usuarios pueden crear listados de Productos para su venta en el Sitio web. Al crear un listado, usted declara y garantiza que es el propietario legítimo del Producto y que tiene el derecho de devolverlo. <br>
b. Transacciones: Las transacciones entre compradores y vendedores son responsabilidad de las partes involucradas. Next Level no es parte de estas transacciones y no se hace responsable de problemas que puedan surgir. <br>
<span class="font-bold hover:underline text-gray-300">5. Contenido del Usuario</span> <br>
Los usuarios pueden cargar contenido, como imágenes y descripciones de Productos, en el Sitio web. Al cargar contenido, usted concede a Next Level una licencia no exclusiva para utilizar, modificar y mostrar ese contenido en relación con el Sitio web. <br>
<span class="font-bold hover:underline text-gray-300">6. Propiedad Intelectual </span><br>
Todos los derechos de propiedad intelectual en el Sitio web, incluyendo pero no limitado a logotipos, marcas registradas y contenido, son propiedad de Next Level o de terceros licenciatarios. No se otorga ningún derecho de propiedad intelectual al usuario. <br>
<span class="font-bold hover:underline text-gray-300">7. Limitación de Responsabilidad</span> <br>
Next Level no se hace responsable de la calidad, autenticidad o entrega de los Productos. No garantizamos la precisión de los listados de Productos en el Sitio web y no somos responsables de ningún daño o pérdida que pueda resultar del uso del Sitio web. <br>
<span class="font-bold hover:underline text-gray-300">8. Cambios en los Términos y Condiciones</span> <br>
Nos reservamos el derecho de modificar estos Términos y Condiciones en cualquier momento. Los cambios serán efectivos desde la fecha de su publicación en el Sitio web. Le recomendamos que revise periódicamente estos Términos y Condiciones. <br>
<span class="font-bold hover:underline text-gray-300">9. Legislación Aplicable</span><br>
Estos Términos y Condiciones se rigen por las leyes del [país], y cualquier disputa que surja en relación con estos términos se someterá a la jurisdicción exclusiva de los tribunales de [ciudad]. <br>
<span class="font-bold hover:underline text-gray-300">10. Contacto </span> <br>
Si tiene alguna pregunta o comentario sobre estos Términos y Condiciones, por favor contáctenos a través de [dirección de correo electrónico de contacto].
<br>
<br>
<span class="font-bold text-gray-300"> Gracias por utilizar Next Level.</span>
<br>
<button id="btn-ocultar-terminos" class="bg-rose-500 border-2 border-rose-200 m-5 p-2 rounded-xl text-white shadow-xl hover:bg-rose-900">Aceptar</button>
</p>
</div>
</section>
</main>
<!-- foot -->
<footer class = "grid grid-cols-1 w-full mt-auto">
<div class="h-100">
<svg class="bg-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#be185d" fill-opacity="1" d="M0,96L60,101.3C120,107,240,117,360,112C480,107,600,85,720,106.7C840,128,960,192,1080,202.7C1200,213,1320,171,1380,149.3L1440,128L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"></path>
</svg>
</div>
<div class="mx-auto bg-white grid grid-cols-12 justify-between items-start opacity-85 border-2 border-y-rose-400 p-1">
<div class="col-span-4 col-start-1 p-2 text-center">
<div class="p-4">
<h2 class="text-xl font-bold pb-2 text-rose-500 hover:underline">Información</h2>
</div>
<div>
<ul class="m-2 font-bold">
<li id="btn-terminos" class="py-1 text-blue-950 hover:text-rose-700 cursor-pointer">Términos y condiciones</li>
</ul>
</div>
</div>
<div class="col-span-4 col-start-5 p-2 text-center">
<div class="p-4">
<h2 class="text-xl font-bold pb-3 text-rose-500 hover:underline">Síguenos!</h2>
</div>
<div class="flex justify-between p-3 m-3">
<div class="hover:bg-rose-100 p-2 round-xl">
<a href="#"><img src="./assets/bxl-facebook-square.svg" alt="Facebook" class="w-full md:w-auto"></a>
</div>
<div class="hover:bg-rose-100 p-2 round-xl">
<a href="#"><img src="./assets/bxl-instagram-alt.svg" alt="Instagram" class="w-full md:w-auto"></a>
</div>
<div class="hover:bg-rose-100 p-2 round-xl">
<a href="#"><img src="./assets/bxl-twitter.svg" alt="Twitter" class="w-full md:w-auto"></a>
</div>
<div class="hover:bg-rose-100 p-2 round-xl">
<a href="#"><img src="./assets/bxl-discord-alt.svg" alt="Discord" class="w-full md:w-auto"></a>
</div>
</div>
</div>
<div class="col-span-4 col-start-9 md:col-span-2 md:col-start-10 p-2 text-center md:order-last">
<div class="flex justify-center items-center w-1/2">
<a href="#"><img src="./image/DATAWEB.jpg" alt="Fiscal" class="m-auto w-full md:w-auto"></a>
</div>
</div>
<div class="fondo-articulos col-span-12 p-2 text-center md:order-last">
<div class="flex p-3">
<img src="./assets/bx-home-alt-2.svg" alt="Ubicación">
<p class="text-sm p-2 text-white">Av. Cabildo 2280, Local 30, Galería Río de la Plata, CABA, Argentina</p>
</div>
<div class="flex p-3">
<img src="./assets/bx-mail-send.svg" alt="Correo">
<p class="hover:text-blue-950 text-white text-md px-2 cursor-pointer">info@nextlevel.com</p>
</div>
<div class="flex p-3">
<img src="./assets/bx-bell.svg" alt="Teléfono">
<p class="hover:text-blue-950 text-white text-md px-2 cursor-pointer">+54(911)60277880</p>
</div>
<div class="flex p-3">
<img src="./assets/bx-heart-circle.svg" alt="Horario">
<p class="text-md px-2 text-white">Lunes a Sábados de 11 a 21hs</p>
</div>
</div>
</div>
</footer>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="./js/app.js"></script>
</body>
</html>