Repository navigation
Expand file tree
/
Copy pathpersonajes.html
More file actions
411 lines (362 loc) · 22.9 KB
/
Copy pathpersonajes.html
File metadata and controls
411 lines (362 loc) · 22.9 KB
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
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
<!DOCTYPE html>
<html lang="en">
<!-- INICIO HEAD / INFORMACIÓN GENERAL (METADATOS): TÍTULO, ENLACES A SCRIPTS Y HOJAS DE ESTILOS -->
<head>
<meta charset="utf-8">
<title>PERSONAJES</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta name="description" content="Página de caracter académico, en donde se aplica el manejo del HTML">
<!-- Favicon -->
<link href="img/favicon.ico" rel="icon">
<!-- Google Web Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<!-- Libraries Stylesheet -->
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/tempusdominus/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" />
<!-- Customized Bootstrap Stylesheet -->
<link href="css/style.css" rel="stylesheet">
<style>
.material-symbols-outlined {
font-variation-settings:
'FILL' 0,
'wght' 400,
'GRAD' 0,
'opsz' 24
}
</style>
</head>
<!-- FIN HEAD / INFORMACIÓN GENERAL (METADATOS): TÍTULO, ENLACES A SCRIPTS Y HOJAS DE ESTILOS -->
<!-- INICIO BODY / CONTENIDO VISUAL QUE SE VE EN EL NAVEGADOR -->
<body>
<!-- TOPBAR - BARRA SUPERIOR INICIO -->
<div class="container-fluid bg-light pt-3 d-none d-lg-block">
<div class="container">
<div class="row">
<div class="col-lg-6 text-center text-lg-left mb-2 mb-lg-0">
<div class="d-inline-flex align-items-center">
<p><i class="fa fa-envelope mr-2"></i>info@example.com</p>
<p class="text-body px-3">|</p>
<p><i class="fa fa-phone-alt mr-2"></i><a href="https://wa.me/573046843186" target="_blank"><span> 304 684 31 86</span></a></p>
</div>
</div>
<div class="col-lg-6 text-center text-lg-right">
<div class="d-inline-flex align-items-center">
<a class="text-primary px-3" href="">
<i class="fab fa-facebook-f"></i>
</a>
<a class="text-primary px-3" href="">
<i class="fab fa-twitter"></i>
</a>
<a class="text-primary px-3" href="">
<i class="fab fa-linkedin-in"></i>
</a>
<a class="text-primary px-3" href="">
<i class="fab fa-instagram"></i>
</a>
<a class="text-primary pl-3" href="">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- TOPBAR - BARRA SUPERIOR FIN -->
<!-- NAVBAR- BARRA DE NAVEGACIÓN INICIO -->
<div class="container-fluid position-relative nav-bar p-0">
<div class="container-lg position-relative p-0 px-lg-3" style="z-index: 9;">
<nav class="navbar navbar-expand-lg bg-light navbar-light shadow-lg py-3 py-lg-0 pl-3 pl-lg-5">
<a href="" class="navbar-brand">
<h1 class="m-0 text-primary"><span class="text-dark"></span> Suzume</h1>
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between px-3" id="navbarCollapse">
<div class="navbar-nav ml-auto py-0">
<a href="index.html" class="nav-item nav-link">Inicio</a>
<a href="personajes.html" class="nav-item nav-link active">Personajes</a>
<a href="arte.html" class="nav-item nav-link">Arte</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Contexto</a>
<div class="dropdown-menu border-0 rounded-0 m-0">
<a href="contexto.html#escenas" class="dropdown-item">Escenas</a>
<a href="contexto.html#premios" class="dropdown-item">Premios</a>
<a href="contexto.html#secuelas" class="dropdown-item">Secuelas</a>
<a href="contexto.html#creadores" class="dropdown-item">Creadores</a>
<a href="bandasonora.html" class="dropdown-item">Banda sonora</a>
</div>
</div>
<a href="makotoshinkai.html" class="nav-item nav-link">CoMix Wave Inc.</a>
<a href="contacto.html" class="nav-item nav-link">Contacto</a>
</div>
</div>
</nav>
</div>
</div>
<!-- NAVBAR - BARRA DE NAVEGACIÓN FIN -->
<!-- CAROUSEL INICIO -->
<div class="container-fluid p-0">
<div id="header-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="img/personajes 1.jpg" alt="Image">
<div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
<div class="p-3" style="max-width: 900px;">
</div>
</div>
</div>
<div class="carousel-item">
<img class="w-100" src="img/personajes 2.jpg" alt="Image">
<div class="carousel-caption d-flex flex-column align-items-center justify-content-center">
<div class="p-3" style="max-width: 900px;">
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#header-carousel" data-slide="prev">
<div class="btn btn-dark" style="width: 45px; height: 45px;">
<span class="carousel-control-prev-icon mb-n2"></span>
</div>
</a>
<a class="carousel-control-next" href="#header-carousel" data-slide="next">
<div class="btn btn-dark" style="width: 45px; height: 45px;">
<span class="carousel-control-next-icon mb-n2"></span>
</div>
</a>
</div>
</div>
<!-- CAROUSEL FIN -->
<!-- AQUI INICIA EL CONTENIDO .................................... -->
<!-- PERSONAJE PRINCIPAL Start -->
<div class="container-fluid py-5">
<div class="container pt-5">
<div class="row">
<div class="col-lg-6" style="min-height: 500px;">
<div class="position-relative h-100">
<img class="position-absolute w-100 h-100" src="img/alex_01.jpg" style="object-fit: cover;">
</div>
</div>
<div class="col-lg-6 pt-5 pb-lg-5">
<div class="about-text bg-white p-4 p-lg-5 my-lg-5">
<h6 class="text-primary text-uppercase" style="letter-spacing: 5px;">SUZUME</h6>
<h1 class="mb-3">SUZUME</h1>
<p>la protagonista de de la película. Suzume es una estudiante de secundaria que vive en un pueblo costero. Es curiosa, valiente y decidida. Su vida cambia dramáticamente cuando descubre una misteriosa puerta rota que conduce a una serie de eventos sobrenaturales. Suzume es un personaje de carácter fuerte que quiere proteger a las personas que ama.</p>
<div class="row mb-4">
<div class="col-6">
<img class="img-fluid" src="img/personaje_alex_01.jpg" alt="">
</div>
<div class="col-6">
<img class="img-fluid" src="img/personaje_alex_02.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- PERSONAJE PRINCIPAL End -->
<!-- PARRAFO 3 COLUMNAS Start -->
<div class="container-fluid py-5">
<div class="container pt-5 pb-3">
<div class="row">
<div class="col-lg-4 col-md-6 mb-4">
<div class="service-item bg-white text-center mb-2 py-5 px-4">
<h5 class="text-white"><span class="text-primary">VALIENTE</span></h5></br>
<p>Suzume mostró un gran coraje frente a fuerzas sobrenaturales y peligros desconocidos que encontró durante su aventura. No dudará en correr riesgos para proteger a las personas que ama y al mundo real, curiosa.</p>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="service-item bg-white text-center mb-2 py-5 px-4">
<h5 class="text-white"><span class="text-primary">CURIOSA</span></h5></br>
<p>La curiosidad de Suzume es lo que inicialmente la lleva a descubrir la misteriosa puerta. Su deseo de entender más sobre el mundo y los fenómenos que la rodean impulsa gran parte de la trama.</p>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="service-item bg-white text-center mb-2 py-5 px-4">
<h5 class="text-white"><span class="text-primary">DECIDIDA</span></h5></br>
<p>Una vez que Suzume se embarca en su misión, muestra una determinación inquebrantable. Su resolución para cerrar las puertas y prevenir desastres es uno de sus rasgos más fuertes.</p>
</div>
</div>
</div>
</div>
</div>
<!-- PARRAFO 3 COLUMNAS End -->
<!-- PARRAFO 3 COLUMNAS Start -->
<div class="container-fluid py-5">
<div class="container pt-5 pb-3">
<div class="row">
<div class="col-lg-4 col-md-6 mb-4">
<div class="service-item bg-white text-center mb-2 py-5 px-4">
<h5 class="text-white"><span class="text-primary">COMPASIVA</span></h5></br>
<p>Suzume se preocupa profundamente por los demás, ya sean sus amigos, familiares o incluso personas que acaba de conocer. Su compasión y empatía la motivan a ayudar y proteger a los demás a lo largo de su viaje.
</p>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="service-item bg-white text-center mb-2 py-5 px-4">
<h5 class="text-white"><span class="text-primary">INGENIOSA</span></h5></br>
<p>Enfrentada a numerosos desafíos y situaciones imprevistas, Suzume demuestra ser ingeniosa y adaptable. Encuentra soluciones creativas a los problemas y utiliza su ingenio para superar obstáculos. </p>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="service-item bg-white text-center mb-2 py-5 px-4">
<h5 class="text-white"><span class="text-primary">CRECIMIENTO PERSONAL</span></h5></br>
<p>A lo largo de la película, Suzume experimenta un notable crecimiento personal. Aprende sobre su pasado, descubre su propia fortaleza interior y madura emocionalmente, lo que la transforma de una chica de secundaria a una heroína capaz.</p>
</div>
</div>
</div>
</div>
</div>
<!-- PARRAFO 3 COLUMNAS End -->
<!-- PERSONAJES Start -->
<div class="container-fluid py-5">
<div class="container py-5">
<div class="text-center mb-3 pb-3">
<h6 class="text-primary text-uppercase" style="letter-spacing: 5px;">SUZUME</h6>
<h1>PERSONAJES</h1>
</div>
<div class="owl-carousel testimonial-carousel">
<div class="text-center pb-4">
<img class="img-fluid mx-auto" src="img/testimonial-1.jpg" style="width: 100px; height: 100px;" >
<div class="testimonial-text bg-white p-4 mt-n5">
<p class="mt-5">La protagonista de la película. Suzume es una estudiante de secundaria que descubre una misteriosa puerta que desata fuerzas sobrenaturales. Valiente, curiosa y decidida, se embarca en un viaje para cerrar las puertas y proteger su mundo.
</p>
<h5 class="text-white"><span class="text-primary">Suzume</span></h5>
<span>Adolecente Estudiante</span>
</div>
</div>
<div class="text-center">
<img class="img-fluid mx-auto" src="img/testimonial-2.jpg" style="width: 100px; height: 100px;" >
<div class="testimonial-text bg-white p-4 mt-n5">
<p class="mt-5">Un joven enigmático que Suzume conoce durante su aventura. Souta tiene una conexión profunda con los eventos sobrenaturales y ayuda a Suzume en su misión. Es valiente, inteligente y tiene un fuerte sentido de responsabilidad.
</p>
<h5 class="text-white"><span class="text-primary">SOUTA MUNAKATA</span></h5>
<span>Chico desconocido</span>
</div>
</div>
<div class="text-center">
<img class="img-fluid mx-auto" src="img/testimonial-3.jpg" style="width: 100px; height: 100px;" >
<div class="testimonial-text bg-white p-4 mt-n5">
<p class="mt-5">Un gato misterioso que Suzume y Souta encuentran en su viaje. Daijin tiene la capacidad de comunicarse y posee conocimientos sobre las puertas y las fuerzas que contienen. A pesar de ser travieso al principio, su verdadero propósito y naturaleza son cruciales para la trama.
</p>
<h5 class="text-white"><span class="text-primary">DAIJIN</span></h5>
<span>Gato</span>
</div>
</div>
<div class="text-center">
<img class="img-fluid mx-auto" src="img/testimonial-4.jpg" style="width: 100px; height: 100px;" >
<div class="testimonial-text bg-white p-4 mt-n5">
<p class="mt-5">La tía de Suzume, quien la ha criado desde que era pequeña. Tsubame es una mujer fuerte y cariñosa que se preocupa profundamente por Suzume. Su relación cercana y su apoyo incondicional son fundamentales para el crecimiento personal de Suzume.
</p>
<h5 class="text-white"><span class="text-primary">TSUBAME IWATO</span></h5>
<span>Tia de Suzume</span>
</div>
</div>
<div class="text-center">
<img class="img-fluid mx-auto" src="img/testimonial-5.jpg" style="width: 100px; height: 100px;" >
<div class="testimonial-text bg-white p-4 mt-n5">
<p class="mt-5">Un amigo cercano de Souta que se une a Suzume y Souta en su viaje. Tomoya aporta humor y ligereza a la trama, y aunque no está tan involucrado en los aspectos sobrenaturales, su lealtad y amistad son inquebrantables.
</p>
<h5 class="text-white"><span class="text-primary">TOMOYA SERIZAWA</span></h5>
<span>Amigo de Souta</span>
</div>
</div>
<div class="text-center">
<img class="img-fluid mx-auto" src="img/testimonial-6.jpg" style="width: 100px; height: 100px;" >
<div class="testimonial-text bg-white p-4 mt-n5">
<p class="mt-5">La madre de Suzume, Tamaki, falleció cuando Suzume era muy joven. Aunque no está presente físicamente en la película, su influencia y memoria tienen un impacto profundo en la vida y decisiones de Suzume. A través de recuerdos y momentos emotivos, se revela que Tamaki era una mujer cariñosa y protectora. Su muerte dejó un vacío en la vida de Suzume, pero también le dio una motivación para ser valiente y seguir adelante. La relación de Suzume con su madre y la forma en que lidia con su pérdida es un tema importante en la historia.
</p>
<h5 class="text-white"><span class="text-primary">TAMAKI IWATO</span></h5>
<span>Mama de Suzume</span>
</div>
</div>
</div>
</div>
</div>
<!-- PERSONAJES End -->
<!-- AQUI FINALIZA EL CONTENIDO ................................... -->
<!-- Footer Start -->
<div class="container-fluid bg-dark text-white-50 py-5 px-sm-3 px-lg-5" style="margin-top: 90px;">
<div class="row pt-5">
<div class="col-lg-3 col-md-6 mb-5">
<a href="" class="navbar-brand">
<h1 class="text-primary"><span class="text-white">SUZU</span>ME</h1>
</a>
<p>La puerta que abre Su Mei es un portal a otro mundo lleno de energía sobrenatural. Abrir esa puerta tiene consecuencias inmediatas y potencialmente catastróficas en el mundo real.</p>
<h6 class="text-white text-uppercase mt-4 mb-3" style="letter-spacing: 5px;">Follow Us</h6>
<div class="d-flex justify-content-start">
<a class="btn btn-outline-primary btn-square mr-2" href="#"><i class="fab fa-twitter"></i></a>
<a class="btn btn-outline-primary btn-square mr-2" href="#"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-outline-primary btn-square mr-2" href="#"><i class="fab fa-linkedin-in"></i></a>
<a class="btn btn-outline-primary btn-square" href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-5">
<h5 class="text-white text-uppercase mb-4" style="letter-spacing: 5px;">Menu</h5>
<div class="d-flex flex-column justify-content-start">
<a class="text-white-50 mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Inicio</a>
<a class="text-white-50 mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Personajes</a>
<a class="text-white-50 mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Arte</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-5">
<div class="d-flex flex-column justify-content-start">
<a class="text-white-50 mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Contexto</a>
<a class="text-white-50 mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>CoMix Wave Inc.</a>
<a class="text-white-50 mb-2" href="#"><i class="fa fa-angle-right mr-2"></i>Contacto</a>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-5">
<h5 class="text-white text-uppercase mb-4" style="letter-spacing: 5px;">Contact Us</h5>
<p><i class="fa fa-map-marker-alt mr-2"></i>Bogota,Colombia</p>
<p><i class="fa fa-phone-alt mr-2"></i>+573046843186</p>
<p><i class="fa fa-envelope mr-2"></i>info@example.com</p>
<h6 class="text-white text-uppercase mt-4 mb-3" style="letter-spacing: 5px;">Newsletter</h6>
<div class="w-100">
<div class="input-group">
<input type="text" class="form-control border-light" style="padding: 25px;" placeholder="Your Email">
<div class="input-group-append">
<button class="btn btn-primary px-3">Sign Up</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid bg-dark text-white border-top py-4 px-sm-3 px-md-5" style="border-color: rgba(256, 256, 256, .1) !important;">
<div class="row">
<div class="col-lg-6 text-center text-md-left mb-3 mb-md-0">
<p class="m-0 text-white-50">Copyright © <a href="#">Domain</a>. All Rights Reserved.</a>
</p>
</div>
<div class="col-lg-6 text-center text-md-right">
<p class="m-0 text-white-50">Designed by <a href="https://htmlcodex.com">HTML Codex</a>
</p>
</div>
</div>
</div>
<!-- Footer End -->
<!-- Back to Top - FLECHA RETORNO A MENU PRINCIPAL -->
<a href="#" class="btn btn-lg btn-primary btn-lg-square back-to-top"><i class="fa fa-angle-double-up"></i></a>
<!-- Back to Top - FLECHA RETORNO PRINCIPAL -->
<!-- JavaScript Libraries - LIBRERIA DE JAVA-->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<script src="lib/tempusdominus/js/moment.min.js"></script>
<script src="lib/tempusdominus/js/moment-timezone.min.js"></script>
<script src="lib/tempusdominus/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Contact Javascript File -->
<script src="mail/jqBootstrapValidation.min.js"></script>
<script src="mail/contact.js"></script>
<!-- Template Javascript -->
<script src="js/main.js"></script>
</body>
<!-- FIN BODY / CONTENIDO VISUAL QUE SE VE EN EL NAVEGADOR -->
</html>