-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
359 lines (321 loc) · 15 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
<!DOCTYPE html>
<html lang="es">
<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" />
<title>Vivero Los Lirios</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="./frontend/assets/css/styles.css" />
<link rel="shortcut icon" href="./frontend/assets/images/icono.png" type="image/x-icon">
</head>
<body>
<!--Seccion Header-->
<header class="header">
<nav class="navegacion">
<div class="navegacion__logo">
<a href="#portada">
<img class="img" src="./frontend/assets/images/logo.png" alt="logo">
</a>
</div>
<ul class="menu">
<li class="menu_li"><a class="menu_link" href="#portada">INICIO</a></li>
<li class="menu_li"><a class="menu_link" href="#productos">PRODUCTOS</a></li>
<li class="menu_li"><a class="menu_link" href="#servicios">SERVICIOS</a></li>
<li class="menu_li"><a class="menu_link" href="#about_us">NOSOTROS</a></li>
<li class="menu_li"><a class="menu_link" href="#contacto">CONTACTO</a></li>
</ul>
<ul class="carrito">
<div class="menu_li" id="panelButton">
<button type="button" class="btn-panel"><a href="./panel.html">PANEL ADM</a></button>
</div>
<!-- <li class="menu_li" id="panelButton">
<button type="button" class="btn-panel"><a href="./panel.html">PANEL ADM</a></button>
</li> es lo mismo se use el div o li-->
<li class="menu_li"><a class="menu_link" href="./login.html">INGRESAR</a></li>
<!-- <li class="menu_li"><a class="menu_link" href="#">Log Out</a></li> -->
<li class="menu_li"><a class="menu_link" href="#"><i class="fa fa-shopping-cart"></i></a></li>
</ul>
<!-- MENU PARA CELULAR -->
<div id="menu__icono">
<i class="fa fa-bars" aria-hidden="true" id="menu-hamburguesa"></i>
<i class="fa fa-times close" aria-hidden="true" id="menu-cruz"></i>
</div>
<div class="menu__celular" id="menu__celular">
<ul class="menu">
<li class="menu_li"><a class="menu_link" href="#portada">INICIO</a></li>
<li class="menu_li"><a class="menu_link" href="#productos">PRODUCTOS</a></li>
<li class="menu_li"><a class="menu_link" href="#servicios">SERVICIOS</a></li>
<li class="menu_li"><a class="menu_link" href="#about_us">NOSOTROS</a></li>
<li class="menu_li"><a class="menu_link" href="#contacto">CONTACTO</a></li>
<br>
<br>
<li class="menu_li"><a class="menu_link" href="./login.html">INGRESAR</a></li>
<!-- <li class="menu_li"><a class="menu_link" href="#">Log Out</a></li> -->
<li class="menu_li"><a class="menu_link" href="#"><i class="fa fa-shopping-cart"></i></a></li>
<br>
<li class="menu_li" id="panelButtonContainerMobile">
<button type="button" class="btn-panel"><a href="./panel.html">PANEL ADM</a></button>
</li>
</ul>
</div>
<!-- FIN MENU PARA CELULAR -->
</nav>
</header>
<!-- Seccion portada -->
<section id="portada">
<div class="slider">
<ul>
<li><img src="./frontend/assets/images/carrusel0.jpg" alt="lirios rosa"></li>
<li><img src="./frontend/assets/images/carrusel1.jpg" alt="lirios amarillo"></li>
<li><img src="./frontend/assets/images/carrusel2.jpg" alt="lirios rojo"></li>
<li><img src="./frontend/assets/images/carrusel3.jpg" alt="jardin de lirios"></li>
</ul>
</div>
<div class="portada__box">
<div class="portada__box-container">
<h1>Virero Los Lirios</h1>
<p>¡Bienvenido/a! Aquí encontrarás una amplia variedad de plantas de Lirios de alta calidad para darle un toque
natural y fresco a cualquier espacio de tu hogar.</p>
<br>
<p>Explora nuestra colección y encuentra el Lirio ideal para dar vida a tu hogar. ¡No esperes más para disfrutar
de la belleza de la naturaleza en tu hogar!</p>
<button><a href="#productos">VER PRODUCTOS</a></button>
</div>
</div>
<div class="portada__fade"></div>
</section>
<!--Seccion Productos-->
<section id="productos" class="flex-productos-container">
<div>
<h2 id="product-title">PRODUCTOS</h2>
</div>
<div class="grid-container" id="grid-productos">
<!-- <div class=grid-item>
<img src="./frontend/assets/images/lirio_rojo.jpg" alt="imagen de un lirio color rojo." class="image-item" id="item1">
<div class="card-info">
<h4 class="card-title">Lirio Rojo.</h4>
<p class="card-text">Simbolismo: Amor y Seducción.</p>
<button class="btn-item">IR A COMPRAR</button>
</div>
</div>
<div class=grid-item>
<img src="./frontend/assets/images/lirio_blanco.jpg" alt="imagen de un lirio color blanco" class="image-item" id="item2">
<div class="card-info">
<h4 class="card-title">Lirio Blanco.</h4>
<p class="card-text">Simbolismo: Pureza y Belleza.</p>
<button class="btn-item">IR A COMPRAR</button>
</div>
</div>
<div class=grid-item>
<img src="./frontend/assets/images/lirio_naranja.jpg" alt="imagen de un lirio naranja" class="image-item" id="item3">
<div class="card-info">
<h4 class="card-title">Lirio Naranja.</h4>
<p class="card-text">Simbolismo: Pasión.</p>
<button class="btn-item">IR A COMPRAR</button>
</div>
</div>
<div class=grid-item>
<img src="./frontend/assets/images/frutales_rojo.jpg" alt="imagen de arbol frutal" class="image-item" id="item4">
<div class="card-info">
<h4 class="card-title">Árboles frutales.</h4>
<p class="card-text">Consultar según la temporada.</p>
<button class="btn-item">IR A COMPRAR</button>
</div>
</div>
<div class=grid-item>
<img src="./frontend/assets/images/cactus_verde.jpg" alt="imagen de cactus." class="image-item" id="item5">
<div class="card-info">
<h4 class="card-title">Cactus.</h4>
<p class="card-text">Fuentes de éxito personal y laboral.</p>
<button class="btn-item">IR A COMPRAR</button>
</div>
</div>
<div class=grid-item>
<img src="./frontend/assets/images/gromineas1.jpg" alt="imagen de gromíneas" class="image-item" id="item6">
<div class="card-info">
<h4 class="card-title">Gromíneas.</h4>
<p class="card-text">Plantita espetacular para decorar</p>
<button class="btn-item">IR A COMPRAR</button>
</div>
</div>
<div class=grid-item>
<img src="./frontend/assets/images/fuente_jardin.jpg" alt="imagen de fuentes de jardin" class="image-item" id="item7">
<div class="card-info">
<h4 class="card-title">Fuentes de Jardín</h4>
<p class="card-text">Contamos con distintos modelos.</p>
<button class="btn-item">IR A COMPRAR</button>
</div>
</div>
<div class=grid-item>
<img src="./frontend/assets/images/maceta_roja.jpg" alt="imagen de maceta roja." class="image-item" id="item8">
<div class="card-info">
<h4 class="card-title">Macetas</h4>
<p class="card-text">Variedad en colores y modelos.</p>
<button class="btn-item">IR A COMPRAR</button>
</div>
</div>
<div class=grid-item>
<img src="./frontend/assets/images/herramientas.jpg" alt="imagen de herramientas de jardineria." class="image-item"
id="item9">
<div class="card-info">
<h4 class="card-title">Herramientas.</h4>
<p class="card-text">Palas, regaderas, mangueras y mas.</p>
<button class="btn-item">IR A COMPRAR</button>
</div>
</div> -->
</div>
</section>
<!-- seccion de informacion -->
<section id="informacion">
<div class="info-container">
<div class="info-item">
<img src="./frontend/assets/icons/001-nuevo.png" alt="imagen de promocion.">
<h3>No te pierdas nuestras promociones.</h3>
<p>Seguinos.</p>
</div>
<div class="info-item">
<img src="./frontend/assets/icons/002-cupn.png" alt="imagen de tarjeta de regalo">
<h3>Regala una Giftcard.</h3>
<p>Podes realizar regalos por montos.</p>
</div>
<div class="info-item">
<img src="./frontend/assets/icons/003-negro.png" alt="imagen de forma de pago.">
<h3>Pago Seguro</h3>
<p>Realizá tu compra con tarjeta, transferencia o efectivo.</p>
</div>
</div>
</section>
<!-- Seccion de servicios -->
<section id="servicios">
<div class="flex-elem-serv">
<div>
<h2 id="servicios-title">SERVICIOS</h2>
</div>
<div class="serv-flex-container">
<div class="serv-flex-item">
<div class="card-info">
<h4 class="card-title-serv">Asesoramiento Profecional.</h4>
<p class="card-text-serv">Despejamos todas sus dudas al instante.</p>
</div>
<img class="image-serv" src="./frontend/assets/images/profesional1.jpg" alt="imagen de un profecional botánico.">
</div>
<div class="serv-flex-item">
<div class="card-info">
<h4 class="card-title-serv">Diseño y ejecucion de<br>parques y jardines.</h4>
<p class="card-text-serv">Contamos con especialistas en paisajismo.</p>
</div>
<img class="image-serv" src="./frontend/assets/images/servicio_jardineria.jpg"
alt="imagen de un paisajista trabajando.">
</div>
<div class="serv-flex-item">
<div class="card-info">
<h4 class="card-title-serv">Envios a Domicilio.</h4>
<p class="card-text-serv">Consulte precios por envios a domicilio.</p>
</div>
<img class="image-serv" src="./frontend/assets/images/entrega.jpg"
alt="imagen de hombre haciendo entrega a domicilio.">
</div>
</div>
</div>
</section>
<!-- Seccion sobre Nosotros -->
<section id="about_us">
<h2 class=" about_us-title">SOBRE NOSOTROS</h2>
<div class="about_us__box">
<div class="about_us__box-container">
<img class="responsive" src="./frontend/assets/images/profecional.jpg" alt="about_us">
<br>
<p> En nuestra tienda de Lirios, creemos firmemente en el poder transformador de la naturaleza en nuestros hogares y en nuestras vidas. Nos enorgullece ofrecer una amplia variedad de plantas de Lirios de alta calidad, herramientas y accesorios para el cuidado de tus plantas, y servicios de jardinería y asesoramiento para que puedas disfrutar de un hogar lleno de vida y belleza natural.</p>
<br>
<p>Nuestro equipo de expertos en jardinería está comprometido con ofrecer un servicio de atención al cliente excepcional, y estamos aquí para ayudarte a encontrar los productos adecuados para tus necesidades y para asegurarnos de que tus plantas de Lirios reciban el cuidado y el mantenimiento adecuado. Nos tomamos en serio la calidad y la sostenibilidad de nuestros productos, y nos esforzamos por ofrecer plantas de Lirios cultivadas de manera responsable y respetuosa con el medio ambiente.</p>
<br>
<p>En definitiva, en nuestra tienda de Lirios nos esforzamos por ayudarte a crear un hogar lleno de vida y de belleza natural. Estamos aquí para apoyarte en todas tus necesidades de jardinería, desde la elección de la planta adecuada hasta el cuidado y el mantenimiento de tus plantas de Lirios. </p>
<br>
<p> Muchas gracias por confiar en nosotros.</p>
</div>
</div>
</section>
<!-- Seccion contacto -->
<section id="contacto">
<h2 class="contacto__titulo"> CONTACTANOS </h2>
<div class="contacto__container">
<form id="form" action="https://formspree.io/f/moqzbkod" method="POST">
<label for="nombre">Nombre:
<input type="text" name="nombre" id="nombre">
</label>
<label for="email">Correo:
<input type="email" name="email" id="email">
</label>
<label for="provincia">Provincia:
<select name="provincia" id="provincia"></select>
</label>
<label for="ciudad">Ciudad:
<select name="ciudad" id="ciudad"></select>
</label>
<label for="mensaje">Mensaje:
<textarea name="mensaje" id="mensaje" cols="30" rows="8"></textarea>
</label>
<button id="submit" type="submit">ENVIAR</button>
</form>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12553.419242785501!2d-61.81092347452089!3d-38.13194196596664!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95eceeb3c5f52fcd%3A0x6d75d51090223690!2sVivero%20Los%20Lirios!5e0!3m2!1ses-419!2sar!4v1683947964591!5m2!1ses-419!2sar"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</section>
<!--Seccion footer-->
<section>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>Compañia</h4>
<ul>
<li><a href="#about_us">Sobre Nosotros</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#productos">Productos</a></li>
<li><a href="#"><i class="fa fa-whatsapp"> +549-113245678</i></a></li>
</ul>
</div>
<div class="footer-col">
<h4>Ayuda</h4>
<ul>
<li><a href="#">Envios</a></li>
<li><a href="#">Devoluciones</a></li>
<li><a href="#">Estado de orden</a></li>
<li><a href="#">Opciones de pago</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Compra On-line</h4>
<ul>
<li><a href="#">Ver productos</a></li>
<li><a href="#">Ver servicios</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Nuestas Redes Sociales</h4>
<div class="redes-sociales">
<ul>
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
</div>
</footer>
</section>
<!-- Icono flotante de whatsapp -->
<div id="whatsapp">
<a href="#"><img src="./frontend/assets/icons/whatsapp.png" alt="icono de whatsapp"></a>
</div>
<script src="./frontend/assets/js/index.js"></script>
<script src="https://kit.fontawesome.com/23b68efae4.js" crossorigin="anonymous"></script>
</body>
</html>