-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
257 lines (241 loc) · 14.6 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Palacio Pereira</title>
<!-- Usar https://metatags.io/ -->
<!-- Primary Meta Tags -->
<title>Palacio Pereira</title>
<meta name="title" content="Palacio Pereira" />
<meta name="description" content="Un monumento historico" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://metatags.io/" />
<meta property="og:title" content="Palacio Pereira" />
<meta property="og:description" content="Un monumento historico" />
<meta property="og:image" content="https://raw.githubusercontent.com/catelate/mid/refs/heads/main/base/palacio-pereira.png" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://metatags.io/" />
<meta property="twitter:title" content="Palacio Pereira" />
<meta property="twitter:description" content="Un monumento historico" />
<meta property="twitter:image" content="https://raw.githubusercontent.com/catelate/mid/refs/heads/main/base/palacio-pereira.png" />
<!-- Meta Tags Generated with https://metatags.io -->
<!-- Vínculo al CSS de Boostrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
<!-- Algo más de CSS para personalizar-->
<link href="style.css" rel="stylesheet" />
</head>
<body>
<!--el encabezado-->
<header>
<div class="container">
<div class="row py-5">
<div class="mx-auto col-sm-11 col-md-10">
<h1 class="text-center display-3 my-0">Palacio Pereira</h1>
<h2 class="text-center fs-3 mt-0 mb-3">Un Monumento Histórico</h2>
<h3 class="text-center fs-6">Por Caterina Valenzuela</h3>
<h4 class="text-center fs-6 mb-4 fw-normal text-body-secondary">8 DE OCTUBRE, 2024</h4>
<p class="lead py-3">Es un edificio histórico de fines del siglo XIX, conocido por su arquitectura neoclásica y detalles ornamentales. Por 38 años estuvo abandonado y sin mantención, sin embargo, en 2020 volvió a abrir sus puertas y fue restaurado. Actualmente, funciona como un importante centro de oficinas gubernamentales en el centro de la ciudad.</p>
</div>
</div>
</div>
</header>
<!--la parte principal-->
<main>
<div class="container">
<main class="row">
<article class="col-11 col-md-10 mx-auto my-5">
<h2 class="text-center">Ubicación</h2>
<p class="text-center">El Palacio Pereira se encuentra en el centro de Santiago de Chile, en la intersección de las calles Compañía de Jesús y Huérfanos. Su ubicación en una zona histórica lo convierte en un punto de interés tanto para visitantes como para locales.</p>
<img src="img/mapa.svg" class="img-fluid"></div>
</article>
<article class="col-9 col-md-10 mx-auto my-5">
<h2 class="text-center">Historia</h2>
<p class="text-center">Desde su construcción, en 1872, el edificio fue contruido como residencia del senador Luis Pereira Cotapos, de ahí su nombre. En estos 172 años, ha cambiado su uso:</p>
<img src="img/linea.svg" class="img-fluid"></div>
</article>
<article class="col-11 col-md-11 mx-auto my-5">
<h2 class="text-center">Lucien Hénault</h2>
<p class="text-center">Arquitecto francés radicado en Chile desde 1926. Su obra combina el modernismo y el funcionalismo con elementos del neoclásico. Entre sus principales proyectos se encuentran la Casa Central de la Universidad de Chile, la capilla del cerro Santa Lucía y el Palacio Larraín Zañartu.</p>
</article>
<article class="col-11 col-md-11 mx-auto my-5">
<h2 class="text-center">Arquitectura</h2>
<p class="text-center">El Palacio Pereira es un claro exponente de la arquitectura neoclásica, un estilo que floreció en Europa durante el siglo XVIII y principios del XIX, caracterizado por su énfasis en la simplicidad, la simetría y la inspiración en la antigüedad clásica. Su fachada presenta elementos típicos de este estilo, como columnas corintias y un friso decorativo que evoca templos griegos y romanos.</p>
<img src="img/edificio.svg" class="img-fluid"></div>
</article>
<article></article>
</main>
<aside>
<div class="container">
<div class="row py-5">
<div class="mx-auto col-sm-11 col-md-10">
<dl class="small text-body-secondary">
<dt>Nota</dt>
<dd>
La información publicada en forma de página web es el resultado de la expansión y profundización de un trabajo desarrollado en el módulo de Investigación y Planificación de la Infografía, “Diplomado de
Infografía, PUC. 2024”.
</dd>
<dt>Referencias</dt>
<dd>
Pendiente
</dd>
<!--no tocar lo que sigue-->
<dt>Editado por</dt>
<dd><a href="https://github.com/florenciavildosolae" target="_blank">Florencia Vildósola</a>, <a href="https://github.com/profesorfaco" target="_blank">Felipe Cortez</a></dd>
</dl>
</div>
<div class="mx-auto col-sm-11 col-md-10" id="autoria"></div>
</div>
</div>
<!--/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/
POR FAVOR, NO TOCAR EL CÓDIGO QUE SIGUE. EL MOTIVO:
SU AJUSTE SERÁ RESPONSABILIDAD DE FLORENCIA Y FACO.
/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\-->
<div class="container-fluid border-top border-bottom bg-light text-body-secondary">
<div class="row px-2 px-sm-3 px-md-4 px-lg-5 py-5" id="links">
<div class="col-12 mb-5">
<h4 class="text-center">Infografías relacionadas</h4>
</div>
</div>
</div>
</aside>
<!--PIE DE PÁGINA-->
<footer class="bg-dark">
<div class="container-fluid">
<div class="row px-2 px-sm-3 px-md-4 px-lg-5 py-4 small">
<div class="col-12">
<p class="m-0 small d-flex justify-content-between align-items-center">
<a
href="https://educacioncontinua.uc.cl/programas/diplomado-uc-online-infografia/"
class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover"
target="_blank"
rel="noopener noreferrer"
>
Diplomado en Infografía
</a>
<a href="https://diseno.uc.cl/" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" target="_blank" rel="noopener noreferrer">Escuela de Diseño</a>
<a href="https://www.uc.cl/" class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" target="_blank" rel="noopener noreferrer">
<span class="d-md-none">PUC</span><span class="d-none d-md-inline">Pontificia Universidad Católica de Chile</span>
</a>
</p>
</div>
</div>
</div>
</footer>
<!--vinculo al script de bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script>
const todes = [
{
title: "Palacio Pereira",
description: "Texto de bajada final.",
author: "Caterina Valenzuela",
about: "Soy Diseñadora de la Universidad de Chile.",
account: "https://github.com/catelate",
mugshot: "https://avatars.githubusercontent.com/u/48731250?s=400&u=4e51cb82564b346b5fd254451e76fcc1993852ad&v=4",
final: "https://diplomado-infografia.github.io/caterina-valenzuela/",
},
{
title: "Biblioteca Nacional",
description: "Texto de bajada final.",
author: "Francisca Castillo",
about: "Soy Diseñadora de la Vicerrectoría de Comunicaciones y Extensión Cultural de la Pontificia Universidad Católica de Chile.",
account: "https://github.com/frvncvstillo",
mugshot: "https://avatars.githubusercontent.com/u/87441926?v=4",
final: "https://diplomado-infografia.github.io/francisca-castillo/",
},
{
title: "Museo Nacional de Antropología",
description: "Texto de bajada final.",
author: "Ani Cortés",
about: "Ilustradora editorial e infografista en el diario El Universal.",
account: "https://github.com/Annilunni",
mugshot: "https://avatars.githubusercontent.com/u/183031166?v=4",
final: "https://diplomado-infografia.github.io/ana-cortes/",
},
{
title: "Bellavista Oveja Tomé",
description: "Texto de bajada final.",
author: "Sebastián Henríquez Farías",
about: "Asesor Sindical. Abogado de la Universidad de Concepción.",
account: "https://github.com/shenriquezf",
mugshot: "https://avatars.githubusercontent.com/u/182990578?v=4",
final: "https://github.com/diplomado-infografia/sebastian-henriquez",
},
{
title: "Estación de Ferrocarriles del Estado en San Bernardo",
description: "Texto de bajada final.",
author: "Bárbara Iriarte",
about: "Soy diseñadora gráfica e industrial independiente, titulada de la Universidad Diego Portales",
account: "https://github.com/barbiiriarte",
mugshot: "https://avatars.githubusercontent.com/u/183028318?v=4",
final: "https://github.com/diplomado-infografia/barbara-iriarte",
},
{
title: "Iglesia San Francisco de Chiu Chiu",
description: "Texto de bajada final.",
author: "Lindsay Osorio",
about: "Soy Diseñadora, diseño y gestión audiovisual para contrato en minería.",
account: "https://github.com/losorio24",
mugshot: "https://avatars.githubusercontent.com/u/87441926?v=4",
final: "https://diplomado-infografia.github.io/lindsay-osorio/",
},
{
title: "Palacio de La Moneda",
description: "Texto de bajada final.",
author: "Cristian Paz",
about: "Soy Diseñador gráfico titulado el 2021, actualmente cursando diplomado de infografía en la PUC.",
account: "https://github.com/cpazm",
mugshot: "https://avatars.githubusercontent.com/u/182929960?s=400&u=d5ea9b2a8aaa501e390fe39048577b7ce9e180fb&v=4",
final: "https://diplomado-infografia.github.io/cristian-paz/",
},
{
title: "Teatro Municipal de Viña del Mar",
description: "Texto de bajada final.",
author: "Bastián Sirguiado",
about: "Diseñador Gráfico.",
account: "https://github.com/sirguiado",
mugshot: "https://avatars.githubusercontent.com/u/72122090?v=4",
final: "https://diplomado-infografia.github.io/bastian-sirguiado/",
},
{
title: "Hotel Continental",
description: "Texto de bajada final.",
author: "Tamara Toledo",
about: "Ingeniero en Certificaciones de Manejo Forestal.",
account: "https://github.com/frvncvstillo",
mugshot: "https://avatars.githubusercontent.com/u/87441926?v=4",
final: "https://diplomado-infografia.github.io/TamaraCarol/",
},
];
var autoria = document.querySelector("#autoria");
autoria.innerHTML =
'<div class="row align-items-center g-0 my-5"><div class="col-3 pe-4"><img src="' +
todes[0].mugshot +
'" alt="mugshot" class="w-100 rounded-circle"></div><div class="col-9"><p class="small text-body-secondary my-1">Infografía realizada por</p><h6 class="my-1 fs-5"><a href="' +
todes[0].account +
'" target="_blank">' +
todes[0].author +
' </a></h6><p class="my-1">' +
todes[0].about +
"</p></div></div>";
var links = document.querySelector("#links");
todes.forEach((x, i) => {
if (i > 0) {
links.innerHTML +=
'<div class="col-md-4 h-100 small mb-3"><h6><a href="' +
x.final +
'" class="link-dark link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">' +
x.title +
"</a></h6><p>" +
x.description +
' <cite class="text-body-tertiary">Por ' +
x.author +
"</a></cite></p></div>";
}
});
</script>
</body>
</html>