-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path4-2-catalogo_alojamientos.html
351 lines (344 loc) · 22.6 KB
/
4-2-catalogo_alojamientos.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
{%extends './base.html'%}
{% block tittle%} Fly clouds {% endblock%}
{% block body%}
<!-- Vincula tu CSS desde la carpeta templates/CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/4-2-catalogo_alojamiento.css')}}">
<div class="salvadora"></div>
<div class="p-4 p-md-5 mb-4 rounded text-body-emphasis banner"
style="background: linear-gradient(rgb(255, 30, 30), rgb(253, 255, 113));">
<div class="col-lg-6 px-0">
<h1 class="display-4 fst-italic"><b>Fly</b> and stay like in the <b>Clouds </b></h1>
<p class="lead my-3">Explora la completa diversidad que puedes hallar en todo nuestro continente, lleno de
gastronomía y cultura.</p>
<p class="lead mb-0"><a href="https://www.youtube.com/watch?v=xvFZjo5PgG0" target="_blank"
class="text-body-emphasis fw-bold">Continua leyendo...</a></p>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="container mt-3 sub_caja_filtros">
<br>
<center>
<h2><i class="bi bi-funnel-fill"></i>Filtros</h2><br>
</center>
<div class="flex-shrink-0 p-3 bg-white" style="width: 380px;">
<ul class="list-unstyled ps-0">
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#mexico-collapse" aria-expanded="false">
<strong><i class="bi bi-chevron-right"></i>Mexico</strong>
</button>
<div class="collapse show" id="mexico-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a class="link-dark rounded" id="mostrar_ciudad_de_mexico">Ciudad de Mexico</a></li>
<li><a class="link-dark rounded" id="mostrar_guadalajara">Guadalajara</a></li>
<li><a class="link-dark rounded" id="mostrar_chihuahua">Chihuahua</a></li>
</ul>
</div>
</li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#colombia-collapse" aria-expanded="false">
<strong><i class="bi bi-chevron-right"></i>Colombia</strong>
</button>
<div class="collapse" id="colombia-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a class="link-dark rounded" id="mostrar_medellin">Medellín</a></li>
<li><a class="link-dark rounded" id="mostrar_bogota">Bogotá</a></li>
<li><a class="link-dark rounded" id="mostrar_cali">Cali</a></li>
</ul>
</div>
</li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#chile-collapse" aria-expanded="false">
<strong><i class="bi bi-chevron-right"></i>Chile</strong>
</button>
<div class="collapse" id="chile-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a class="link-dark rounded" id="mostrar_santiago">Santiago</a></li>
<li><a class="link-dark rounded" id="mostrar_arica">Arica</a></li>
<li><a class="link-dark rounded" id="mostrar_iquique">Iquique</a></li>
</ul>
</div>
</li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#argentina-collapse" aria-expanded="false">
<strong><i class="bi bi-chevron-right"></i>Argentina</strong>
</button>
<div class="collapse" id="argentina-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a class="link-dark rounded" id="mostrar_buenos_aires">Buenos Aires</a></li>
<li><a class="link-dark rounded" id="mostrar_cordoba">Córdoba</a></li>
<li><a class="link-dark rounded" id="mostrar_santa_fe">Santa Fe</a></li>
</ul>
</div>
</li>
<li class="mb-1">
<button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#brasil-collapse" aria-expanded="false">
<strong><i class="bi bi-chevron-right"></i>Brasil</strong>
</button>
<div class="collapse" id="brasil-collapse">
<ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
<li><a class="link-dark rounded" id="mostrar_sao">Sao Paulo</a></li>
<li><a class="link-dark rounded" id="mostrar_brasilia">Brasilia</a></li>
<li><a class="link-dark rounded" id="mostrar_rio">Río de Janeiro</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-9">
<div class="container mt-3 sub_caja_cartillas">
<div class="row margen_cartillas20">
<div class="col-md-6 card_responsive seccion1" id="buenos_aires">
<div class="card margen_card" style="width:100%">
<img class="card-img-top" src="{{ url_for('static', filename='img/alojamiento/alvear.jpg') }}"
alt="Card image">
<div class="card-body">
<h4 class="card-title destino">Buenos Aires, Argentina</h4>
<h4 class="card-title">Hotel Alvear Palace</h4>
<p class="card-text">
Un hotel de lujo ubicado en el barrio de Recoleta, conocido
por su elegancia clásica y servicios excepcionales.
</p>
<a href="#" class="btn btn-primary"> Reservar</a>
</div>
</div>
</div>
<div class="col-md-6 card_responsive seccion1" id="ciudad_de_mexico">
<div class="card margen_card" style="width:100%">
<img class="card-img-top" src="{{ url_for('static', filename='img/alojamiento/historico.jpg') }}"
alt="Card image">
<div class="card-body">
<h4 class="card-title destino">Ciudad de México, México</h4>
<h4 class="card-title">Hotel Histórico Central</h4>
<p class="card-text">
Ubicado en el centro histórico, ofrece una combinación de diseño
contemporáneo con toques históricos y servicio personalizado.
</p>
<a href="#" class="btn btn-primary"> Reservar</a>
</div>
</div>
</div>
<div class="col-md-6 card_responsive seccion1" id="guadalajara">
<div class="card margen_card" style="width:100%">
<img class="card-img-top" src="{{ url_for('static', filename='img/alojamiento/demetria.jpg') }}"
alt="Card image">
<div class="card-body">
<h4 class="card-title destino">Guadalajara, México</h4>
<h4 class="card-title">Hotel Demetria</h4>
<p class="card-text">
Un elegante hotel boutique que mezcla diseño moderno
con una atmósfera artística, ubicado en la colonia Lafayette.
</p>
<a href="#" class="btn btn-primary"> Reservar</a>
</div>
</div>
</div>
<div class="col-md-6 card_responsive seccion1" id="chihuahua">
<div class="card margen_card" style="width:100%">
<img class="card-img-top" src="{{ url_for('static', filename='img/alojamiento/sheraton.jpg') }}"
alt="Card image">
<div class="card-body">
<h4 class="card-title destino">Chihuahua, México</h4>
<h4 class="card-title">Sheraton Chihuahua Soberano</h4>
<p class="card-text">
Un hotel moderno que ofrece vistas impresionantes de la ciudad y
amplias comodidades para viajeros de negocios y placer.
</p>
<a href="#" class="btn btn-primary"> Reservar</a>
</div>
</div>
</div>
<div class="col-md-6 card_responsive seccion2" id="cali">
<div class="card margen_card" style="width:100%">
<img class="card-img-top" src="{{ url_for('static', filename='img/alojamiento/chipichape.jpg') }}"
alt="Card image">
<div class="card-body">
<h4 class="card-title destino">Cali, Colombia</h4>
<h4 class="card-title">Hotel Spiwak Chipichape</h4>
<p class="card-text">
Situado dentro de un centro comercial, es ideal para aquellos que
buscan comodidad y acceso a tiendas y entretenimiento.
</p>
<a href="#" class="btn btn-primary"> Reservar</a>
</div>
</div>
</div>
<div class="col-md-6 card_responsive seccion2" id="bogota">
<div class="card margen_card" style="width:100%">
<img class="card-img-top" src="{{ url_for('static', filename='img/alojamiento/opera.jpg') }}"
alt="Card image">
<div class="card-body">
<h4 class="card-title destino">Bogotá, Colombia</h4>
<h4 class="card-title">Hotel de la Opera</h4>
<p class="card-text">
Situado en el corazón de la Candelaria, ofrece una experiencia de
lujo con un toque histórico en un edificio colonial restaurado.
</p>
<a href="#" class="btn btn-primary"> Reservar</a>
</div>
</div>
</div>
<div class="col-md-6 card_responsive seccion2" id="medellin">
<div class="card margen_card" style="width:100%">
<img class="card-img-top" src="{{ url_for('static', filename='img/alojamiento/charlee.jpg') }}"
alt="Card image">
<div class="card-body">
<h4 class="card-title destino">Medellín, Colombia</h4>
<h4 class="card-title">The Charlee Hotel</h4>
<p class="card-text">
Un hotel moderno ubicado en El Poblado, famoso por su diseño
innovador, sus vistas panorámicas y su vida nocturna cercana.
</p>
<a href="#" class="btn btn-primary"> Reservar</a>
</div>
</div>
</div>
<div class="col-md-6 card_responsive seccion2" id="santiago">
<div class="card margen_card" style="width:100%">
<img class="card-img-top" src="{{ url_for('static', filename='img/alojamiento/lastarria.jpg') }}"
alt="Card image">
<div class="card-body">
<h4 class="card-title destino">Santiago de Chile, Chile</h4>
<h4 class="card-title">Hotel Cumbres Lastarria</h4>
<p class="card-text">
Un elegante hotel boutique ubicado en el vibrante barrio Lastarria,
perfecto para disfrutar de la vida cultural de Santiago.
</p>
<a href="#" class="btn btn-primary"> Reservar</a>
</div>
</div>
</div>
<div class="col-md-6 card_responsive seccion3" id="arica">
<div class="card margen_card" style="width:100%">
<img class="card-img-top" src="{{ url_for('static', filename='img/alojamiento/panamericana.jpg') }}"
alt="Card image">
<div class="card-body">
<h4 class="card-title destino">Arica, Chile</h4>
<h4 class="card-title">Panamericana Hotel Arica</h4>
<p class="card-text">
Ubicado frente al océano, este hotel es ideal para quienes buscan relajarse en la playa con vistas al mar.
</p>
<a href="#" class="btn btn-primary"> Reservar</a>
</div>
</div>
</div>
<div class="col-md-6 card_responsive seccion3" id="iquique">
<div class="card margen_card" style="width:100%">
<img class="card-img-top" src="{{ url_for('static', filename='img/alojamiento/iquique.jpg') }}"
alt="Card image">
<div class="card-body">
<h4 class="card-title">Iquique, Chile</h4>
<h4 class="card-title">Hotel Terrado Suites Iquique</h4>
<p class="card-text">
Un hotel frente al mar con amplias suites y vistas espectaculares al Océano Pacífico.
</p>
<a href="#" class="btn btn-primary"> Reservar</a>
</div>
</div>
</div>
<div class="col-md-6 card_responsive seccion3" id="cordoba">
<div class="card margen_card" style="width:100%">
<img class="card-img-top" src="{{ url_for('static', filename='img/alojamiento/azur.jpg') }}"
alt="Card image">
<div class="card-body">
<h4 class="card-title">Córdoba, Argentina</h4>
<h4 class="card-title">Azur Real Hotel Boutique</h4>
<p class="card-text">
Un encantador hotel boutique en el centro histórico, que combina diseño moderno con toques coloniales.
</p>
<a href="#" class="btn btn-primary"> Reservar</a>
</div>
</div>
</div>
<div class="col-md-6 card_responsive seccion3" id="santa_fe">
<div class="card margen_card" style="width:100%">
<img class="card-img-top" src="{{ url_for('static', filename='img/alojamiento/intertower.jpg') }}"
alt="Card image">
<div class="card-body">
<h4 class="card-title">Santa Fe, Argentina</h4>
<h4 class="card-title">InterTower Hotel</h4>
<p class="card-text">
Ofrece un ambiente moderno en pleno centro de la ciudad, con fácil acceso a los principales puntos turísticos.
</p>
<a href="#" class="btn btn-primary"> Reservar</a>
</div>
</div>
</div>
<div class="col-md-6 card_responsive seccion4" id="sao">
<div class="card margen_card" style="width:100%">
<img class="card-img-top" src="{{ url_for('static', filename='img/alojamiento/unique.jpg') }}"
alt="Card image">
<div class="card-body">
<h4 class="card-title destino">Sao Paulo, Brasil</h4>
<h4 class="card-title">Hotel Unique</h4>
<p class="card-text">
Un hotel de diseño icónico con una arquitectura
impresionante y un rooftop con vistas panorámicas de la ciudad.
</p>
<a href="#" class="btn btn-primary"> Reservar</a>
</div>
</div>
</div>
<div class="col-md-6 card_responsive seccion4" id="brasilia">
<div class="card margen_card" style="width:100%">
<img class="card-img-top" src="{{ url_for('static', filename='img/alojamiento/royal.jpg') }}"
alt="Card image">
<div class="card-body">
<h4 class="card-title">Brasilia, Brasil</h4>
<h4 class="card-title">Royal Tulip Brasilia Alvorada</h4>
<p class="card-text">
Ubicado cerca del Palacio de Alvorada, ofrece lujo y comodidad en un entorno rodeado de naturaleza.
</p>
<a href="#" class="btn btn-primary"> Reservar</a>
</div>
</div>
</div>
<div class="col-md-6 card_responsive seccion4" id="rio">
<div class="card margen_card" style="width:100%">
<img class="card-img-top" src="{{ url_for('static', filename='img/alojamiento/copacabana.jpg') }}"
alt="Card image">
<div class="card-body">
<h4 class="card-title">Río de Janeiro, Brasil</h4>
<h4 class="card-title">Belmond Copacabana Palace</h4>
<p class="card-text">
Un hotel histórico frente a la famosa playa de Copacabana, conocido por su glamour y atención al detalle.
</p>
<a href="#" class="btn btn-primary"> Reservar</a>
</div>
</div>
</div>
<div class="col-md-6 card_responsive seccion4" id="buenos_aires">
<div class="card margen_card" style="width:100%">
<img class="card-img-top" src="{{ url_for('static', filename='img/alojamiento/faena.jpg') }}"
alt="Card image">
<div class="card-body">
<h4 class="card-title">Buenos Aires, Argentina</h4>
<h4 class="card-title">Hotel Faena Buenos Aires</h4>
<p class="card-text">
Ubicado en el moderno barrio de Puerto Madero, este hotel combina lujo contemporáneo
con un diseño artístico único, ofreciendo una experiencia sofisticada.
</p>
<a href="#" class="btn btn-primary"> Reservar</a>
</div>
</div>
</div>
</div>
<div class="container mt-3">
<ul class="pagination">
<li class="page-item"><a class="page-link" id="grupo1" href="#">1</a></li>
<li class="page-item"><a class="page-link" id="grupo2" href="#">2</a></li>
<li class="page-item"><a class="page-link" id="grupo3" href="#">3</a></li>
<li class="page-item"><a class="page-link" id="grupo4" href="#">4</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="{{ url_for('static', filename='js/servicio.js')}}"></script>
<script src="{{ url_for('static', filename='js/filtros.js')}}"></script>
<script src="{{ url_for('static', filename='js/secciones.js')}}"></script>
{% endblock%}