-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
336 lines (327 loc) · 18.3 KB
/
index.html
File metadata and controls
336 lines (327 loc) · 18.3 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Explora el Bosque Encantado de Reinharnd Kingdom y descubre las razas mágicas: elfos, orcos, enanos y dragonfolk en un mundo de fantasía inmersivo">
<meta name="keywords" content="fantasía, elfos, orcos, enanos, dragonfolk, bosque encantado, magia, reino, aventura">
<meta name="author" content="FxxMorgan">
<meta property="og:title" content="Bosque Encantado - Reinharnd Kingdom">
<meta property="og:description" content="Sumérgete en un mundo de fantasía habitado por criaturas mágicas">
<meta property="og:type" content="website">
<title>Bosque Encantado - Reinharnd Kingdom | Mundo de Fantasía</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/enhanced.css">
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap" rel="stylesheet">
<link rel="preload" href="img/layer-base.png" as="image">
<link rel="preload" href="img/layer-middle.png" as="image">
<link rel="preload" href="img/layer-front.png" as="image">
<script src="libs/gsap/gsap.min.js" defer></script>
<script src="libs/gsap/ScrollTrigger.min.js" defer></script>
<script src="libs/gsap/ScrollSmoother.min.js" defer></script>
<script src="js/app.js" defer></script>
</head>
<body>
<div class="wrapper">
<nav class="main-navigation" id="main-nav" aria-label="Navegación principal">
<div class="nav-container">
<button class="nav-toggle" aria-label="Abrir menú de navegación" aria-expanded="false">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav-menu">
<li><a href="#inicio" aria-label="Ir al inicio">Inicio</a></li>
<li><a href="#misterios" aria-label="Ir a tierra de misterios">Misterios</a></li>
<li><a href="#elfos" aria-label="Conocer a los elfos">Elfos</a></li>
<li><a href="#orcos" aria-label="Conocer a los orcos">Orcos</a></li>
<li><a href="#enanos" aria-label="Conocer a los enanos">Enanos</a></li>
<li><a href="#dragonfolk" aria-label="Conocer a los dragonfolk">Dragonfolk</a></li>
<li><a href="#galeria" aria-label="Ver galería">Galería</a></li>
<li><a href="#historia" aria-label="Leer la historia">Historia</a></li>
</ul>
</div>
</nav>
<div class="content">
<header class="main-header" id="inicio">
<div class="layers">
<div class="layers__header">
<div class="layers__caption">Bienvenido a Reinharnd Kingdom</div>
<div class="layers__title">Fairy Forest</div>
<button class="scroll-indicator" aria-label="Desplázate hacia abajo para explorar">
<span>Explora ↓</span>
</button>
</div>
<div class="layer layers__base" style="background-image: url(img/layer-base.png);" role="img" aria-label="Paisaje base del bosque encantado"></div>
<div class="layer layers__middle" style="background-image: url(img/layer-middle.png);" role="img" aria-label="Capa intermedia del bosque con árboles"></div>
<div class="layer layers__front" style="background-image: url(img/layer-front.png);" role="img" aria-label="Primer plano del bosque con vegetación"></div>
</div>
</header>
<article class="main-article" id="misterios" style="background-image: url(img/dungeon.jpg);">
<div class="main-article__content">
<h2 class="main-article__header">Tierra de misterios</h2>
<p class="main-article__paragraph">Descubre el encanto de nuestro bosque encantado habitado por criaturas mágicas. Sumérgete en un mundo de fantasía y maravíllate con su belleza y armonía. Camina entre árboles centenarios, escucha el canto de los pájaros y el murmullo de un arroyo cristalino. Observa a los misteriosos habitantes desplazarse con gracia y descubre su conexión especial con la naturaleza. Déjate envolver por la magia que se respira en cada rincón.</p>
</div>
</article>
<!-- Sección Elfos -->
<article class="race-section" id="elfos">
<div class="race-image left-image">
<img src="img/elfo.png" alt="Elfo místico con orejas puntiagudas, vestimenta élfica y aura mágica en el bosque encantado" loading="lazy" />
<div class="image-overlay">
<h3>Maestros de la Magia</h3>
</div>
</div>
<div class="race-text">
<h2>Los Elfos</h2>
<div class="stats-container">
<div class="stat">
<span class="stat-label">Agilidad:</span>
<div class="stat-bar"><div class="stat-fill" data-value="95"></div></div>
</div>
<div class="stat">
<span class="stat-label">Magia:</span>
<div class="stat-bar"><div class="stat-fill" data-value="98"></div></div>
</div>
<div class="stat">
<span class="stat-label">Longevidad:</span>
<div class="stat-bar"><div class="stat-fill" data-value="100"></div></div>
</div>
</div>
<p class="main-article__paragraph">Los elfos, son seres mágicos y encantadores. Son conocidos por su belleza etérea, con orejas puntiagudas y una apariencia delicada. Poseen una conexión especial con la naturaleza y una afinidad innata con la magia.</p>
<p class="main-article__paragraph">Los elfos destacan por su agilidad y destreza en la batalla. Utilizan su dominio de la magia para lanzar hechizos poderosos y manejan el arco con una precisión asombrosa. Su longevidad les otorga una perspectiva única de la vida y una sabiduría profunda.</p>
<p class="main-article__paragraph">Sin embargo, a pesar de su fortaleza, los elfos también tienen debilidades. Su inmortalidad puede ser una carga emocional, ya que presencian el paso efímero de las vidas mortales. Además, su conexión con la naturaleza los hace vulnerables a los daños causados por aquellos que no respetan el equilibrio natural.</p>
<p class="main-article__paragraph">La comunidad de elfos se rige por principios éticos y un fuerte sentido de lealtad hacia sus semejantes. Su sociedad está arraigada en la armonía con la naturaleza y suelen ser guardianes de los bosques. La unidad y la colaboración son fundamentales en su cultura.</p>
</div>
</article>
<!-- Sección Orcos -->
<article class="race-section reverse" id="orcos">
<div class="race-text">
<h2>Los Orcos</h2>
<div class="stats-container">
<div class="stat">
<span class="stat-label">Fuerza:</span>
<div class="stat-bar"><div class="stat-fill" data-value="98"></div></div>
</div>
<div class="stat">
<span class="stat-label">Resistencia:</span>
<div class="stat-bar"><div class="stat-fill" data-value="95"></div></div>
</div>
<div class="stat">
<span class="stat-label">Honor:</span>
<div class="stat-bar"><div class="stat-fill" data-value="90"></div></div>
</div>
</div>
<p class="main-article__paragraph">Los orcos son guerreros formidables con una fortaleza física impresionante. Su piel verdosa o grisácea y sus prominentes colmillos inferiores les dan un aspecto intimidante. A menudo son incomprendidos por otras razas debido a su naturaleza aparentemente agresiva.</p>
<p class="main-article__paragraph">Poseen una resistencia extraordinaria y una fuerza sobrehumana que los convierte en temibles oponentes en el campo de batalla. Su cultura valora el honor en el combate y la lealtad al clan por encima de todo. Los orcos son especialistas en el combate cuerpo a cuerpo, manejando con maestría hachas y mazas de gran tamaño.</p>
<p class="main-article__paragraph">Aunque muchos los consideran criaturas salvajes, los orcos tienen una rica tradición oral y un profundo respeto por sus ancestros. Sus chamanes poseen conocimientos antiguos sobre la tierra y los espíritus que la habitan, utilizando esta sabiduría para guiar a su pueblo en tiempos difíciles.</p>
<p class="main-article__paragraph">La sociedad orca se organiza en clanes liderados por los guerreros más fuertes y sabios. La prueba de valentía y la capacidad para proveer y proteger a la tribu son valores fundamentales en su cultura.</p>
</div>
<div class="race-image right-image">
<img src="img/orco.png" alt="Guerrero orco imponente con colmillos prominentes, armadura de batalla y expresión feroz" loading="lazy" />
<div class="image-overlay">
<h3>Guerreros Honorables</h3>
</div>
</div>
</article>
<!-- Sección Enanos -->
<article class="race-section" id="enanos">
<div class="race-image left-image">
<img src="img/enano.png" alt="Maestro enano artesano con barba elaborada, herramientas de forja y armadura ornamentada" loading="lazy" />
<div class="image-overlay">
<h3>Maestros Artesanos</h3>
</div>
</div>
<div class="race-text">
<h2>Los Enanos</h2>
<div class="stats-container">
<div class="stat">
<span class="stat-label">Artesanía:</span>
<div class="stat-bar"><div class="stat-fill" data-value="100"></div></div>
</div>
<div class="stat">
<span class="stat-label">Resistencia:</span>
<div class="stat-bar"><div class="stat-fill" data-value="92"></div></div>
</div>
<div class="stat">
<span class="stat-label">Comercio:</span>
<div class="stat-bar"><div class="stat-fill" data-value="88"></div></div>
</div>
</div>
<p class="main-article__paragraph">Los enanos son maestros artesanos y mineros sin igual. De baja estatura pero robusta constitución, su resistencia física y mental los hace formidables. Sus elaboradas barbas, adornadas con joyas y trenzas, son símbolo de estatus y orgullo.</p>
<p class="main-article__paragraph">Son conocidos por su incomparable habilidad para trabajar metales y piedras preciosas. Las armas y armaduras enanas son codiciadas por todas las razas por su calidad excepcional y durabilidad. Sus fortalezas subterráneas, llamadas ciudadelas, son maravillas arquitectónicas talladas en la roca viva de las montañas.</p>
<p class="main-article__paragraph">La cultura enana valora la tradición, el linaje familiar y el trabajo meticuloso. Su longevidad, aunque menor que la de los elfos, les permite perfeccionar sus oficios durante siglos. Son comerciantes astutos y guardan celosamente los secretos de su artesanía.</p>
<p class="main-article__paragraph">A pesar de su aparente rudeza, los enanos son extremadamente leales a sus amigos y mantienen un estricto código de honor. Su amor por los tesoros no es mera codicia: cada pieza de oro o gema representa el arte y la dedicación de su pueblo.</p>
</div>
</article>
<!-- Sección Dragonfolk -->
<article class="race-section reverse" id="dragonfolk">
<div class="race-text">
<h2>Los Dragonfolk</h2>
<div class="stats-container">
<div class="stat">
<span class="stat-label">Magia Elemental:</span>
<div class="stat-bar"><div class="stat-fill" data-value="96"></div></div>
</div>
<div class="stat">
<span class="stat-label">Inteligencia:</span>
<div class="stat-bar"><div class="stat-fill" data-value="94"></div></div>
</div>
<div class="stat">
<span class="stat-label">Nobleza:</span>
<div class="stat-bar"><div class="stat-fill" data-value="97"></div></div>
</div>
</div>
<p class="main-article__paragraph">Los dragonfolk, descendientes de los dragones ancestrales, combinan rasgos humanoides con características dracónicas. Sus escamas brillantes, de diversos colores según su linaje, protegen su cuerpo como una armadura natural. Algunos poseen pequeñas alas que les permiten planear cortas distancias.</p>
<p class="main-article__paragraph">Su conexión con la magia elemental es innata, especialmente con el elemento asociado a su linaje dracónico. Pueden exhalar un aliento de energía elemental similar al de sus ancestros, aunque menos potente. Su comprensión de las fuerzas arcanas los convierte en poderosos hechiceros.</p>
<p class="main-article__paragraph">La sociedad de los dragonfolk está estructurada en clanes basados en el tipo de dragón del que descienden. Valoran el conocimiento, el poder y la preservación de su linaje. Son extremadamente orgullosos y consideran su herencia dracónica como un signo de nobleza natural.</p>
<p class="main-article__paragraph">A pesar de su imponente presencia, los dragonfolk son pensadores estratégicos que prefieren la diplomacia al conflicto. Sin embargo, cuando la batalla es inevitable, combinan su fuerza física, sus capacidades mágicas y su inteligencia táctica para convertirse en adversarios temibles.</p>
</div>
<div class="race-image right-image">
<img src="img/dragonfolk.png" alt="Noble dragonfolk con escamas brillantes, características dracónicas y aura de magia elemental" loading="lazy" />
<div class="image-overlay">
<h3>Herederos Dracónicos</h3>
</div>
</div>
</article>
<!-- Nueva Sección: Galería -->
<section class="gallery-section" id="galeria">
<div class="section-header">
<h2>Galería del Reino</h2>
<p>Descubre los paisajes y criaturas más impresionantes de Reinharnd Kingdom</p>
</div>
<div class="gallery-grid">
<div class="gallery-item" data-category="paisajes">
<img src="img/layer-base.png" alt="Paisaje base del bosque encantado" loading="lazy">
<div class="gallery-overlay">
<h3>Bosque Primordial</h3>
<p>Los antiguos árboles guardianes</p>
</div>
</div>
<div class="gallery-item" data-category="criaturas">
<img src="img/elfo.png" alt="Retrato élfico" loading="lazy">
<div class="gallery-overlay">
<h3>Gracia Élfica</h3>
<p>La elegancia de los elfos del bosque</p>
</div>
</div>
<div class="gallery-item" data-category="criaturas">
<img src="img/orco.png" alt="Guerrero orco" loading="lazy">
<div class="gallery-overlay">
<h3>Fuerza Orca</h3>
<p>El poder de los clanes guerreros</p>
</div>
</div>
<div class="gallery-item" data-category="arquitectura">
<img src="img/dungeon.jpg" alt="Antigua fortaleza" loading="lazy">
<div class="gallery-overlay">
<h3>Fortaleza Ancestral</h3>
<p>Ruinas llenas de misterio</p>
</div>
</div>
<div class="gallery-item" data-category="criaturas">
<img src="img/enano.png" alt="Maestro enano" loading="lazy">
<div class="gallery-overlay">
<h3>Artesanía Enana</h3>
<p>La perfección en cada detalle</p>
</div>
</div>
<div class="gallery-item" data-category="criaturas">
<img src="img/dragonfolk.png" alt="Noble dragonfolk" loading="lazy">
<div class="gallery-overlay">
<h3>Linaje Dracónico</h3>
<p>La nobleza de los descendientes</p>
</div>
</div>
</div>
<div class="gallery-filters">
<button class="filter-btn active" data-filter="all">Todos</button>
<button class="filter-btn" data-filter="paisajes">Paisajes</button>
<button class="filter-btn" data-filter="criaturas">Criaturas</button>
<button class="filter-btn" data-filter="arquitectura">Arquitectura</button>
</div>
</section>
<!-- Nueva Sección: Historia del Reino -->
<section class="history-section" id="historia">
<div class="section-header">
<h2>Historia de Reinharnd Kingdom</h2>
<p>Descubre los eventos que forjaron este mundo mágico</p>
</div>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-marker"></div>
<div class="timeline-content">
<h3>La Gran Fundación</h3>
<span class="timeline-date">Era Primera - Año 0</span>
<p>Los antiguos dragones establecen los primeros asentamientos, creando las bases de lo que se convertiría en Reinharnd Kingdom. La magia fluye libremente por la tierra.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker"></div>
<div class="timeline-content">
<h3>La Alianza de las Razas</h3>
<span class="timeline-date">Era Segunda - Año 500</span>
<p>Elfos, orcos, enanos y dragonfolk forman la primera gran alianza. Se establece el Consejo de las Cuatro Razas para mantener la paz y el equilibrio.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker"></div>
<div class="timeline-content">
<h3>El Bosque Encantado</h3>
<span class="timeline-date">Era Tercera - Año 1200</span>
<p>Los elfos consagran el gran bosque, creando un santuario donde todas las criaturas mágicas pueden vivir en armonía. Nace el legendario Fairy Forest.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-marker"></div>
<div class="timeline-content">
<h3>Era Actual</h3>
<span class="timeline-date">Era Cuarta - Presente</span>
<p>Reinharnd Kingdom prospera como un ejemplo de convivencia pacífica. Aventureros de todo el mundo vienen a explorar sus misterios y maravillas.</p>
</div>
</div>
</div>
</section>
<footer class="main-footer">
<div class="footer-content">
<div class="footer-section">
<h3>🏰 Reinharnd Kingdom</h3>
<p>Un mundo de fantasía donde todas las criaturas viven en armonía</p>
</div>
<div class="footer-section">
<h4>Explorar</h4>
<nav class="footer-nav">
<a href="#elfos">Elfos</a>
<a href="#orcos">Orcos</a>
<a href="#enanos">Enanos</a>
<a href="#dragonfolk">Dragonfolk</a>
</nav>
</div>
<div class="footer-section">
<h4>Descubrir</h4>
<nav class="footer-nav">
<a href="#galeria">Galería</a>
<a href="#historia">Historia</a>
<a href="#misterios">Misterios</a>
</nav>
</div>
<div class="footer-section">
<h4>Conectar</h4>
<div class="social-links">
<a href="#" aria-label="Síguenos en redes sociales" class="social-link">📧</a>
<a href="#" aria-label="Únete a nuestra comunidad" class="social-link">🎮</a>
<a href="#" aria-label="Canal de noticias" class="social-link">📢</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2025 Bosque Encantado - Todos los derechos reservados | Creado por FxxMorgan</p>
<button id="back-to-top" aria-label="Volver al inicio" class="back-to-top">
<span>↑</span>
</button>
</div>
</footer>
</div>
</div>
</body>
</html>