-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
309 lines (297 loc) · 16 KB
/
index.html
File metadata and controls
309 lines (297 loc) · 16 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Athens</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
<nav>
<div class="nav-bar">
<div>
<img src="img/logo.png" alt="Logo Athens" width="200px">
</div>
<div>
<div class="center-menu">
<i class="fa-solid fa-magnifying-glass"></i>
<input class="flexsearch--input" type="search" placeholder="search">
</div>
</div>
<div>
<div class="right-menu">
<i class="fa-solid fa-user"></i>
<a href="#" class="hover-button">Mi cuenta</a>
<i class="fa-solid fa-cart-shopping"></i>
<a href="cart.html" class="hover-button">Carrito</a>
</div>
</div>
<div class ="hamburger-menu">
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<div class="mobile-menu">
<details>
<summary>Tecnología</summary>
<ul>
<li><a href="#">Computadores</a></li>
<li><a href="#">Televisores</a></li>
<li><a href="#">Audio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Impresión</a></li>
<li><a href="#">Cámaras</a></li>
</ul>
</details>
<details>
<summary>Electrodomésticos</summary>
<ul>
<li><a href="#">Climatización</a></li>
<li><a href="#">Refrigeración</a></li>
<li><a href="#">Lavadoras/Secadoras</a></li>
</ul>
</details>
<details>
<summary>Celulares</summary>
<ul>
<li><a href="PLP.html">Smartwatch</a></li>
<li><a href="#">Tabletas</a></li>
<li><a href="#">Celulares</a></li>
</ul>
</details>
<details>
<summary>Hogar</summary>
<ul>
<li><a href="#">Salas</a></li>
<li><a href="#">Comedor</a></li>
<li><a href="#">Cocina</a></li>
<li><a href="#">Baño</a></li>
</ul>
</details>
</div>
</div>
</div>
<div class="subnavbar">
<div class="item">
<h3>Tecnología</h3>
<img src="img/arrow-icon.svg" alt="Icono de Flecha" id="1">
<ul class="dropdown" id="dropdown-1">
<li><a href="#">Computadores</a></li>
<li><a href="#">Televisores</a></li>
<li><a href="#">Audio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Impresión</a></li>
<li><a href="#">Cámaras</a></li>
</ul>
</div>
<div class="item">
<h3>Electrodomésticos</h3>
<img src="img/arrow-icon.svg" alt="Icono de Flecha" id="2">
<ul class="dropdown" id="dropdown-2">
<li><a href="#">Climatización</a></li>
<li><a href="#">Refrigeración</a></li>
<li><a href="#">Lavadoras/Secadoras</a></li>
</ul>
</div>
<div class="item">
<h3>Celulares</h3>
<img src="img/arrow-icon.svg" alt="Icono de Flecha" id="3">
<ul class="dropdown" id="dropdown-3">
<li><a href="PLP.html">Smartwatch</a></li>
<li><a href="#">Tabletas</a></li>
<li><a href="#">Celulares</a></li>
</ul>
</div>
<div class="item">
<h3>Hogar</h3>
<img src="img/arrow-icon.svg" alt="Icono de Flecha" id="4">
<ul class="dropdown" id="dropdown-4">
<li><a href="#">Salas</a></li>
<li><a href="#">Comedor</a></li>
<li><a href="#">Cocina</a></li>
<li><a href="#">Baño</a></li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container-home">
<section>
<div class="carousel">
<div class="slides">
<div class="slide slide1">
<div class="contentSlide1">
<h5 class="textSlide">Grandes descuentos en tablets, teléfonos y mucha más tecnología</h5>
<button class="secondary">Ver más</button>
</div>
</div>
<div class="slide slide2">
<div class="contentSlide2">
<h5 class="textSlide">Visualiza nuestros grandes descuentos en los nuevos celulares</h5>
<button class="secondary">Ver más</button>
</div>
</div>
</div>
</div>
</section>
<section class="products container">
<h2>¡Mira los mejores productos que tenemos!</h2>
<div class="productsList">
<div class="card">
<img class="card-image" src="img/product1.webp" alt="Samsung Galaxy S23" srcset="">
<h1 class="card-title">Samsung Galaxy S23</h1>
<p>El Samsung Galaxy S23 es un smartphone de alta gama con una pantalla Dynamic AMOLED de 6.1 pulgadas, procesador Snapdragon 8 Gen 2, y una cámara triple de 50MP para fotos y vídeos impresionantes.</p>
<del>$900.000</del>
<h1 class="card-price">$750.000</h1>
<h4>17%</h4>
<button class="secondary">Añadir al carrito</button>
</div>
<div class="card">
<img class="card-image" src="img/IPad_Air.png" alt="iPad Air (2022)" srcset="">
<h1 class="card-title">iPad Air (2022)</h1>
<p>El iPad Air de 2022 cuenta con una pantalla Liquid Retina de 10.9 pulgadas, el chip M1 de Apple y soporte para el Apple Pencil de segunda generación, ofreciendo un rendimiento excepcional para todas tus tareas.</p>
<del>$800.000</del>
<h1 class="card-price">$650.000</h1>
<h4>19%</h4>
<button class="secondary">Añadir al carrito</button>
</div>
<div class="card">
<img class="card-image" src="img/product3.avif" alt="Sony WH-1000XM5" srcset="">
<h1 class="card-title">Sony WH-1000XM5</h1>
<p>Los auriculares Sony WH-1000XM5 ofrecen cancelación de ruido líder en la industria, audio de alta resolución y comodidad durante todo el día, ideales para una experiencia de escucha inmersiva.</p>
<del>$400.000</del>
<h1 class="card-price">$320.000</h1>
<h4>20%</h4>
<button class="secondary">Añadir al carrito</button>
</div>
<div class="card">
<img class="card-image" src="img/product4.jpg" alt="Dyson V15 Detect" srcset="">
<h1 class="card-title">Dyson V15 Detect</h1>
<p>La aspiradora Dyson V15 Detect ofrece una potente succión, tecnología de detección de polvo y una batería de larga duración, ideal para mantener tu hogar limpio con facilidad.</p>
<del>$600.000</del>
<h1 class="card-price">$480.000</h1>
<h4>20%</h4>
<button class="secondary">Añadir al carrito</button>
</div>
<div class="card">
<img class="card-image" src="img/product5.png" alt="Apple MacBook Air M2" srcset="">
<h1 class="card-title">Apple MacBook Air M2</h1>
<p>El MacBook Air M2 presenta un diseño delgado, el chip M2 de Apple para un rendimiento ultrarrápido y una pantalla Retina de 13.6 pulgadas, ofreciendo potencia y portabilidad en un solo dispositivo.</p>
<del>$1.200.000</del>
<h1 class="card-price">$1.000.000</h1>
<h4>17%</h4>
<button class="secondary">Añadir al carrito</button>
</div>
<div class="card">
<img class="card-image" src="img/product6.png" alt="Bose QuietComfort 45" srcset="">
<h1 class="card-title">Bose QuietComfort 45</h1>
<p>Los auriculares Bose QuietComfort 45 ofrecen una cancelación de ruido superior, sonido de alta calidad y comodidad prolongada, perfectos para viajes o uso diario.</p>
<del>$350.000</del>
<h1 class="card-price">$280.000</h1>
<h4>20%</h4>
<button class="secondary">Añadir al carrito</button>
</div>
<div class="card">
<img class="card-image" src="img/product7.webp" alt="Samsung Galaxy Tab S8" srcset="">
<h1 class="card-title">Samsung Galaxy Tab S8</h1>
<p>La Galaxy Tab S8 ofrece una pantalla AMOLED de 11 pulgadas, el procesador Snapdragon 8 Gen 1 y soporte para el S Pen, ideal para productividad y entretenimiento.</p>
<del>$700.000</del>
<h1 class="card-price">$580.000</h1>
<h4>17%</h4>
<button class="secondary">Añadir al carrito</button>
</div>
<div class="card">
<img class="card-image" src="img/product8.avif" alt="LG OLED55CXPUA" srcset="">
<h1 class="card-title">LG OLED55CXPUA</h1>
<p>El televisor LG OLED55CXPUA cuenta con una pantalla OLED 4K de 55 pulgadas, procesador α9 Gen 4 AI y soporte para Dolby Vision y Dolby Atmos.</p>
<del>$2.000.000</del>
<h1 class="card-price">$1.800.000</h1>
<h4>10%</h4>
<button class="secondary">Añadir al carrito</button>
</div>
<div class="card">
<img class="card-image" src="img/product9.png" alt="Apple Watch Series 8" srcset="">
<h1 class="card-title">Apple Watch Series 8</h1>
<p>El Apple Watch Series 8 ofrece una pantalla Always-On Retina, sensores avanzados para monitoreo de salud y actividad, y un diseño elegante y duradero.</p>
<del>$450.000</del>
<h1 class="card-price">$350.000</h1>
<h4>22%</h4>
<button class="secondary">Añadir al carrito</button>
</div>
<div class="card">
<img class="card-image" src="img/product10.avif" alt="Nest Learning Thermostat" srcset="">
<h1 class="card-title">Nest Learning Thermostat</h1>
<p>El Nest Learning Thermostat de Google ajusta automáticamente la temperatura de tu hogar, aprendiendo tus preferencias y optimizando el consumo de energía para un confort eficiente.</p>
<del>$300.000</del>
<h1 class="card-price">$240.000</h1>
<h4>20%</h4>
<button class="secondary">Añadir al carrito</button>
</div>
<div class="card">
<img class="card-image" src="img/product11.webp" alt="Sony PlayStation 5" srcset="">
<h1 class="card-title">Sony PlayStation 5</h1>
<p>La PlayStation 5 de Sony ofrece gráficos de última generación, tiempos de carga reducidos y una biblioteca extensa de juegos, brindando una experiencia de juego inmersiva y emocionante.</p>
<del>$900.000</del>
<h1 class="card-price">$750.000</h1>
<h4>17%</h4>
<button class="secondary">Añadir al carrito</button>
</div>
<div class="card">
<img class="card-image" src="img/product12.png" alt="Dyson Pure Cool TP04" srcset="">
<h1 class="card-title">Dyson Pure Cool TP04</h1>
<p>El Dyson Pure Cool TP04 es un purificador de aire y ventilador todo en uno, que captura contaminantes y elimina olores con su filtro HEPA y carbono, mientras proporciona un flujo de aire refrescante.</p>
<del>$500.000</del>
<h1 class="card-price">$400.000</h1>
<h4>20%</h4>
<button class="secondary">Añadir al carrito</button>
</div>
</div>
</section>
<section>
<div class="bannerSale">
<div class="contentSale">
<h2 class="textSlide">Nuestro nuevo Apple Watch tiene el 50% de descuento, ¡Descubre muchos más y aprovecha nuestros descuentos!</h2>
<button class="secondary"><a href="pdp.html" class="abanner"> Ver más</a></button>
</div>
</div>
</section>
</main>
<footer>
<div class="subfooter1">
<div class="razon">
<h3>Athens S.A.S</h3>
<h3>NIT: 9003258</h3>
</div>
<div class="redes">
<a href="https://www.facebook.com/?locale=es_LA" target="_blank" aria-label="Facebook">
<i class="fa-brands fa-facebook-f"></i>
</a>
<a href="https://www.instagram.com/" target="_blank" aria-label="Instagram">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="https://x.com/?lang=es" target="_blank" aria-label="Twitter">
<i class="fa-brands fa-twitter"></i>
</a>
</div>
<div class="pagos">
<div class="arriba">
<h3>Método de Pagos</h3>
</div>
<div class="abajo">
<img src="img/efectivo-icon.svg" alt="Icono de Efectivo">
<img src="img/tarjeta-icon.svg" alt="Icono de Tarjeta">
<img src="img/transfer-icon.svg" alt="Icono de Transferencia">
</div>
</div>
</div>
<div class="subfooter2">
<h3>Tecnología</h3>
<h3>Electrodomésticos</h3>
<h3>Celulares</h3>
<h3>Hogar</h3>
</div>
</footer>
</body>
</html>