-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
327 lines (308 loc) · 18.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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Animais Fantásticos | Aprendizado sobre JavaScript" />
<meta
property="og:description"
content="Aprendizado sobre JavaScript, Regex, NPM, ESLint, Webpack, Babel e Git"
/>
<meta property="og:url" content="https://animais-fantasticos.guilhermeassuncao.dev" />
<meta
name="image"
property="og:image"
content="https://animais-fantasticos.guilhermeassuncao.dev/public/img/og-image.jpg"
/>
<meta name="description" content="Aprendizado sobre JavaScript, Regex, NPM, ESLint, Webpack, Babel e Git" />
<title>Animais Fantásticos | Aprendizado sobre JavaScript</title>
<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=JetBrains+Mono:wght@400;700&family=Playfair+Display+SC:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="shortcut icon" href="./public/img/favicon.png" type="image/png" />
<link rel="stylesheet" type="text/css" href="./public/css/style.css" />
<script>
document.documentElement.className = 'js';
</script>
</head>
<body>
<main class="grid-container">
<nav class="menu" data-menu="suave">
<button data-menu="button" aria-expanded="false" aria-controls="menu">Menu</button>
<ul data-menu="list" id="menu">
<li><a href="#animais">Animais</a></li>
<li data-dropdown>
<a href="/sobre">Sobre</a>
<ul class="dropdown-menu">
<li><a href="#">A Empresa</a></li>
<li><a href="#">Equipe</a></li>
<li><a href="#">Sócios</a></li>
<li><a href="#">Investidores</a></li>
</ul>
</li>
<li><a href="#faq">Faq</a></li>
<li><a href="#contato">Contato</a></li>
<li>
<a data-modal="abrir" href="login.html">Login <span class="arrow-black"></span></a>
</li>
</ul>
</nav>
<section class="grid-section animais" data-anime="scroll" id="animais">
<h1 class="titulo">Animais Fantásticos</h1>
<ul class="animais-lista" data-tab="menu">
<li>
<img src="./public/img/imagem1.jpg" />
</li>
<li>
<img src="./public/img/imagem2.jpg" />
</li>
<li>
<img src="./public/img/imagem3.jpg" />
</li>
<li>
<img src="./public/img/imagem4.jpg" />
</li>
<li>
<img src="./public/img/imagem5.jpg" />
</li>
<li>
<img src="./public/img/imagem6.jpg" />
</li>
</ul>
<div class="animais-descricao" data-tab="content">
<section data-anime="show-right">
<h2>Raposa</h2>
<p>
Raposas são pequenos a médios mamíferos onívoros pertencentes a vários gêneros da família
Canidae. As raposas têm o crânio achatado, orelhas triangulares verticais, focinho
pontiagudo e ligeiramente arrebitado e uma cauda longa e espessa.
</p>
<p>
Doze espécies pertencem ao grupo monofilético de "raposas verdadeiras" do gênero Vulpes.
Aproximadamente outras 25 espécies atuais ou extintas são parte do grupo parafilético das
raposas sul-americanas ou do grupo periférico, que consiste na raposa-orelhas-de-morcego,
raposa-cinzenta e raposa-das-ilhas.
</p>
<p>
As raposas vivem em todos os continentes, exceto a Antártida. De longe, a espécie mais comum
e difundida de raposa é a raposa vermelha (Vulpes vulpes) com cerca de 47 subespécies
reconhecidas.
</p>
<p>
A caça à raposa com matilhas de cães, há muito uma atividade estabelecida na Europa,
especialmente nas Ilhas Britânicas, foi exportada por colonos europeus para várias partes do
Novo Mundo.
</p>
</section>
<section data-anime="show-down">
<h2>Esquilo</h2>
<p>
Os esquilos pertencem a uma grande família de mamíferos roedores, de pequeno e médio porte,
conhecida como Sciuridae. No Brasil, são também conhecidos como serelepe, caxinguelê,
caxinxe, quatimirim, quatipuru, agutipuru ou acutipuru.
</p>
<p>
Na Galiza e em algumas zonas de Portugal, também é conhecido por esquio. Os esquilos estão
espalhados por quase todo o mundo, a maioria nas zonas de climas temperado ou tropical, mas
também em algumas zonas de clima frio.
</p>
<p>
Como todos os roedores, possui presas fortíssimas, com que roem facilmente sementes,
principalmente bolotas. As sementes são as principais fontes de alimentação, mas também
consomem insetos e frutas.
</p>
<p>
Constroem ninhos com folhas e galhos para abrigarem as suas crias da chuva e do vento, em
ramos muito altos, em árvores como a cajarana. Durante a gestação, os pais preparam o ninho
para receber os filhotes que variam de 3 a 10 por ninhada.
</p>
</section>
<section data-anime="show-right">
<h2>Urso</h2>
<p>
Os Ursos constituem uma família de mamíferos plantígrados, da ordem Carnivora, geralmente de
grande porte, contendo os ursos e os pandas.
</p>
<p>
Embora classificado como urso, e logo após, como procionídeo, junto com o panda-vermelho, o
panda-gigante foi recolocado dentro da família dos ursídeos devido às novas pesquisas
genéticas.
</p>
<p>
Algumas características comuns dos ursos são pelagem espessa, rabo curto, o olfato
desenvolvido e as garras não retráteis. Os ursídeos são geralmente animais omnívoros, mas se
alimentam principalmente de carne.
</p>
<p>
As espécies mais antigas e primitivas desta família estão reunidas no gênero Ballusia, do
Mioceno Inferior, que ainda retêm características similares aos Hemicyonidae. Do Ballusia
descende o gênero Ursavus, fonte dos ursíneos, e talvez o Agriarctos, ancestral dos
agrioteríneos.
</p>
</section>
<section data-anime="show-down">
<h2>Lobo</h2>
<p>
O lobo é uma espécie de mamífero canídeo do gênero Canis, da família dos cães e raposas. É
um sobrevivente da Era do Gelo, originário do Pleistoceno Superior, cerca de 300 mil anos
atrás.
</p>
<p>
Está dividido em 4 espécies: lobo-cinzento (Canis lupus), lobo-dourado (Canis anthus),
lobo-vermelho (Canis rufus) e lobo-etíope (Canis simensis), embora os cientistas atualmente
debatam se o lobo-etíope seria um verdadeiro lobo ou um membro da família dos
chacais-dourados.
</p>
<p>
Dessas espécies, o lobo-cinzento é a maior delas e também de todos os membros remanescentes
selvagens da família canidae.
</p>
<p>
O sequenciamento de DNA e estudos genéticos reafirmam que o lobo-cinzento é ancestral do cão
doméstico (Canis lupus familiaris), contudo alguns aspectos desta afirmação têm sido
questionados recentemente.
</p>
</section>
<section data-anime="show-right">
<h2>Macaco</h2>
<p>
Macaco é um termo de origem africana (provavelmente do banto makako) utilizado como
designação comum a todas as espécies de símios ou primatas antropoides.
</p>
<p>
É aplicada restritivamente no Brasil aos cebídeos (ou macacos do Novo Mundo) em geral. No
sentido estrito, "macaco" refere-se às espécies de primatas pertencentes ao género Macaca.
</p>
<p>
A designação mico se origina, segundo o Dicionário Aurélio, do caraíba (karib) continental.
É bastante usada no Brasil, onde costuma aplicar-se às espécies do gênero Cebus, no Sul, e
às espécies de pequeno porte, ou saguis, no Norte.
</p>
<p>
O termo sagui se origina do tupi antigo sagûi e também designa os macacos calitriquídeos de
pequeno porte. Ainda segundo Cunha, o termo símio, que também designa os macacos (tendo sido
registrado no português dos séculos XVI e XVII), vem do latim simius, de simus, "que tem o
nariz chato".
</p>
</section>
<section data-anime="show-down">
<h2>Leão</h2>
<p>
O leão é uma espécie de mamífero carnívoro do gênero Panthera e da família Felidae. A
espécie é atualmente encontrada na África subsaariana e na Ásia, com uma única população
remanescente em perigo, no Parque Nacional da Floresta de Gir, Gujarat, Índia.
</p>
<p>
Foi extinto na África do Norte e no Sudoeste Asiático em tempos históricos, e até o
Pleistoceno Superior, há cerca de 10 000 anos, era o mais difundido grande mamífero
terrestre depois dos humanos, sendo encontrado na maior parte da África, em muito da
Eurásia, da Europa Ocidental à Índia, e na América, do Yukon ao México.
</p>
<p>
É uma dos quatro grandes felinos, com alguns machos excedendo 250 quilogramas em peso, sendo
o segundo maior felino recente depois do tigre.
</p>
<p>
A pelagem é unicolor de coloração castanha, e os machos apresentam uma juba característica.
Uma das características mais marcantes da espécie é a presença de um tufo de pelos pretos na
cauda, que também possui uma espora.
</p>
</section>
</div>
</section>
<section class="grid-section faq" data-anime="scroll" id="faq">
<h1 class="titulo">FAQ</h1>
<dl class="faq-lista" data-anime="accordion">
<dt>Qual a idade dos animais?</dt>
<dd>
Tem ciclo de vida normal para o tipo de mamífero: vive entre 9 e 10. Entretanto, indivíduos com
12 ou 13 anos foram identificados. A fêmea chega à vida reprodutiva com 10 meses ou 12 de idade.
A reprodução acontece alguns meses antes da primavera das regiões onde vive. O “casal” se
identifica como compatíveis mutuamente a partir de emissão de cheiros específicos.
</dd>
<dt>Eles são fantásticos?</dt>
<dd>
Pode ter pelos vermelhos, castanhos ou cinza, mas sempre haverá regiões brancas em algum lugar
do corpo. Não cresce muito; em média, tem 40 ou 50 de altura e 80cm de comprimento – algumas
raças podem ser um pouco maiores. Seu focinho é proeminente, alongando-se de forma bem visível.
E as orelhas também são longas, além de pontiagudas.
</dd>
<dt>Qual a diferença?</dt>
<dd>
Todas detém diferenças suficientes para agrupá-las. Raposa cinzenta: Juntamente com a raposa
vermelha, é a mais vista em seu habitat. O cinza escuro é boa camuflagem. Raposa Vermelha: É
também considerada a mais conhecida e a maior das raças. Feneco: É a menor raça conhecida.
Assemelha-se mais a um cãozinho que propriamente à raposa. Raposa-do-Ártico: Esse tipo de raposa
é realmente surpreendente simplesmente por viver em região tão inóspita.Kit Fox: O pelo escuro
acastanhado é ideal para as regiões mexicanas. O que a diferencia é justamente a maciez do pelo.
</dd>
<dt>Como proteger?</dt>
<dd>
Ela vive em recanto, que é o nome dado às covas que ela própria constrói para se abrigar e
proteger filhotes. Fazem isso em florestas, jardins, montanhas e até mesmo em porões e sótãos.
Ou seja, em qualquer lugar em que tenha necessidade de proteção.
</dd>
</dl>
</section>
<section class="grid-section gallery" data-anime="scroll">
<ul class="custom-controls">
<li><img src="./public/img/slide/foto1-thumb.jpg" alt="" /></li>
<li><img src="./public/img/slide/foto2-thumb.jpg" alt="" /></li>
<li><img src="./public/img/slide/foto3-thumb.jpg" alt="" /></li>
<li><img src="./public/img/slide/foto4-thumb.jpg" alt="" /></li>
<li><img src="./public/img/slide/foto5-thumb.jpg" alt="" /></li>
<li><img src="./public/img/slide/foto6-thumb.jpg" alt="" /></li>
</ul>
<div class="slide-wrapper">
<ul class="slide">
<li><img src="./public/img/slide/foto1.jpg" alt="" /></li>
<li><img src="./public/img/slide/foto2.jpg" alt="" /></li>
<li><img src="./public/img/slide/foto3.jpg" alt="" /></li>
<li><img src="./public/img/slide/foto4.jpg" alt="" /></li>
<li><img src="./public/img/slide/foto5.jpg" alt="" /></li>
<li><img src="./public/img/slide/foto6.jpg" alt="" /></li>
</ul>
</div>
</section>
<section class="grid-section numeros" data-anime="scroll">
<h1 class="titulo">Números</h1>
<div class="numeros-grid"></div>
</section>
<section class="grid-section contato" data-anime="scroll" id="contato">
<h1 class="titulo">Contato</h1>
<div class="mapa" data-tooltip aria-label="Endereço próximo ao estacionamento.">
<img src="./public/img/mapa.png" />
</div>
<ul class="dados">
<li>contato@origamid.com</li>
<li>+55 (21) 9999-9999</li>
<li>Rua do Conde, nº 21</li>
<li>Rio de Janeiro - RJ</li>
<li data-semana="1,2,3,4,5" data-horario="8,18">Seg à Sex das 8 às 18</li>
<li>Doe <span class="btc-preco">0</span> bitcoin para nos ajudar</li>
</ul>
</section>
<footer class="copy">
<p>Todos os direitos reservados.</p>
</footer>
</main>
<section class="modal-container" data-modal="container">
<div class="modal">
<button class="modal-fechar" data-modal="fechar"></button>
<form action="">
<label for="email">Email</label>
<input type="text" id="email" name="email" />
<label for="senha">Senha</label>
<input type="password" id="senha" name="senha" />
<button type="submit">Entrar</button>
</form>
</div>
</section>
<script type="module" src="./public/js/app.js"></script>
</body>
</html>