-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
262 lines (250 loc) · 8.31 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Aerolíneas SKYP</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="assets/css/style.css" />
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<!--SECTION body-->
<!-- ANCHOR navbar -->
<nav class="navbar bg-primary navbar-expand-lg" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">SKYP</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#"
>Planifica tu Viaje</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Administra tu vuelo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Check-In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Centro de Ayuda</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- ANCHOR main -->
<h3 class="title px-5">
Viaja con precios ultra rebajados a los mejores destinos
</h3>
<div class="row row-cols-1 row-cols-md-3 g-4 mb-5">
<div class="col">
<div class="card h-100">
<img
src="assets/img/buenos-aires.jpg"
class="card-img-top"
alt="Buenos Aires"
/>
<div class="card-body">
<h5 class="card-title">Buenos Aires</h5>
<p class="card-text">
Descubre la magia de Buenos Aires: tango apasionado, arquitectura
vibrante, gastronomía exquisita y cultura envolvente te esperan.
</p>
</div>
<div class="card-footer">
<a
href="javascript:void(0);"
class="text-body-secondary"
id="Baires"
>Ver más</a
>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img
src="assets/img/machu-picchu.jpg"
class="card-img-top"
alt="Machu Picchu"
/>
<div class="card-body">
<h5 class="card-title">Machu Picchu</h5>
<p class="card-text">
Embárcate en una aventura única en Machu Picchu: misteriosa
historia, paisajes impresionantes y una experiencia inolvidable te
aguardan
</p>
</div>
<div class="card-footer">
<a
href="javascript:void(0);"
class="text-body-secondary"
id="MachuPicchu"
>Ver más</a
>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img
src="assets/img/rio-de-janerio.jpg"
class="card-img-top"
alt="Río de Janeiro"
/>
<div class="card-body">
<h5 class="card-title">Río de Janeiro</h5>
<p class="card-text">
Vive la energía vibrante de Río de Janeiro: playas deslumbrantes,
carnaval inolvidable, música contagiosa y una alegría incomparable
te esperan.
</p>
</div>
<div class="card-footer">
<a href="javascript:void(0);" class="text-body-secondary" id="Rio"
>Ver más</a
>
</div>
</div>
</div>
</div>
<!--!SECTION body-->
<!--SECTION modal-->
<!--ANCHOR detallesBaires-->
<div class="detalles" id="detallesBaires">
<div class="card">
<button type="button" class="btn-close" aria-label="Close"></button>
<div class="row g-0">
<div class="col-md-6" id="modalCardImg">
<img
src="assets/img/buenos-aires.jpg"
class="img-fluid rounded"
alt="Buenos Aires"
/>
</div>
<div class="col-md-6" id="modalCardBody">
<div class="card-body">
<h5 class="card-title">Buenos Aires</h5>
<p class="card-text">
Explora Buenos Aires y descubre sus joyas culturales. Visita el
emblemático barrio de La Boca, hogar del famoso Caminito, con
sus coloridas casas y artistas callejeros. Recorre el histórico
barrio de San Telmo, conocido por sus ferias de antigüedades y
su arquitectura colonial. No te pierdas el elegante barrio de
Recoleta, donde encontrarás el Cementerio de la Recoleta y el
icónico Teatro Colón. Sumérgete en la vida nocturna en Palermo
Soho, con sus bares y restaurantes trendy. Buenos Aires ofrece
una experiencia inolvidable llena de historia, arte y diversión.
</p>
<p class="card-text">
<small class="text-body-secondary"
>Ver vuelos disponibles</small
>
</p>
</div>
</div>
</div>
</div>
</div>
<!--ANCHOR detallesMachuPicchu-->
<div class="detalles" id="detallesMachuPicchu">
<div class="card">
<button type="button" class="btn-close" aria-label="Close"></button>
<div class="row g-0">
<div class="col-md-6" id="modalCardImg">
<img
src="assets/img/machu-picchu.jpg"
class="img-fluid rounded"
alt="Machu Picchu"
/>
</div>
<div class="col-md-6" id="modalCardBody">
<div class="card-body">
<h5 class="card-title">Machu Picchu</h5>
<p class="card-text">
Descubre la majestuosidad de Machu Picchu, una maravilla
arqueológica enclavada en las montañas de los Andes peruanos.
Explora sus impresionantes terrazas incas, el Templo del Sol y
la Puerta del Sol con vistas panorámicas. Sumérgete en la rica
historia que envuelve cada piedra y disfruta de la energía
mística del lugar. Las rutas de senderismo como el Camino Inca
te llevan a través de paisajes espectaculares. Machu Picchu,
declarada Patrimonio de la Humanidad, ofrece una experiencia
inolvidable, donde la cultura ancestral y la naturaleza se
entrelazan de manera única.
</p>
<p class="card-text">
<small class="text-body-secondary"
>Ver vuelos disponibles</small
>
</p>
</div>
</div>
</div>
</div>
</div>
<!--ANCHOR detallesRio-->
<div class="detalles" id="detallesRio">
<div class="card">
<button type="button" class="btn-close" aria-label="Close"></button>
<div class="row g-1">
<div class="col-md-6" id="modalCardImg">
<img
src="assets/img/rio-de-janerio.jpg"
class="img-fluid rounded"
alt="Río de janeiro"
/>
</div>
<div class="col-md-6" id="modalCardBody">
<div class="card-body">
<h5 class="card-title">Rio de Janeiro</h5>
<p class="card-text">
Explora la exuberante belleza de Río de Janeiro, conocida por
sus icónicas playas como Copacabana e Ipanema, donde el sol
brilla sobre arenas doradas y aguas cristalinas. Asciende al
famoso Cristo Redentor para disfrutar de vistas panorámicas de
la ciudad y la bahía de Guanabara. Sumérgete en el vibrante
carnaval, donde la samba y el color deslumbran las calles.
Descubre la autenticidad en el bohemio barrio de Santa Teresa y
saborea la cocina brasileña en el Mercado Municipal. Río de
Janeiro, con su energía contagiosa, te espera para vivir
experiencias inolvidables.
</p>
<p class="card-text">
<small class="text-body-secondary"
>Ver vuelos disponibles</small
>
</p>
</div>
</div>
</div>
</div>
</div>
<!--!SECTION modal-->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"
></script>
<script src="assets/js/script.js"></script>
</body>
</html>