-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
249 lines (233 loc) · 17.1 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
<!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.0">
<title>Animais Fantásticos</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display+SC" rel="stylesheet">
<link rel="shortcut icon" href="animais.ico" type="image/x-icon">
<script>document.documentElement.className += ' js';</script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div 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</a>
<ul class="dropdown-menu">
<li><a href="#">A Empresa</a></li>
<li><a href="#">A Equipe</a></li>
<li><a href="#">Socios</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 →
</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="img/girafa.jpg" alt="Girafa">
</li>
<li>
<img src="img/elefante.jpg" alt="Elefante">
</li>
<li>
<img src="img/aguia.jpg" alt="Águia">
</li>
<li>
<img src="img/rino.jpg" alt="Rinoceronte">
</li>
<li>
<img src="img/leao.jpg" alt="Leão">
</li>
<li>
<img src="img/macaco.jpg" alt="Macaco">
</li>
</ul>
<div class="animais-descricao" data-tab="content">
<section data-anime="show-right">
<h2>Girafa</h2>
<p>O termo girafa (do árabe zarAfa(t), pelo italiano giraffa) é a designação dada a mamíferos
artiodátilos, ruminantes, do gênero Giraffa, da família dos girafídeos, no qual constam quatro
espécies (até 2016 considerava-se uma única espécie, a Giraffa camelopardalis, ou
camelo-leopardo, como eram chamadas pelos romanos quando elas existiam no norte da África, pois
acreditava-se que vinham de uma mistura de uma fêmea camelo, com um macho leopardo)[carece de
fontes]. São ungulados com número par de dedos.</p>
<p>As girafas são os únicos membros de seu gênero e, juntas com os ocapis, formam a família
Giraffidae. Atualmente estão listadas quatro espécies de girafa existentes e nove já extintas
(ver abaixo), diferenciadas também pela distribuição geográfica e pelo padrão das manchas[nota
1]. Essas várias subespécies de girafas agora habitam as terras secas ao sul do Saara. As
girafas se distribuem em dois grupos: girafa-do-norte que são tricornes, isto é, com um corno
nasal interocular e dois frontoparietais, apresentando pelagem predominantemente reticulada; e
girafa-do-sul, sem corno nasal e a pelagem tem predominantemente malhas irregulares.</p>
<p>As girafas são os únicos membros de seu gênero e, juntas com os ocapis, formam a família
Giraffidae. Atualmente estão listadas quatro espécies de girafa existentes e nove já extintas
(ver abaixo), diferenciadas também pela distribuição geográfica e pelo padrão das manchas[nota
1]. Essas várias subespécies de girafas agora habitam as terras secas ao sul do Saara. As
girafas se distribuem em dois grupos: girafa-do-norte que são tricornes, isto é, com um corno
nasal interocular e dois frontoparietais, apresentando pelagem predominantemente reticulada; e
girafa-do-sul, sem corno nasal e a pelagem tem predominantemente malhas irregulares.</p>
</section>
<section data-anime="show-right">
<h2>Elefante</h2>
<p>Os elefantes são animais herbívoros, alimentando-se de ervas, gramíneas, frutas e folhas de árvores. Dado o seu tamanho, um elefante adulto pode ingerir entre 70 a 150 kg de alimentos por dia. As fêmeas vivem em manadas de 10 a 15 animais, lideradas por uma matriarca, compostas por várias reprodutoras e crias de variadas idades. O período de gestação das fêmeas é longo (20 a 22 meses), assim como o desenvolvimento do animal que leva anos a atingir a idade adulta. Os filhotes podem nascer com 90 kg. Os machos adolescentes tendem a viver em pequenos bandos e os machos adultos isolados, encontrando-se com as fêmeas apenas no período reprodutivo.
</p>
<p>Devido ao seu porte, os elefantes têm poucos predadores. Exercem uma forte influência sobre as savanas, pois mantêm árvores e arbustos sob controle, permitindo que pastagens dominem o ambiente. Eles vivem cerca de 60 anos e morrem quando seus molares caem, impedindo que se alimentem de plantas.
</p>
</section>
<section data-anime="show-down">
<h2>Águia</h2>
<p>A águia é o nome comum dado algumas aves de rapina da família Accipitridae, geralmente de grande
porte, carnívoras, de grande acuidade visual. O nome é atribuído a animais pertencentes a
gêneros diversos e não corresponde a nenhum clade taxonômico. Por vezes, dentro de um mesmo
gênero ocorrem espécies conhecidas popularmente por gavião ou búteo.</p>
<p>Suas principais presas são: coelhos, esquilos, cobras, marmotas e outros animais, principalmente
roedores, de pequeno porte. Algumas espécies alimentam-se de ovos de outros pássaros e peixes.
</p>
<p>Costumam fazer seus ninhos em locais altos como, por exemplo, topo de montanhas e árvores de
grande porte.Existem diversas espécies de águias, as mais conhecidas são:
Águia-de-cabeça-branca, águia-gritadeira, águia marcial, águia-malaia, águia-dourada-européia e
águia-imperial-ibérica.</p>
<p>Entre as águias da America Latina, a espécie chamada Harpia é umas das maiores e chega a pesar
até 8 kg, comprimento de até um metro, com envergadura de até dois metros, põe até três ovos a
cada vez, com tempo de incubação de 35 dias, e atinge a velocidade de aproximadamente 100Km/h.
</p>
<p>Águias costumam ser utilizados como símbolos em vários contextos e culturas. A águia vive, em
média, de 50 a 65 anos em cativeiro;[1] bem menos se estiver na Natureza.</p>
</section>
<section data-anime="show-down">
<h2>Rinoceronte</h2>
<p>Os Rinocerontes são grandes mamíferos perissodáctilos (ungulados de dedos ímpares) da família
Rhinocerontidae, que ocorrem na África e na Ásia. Atualmente, existem cinco espécies
distribuídas em quatro gêneros. Duas ocorrem na África, o rinoceronte-branco (Ceratotherium
simum) e o rinoceronte-negro (Diceros bicornis); e três ocorrem na Ásia, o
rinoceronte-de-sumatra (Dicerorhinus sumatrensis), o rinoceronte-de-java (Rhinoceros sondaicus)
e o rinoceronte-indiano (Rhinoceros unicornis).</p>
<p>Vivem geralmente isolados, em savanas ou florestas onde possam encontrar água diariamente. São
especialmente protegidos na África, por fazerem parte do grupo dos cinco grandes mamíferos
selvagens de grande porte mais difíceis de serem caçados pelo homem, sendo então uma das grandes
atrações turísticas do continente. Contudo, a caça furtiva continua afetando as populações de
rinocerontes.</p>
</section>
<section data-anime="show-right">
<h2>Leão</h2>
<p>O leão [feminino: leoa] (nome científico: Panthera leo) é 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. 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. É 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. Habita preferencialmente as savanas e pastagens abertas, mas pode
ser encontrado em regiões mais arbustivas. É um animal sociável que vive em grupos que consiste
das leoas e suas crias, o macho dominante e alguns machos jovens que ainda não alcançaram a
maturidade sexual. A dieta consiste principalmente de grandes ungulados e possuem hábitos
noturnos e crepusculares, descansando e dormindo na maior parte do dia. Leões vivem por volta de
10-14 anos na natureza, enquanto em cativeiro eles podem viver por até 30 anos. Alguns animais
desenvolveram o hábito de atacar e devorar humanos, ficando conhecidos como "devoradores de
homens".</p>
<p>A espécie está classificada como "vulnerável" pela União Internacional para a Conservação da
Natureza e dos Recursos Naturais (IUCN), e sofreu um declínio populacional de 30-50% nas últimas
duas décadas no território africano. Na Ásia, o leão está confinado a uma única área protegida e
sua população é estável, mas está classificado como "em perigo", já que a população não passa de
350 animais. Entre as ameaças, a perda de habitat e os conflitos com humanos são as principais
razões de preocupação na sua conservação. Por centenas de anos, o leão tem sido usado como
símbolo de bravura e nobreza em diversas civilizações e culturas da Europa, Ásia e África. Está
amplamente representado em esculturas, pinturas, bandeiras nacionais, brasões, e em filmes e na
literatura contemporâneos.</p>
</section>
<section data-anime="show-right">
<h2>Macaco</h2>
<p>O macaco-japonês (Macaca fuscata) é um macaco da família dos cercopitecídeos, que só existe no
sul do Japão. Vive nas florestas das montanhas, onde é bastante frio.
</p>
<p>Uma macaca japonesa amamenta o filhote durante um ano. Os laços que unem mães e filhas duram até
a fase adulta, mas os filhos deixam a família quando seu crescimento está completo.</p>
<p>Em muitas espécies, a emigração coincide com a adolescência, e o abandono da família reduz as
chances de endogamia. Os cruzamentos endogâmicos podem resultar em genes defeituosos.</p>
<p>Por outro lado, os jovens que permanecem com o grupo no qual nasceram dependem muito do status da
mãe para garantir sua qualidade de vida. A mãe dominante intervém em favor dos filhos para
garantir o lugar deles na hierarquia.
Esse jovens privilegiados têm acesso aos melhores locais para se alimentarem e, quando há
perigo, ficam com os locais mais seguros. Os filhotes protegidos crescem mais rápido e ficam
maiores, e sofrem muito menos pressão do que seus primos menos privilegiados. Mesmo se a mãe
morrer, eles provavelmente ficarão em melhores condições que seus rivais, podendo manter seu
status mesmo sem o apoio dela.
</p>
</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>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis inventore doloribus tempore
fuga saepe, architecto beatae nesciunt sint nisi consequatur accusamus omnis autem minus pariatur ut
esse asperiores molestias! Corporis!</dd>
<dt>Eles são fantásticos?</dt>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis inventore doloribus tempore
fuga saepe, architecto beatae nesciunt sint nisi consequatur accusamus omnis autem minus pariatur ut
esse asperiores molestias! Corporis!</dd>
<dt>Qual a diferença?</dt>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis inventore doloribus tempore
fuga saepe, architecto beatae nesciunt sint nisi consequatur accusamus omnis autem minus pariatur ut
esse asperiores molestias! Corporis!</dd>
<dt>Como proteger?</dt>
<dd>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis inventore doloribus tempore
fuga saepe, architecto beatae nesciunt sint nisi consequatur accusamus omnis autem minus pariatur ut
esse asperiores molestias! Corporis!</dd>
</dl>
</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="img/mapa.png" alt="Mapa">
</div>
<ul class="dados">
<li>[email protected]</li>
<li>+55 (21) 99999-9999</li>
<li>Rua Fluminense n° 1902</li>
<li>Rio de Janeiro - RJ</li>
<li>Doe <span class="btc-preco">0</span> bitcoin para nos ajudar</li>
<li data-semana="1,2,3,4,5" data-horario="8,18">Seg à Sex das 8h às 18h</li>
</ul>
</section>
<footer class="copy">
<p><a href="https://github.com/douglasoliveira96" target="_blank">Todos os direitos reservados</a></p>
</footer>
</div>
<section class="modal-container" data-modal="container">
<div class="modal">
<button data-modal="fechar" class="fechar">
X
</button>
<form action="">
<label for="email">Email</label>
<input type="text" for="email" id="email">
<label for="senha">Senha</label>
<input type="password" for="senha" id="senha">
<button type="submit">Entrar</button>
</form>
</div>
</section>
<script type="module" src="js/script.js"></script>
</body>
</html>