-
Notifications
You must be signed in to change notification settings - Fork 0
/
historia.html
348 lines (294 loc) · 16.5 KB
/
historia.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="editor.css">
<title>História | Cyber War</title>
<script src="https://kit.fontawesome.com/bc3c744fa1.js" crossorigin="anonymous"></script>
</head>
<body class="container body">
<header class="row header">
<img src="imagens/logo-sem-caveira-2.png" class="logoHeaderIndex">
<nav class="navbar navbar-expand-lg navbar-dark col-12" style="background-color: rgba(26, 24, 24, 0.9);">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.html"> <b> Home </b> <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html"> <b> Login </b> </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="historia.html"> <b> História </b> </a>
</li>
</ul>
</div>
</nav>
</header>
<main class="container main">
<section class="row historiapersonagem">
<div class="row row-cols-1 row-cols-md-3" id="car_historia">
<div class="col mb-4">
<div class="card1">
<img src="imagens/Cartas/Aliens/octopus7zy.png" class="card-img-top01">
<!-- Button trigger modal -->
<p class="histVer">
<button type="button" class="btn btn-outline-warning my-2 my-sm-0" data-toggle="modal"
data-target="#modalAliens">
Ver mais: Aliens
</button>
</p>
<!-- Modal -->
<div class="modal fade" id="modalAliens" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Aliens</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Os Aliens, essa raça que dificilmente é vista e com criaturas extremamente
perigosas tem um objetivo de dominar toda à galáxia, onde habitam? É uma ótima pergunta. Dizem que
eles vivem na imensidão do universo ou até mesmo no fundo do mar, bem mais fundo do que a luz do sol
consegue alcançar. Não servem a ninguém e não possuem piedade, se algo os ameaça, é logo eliminado
sem
hesitar. Possuem formas diferentes que amedrontam o seu adversário, o deixando com medo, sem saber o
que fazer. O seu abate é devastador e costumam comer suas vítimas em forma de troféu pela vitória ou
o
que sobrou delas pelo menos.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card2">
<img src="imagens/Cartas/Humanos/nightOwl.png" class="card-img-top02">
<!-- Button trigger modal -->
<p class="histVer">
<button type="button" class="btn btn-outline-warning my-2 my-sm-0" data-toggle="modal"
data-target="#modalHumanos">
Ver mais: Humanos
</button>
</p>
<!-- Modal -->
<div class="modal fade" id="modalHumanos" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Humanos</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Os humanos possuem a ligação do mundo com os deuses. O destino dos humanos e deuses
foram determinados a ser de dependência e hostilidade uns com os outros. No passado, almas ruins
foram
para a Escuridão enquanto almas fracas ficaram no mundo sofrendo com a fome e a devastação. Com
isso,
as almas fracas, em ligação com os deuses, ganharam sua própria força lidando com novos desafios.
Esta raça é a humana. Após todo o desastre, somente os mais fortes foram escolhidos para ficar no
mundo. Com seu talento de inovação e criatividade, e também sua inteligência, utilizam seus arcos,
espadas mágicas e poderosas armas. Os humanos tentam dominar o mundo novamente, na esperança de
torna-lo um lugar pacífico novamente.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card3">
<img src="imagens/Cartas/EvoAnimals/evoCorym.png" class="card-img-top03">
<!-- Button trigger modal -->
<p class="histVer">
<button type="button" class="btn btn-outline-warning my-2 my-sm-0" data-toggle="modal"
data-target="#modalAnimals">
Ver mais: Evo-Animals
</button>
</p>
<!-- Modal -->
<div class="modal fade" id="modalAnimals" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Evo-Animals</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Animais conscientes e racionais já é uma coisa comum nos dias atuais, o que não se
sabe ao certo é como esses animais surgiram. Dizem que eles já existiam desde os anos 60, com o fim
da
Segunda Guerra Mundial, criação de armas nucleares/atômicas e o começo da URSS, alguns outros
acreditam que foram resultados de um vírus que causou uma pandemia nos anos 2000, afetando não só os
humanos como também os animais da Terra, nesse mesmo contexto existe uma especulação que a causa da
pandemia seria justamente pela criação dos Evo-Animals a partir desse mesmo vírus.
Eles são liderados por um macaco conhecido como Cezar, um líder astuto e inteligente, capaz de
coordenar as mais diferentes culturas que existem entre os Evo-Animals. São os maiores protetores
dos
grandes habitats naturais, locais em que estão suas bases militares e cidades, seus maiores rivais
são
os Mechas, controlados pelos Steel Lords, que sempre os atacam. Especialistas em táticas de
guerrilha
eles se destacam nas lutas que ocorrem em terrenos conhecidos (os habitats), apesar dos ataques
incessantes dos Mechas os Evo-Animals resistem e perduram desde sua existência.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card4">
<img src="imagens/Cartas/Mechas/yellowBeast.png" class="card-img-top04">
<!-- Button trigger modal -->
<p class="histVer">
<button type="button" class="btn btn-outline-warning my-2 my-sm-0" data-toggle="modal"
data-target="#modalMechas">
Ver mais: Mechas
</button>
</p>
<!-- Modal -->
<div class="modal fade" id="modalMechas" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Mechas</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Mais do que toneladas de aço, munições e circuitos eletrônicos, os mechas são
máquinas de guerra de dimensões colossais, com poder de fogo gigantesco e pernas humanoides que os
tornam capazes de atravessar terrenos acidentados com bastante agilidade. As unidades são produzidas
e
controladas remotamente pelo grupo mercenário Steel Lords, financiado por uma aliança de empresas
multinacionais remanescentes do colapso social após a terceira guerra. O propósito final dos Steel
Lords é subjugar as outras raças e máquinas, controlando toda a Terra em favor dos seus
patrocinadores.
Graças à robustez de suas estruturas, as unidades do exército mecha suportam grande peso e volume
bélico, podendo uma única máquina possuir metralhadoras rotativas, canhões de plasma e até armas de
destruição em massa, como mísseis nucleares. Os inimigos que veem uma silhueta de robô gigante ao
longe já tremem ao pensar na chuva de balas que cai quando chegam os mechas!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-4"></div>
<div class="col mb-4">
<div class="card5">
<img src="imagens/Cartas/Androides/IronGear.png" class="card-img-top05">
<!-- Button trigger modal -->
<p class="histVer">
<button type="button" class="btn btn-outline-warning my-2 my-sm-0" data-toggle="modal"
data-target="#modalAndroides">
Ver mais: Androides
</button>
</p>
<!-- Modal -->
<div class="modal fade" id="modalAndroides" tabindex="-1" role="dialog"
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Androides</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
A partir de ligações metálicas Osmium foram criados os Androids, robôs com uma
inteligência fora do comum e um poder gigante de absorver impacto pelo metal é uma espécie de aço
orgânico extremamente resistente e quase impenetrável. Juntos formam um exército completo, tendo um
alto poder de ataque e defesa, sendo muita das vezes combinações perfeitas para o seu combate. Os
Androids foram criados e montados nos laboratórios Diaz, onde visavam o grande poder de destruição
em
conjunto com a inteligência fora do padrão. Seus métodos de ataque e defesa foram possíveis através
do
aperfeiçoamento de um protótipo de inteligência artificial, que carrega com ela padrões de combate
dos
diversos tipos, assim, podendo muita das vezes prever o ponto fraco do seu oponente. São equipados
com
metralhadoras rotativas de Blaster de Íons e raios de Matéria Escura, que perfuram as defesas mais
poderosas dos adversários e alguns com escudos de Uru, substância feita a partir de pedra e metal
sendo altamente desistentes.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="row footerHist">
<div class="card mb-2 col-md-12 text-center" style="background-color: rgba(26, 24, 24, 0.9)">
<div class="card-body row">
<section class="col-4">
<h5 class="card-title text"><b>Links Rápidos</b></h5>
<ul>
<li><a href="index.html" class="card-link">Home</a></li>
<li><a href="login.html" class="card-link">Login</a></li>
<li><a href="senha.html" class="card-link">Recuperar Senha</a></li>
<li><a href="cadastro.html" class="card-link">Cadastro</a></li>
<li><a href="historia.html" class="card-link">História</a></li>
</ul>
</section>
<section class="col-4">
<h5 class="card-title text"><b>Trabalho Interdiscplinar: Aplicações Web</b></h5>
<p class="card-text textHomeFooter">Sistemas de Informação (Noite)</p>
</section>
<section class="col-4">
<img src="imagens/logo-puc-mobile.png" class="imgPUC">
</section>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</body>
</html>