-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
677 lines (633 loc) · 42.5 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
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
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Margord - Mitologias Universais - 2022.2</title>
<!-- Fontes -->
<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:wght@100&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Serif:wght@400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.2.1/css/all.css"/>
<link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.2.1/css/sharp-solid.css"/>
<!-- Boostrap css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Booklet css-->
<link href="src/booklet/jquery.booklet.latest.css" type="text/css" rel="stylesheet" media="screen, projection, tv" />
<!-- Custom css-->
<link type='text/css' rel='stylesheet' href='css/main.css' />
<link type='text/css' rel='stylesheet' href='css/timeline.css' />
</head>
<body>
<main>
<section class="px-4 py-2 my-1">
<div class="text-center mx-auto intro">
Livro Digital <br>
Mitologias Universais 2022.2
</div>
<div id="margord-book">
<!-- Capa -->
<div class="row capa">
<div class="animacao-logo">
<img src="./img/parte2.png" class="img2-animacao">
<img src="./img/parte3.png" class="img3-animacao">
</img>
<img src="./img/parte1.png" class ="img1-animacao">
</img>
</img>
</div>
</div>
<div class="row capa-back">
<div class="container text-bg-light capa-back-content">
<!-- <img class="img-capa-back-content" src="img/simbolos/logo-preto.png"/>
<p class="text-center text-capa-back-content">O mundo de Margord<br>Mitologias Universais 2022.2</p> -->
</div>
</div>
<!-- Prefácio -->
<div class="row first-page default-page-right">
<div class="default-page-content">
<!-- <div class="container text-center">
<h1 class="titulo">Prefácio</h1>
</div>
<div class="separador"></div>
<div class="conteudo">
Você já deve ter ouvido falar das novas que o vento trouxe d’além dos
limites do mundo e do firmamento... Suas palavras transcorrem nas veias
desta terra, e todos estão atados ao seu destino, desde cá para além das
terras do norte, onde as estrelas caíram e a ordem foi fragmentada.
</div>
<div class="separador"></div>
<div class="separador"></div>
<div class="conteudo">
Pois os lordes destas terras que outrora viveram em harmonia se encontrarão
envenenados em seus corações, e belos campos se tornarão em lagos de chamas,
aço e sangue, e os poderes do mundo perderão seu equilíbrio. Então eles chegarão,
estranhos de estranhos nomes, vindos de estranhas terras.
</div>
<div class="number-page-right">1</div> -->
</div>
</div>
<!-- Sumário -->
<div class="row default-page default-page-left">
<div class="default-page-content">
<div class="container text-center">
<h1 class="titulo">Sumário</h1>
</div>
<div class="container text-nowrap div-sumario">
<div class="row">
<div class="col-11 overflow-hidden">1. Linha do tempo ..........................................................................</div>
<!-- <div class="col-1">2</div> -->
<div class="col-1">
<a id="pg-1" href="#"><i class="fa-solid fa-chevron-right"></i></a>
</div>
</div>
<div class="row">
<div class="col-11 overflow-hidden">2. Mapa ....................................................................................</div>
<!-- <div class="col-1">3</div> -->
<div class="col-1">
<a id="pg-2" href="#"><i class="fa-solid fa-chevron-right"></i></a>
</div>
</div>
<div class="row">
<div class="col-11 overflow-hidden">3. Povos ....................................................................................</div>
<!-- <div class="col-1">5</div> -->
<div class="col-1">
<a id="pg-3" href="#"><i class="fa-solid fa-chevron-right"></i></a>
</div>
</div>
<div class="row">
<div class="col-11 overflow-hidden">3.1. Povos do Norte ....................................................................................</div>
<!-- <div class="col-1">6</div> -->
<div class="col-1">
<a id="pg-4" href="#"><i class="fa-solid fa-chevron-right"></i></a>
</div>
</div>
<div class="row">
<div class="col-11 overflow-hidden">3.2. Povos das Terras Centrais ....................................................................................</div>
<!-- <div class="col-1">8</div> -->
<div class="col-1">
<a id="pg-5" href="#"><i class="fa-solid fa-chevron-right"></i></a>
</div>
</div>
<div class="row">
<div class="col-11 overflow-hidden">3.3. Povos do Sul ....................................................................................</div>
<!-- <div class="col-1">10</div> -->
<div class="col-1">
<a id="pg-6" href="#"><i class="fa-solid fa-chevron-right"></i></a>
</div>
</div>
<div class="row">
<div class="col-11 overflow-hidden">4. Heróis ....................................................................................</div>
<!-- <div class="col-1">12</div> -->
<div class="col-1">
<a id="pg-7" href="#"><i class="fa-solid fa-chevron-right"></i></a>
</div>
</div>
<div class="row">
<div class="col-11 overflow-hidden">4.1. Helväkyr ....................................................................................</div>
<!-- <div class="col-1">13</div> -->
<div class="col-1">
<a id="pg-8" href="#"><i class="fa-solid fa-chevron-right"></i></a>
</div>
</div>
<div class="row">
<div class="col-11 overflow-hidden">4.2. Sylvian ....................................................................................</div>
<!-- <div class="col-1">17</div> -->
<div class="col-1">
<a id="pg-9" href="#"><i class="fa-solid fa-chevron-right"></i></a>
</div>
</div>
<div class="row">
<div class="col-11 overflow-hidden">4.3. Kyla ....................................................................................</div>
<!-- <div class="col-1">19</div> -->
<div class="col-1">
<a id="pg-10" href="#"><i class="fa-solid fa-chevron-right"></i></a>
</div>
</div>
<div class="row">
<div class="col-11 overflow-hidden">4.4. Sem Nome ....................................................................................</div>
<!-- <div class="col-1">21</div> -->
<div class="col-1">
<a id="pg-11" href="#"><i class="fa-solid fa-chevron-right"></i></a>
</div>
</div>
<div class="row">
<div class="col-11 overflow-hidden">5. Referências ....................................................................................</div>
<!-- <div class="col-1">24</div> -->
<div class="col-1">
<a id="pg-12" href="#"><i class="fa-solid fa-chevron-right"></i></a>
</div>
</div>
</div>
<!-- <div class="coluna-sumario"></div>
<div class="descricao-sumario">
<ul>
<li><span>5-</span> Linha do Tempo</li>
<li><span>10-</span> Mapa</li>
<li><span>15-</span> Paisagem</li>
<li><span>20-</span> Mundos</li>
<li><span>25-</span> Povos do Norte</li>
<li><span>30-</span> Povos Centrais</li>
<li><span>35-</span> Povos do Sul</li>
<li><span>40-</span> Helväkyr, A última dos Iceptianos</li>
<li><span>45-</span> Lorde Sylvian</li>
<li><span>50-</span> Mundo 2022.1 Yordgarten</li>
<li><span>55-</span> Kyla, Princesa dos Kherr.</li>
<li><span>60-</span> Lorde sem Nome </li>
</ul>
</div> -->
<div class="number-page-left">1</div>
</div>
</div>
<!-- Linha do Tempo -->
<div class="row default-page default-page-right">
<div class="default-page-content">
<div class="container text-center">
<h1 class="titulo">Linha do Tempo</h1>
</div>
<div class="container row" style="margin-top: -30px;">
<ul class="timeline">
<!-- Item 1 -->
<li style="margin-top: 30px;">
<div class="direction-r">
<div class="flag-wrapper">
<span class="hexa"></span>
<span class="flag">1000 A.C</span>
</div>
<div class="desc">Todos os povos iam bem, desenvolvendo
suas atividades, alguns provocavam guerras,
destruições, mas outros levavam uma vida pacata,
até que um acontecimento estranho modificou
totalmente a vida desse mundos.</div>
</div>
</li>
<!-- Item 2 -->
<li style="margin-top: -50px;">
<div class="direction-l">
<div class="flag-wrapper">
<span class="hexa"></span>
<span class="flag">500 A.C</span>
</div>
<div class="desc">Povos Mágicos abrem portais dimensionais para cada
um dos mundos, gerando um colapso na zona cósmica,
destruindo todo o universo em torno deste portal. Porém
alguns povos foram sugados para dentro do portal
sendo salvos.</div>
</div>
</li>
<!-- Item 3 -->
<li style="margin-top: -50px;">
<div class="direction-r">
<div class="flag-wrapper">
<span class="hexa"></span>
<span class="flag">459 A.C</span>
</div>
<div class="desc">Esses heróis sugados para dentro do portal inicam
uma nova jornada em busca de saber o que aconteceu
juntos.</div>
</div>
</li>
</ul>
</div>
</div>
<div class="number-page-right">2</div>
</div>
<!-- Mapa -->
<div class="row default-page default-page-left">
<div class="container text-center">
<h1 class="titulo" style="margin-right: 130px;font-size: 30px;margin-top: 10px;">Mapa</h1>
</div>
<div>
<img src="./img/mapa/mapa-2.png" style="position: absolute;margin-top: -54px;">
<div class="number-page-left">3</div>
</div>
</div>
<div class="row default-page default-page-right">
<div>
<img src="./img/mapa/mapa-2.png" style="object-position: -460px;">
<div class="number-page-right">4</div>
</div>
</div>
<!-- Povos -->
<div class="row povos-page default-page-left">
<div class="povos-page-content">
<div class="container text-center">
<h1 class="titulo" style="font-size: 80px;margin-top: 40%;">Povos</h1>
</div>
<div class="number-page-left">5</div>
</div>
</div>
<div class="row default-page default-page-right">
<div class="default-page-content">
<div class="container text-center">
<h1 class="titulo">Povos do Norte</h1>
</div>
<div class="conteudo">
Os Homens do norte viviam para além das cordilheiras montanhosas onde havia
campos e vales até toda a terra repousar em uma planície desértica, para além
delas, se encontravam mais cadeias montanhosas imponentes e vermelhas que se
chocavam com um mar revolto, dessas montanhas, nos confins do mundo viviam em
plenitude os acadêmicos e sábios de Rôh-uin(Rôh: Saber/ Uin - Povo) ostentavam
em suas grandes bibliotecas conhecimentos que remontavam há milênios de história.
Estes eram chamados de Andrôhi (And: Aqueles / Rôh: Saber / i: Desinência Nominal (Plural)).
</div>
<div class="separador"></div>
<div class="conteudo">
Haruini é como eram chamados o povos da terra, outrora magníficos em sua arte e engenho, seus
palácios se dispunham abaixo da terra com sistemas de refrigeração por tubos de vento, grandes
colunas se erguiam adornadas com as faces de suas deusas, acima do solo um grande santuário aberto
se erguia com 4 estátuas solitárias e imponentes cada uma segurando uma concha que quando o vento soprava,
</div>
<div class="number-page-right">6</div>
</div>
</div>
<div class="row default-page default-page-left">
<div class="default-page-content">
<!-- <div class="container text-center">
<h1 class="titulo">Povos do Norte</h1>
</div> -->
<div class="conteudo" style="text-indent: 0;">
dependendo da direção deste, uma ou duas conchas soavam um som que ecoava por aquele deserto,
quando chovia, o sistema de drenagem levava a água para o segundo nível do subterrâneo, onde
ela se juntava em uma grande saída que jorrava como uma cachoeira em um lago, a luz que entrava
em buracos retangulares no topo da caverna em certa parte do dia iluminava 2 deusas que ficavam
uma em cada lado da cachoeira, uma olhando pra cima com seu braço direito levantado com uma
estrela em sua testa, e uma que olhava para baixo com seu braço esticado ao lago.
</div>
<div class="separador"></div>
<img src="img/povos-norte-haruini.jpg" alt="Povos Norte - Haruini" class="img-haruini">
<div class="number-page-left">7</div>
</div>
</div>
<div class="row default-page default-page-right">
<div class="default-page-content">
<div class="conteudo">
Toda essa beleza foi perdida na abertura dos portais, agora apenas ruínas são suspensas no ar num lugar
onde o tempo não parece passar e os corpos sem vida parecem não se decompor. Antigos monumentos
ainda em pé são encontrados no por entre as cordilheiras como saudação para os povos que
transitam nessas terras.
</div>
<div class="number-page-right">8</div>
</div>
</div>
<div class="row default-page default-page-left">
<div class="default-page-content">
<div class="container text-center">
<h1 class="titulo" style="font-size: 34px;">Povos das Terras Centrais</h1>
</div>
<div class="conteudo">
Outrora uma terra de campos verdejantes e florestas abundantes, abrigavam os reinos de Itassea
(Reino sobre o mar) ao oeste, Orothion (Rocha da montanha), Geate-It (Reino da Floresta) ao leste
e por fim o Reino transiente das muralhas do sul (Itdain Tuiron), cada reino ostentava uma bandeira
de determinada cor, com um símbolo de seu reino.
</div>
<div class="separador"></div>
<div class="conteudo">
Para Itassea, um azul como o do céu, quando ainda era visto, seu símbolo era um círculo branco com a
silhueta de um barco vazado em dourado, que demonstrava seu poder sobre o mar e a lua que nascia em
grande tamanho nas suas costas e iluminava sua cidade de pedras brancas.
</div>
<div class="separador"></div>
<div class="conteudo">
Para Orothion um vermelho carmesim tingia seus tecidos, seu símbolo era de um grande fogo, cujo no centro
vazava a forma de uma grande marreta, suas forjas eram suas assinaturas, pois grandes minhas obtinham,
e seus exércitos eram vastos e equipados.
</div>
<div class="separador"></div>
<div class="conteudo">
Para Geate-It adotaram um tom verde profundo,
</div>
<div class="number-page-left">9</div>
</div>
</div>
<div class="row default-page default-page-right">
<div class="default-page-content">
<!-- <div class="container text-center">
<h1 class="titulo" style="font-size: 34px;">Povos das Terras Centrais</h1>
</div> -->
<div class="conteudo" style="text-indent: 0;">
e uma grande árvore dourada era estampada em seu centro, exaltando a beleza de suas vastas florestas.
</div>
<div class="separador"></div>
<div class="conteudo">
Para Itdain Tuiron cor preta com seus detalhes prateados, no meio de seu estandarte, uma cabeça de
cavaleiro, por ficar entre o sul e o norte, seu povo era a que mais transitava, e seus cavalos, eram
os mais velozes.
</div>
<div class="separador"></div>
<div class="conteudo">
Atualmente, todos os estandartes eram vistos juntos no mesmo campo, mas o que uma vez fora para
festivais e reunião dos povos, agora fora campos de batalha, pilhas de corpos, lama, lâminas
quebradas e sangue.
</div>
<div class="separador"></div>
<div class="conteudo">
Porque a desconfiança aplacou o coração dos lordes, e a soberba cresceu dentro de cada um, e estas
não eram mais terras seguras, mas sim, terras de desolação, prantos e escuridão, pois com o avanço
da magia, tudo o que os lordes almejam foi o poder.
</div>
<div class="number-page-right">10</div>
</div>
</div>
<div class="row default-page default-page-left">
<div class="default-page-content">
<div class="container text-center">
<h1 class="titulo">Povos do Sul</h1>
</div>
<div class="conteudo">
Os povos do sul viviam de comércio e colheita, dando idas e vindas pelo continente, vendendo especiarias
e produtos de seus gados, a guerra lá até então não chegou, no entanto atividades piratas se tornaram mais
frequentes, fugas dos povos do norte aplacaram as comunidades, e os jovens eram coagidos a entrar no
exército de Itdain Tuiron, que reclamava para si todas aquelas terras, Homens e Sábios errantes poderiam
ser encontrados por lá e estábulos se enchiam mais com homens do que cavalos, no entanto, o céu ainda era
visível, os campos ainda floridos, e o inverno ainda estava longe.
</div>
<div class="number-page-left">11</div>
</div>
</div>
<!-- Herois -->
<div class="row povos-page default-page-right">
<div class="povos-page-content">
<div class="container text-center">
<h1 class="titulo" style="font-size: 80px;margin-top: 40%;">Heróis</h1>
</div>
<!-- <div class="number-page-right">12</div> -->
</div>
</div>
<div class="row default-page default-page-left">
<div class="default-page-content">
<div class="container text-center">
<i class="fa-sharp fa-solid fa-hexagon fa-hexagon-custom"></i>
<img src="./img/herois/helvakyr_v2.png" class="img-heroi-helvakyr">
<h1 class="titulo" style="font-size: 4.5rem;">Helväkyr</h1>
</div>
<div class="number-page-left">13</div>
</div>
</div>
<div class="row default-page default-page-right">
<div class="default-page-content">
<div class="container text-center" style="margin-top: -10px;">
<h1 class="titulo">Helväkyr</h1>
<p class="titulo" style="font-size: 20px;margin-top: -15px;">A última dos Iceptianos</p>
<p class="titulo" style="font-size: 20px;margin-top: -25px;">Mundo 2021.1</p>
</div>
<div class="conteudo" style="margin-top: -10px;">
Descendente de Volishe, Helväkyr nasceu sem respirar, seus pais em desespero rogaram à Orniav que
a devolvesse, então a mergulharam no mar gélido, fizeram uma prece, Orniav estava presente na água,
assim como na terra e nas demais coisas que ele fez surgir, então a garotinha voltou a vida, mas
seus olhos eram brancos, e sua pele gelada, e quando chegou aos 20 e poucos, chegou a sua aparência
final, pois não importa quanto tempo passasse, sua aparência e vitalidade permaneciam,no entanto
não era imortal, pois se feria como uma pessoa qualquer. Quando o degelo chegou e a semente
desabrochou, “Aquilo” voltou, e acabou com todos os iceptianos, Helväkyr lutou ferozmente e por
pouco não saiu sem vida, Aquilo foi novamente destruído, ao menos é o que diziam sobre ela, já
que ela nunca falava de seu passado, porém o fato de não envelhecer e vagar em terras ermas com
suas pinturas corporais brancas eram totalmente verdades.
</div>
<div class="number-page-right">14</div>
</div>
</div>
<div class="row default-page default-page-left">
<div class="default-page-content">
<div class="conteudo">
Coberta por uma capa de urso polar, Helväkyr andava como uma errante pelo mundo, até que encontrou no
topo de um precipício um tipo de fragmento de pedra que flutuava sobre o vazio profundo cujas águas
que ecoavam lá em baixo desaguavam no litoral, tentada a pegar aquela estranha pedra, encostou nela,
então foi engolida por uma escuridão mais negra que a própria noite, pouco tempo depois a escuridão
tomou forma, e ao cair dela se deparou com campos verdes, não estava mais no mesmo lugar, sequer no
próprio planeta. Pois após ela ser capturada, toda aquela terra foi destruída e arrasada, mas
fragmentos dela pairam ao norte dessa nova terra, onde o colapso surgiu.
</div>
<div class="separador"></div>
<div class="conteudo">
Toda essa beleza foi perdida na abertura dos portais, agora apenas ruínas são suspensas no ar num lugar
onde o tempo não parece passar e os corpos sem vida parecem não se decompor. Antigos monumentos
ainda em pé são encontrados no por entre as cordilheiras como saudação para os povos que
transitam nessas terras.
</div>
<div class="separador"></div>
<div class="conteudo">
Helväkyr é uma mulher de feições joviais, e
</div>
<div class="number-page-left">15</div>
</div>
</div>
<div class="row default-page default-page-right">
<div class="default-page-content">
<div class="conteudo" style="text-indent: 0;">
olhares cansados, pois já viu muito.
</div>
<div class="separador"></div>
<div class="conteudo">
Sua pele é escura, suas cicatrizes cobertas por tinta branca, seu cabelo e olhos são brancos, e nos
lábios ela o pinta da mesma forma, usa uma capa de pele de urso polar, anda sempre com um arco e
uma aljava com flechas que ela mesma produz. Anda descalça pois muitos anos nas terras ermas a
acostumou assim, é tão acostumada que mesmo entre pedras pontudas não se fere, e nas gramas não
faz barulho a não ser que o queira assim.
</div>
<div class="separador"></div>
<div class="separador"></div>
<img src="./img/herois/helvakyr-2.jpg" style="width:50%;margin-left:auto;margin-right:auto;display:block"/>
<div class="number-page-right">16</div>
</div>
</div>
<div class="row default-page default-page-left">
<div class="default-page-content">
<div class="container text-center">
<i class="fa-sharp fa-solid fa-hexagon fa-hexagon-custom"></i>
<img src="./img/herois/sylvian_v2.png" class="img-heroi-helvakyr">
<h1 class="titulo" style="font-size: 4.5rem;">Sylvian</h1>
</div>
<div class="number-page-left">17</div>
</div>
</div>
<div class="row default-page default-page-right">
<div class="default-page-content">
<div class="container text-center" style="margin-top: -10px;">
<h1 class="titulo">Sylvian</h1>
<p class="titulo" style="font-size: 20px;margin-top: -15px;">Lorde Sylvian</p>
<p class="titulo" style="font-size: 20px;margin-top: -25px;">Mundo 2020.2</p>
</div>
<div class="conteudo" style="margin-top: -10px;">
Após ser liberto de Droknut-Reverso, Sylvian voltou a si, e após a partida de Droknut e sua Família,
ele buscou redenção na esperança da recuperação dos homens, alguns anos depois Sylvian já tinha
constituído uma família, e vivia como um andarilho, em uma de suas expedições encontrou um estranho
artefato acima de uma colina, quando se aproximou viu ser uma estranha pedra, opaca, estava suspensa
no ar, como se aguardasse algo. Sylvian tocou a pedra.
</div>
<div class="separador"></div>
<div class="conteudo">
Sua aparencia era de um homem de 1,85, forte, negro, seus cabelos castanho-escuros, seus olhos quase
pretos, suas vestes lembraram uma aparencia parte tribal, parte samurai e parte armadura de placa.
</div>
<div class="number-page-right">18</div>
</div>
</div>
<div class="row default-page default-page-left">
<div class="default-page-content">
<div class="container text-center">
<i class="fa-sharp fa-solid fa-hexagon fa-hexagon-custom"></i>
<img src="./img/herois/kyla_v2.png" class="img-heroi-helvakyr"/>
<h1 class="titulo" style="font-size: 4.5rem;">Kyla</h1>
</div>
<div class="number-page-left">19</div>
</div>
</div>
<div class="row default-page default-page-right">
<div class="default-page-content">
<div class="container text-center" style="margin-top: -10px;">
<h1 class="titulo">Kyla</h1>
<p class="titulo" style="font-size: 20px;margin-top: -15px;">Princesa dos Kherr</p>
<p class="titulo" style="font-size: 20px;margin-top: -25px;">Mundo MU</p>
</div>
<div class="conteudo" style="margin-top: -10px;">
Apesar do seu título, a princesa era mais uma cidadã comum do que uma monarca de fato, engenhosa e de
gênio forte ela teimava contra as regras da monarquia. Ignorava seus ofícios para ficar nas forjas e
oficinas criando equipamentos e desenhando esquemas, apesar de seus adereços reais, estes sempre eram
acompanhados de roupa suja de graxa e fuligem. Um dia, ao entrar na oficina, fugindo novamente de
seus deveres, viu um fragmento de pedra surgir em sua frente, fascinada pelo objeto, ela tocou ele.
</div>
<div class="separador"></div>
<div class="conteudo" style="margin-left:115px;">
Pele escura, Calça branca, Sapato Marrom, Camisa Creme um pouco suja, um cinto pendia em sua cintura
com várias ferramentas que usava na oficina, nos seus pulsos braceletes dourados, um colar de ouro
e prata em volta do pescoço e um - em sua fronte.
</div>
<img src="./img/herois/kyla-2.png" alt="" class="" style="width: 35%;margin-left: -21px;margin-top: -194px;">
<div class="number-page-right">20</div>
</div>
</div>
<div class="row default-page default-page-left">
<div class="default-page-content">
<div class="container text-center">
<i class="fa-sharp fa-solid fa-hexagon fa-hexagon-custom"></i>
<img src="./img/herois/sem-nome_v2.png" class="img-heroi-helvakyr">
<h1 class="titulo" style="font-size: 4.5rem;">Sem Nome</h1>
</div>
<div class="number-page-left">21</div>
</div>
</div>
<div class="row default-page default-page-right">
<div class="default-page-content">
<div class="container text-center" style="margin-top: -10px;">
<h1 class="titulo">Lorde Sem Nome</h1>
<p class="titulo" style="font-size: 20px;margin-top: -15px;">Detentor do Sangue de Kaath</p>
<p class="titulo" style="font-size: 20px;margin-top: -25px;">Mundo 2022.1 Yordgarten</p>
</div>
<div class="conteudo" style="margin-top: -10px;">
Um Lorde bastardo de tamanho incomum para ser homem ou gigante, expulso de suas terras, indigno de ter
nome e de até mesmo estar escrito na história, foi um refugiado. Após o cataclisma, acordou de um sono
profundo em seus domínios intocados, em exílio, achou que o melhor era simplesmente perecer alí, mas
seus olhos, há muito na escuridão de suas ruínas, viu surgir ali um pequeno fragmento de pedra,
enquanto os ventos quentes de um enorme brilho chegavam e arrastava partes da ruína sem qualquer
esforço, o Lorde estendeu sua magra e pálida mão, e segurou esta pedra.
</div>
<div class="separador"></div>
<div class="conteudo">
Esse lorde tem seus cabelos longos e brancos, e suas vestes são pretas, e o vermelho em seu interior já
perdeu a intensidade da cor, e se encontra em um tom morto. suas unhas compridas, sua face pálida coberta
por uma máscara negra como a fronte do capacete, suas feições são magras e até andrógenas,
</div>
<div class="number-page-right">22</div>
</div>
</div>
<div class="row default-page default-page-left">
<div class="default-page-content">
<div class="conteudo">
assim como sua voz, ele impressiona com seus 2,5 metros nessa posição, usa um cajado de madeira como
catalisador para usar suas magias de sangue.
</div>
<div class="number-page-left">23</div>
</div>
</div>
<!-- Referências -->
<!-- <div class="row default-page default-page-right">
<div class="default-page-content">
<div class="container text-center">
<h1 class="titulo">Referências</h1>
</div>
<h3 class="subtitulo">Ilustrações</h3>
<div class="number-page-right">24</div>
</div>
</div>
<div class="row default-page default-page-left">
<div class="default-page-content">
<div class="conteudo">
assim como sua voz, ele impressiona com seus 2,5 metros nessa posição, usa um cajado de madeira como
catalisador para usar suas magias de sangue.
</div>
<div class="number-page-left">25</div>
</div>
</div> -->
<!-- Contra -->
<div class="row contracapa">
<div class="container text-bg-light contracapa-back-content">
<img class="img-capa-back-content" src="img/simbolos/logo-preto.png"/>
<p class="text-center text-capa-back-content">O mundo de Margord<br>Mitologias Universais 2022.2<br>Professor Levi Bayde</p>
</div>
</div>
<div class="row contracapa"></div>
</div>
<div class="text-center mx-auto intro">
<p>Utilize as setas abaixo ou as setas do teclado para navegar pelo livro.</p>
<button id="prev_book" type="button" class="btn btn-custom-color"><i class="fa-solid fa-arrow-left"></i></button>
<button id="next_book" type="button" class="btn btn-custom-color"><i class="fa-solid fa-arrow-right"></i></button><br>
<button id="pg-0" type="button" class="btn btn-custom-color"><i class="fa-regular fa-book-bookmark"></i> Sumário</button><br>
<a href="https://github.com/nicoleinasous/mu-2022-2" target=_blank>Github & Colaboradores</a>
</div>
</section>
</main>
<!-- Boostrap js-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>
<!-- Booklet js-->
<script src='src/booklet/jquery.easing.1.3.js'></script>
<script src='src/booklet/jquery.booklet.latest.js'></script>
<!-- Custom js-->
<script type='text/javascript' src='js/init.js'></script>
<!-- efeito de escrever -->
<script type='text/javascript' src='js/efeitoEscrever.js'></script>
</body>
</html>