-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
314 lines (222 loc) · 12.2 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./CSS/styles_index.css">
<link rel="shortcut icon" href="./IMG/Favicon/Favicon.png" type="image/png">
<title>Inicio - La Frintanguita - Tienda de Abarrotes</title>
</head>
<body>
<header>
<div class="header__superior">
<a href="index.html"><img src="IMG/LogotiposOrganizacion/LaFritanguita200x50.png" class="index__main_img" alt="Logotipo de La Fritanguita - Color naranja con 'La Fritanguita' en color blanco"></a>
<form method="post" target="_blank">
<span class="header__elemento__central">
Encuentra el producto que necesitas <input type="search" class="barra__busqueda__index" name="BuscarProductos" list="ListaProductosBarraBusqueda" placeholder="Escribe aquí el producto que quieres encontrar...">
<input type="submit" value="Buscar Productos" class="btn__buscar_productos">
</span>
</form>
<datalist id="ListaProductosBarraBusqueda">
<option value="Bebidas Alcohólicas">
<option value="Bebidas No Alcohólicas">
<option value="Carnes">
<option value="Cuidado y Limpieza del Hogar">
<option value="Cuidado y Limpieza Personal">
<option value="Cuidado y Limpieza de la Ropa">
<option value="Dulces y Pasabocas">
<option value="Granos">
<option value="Helados">
<option value="Lácteos">
<option value="Cigarrillos">
<option value="Farmacia">
<option value="Panadería y Repostería">
<option value="Frutas y Verduras">
<option value="Mascotas">
</datalist>
<span id="span__header">
<a href="iniciarSesion.html"><img src="./IMG/Iconos/Login1X.png" class="iconos__header" alt="Imagen del prototipo de una persona"></a>
<a href="./miCarrito.html"><img src="./IMG/Iconos/CarritoCompras1X.png" class="iconos__header" alt="Imagen de un carrito de compras"></a>
</span>
</div>
<nav>
<ul class="barra__navegacion">
<a href="index.html"><li><img src="./IMG/Iconos/Inicio1X.png" alt="Imagen de una casa que dirige al usuario a la página inicio o home page"></li></a>
<a href="productos.html"><li>Productos</li></a>
<a href="quienesSomos.html"><li>Quiénes Somos</li></a>
<a href="comoComprar.html"><li>Cómo Comprar</li></a>
<a href="miCuenta.html">Mi Cuenta</a>
<a href="#contactanos"><li>Contáctanos</li></a>
<a href="servicioCliente.html"><li>Servicio al Cliente</li></a>
</ul>
</nav>
</header>
<main class="main__organizacion__principal">
<div>
<!-- CONTENIDO PRIMER DIV -->
</div>
<hr>
<br>
<section class="productos__mas__comprados">
<h2>Los Productos MÁS COMPRADOS Por Nuestros Clientes</h2> <br>
<div class="barra__mas__comprados">
<div class="div__producto">
<a href="#"><img src="./IMG/Productos/ArrozRoaLibra.png" alt="Imágen de una libra de arroz roa"></a>
<h5>Arroz Roa x 500g</h5>
<h4>1.600</h4> <!-- TODO -> PHP -->
<!-- BOTÓN DE INCREMENTO Y DECREMENTO DE PRODUCTOS -->
<div class="boton__decremento__incremento">
<span class="menos-1">-</span>
<span class="numero-1">01</span>
<span class="mas-1">+</span>
</div>
<button class="btn__añadir__al__carrito" type="button">Añadir al Carrito</button>
</div>
<div class="div__producto">
<a href="#"><img src="./IMG/Productos/LecheColantaEntera.jpg" alt="Imagen de una bolsa de leche colanta entera por 1 litro"></a>
<h5>Leche Colanta Entera x 1000 ml</h5>
<h4>2.800</h4> <!-- TODO -> PHP -->
<!-- BOTÓN DE INCREMENTO Y DECREMENTO DE PRODUCTOS -->
<div class="boton__decremento__incremento">
<span class="menos-2">-</span>
<span class="numero-2">01</span>
<span class="mas-2">+</span>
</div>
<button class="btn__añadir__al__carrito" type="button">Añadir al Carrito</button>
</div>
<div class="div__producto">
<a href="#"><img src="./IMG/Productos/LecheColantaDeslactosada.jpg" alt="Imagen de una bolsa de leche colanta entera por 1 litro"></a>
<h5>Leche Colanta Deslactosada x 1000 ml</h5>
<h4>2.800</h4> <!-- TODO -> PHP -->
<!-- BOTÓN DE INCREMENTO Y DECREMENTO DE PRODUCTOS -->
<div class="boton__decremento__incremento">
<span class="menos-3">-</span>
<span class="numero-3">01</span>
<span class="mas-3">+</span>
</div>
<button class="btn__añadir__al__carrito" type="button">Añadir al Carrito</button>
</div>
<div class="div__producto">
<a href="#"><img src="./IMG/Productos/HuevosAvinalAA.jpg" alt="Imagen de una canasta de huevos avinal"></a>
<h5>Canasta de Huevos Avinal x 30 uds</h5>
<h4>14.500</h4> <!-- TODO -> PHP -->
<!-- BOTÓN DE INCREMENTO Y DECREMENTO DE PRODUCTOS -->
<div class="boton__decremento__incremento">
<span class="menos-4">-</span>
<span class="numero-4">01</span>
<span class="mas-4">+</span>
</div>
<button class="btn__añadir__al__carrito" type="button">Añadir al Carrito</button>
</div>
<div class="div__producto">
<a href="#"><img src="./IMG/Productos/DetergenteAriel_450gr.jpg" alt="Imagen de una bolsa de detergente Ariel - Verde con blanco"></a>
<h5>Detergente en Polvo Ariel x 450g</h5>
<h4>3.600</h4> <!-- TODO -> PHP -->
<!-- BOTÓN DE INCREMENTO Y DECREMENTO DE PRODUCTOS -->
<div class="boton__decremento__incremento">
<span class="menos-5">-</span>
<span class="numero-5">01</span>
<span class="mas-5">+</span>
</div>
<button class="btn__añadir__al__carrito" type="button">Añadir al Carrito</button>
</div>
</div>
</section>
<hr>
<br>
<div class="main__categorias">
<h2>Categorías</h2> <br>
<div class="categorias__filas">
<div>
<a href="#"><img src="./IMG/Categorias/BebidasAlcoholicas.png" alt="Imágen de una bebida alcohólica"></a>
<h3>Bebidas Alcohólicas</h3>
</div>
<div>
<a href="#"><img src="./IMG/Categorias/BebidasNoAlcoholicas.jpg" alt="Imagen de una bebida no alcohólica"></a>
<h3>Bebidas No Alcohólicas</h3>
</div>
<div>
<a href="#"><img src="./IMG/Categorias/Carnes.png" alt="Imágen de un filete (carne)"></a>
<h3>Carnes</h3>
</div>
<div>
<a href="#"><img src="./IMG/Categorias/CuidadoHogar.jpg" alt="Imagen de productos para la limpieza del hogar como blanqueador, fabulos, etc."></a>
<h3>Cuidado y Limpieza del Hogar</h3>
</div>
<div>
<a href="#"><img src="./IMG/Categorias/CuidadoPersonal.png" alt="Imagen de productos para el cuidado personal tales como la crema dental, jabón de baño, etc."></a>
<h3>Cuidado y Limpieza Personal</h3>
</div>
</div>
<div class="categorias__filas">
<div>
<a href="#"><img src="./IMG/Categorias/CuidadoRopa.jpg" alt="Imagen de ropa entre ellas camisas y pantalones"></a>
<h3>Cuidado y Limpieza de la ropa</h3>
</div>
<div>
<a href="#"><img src="./IMG/Categorias/DulcesPasabocas.jpg" alt="Imagen que contiene diversos dulces como chupetas y diversas golosinas"></a>
<h3>Dulces y Pasabocas</h3>
</div>
<div>
<a href="#"><img src="./IMG/Categorias/GranosCereales.jpg" alt="Imagen de diversos granos tales como arroz, fríjoles, etc"></a>
<h3>Granos</h3>
</div>
<div>
<a href="#"><img src="./IMG/Categorias/Helados.jpg" alt="Imagen de un delicioso helado"></a>
<h3>Helados</h3>
</div>
<div>
<a href="#"><img src="./IMG/Categorias/Lacteos.jpg" alt="Imagen que muestra una botella de deliciosa leche"></a>
<h3>Lácteos</h3>
</div>
</div>
<div class="categorias__filas">
<div>
<a href="#"><img src="./IMG/Categorias/Cigarrillos.jpg" alt="Imagen de una cajetilla de cigarrillos"></a>
<h3>Cigarrillos</h3>
</div>
<div>
<a href="#"><img src="./IMG/Categorias/Farmacia.jpg" alt="Imagen que contiene varios tipos de medicamentos"></a>
<h3>Farmacia</h3>
</div>
<div>
<a href="#"><img src="./IMG/Categorias/Panadería.jpg" alt="Imagen de diversos tipos de panes"></a>
<h3>Panadería y Repostería</h3>
</div>
<div>
<a href="#"><img src="./IMG/Categorias/FrutasVerduras.png" alt="Imagen que contiene muchas frutas y verduras"></a>
<h3>Frutas y Verduras</h3>
</div>
<div>
<a href="#"><img src="./IMG/Categorias/Mascotas.jpg" alt="Imágen de mascotas (perros y gatos)"></a>
<h3>Mascotas</h3>
</div>
</div>
</div>
</main>
<br>
<hr>
<footer>
<div class="footer__contactanos" id="contactanos">
<h2>Contáctanos</h2>
<h3>Ubicación</h3>
<p>Medellín, Antioquia, Colombia</p>
<h3>Dirección del Establecimiento</h3>
<p>Calle 42C #90A-104</p>
<h3>Correo Electrónico</h3>
<p>lafritanguita@gmail.com</p>
<h3>Números de Teléfono</h3>
<p>+57 3014706648 | +57 3023556500 | +57 6042530302</p>
<h3>Redes Sociales</h3>
<span class="header__span">
<a href="https://web.facebook.com/" target="_blank"><img src="./IMG/Iconos/IconoFacebook.png" alt="Logo de Facebook que dirige al Facebook de 'La Fritanguita'"></a>
<a href="https://www.instagram.com/soythomasva/" target="_blank"><img src="./IMG/Iconos/IconoInstagram.png" alt="Logo de Instagram que dirige al Instagram de 'La Fritanguita'"></a>
</span>
<hr>
<h5>2021 Copyright LA FRITANGUITA COLOMBIA. Todos los derechos reservados.</h5>
</div>
</footer>
<script src="./JS/btnIncrementoDecremento.js"></script>
</body>
</html>