-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
195 lines (182 loc) · 14.5 KB
/
index.html
File metadata and controls
195 lines (182 loc) · 14.5 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Análisis Personal sobre Darling in the FranXX</title>
<meta name="description" content="Un profundo análisis personal sobre la simbología, personajes y narrativa de la serie de anime Darling in the FranXX, por Renzo Fernando Mosquera Daza.">
<meta name="author" content="Renzo Fernando Mosquera Daza">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<!-- Preconexión para fuentes y assets críticos -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&family=Lato:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<!-- Barra de Navegación -->
<nav class="navbar">
<div class="container navbar-content">
<a href="#" class="nav-logo">
<img src="images/logo.avif" alt="Logo Darling in the FranXX">
</a>
<ul class="nav-links">
<li><a href="#">Inicio</a></li>
<li><a href="#pilares">Pilares</a></li>
<li><a href="#analisis">Episodios</a></li>
<li><a href="#jian">El Jian</a></li>
<li><a href="#galeria">Galería</a></li>
<li><a href="#sobre-mi">Sobre Mí</a></li>
</ul>
</div>
</nav>
<!-- Cabecera Hero -->
<header class="hero-header">
<div class="hero-background-video-wrapper">
<video playsinline autoplay muted loop poster="images/banner.avif" class="hero-background-video">
<source src="https://www.dropbox.com/scl/fi/a5n9v4a5scftqv3au3xx9/background-video.mp4?rlkey=4d2q7k7f3v4z4y0x9x8j9g8h7&raw=1" type="video/mp4">
Tu navegador no soporta el video de fondo.
</video>
</div>
<div class="hero-overlay"></div>
<div class="hero-content">
<p class="author-line animate-on-load">Un análisis por Renzo Fernando Mosquera Daza</p>
<h1 class="animate-on-load">Mi Análisis sobre 'Darling in the FranXX'</h1>
<p class="subtitle animate-on-load">Este es mi blog personal, un espacio donde hablo sobre una serie que considero uno de los mejores animes que he visto y que más me ha marcado. Por eso le dedico esta web, para detallar episodio por episodio y no olvidar nunca lo que aprendí de ella.</p>
<!-- Contenedor de Botones de Acción -->
<div class="hero-buttons-container animate-on-load">
<a href="https://www.crunchyroll.com/es/series/GY8VEQ95Y/darling-in-the-franxx" target="_blank" rel="noopener noreferrer" class="hero-button crunchyroll">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
<span>Ver el Anime</span>
</a>
<a href="https://m440.in/manga/darling-in-the-franxx" target="_blank" rel="noopener noreferrer" class="hero-button manga">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
<span>Leer el Manga</span>
</a>
<a href="https://open.spotify.com/track/5KAI6nfg3wQRmtwJ0PPaEW?si=61bb3296362243a7" target="_blank" rel="noopener noreferrer" class="hero-button spotify">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
<span>Escuchar Opening</span>
</a>
</div>
</div>
</header>
<!-- Contenido Principal -->
<div class="container page-content">
<main>
<!-- Sección Pilares del Análisis -->
<section id="pilares" class="animate-on-scroll">
<h2 class="section-title">Los 6 Pilares de Mi Análisis</h2>
<div class="key-points-grid">
<div class="point-card">
<div class="card-icon" style="--icon-color: var(--color-red);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 4l3 12h14l3-12-6 7-4-7-4 7-6-7zm3 16h14"/></svg>
</div>
<h3>Zero Two: Mi Diosa</h3>
<p>Para mí, ella es más que un personaje. Es una chica criada como arma que solo deseaba amar y ser amada, y fue ella quien me enseñó mucho sobre este tema.</p>
</div>
<div class="point-card">
<div class="card-icon" style="--icon-color: var(--color-blue);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09A5.99 5.99 0 0 1 16.5 3C19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
</div>
<h3>La Historia: Amor y Rebelión</h3>
<p>A mi parecer, la serie combina a la perfección un romance épico con una fuerte crítica a la deshumanización y al control social que me parece fascinante.</p>
</div>
<div class="point-card">
<div class="card-icon" style="--icon-color: var(--color-orange);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
</div>
<h3>Metáforas del Despertar</h3>
<p>Los "asientos" de los mechas siempre me parecieron algo que iba más allá: para mí, representan el despertar emocional y sexual de la adolescencia.</p>
</div>
<div class="point-card">
<div class="card-icon" style="--icon-color: var(--color-blue);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.7 14.3c-1-1-2.5-1-3.5 0l-7.8 7.8c-.4.4-.9.6-1.4.6H3v-5c0-.5.2-1 .6-1.4l7.8-7.8c1-1 2.5-1 3.5 0l3.5 3.5c1 1 1 2.5 0 3.5z"/><path d="M18 6L12 12"/></svg>
</div>
<h3>Simbología Profunda</h3>
<p>Este es el núcleo de la documentación que estoy llevando. Aquí es donde voy con todo, buscando los detalles ocultos, los dobles sentidos y las referencias.</p>
</div>
<div class="point-card">
<div class="card-icon" style="--icon-color: var(--color-orange);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 10a2 2 0 1 0-4 0c0 1.1.9 2 2 2h4a2 2 0 1 1 0 4 2 2 0 1 0 0 4H5.8"/><path d="M12 22a10 10 0 1 0-9.8-10"/></svg>
</div>
<h3>Un Final que Arriesga</h3>
<p>Aunque no es querido por muchos, siento que el final no se fue por lo seguro. Me dejó pensando en el sacrificio, la reencarnación y el ciclo vital del amor.</p>
</div>
<div class="point-card">
<div class="card-icon" style="--icon-color: var(--color-red);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
</div>
<h3>Mi Experiencia Emocional</h3>
<p>Para mí no fue solo acción o romance: fue una montaña rusa. Lloré, reí y sufrí. Es una historia que defiendo con el alma, y aquí explico por qué.</p>
</div>
</div>
</section>
<!-- Sección Análisis por Episodio -->
<section id="analisis" class="animate-on-scroll">
<h2 class="section-title">Análisis por Episodio</h2>
<div class="episodes-list">
<!-- Las tarjetas de episodios se generan dinámicamente con JS -->
</div>
</section>
<!-- Sección El Jian -->
<section id="jian" class="animate-on-scroll jian-section">
<div class="jian-content">
<h2 class="section-title">El Jian, el Ave que Comparte Alas</h2>
<p>Para mí, esta leyenda no es un simple adorno, es la tesis central del anime. El Jian es un ave mítica con un solo ojo y una sola ala; solo puede volar si encuentra a su otra mitad. La veo como la metáfora perfecta de Hiro y Zero Two. Por separado, me parece que están rotos, incapaces de "volar". Juntos, no solo se completan, sino que redefinen lo que significa existir. Su conexión es la única forma de surcar un cielo que, para los demás, no existe.</p>
<a href="jian.html" class="jian-cta">Profundizar en la leyenda del Jian →</a>
</div>
<div class="jian-image">
<img src="images/jian.svg" alt="Representación artística del Jian">
</div>
</section>
<!-- Sección Galería -->
<section id="galeria" class="animate-on-scroll">
<h2 class="section-title">Momentos Inolvidables</h2>
<div class="gallery-grid">
<a href="images/galeria/g1.png" class="gallery-item" data-span="2"><img src='images/galeria/g1.png' alt="Momento 1 de Darling in the FranXX" loading="lazy"></a>
<a href="images/galeria/g2.png" class="gallery-item"><img src='images/galeria/g2.png' alt="Momento 2 de Darling in the FranXX" loading="lazy"></a>
<a href="images/galeria/g3.png" class="gallery-item"><img src='images/galeria/g3.png' alt="Momento 3 de Darling in the FranXX" loading="lazy"></a>
<a href="images/galeria/g4.jpg" class="gallery-item"><img src='images/galeria/g4.jpg' alt="Momento 4 de Darling in the FranXX" loading="lazy"></a>
<a href="images/galeria/g5.png" class="gallery-item" data-span="2"><img src='images/galeria/g5.png' alt="Momento 5 de Darling in the FranXX" loading="lazy"></a>
<a href="images/galeria/g6.png" class="gallery-item"><img src='images/galeria/g6.png' alt="Momento 6 de Darling in the FranXX" loading="lazy"></a>
<a href="images/galeria/g7.png" class="gallery-item"><img src='images/galeria/g7.png' alt="Momento 7 de Darling in the FranXX" loading="lazy"></a>
<a href="images/galeria/g8.jpg" class="gallery-item"><img src='images/galeria/g8.jpg' alt="Momento 8 de Darling in the FranXX" loading="lazy"></a>
<a href="images/galeria/g9.png" class="gallery-item" data-span="2"><img src='images/galeria/g9.png' alt="Momento 9 de Darling in the FranXX" loading="lazy"></a>
</div>
</section>
</main>
</div>
<!-- Footer / Sobre Mí -->
<footer id="sobre-mi" class="site-footer">
<div class="container">
<div class="about-me-content">
<div class="about-me-image"></div>
<div class="about-me-text">
<h2 class="section-title">Sobre Mí</h2>
<p>Soy Renzo Fernando, y este proyecto es el reflejo de mi pasión por analizar las historias que me marcan. <strong>Darling in the FranXX</strong> fue una de esas obras que se quedaron conmigo, y sentí la necesidad de ir más allá de la superficie, de conectar los puntos y de articular por qué su mensaje me pareció tan poderoso. Este sitio es mi bitácora personal, un lugar para compartir mi perspectiva con cualquiera que también haya sido tocado por esta increíble historia.</p>
<a href="https://github.com/RenzoFernando/" target="_blank" rel="noopener noreferrer" class="github-link">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
<span>Mi GitHub</span>
</a>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 Renzo Fernando Mosquera Daza. Todos los derechos reservados.</p>
<p class="disclaimer">Este es un sitio sin fines de lucro. <em>Darling in the FranXX</em> © DARLING in the FRANXX Committee.</p>
</div>
</div>
</footer>
<!-- Botón Volver Arriba -->
<a href="#" class="back-to-top" aria-label="Volver arriba">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
</a>
<!-- Lightbox para la Galería -->
<div id="lightbox" class="lightbox">
<span class="lightbox-close">×</span>
<img class="lightbox-content" id="lightbox-img" alt="Imagen ampliada de la galería">
<a class="lightbox-prev" aria-label="Imagen anterior">❮</a>
<a class="lightbox-next" aria-label="Siguiente imagen">❯</a>
</div>
<script src="js/scripts.js" defer></script>
</body>
</html>