-
Notifications
You must be signed in to change notification settings - Fork 0
/
portfolio.html
373 lines (366 loc) · 26.6 KB
/
portfolio.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
360
361
362
363
364
365
366
367
368
369
370
371
372
373
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Encontrar lo siemple en lo complejo y lo visible en lo insible es la magia de la fotografia. Como vemos el mundo, como deseamos verlo y como realmente es son distintas dimenciones que atraviesan a una persona cada dia de su vida. Erika viaja para descubrirlo. ">
<meta name="keywords" content="Erika, Zimmer, Fotografia, viajes, paisajes">
<title>Erika Travel Photography</title>
<link rel="icon" href="img/logos/favicon.png" sizes="16x16 32x32" type="image/png">
<link rel="apple-touch-icon" href="img/logos/apple-touch-icon.png">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<header class="centrado">
<h1 class="tituloWeb tituloWeb_big">Erika PH</h1>
</header>
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top ">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">Sobre mi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Porfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="map.html">Bitácora</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contacto</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="centrado">
<div class="contentBox">
<div class="pageHeader img-grayscale" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active bottom-left-margin" aria-current="page">Portfolio</li>
</ol>
</div>
<section class="content-image-grid">
<div class="div1 img-grayscale img-grayscale_transform">
<img class="image-class image-class_big"
id="imgPortfolio1"
srcset="img/portfolio/Italia-Roma-003-mobile.webp 400w,
img/portfolio/Italia-Roma-003.webp 3000w"
sizes=" (max-width: 450px) 100%,
(max-width: 3000px) 3000px"
src="img/portfolio/Italia-Roma-003.webp"
data-bs-toggle="modal"
data-bs-target="#staticBackdrop"
alt="Fotografia tomada por Erika Zimmer de Roma, Italia."
loading="lazy">
</div>
<div class="div2 img-grayscale img-grayscale_transform">
<img class="image-class image-class_big"
id="imgPortfolio2"
srcset="img/portfolio/Italia-Roma-004-mobile.webp 400w,
img/portfolio/Italia-Roma-004.webp 3000w"
sizes=" (max-width: 450px) 100%,
(max-width: 3000px) 3000px"
src="img/portfolio/Italia-Roma-004.webp"
data-bs-toggle="modal"
data-bs-target="#staticBackdrop2"
alt="Fotografia tomada por Erika Zimmer de Roma, Italia."
loading="lazy">
</div>
<div class="div3 img-grayscale img-grayscale_transform">
<img class="image-class image-class_big"
id="imgPortfolio3"
srcset="img/portfolio/Inglaterra-Londres-002-mobile.webp 400w,
img/portfolio/Inglaterra-Londres-002.webp 3000w"
sizes=" (max-width: 450px) 100%,
(max-width: 3000px) 3000px"
src="img/portfolio/Inglaterra-Londres-002.webp"
data-bs-toggle="modal"
data-bs-target="#staticBackdrop3"
alt="Fotografia tomada por Erika Zimmer de Londres, Inglaterra."
loading="lazy">
</div>
<div class="div4 img-grayscale img-grayscale_transform">
<img class="image-class image-class_big"
id="imgPortfolio1"
srcset="img/portfolio/Italia-Roma-001-mobile.webp 400w,
img/portfolio/Italia-Roma-001.webp 3000w"
sizes=" (max-width: 450px) 100%,
(max-width: 3000px) 3000px"
src="img/portfolio/Italia-Roma-001.webp"
data-bs-toggle="modal"
data-bs-target="#staticBackdrop4"
alt="Fotografia tomada por Erika Zimmer de Roma, Italia."
loading="lazy">
</div>
<div class="div5 img-grayscale img-grayscale_transform">
<img class="image-class image-class_big"
id="imgPortfolio2"
srcset="img/portfolio/Italia-Venecia-001-mobile.webp 400w,
img/portfolio/Italia-Venecia-001.webp 3000w"
sizes=" (max-width: 450px) 100%,
(max-width: 3000px) 3000px"
src="img/portfolio/Italia-Venecia-001.webp"
data-bs-toggle="modal"
data-bs-target="#staticBackdrop5"
alt="Fotografia tomada por Erika Zimmer de Venecia, Italia."
loading="lazy">
</div>
<div class="div6 img-grayscale img-grayscale_transform">
<img class="image-class image-class_big"
id="imgPortfolio3"
srcset="img/portfolio/Italia-Roma-005-mobile.webp 400w,
img/portfolio/Italia-Roma-005.webp 3000w"
sizes=" (max-width: 450px) 100%,
(max-width: 3000px) 3000px"
src="img/portfolio/Italia-Roma-005.webp"
data-bs-toggle="modal"
data-bs-target="#staticBackdrop6"
alt="Fotografia tomada por Erika Zimmer de Roma, Italia."
loading="lazy">
</div>
<div class="div7 img-grayscale img-grayscale_transform">
<img class="image-class image-class_big"
id="imgPortfolio4"
srcset="img/portfolio/EEUU-NewYork-003-mobile.webp 400w,
img/portfolio/EEUU-NewYork-003.webp 3000w"
sizes=" (max-width: 450px) 100%,
(max-width: 3000px) 3000px"
src="img/portfolio/EEUU-NewYork-003.webp"
data-bs-toggle="modal"
data-bs-target="#staticBackdrop7"
alt="Fotografia tomada por Erika Zimmer de New York, EEUU." loading="lazy">
</div>
<div class="div8 img-grayscale img-grayscale_transform">
<img class="image-class image-class_big"
id="imgPortfolio5"
srcset="img/portfolio/EEUU-NewYork-004-mobile.webp 400w,
img/portfolio/EEUU-NewYork-004.webp 3000w"
sizes=" (max-width: 450px) 100%,
(max-width: 3000px) 3000px"
src="img/portfolio/EEUU-NewYork-004.webp"
data-bs-toggle="modal"
data-bs-target="#staticBackdrop8"
alt="Fotografia tomada por Erika Zimmer de New York, EEUU."
loading="lazy">
</div>
<div class="div9 img-grayscale img-grayscale_transform">
<img class="image-class image-class_big"
id="imgPortfolio6"
srcset="img/portfolio/EEUU-NewYork-005-mobile.webp 400w,
img/portfolio/EEUU-NewYork-005.webp 3000w"
sizes=" (max-width: 450px) 100%,
(max-width: 3000px) 3000px"
src="img/portfolio/EEUU-NewYork-005.webp"
data-bs-toggle="modal"
data-bs-target="#staticBackdrop9"
alt="Fotografia tomada por Erika Zimmer de New York, EEUU."
loading="lazy">
</div>
</section>
</div>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h2 class="modal-title" id="staticBackdropLabel">La gama de los terracotas</h2>
<h3>Roma, Italia</h3>
</div>
<div class="modal-body">
<p>Roma, la capital de Italia, es una extensa ciudad cosmopolita que tiene a la vista casi 3,000 años de arte, arquitectura y cultura de influencia mundial. Las ruinas antiguas como las del Foro y el Coliseo evocan el poder del antiguo Imperio Romano. La ciudad del Vaticano, sede central de la Iglesia católica romana, cuenta con la Basílica de San Pedro y los Museos del Vaticano, que albergan obras maestras como los frescos de la Capilla Sixtina de Miguel Ángel.</p>
<p>La antiguedad de esta ciudad siempre invita a los viajeros a recorrer sus calles. Mientras, sus edificios vbestidos con los distintos tonos de amarillo y terracotan te enamoran y te invitan a descubrir las historias del ayer.</p>
<iframe class="collapse" id="mapStaticBackdrop1" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d190028.25709104026!2d12.395911060458408!3d41.91024148879601!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132f6196f9928ebb%3A0xb90f770693656e38!2sRoma%2C%20Italia!5e0!3m2!1ses-419!2sar!4v1635338115834!5m2!1ses-419!2sar" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secundario" data-bs-toggle="collapse" href="#mapStaticBackdrop1" role="button" aria-expanded="false" aria-controls="mapStaticBackdrop1">Mapa</button>
<button type="button" class="btn btn-principal" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="staticBackdrop2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdrop2Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h2 class="modal-title" id="staticBackdrop2Label">La magia entre los recuerdos</h2>
<h3>Villa Borghese, Roma, Italia</h3>
</div>
<div class="modal-body">
<p>Villa Borghese es un gran parque en la ciudad de Roma que incluye diferentes estilos desde el jardín a la italiana a grandes áreas de los edificios de estilo inglés, fuentes y estanques. Contiene en su interior varios edificios, museos y atracciones como la Villa Borghese Pinciana, sede de la famosa Galería Borghese, con obras maestras de Caravaggio, Rafael y Bernini. Es el tercer parque público más grande de la capital italiana, con 80 hectáreas, tras la Villa Doria-Pamphili y Villa Ada.</p>
<p>Se ubica en la zona de la colina reforestada y su adyacente rione (barrio) del Pincio.</p>
<iframe class="collapse" id="mapStaticBackdrop2" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2969.0395328844347!2d12.494376914709397!3d41.91350887117786!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132f610f738a8a69%3A0x3147991dfbbac07f!2sVilla%20Borghese%20Rooms!5e0!3m2!1ses-419!2sar!4v1635338180491!5m2!1ses-419!2sar" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secundario" data-bs-toggle="collapse" href="#mapStaticBackdrop2" role="button" aria-expanded="false" aria-controls="mapStaticBackdrop2">Mapa</button>
<button type="button" class="btn btn-principal" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="staticBackdrop3" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdrop3Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h2 class="modal-title" id="staticBackdrop3Label">Subiendo la bajada</h2>
<h3>Millennium Bridge, Londres, Inglaterra.</h3>
</div>
<div class="modal-body">
<p>El Puente del Milenio es un puente colgante de acero para uso peatonal que cruza el río Támesis en Londres, uniendo la zona de Bankside con la City de Londres. Es el primer puente en el centro de Londres en cruzar el Támesis desde que se construyera el Tower Bridge, o Puente de la Torre, en 1894.</p>
<p>Para quienes son seguidores de la saga de Harry Potter podran reconocer esta imagen, ya que este puente fue parte del esenario donde se filmo una de las escenas mas importantes del retorno de los mortífagos.</p>
<iframe class="collapse" id="mapStaticBackdrop3" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2483.2007766566157!2d-0.10073118488874458!3d51.509532418369254!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604abcc128291%3A0xbd5ceafc2f514e1c!2sMillennium%20Bridge!5e0!3m2!1ses-419!2sar!4v1635338208612!5m2!1ses-419!2sar" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secundario" data-bs-toggle="collapse" href="#mapStaticBackdrop3" role="button" aria-expanded="false" aria-controls="mapStaticBackdrop3">Mapa</button>
<button type="button" class="btn btn-principal" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="staticBackdrop4" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdrop4Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h2 class="modal-title" id="staticBackdrop4Label">El arco del cielo</h2>
<h3>Arco de Tito, Roma, Italia.</h3>
</div>
<div class="modal-body">
<p>El arco de Tito es un arco honorífico, situado en la Vía Sacra, justo al sureste del Foro, en Roma. Fue construido hacia el año 80 d. C. por el emperador romano Domiciano poco después de la muerte de su hermano mayor, Tito, para conmemorar las victorias de este, incluido el Sitio de Jerusalén del 70 d. C.</p>
<iframe class="collapse" id="mapStaticBackdrop4" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2970.1002398343!2d12.486460814708542!3d41.8907012726058!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132f61b43126d85f%3A0x19025b2f2efcf273!2sArco%20de%20Tito!5e0!3m2!1ses-419!2sar!4v1635338230083!5m2!1ses-419!2sar" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secundario" data-bs-toggle="collapse" href="#mapStaticBackdrop4" role="button" aria-expanded="false" aria-controls="mapStaticBackdrop4">Mapa</button>
<button type="button" class="btn btn-principal" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="staticBackdrop5" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdrop5Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h2 class="modal-title" id="staticBackdrop5Label">Canales del romance</h2>
<h3>Venecia, Italia.</h3>
</div>
<div class="modal-body">
<p>Venecia, la capital de la región de Véneto en el norte de Italia, abarca más de 100 islas pequeñas en una laguna del mar Adriático. No tiene caminos, sino solo canales, incluida la vía pública del Gran Canal, bordeada de palacios renacentistas y góticos. En la plaza central de San Marcos, se encuentra la basílica de San Marcos, que tiene un suelo de mosaicos bizantinos, y el campanario Campanile con vista a los techos rojos de la ciudad.</p>
<iframe class="collapse" id="mapStaticBackdrop5" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d358555.9859252587!2d12.10741095038944!3d45.40493047480163!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x477eb1daf1d63d89%3A0x7ba3c6f0bd92102f!2sVenecia%2C%20Italia!5e0!3m2!1ses-419!2sar!4v1635294756258!5m2!1ses-419!2sar" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secundario" data-bs-toggle="collapse" href="#mapStaticBackdrop5" role="button" aria-expanded="false" aria-controls="mapStaticBackdrop5">Mapa</button>
<button type="button" class="btn btn-principal" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="staticBackdrop6" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdrop6Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h2 class="modal-title" id="staticBackdrop6Label">Las batallas del ayer</h2>
<h3>El Coliseo, Roma, Italia.</h3>
</div>
<div class="modal-body">
<p>El Coliseo o Anfiteatro Flavio es un anfiteatro de la época del Imperio romano, construido en el siglo I. Está ubicado en el este del Foro Romano, y fue el más grande de los que se construyeron en el Imperio romano.</p>
<iframe class="collapse" id="mapStaticBackdrop6" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2970.122888131253!2d12.490042214708536!3d41.89021417263626!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132f61b6532013ad%3A0x28f1c82e908503c4!2sColiseo%20de%20Roma!5e0!3m2!1ses-419!2sar!4v1635338075821!5m2!1ses-419!2sar" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secundario" data-bs-toggle="collapse" href="#mapStaticBackdrop6" role="button" aria-expanded="false" aria-controls="mapStaticBackdrop6">Mapa</button>
<button type="button" class="btn btn-principal" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="staticBackdrop7" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdrop7Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h2 class="modal-title" id="staticBackdrop7Label">Sueños capturados</h2>
<h3>Rockefeller Center, New York, EEUU.</h3>
</div>
<div class="modal-body">
<p>Sobre la obra:</p>
<p>Los brillos metalizados, y los casi catorce metros de altura de la pieza, titulada "Bailarina Sentada", acaparan las miradas de la multitud de transeúntes que pasean frente al Rockefeller Center.</p>
<p>Durante la inauguración, Koons aseguró que en la bailarina convergen "un sentido de optimismo y fortaleza interna", según dijo al diario New York Post.</p>
<p>El hinchable pertenece a la serie "Antigüedad" y se inspira en una pieza de porcelana de principios de siglo encontrada en una fabrica rusa, a la que el artista ha dedicado con anterioridad varias piezas en distintos formatos.</p>
<p>El material escogido para esta instalación gigante es el nailon, fibra que le proporciona el efecto luminoso de un espejo.</p>
<p>El artista reconoció que le enamoró "la suavidad de la superficie y pensó que sería divertido trasladarlo a un inflable a gran escala".</p>
<iframe class="collapse" id="mapStaticBackdrop7" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7726.11929393286!2d-73.98201031670133!3d40.75863476112154!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258febaef0c77%3A0x7a60092d88b276c5!2sRockefeller%20Center%2C%20New%20York%2C%20NY%2C%20EE.%20UU.!5e0!3m2!1ses-419!2sar!4v1635338297589!5m2!1ses-419!2sar" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secundario" data-bs-toggle="collapse" href="#mapStaticBackdrop7" role="button" aria-expanded="false" aria-controls="mapStaticBackdrop7">Mapa</button>
<button type="button" class="btn btn-principal" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="staticBackdrop8" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdrop8Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h2 class="modal-title" id="staticBackdrop8Label">La bailarina y la city</h2>
<h3>Rockefeller Center, New York, EEUU.</h3>
</div>
<div class="modal-body">
<p>Sobre el espacio:</p>
<p>El Rockefeller Center es un complejo de 19 edificios comerciales, que cubre 22 acres entre las calles 48 y 51 en la Ciudad de Nueva York, Estados Unidos. Construido por la familia Rockefeller, el complejo está situado en Midtown Manhattan, abarcando el área entre la Quinta y la Sexta Avenida en la isla de Manhattan.</p>
<iframe class="collapse" id="mapStaticBackdrop8" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7726.11929393286!2d-73.98201031670133!3d40.75863476112154!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258febaef0c77%3A0x7a60092d88b276c5!2sRockefeller%20Center%2C%20New%20York%2C%20NY%2C%20EE.%20UU.!5e0!3m2!1ses-419!2sar!4v1635338297589!5m2!1ses-419!2sar" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secundario" data-bs-toggle="collapse" href="#mapStaticBackdrop8" role="button" aria-expanded="false" aria-controls="mapStaticBackdrop8">Mapa</button>
<button type="button" class="btn btn-principal" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="staticBackdrop9" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdrop9Label" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h2 class="modal-title" id="staticBackdrop9Label">Suspirando entre sueños y canciones</h2>
<h3>Rockefeller Center, New York, EEUU.</h3>
</div>
<div class="modal-body">
<p>Sobre el artista:</p>
<p>Jeff Koons es un escultor empresario y pintor estadounidense. La mayoría de sus obras van al corriente del arte conceptual, minimalista y pop. Muchos críticos lo denominan como el principal artista kitsch.</p>
<iframe class="collapse" id="mapStaticBackdrop9" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7726.11929393286!2d-73.98201031670133!3d40.75863476112154!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c258febaef0c77%3A0x7a60092d88b276c5!2sRockefeller%20Center%2C%20New%20York%2C%20NY%2C%20EE.%20UU.!5e0!3m2!1ses-419!2sar!4v1635338297589!5m2!1ses-419!2sar" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secundario" data-bs-toggle="collapse" href="#mapStaticBackdrop9" role="button" aria-expanded="false" aria-controls="mapStaticBackdrop9">Mapa</button>
<button type="button" class="btn btn-principal" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
</main>
<footer class="footer-section centrado">
<p class="footText">Sitio desarrollado por Erika Zimmer</p>
<div class="social-media">
<a href="https://www.instagram.com/zimmererika/" target="_blank" name="Instagram" rel="noopener noreferrer"><img class="social-media-icon" src="https://www.instagram.com/static/images/ico/favicon-192.png/68d99ba29cc8.png" alt="Instagram" loading="lazy"></a>
<a href="https://stock.adobe.com/es/contributor/207316495/Nahuel" target="_blank" name="Stock Adobe" rel="noopener noreferrer"><img class="social-media-icon" src="https://as.ftcdn.net/r/v1/pics/d2b855289560891b5fa6923f43f1a290ad012e5e/all/default/stock_logo_2020.svg" alt="Stock Adobe" loading="lazy"></a>
<a href="https://www.shutterstock.com/es/g/nahpalet?rid=185447388" target="_blank" name="Shutterstock" rel="noopener noreferrer"><img class="social-media-icon" src="https://submit2.shutterstock.com/public/img/favicons/favicon-4d04e7276d.png" alt="Shutterstock" loading="lazy"></a>
<a href="https://www.alamy.com/search/imageresults.aspx?pl=1&plno=456968" target="_blank" name="Alamy" rel="noopener noreferrer"><img class="social-media-icon" src="https://static.alamy.com/images/icons/favicon-32x32.png" alt="Alamy" loading="lazy"></a>
<a href="https://www.dreamstime.com/nahpalet_info" target="_blank" name="Dreamstime" rel="noopener noreferrer"><img class="social-media-icon" src="https://www.dreamstime.com/favicon-144.png" alt="Dreamstime" loading="lazy"></a>
</div>
</footer>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
</body>
</html>