-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
190 lines (175 loc) · 12.6 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
<!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>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/style-media-queries.css">
<script> // Código JS para usuários que não tem JS habilitado
document.documentElement.className += ' js'
</script>
</head>
<body>
<div class="grid-container">
<nav class="menu js-menu">
<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.html">Sobre</a>
<ul class="dropdown-menu">
<li><a href="empresa.html">A Empresa</a></li>
<li><a href="socios.html">Sócios</a></li>
<li><a href="equipe.html">Equipe</a></li>
<li><a href="investidores.html">Investidores</a></li>
</ul>
</li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#contato">Contato</a></li>
<li><a href="login.html" data-modal="abrir">Login</a></li>
</ul>
</nav>
<section class="grid-section animais js-animationScroll" id="animais">
<h1 class="titulo">Animais Fantásticos</h1>
<ul class="animais-lista js-tabMenu">
<li>
<img src="img/imagem1.jpg" alt="">
</li>
<li>
<img src="img/imagem2.jpg" alt="">
</li>
<li>
<img src="img/imagem3.jpg" alt="">
</li>
<li>
<img src="img/imagem4.jpg" alt="">
</li>
<li>
<img src="img/imagem5.jpg" alt="">
</li>
<li>
<img src="img/imagem6.jpg" alt="">
</li>
</ul>
<div class="animais-descricao" data-tab="content">
<section data-anime="show-right">
<h2>Raposa</h2>
<p>As raposas são animais mamíferos e onívoros pertencentes à família Canidae. São vulpídeos de porte médio, caracterizados por um focinho comprido e uma cauda longa e peluda.</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 (<em>Vulpes vulpes</em>) com cerca de 47 subespécies reconhecidas.</p>
<p>As raposas são geralmente menores do que alguns outros membros da família Canidae, como lobos e chacais, embora possam ser maiores do que alguns dentro da família, como cães-guaxinins.</p>
<p>Na natureza, a expectativa de vida típica de uma raposa é de um a três anos, embora os indivíduos possam viver até dez anos.</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 <em>Sciuridae</em>.</p>
<p>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, possuem presas fortíssimas, com que roem facilmente sementes, principalmente bolotas.</p>
<p>As sementes são as principais fontes de alimentação, mas também consomem insetos e frutas. Quando coletam alimento, enterram algumas sementes que encontram, sendo que algumas chegam a germinar, como pinhões e coquinhos, acabando por plantar árvores como araucária e jerivá.</p>
</section>
<section data-anime="show-right">
<h2>Urso</h2>
<p>Os Ursos constituem uma família de mamíferos carnívoros de grande porte, contendo os ursos e os pandas. Eles são classificados como caníformes ou carnivoros caninos.</p>
<p>Os ursos são encontrados nos continentes da América do Norte, América do Sul, Europa e Ásia.</p>
<p>As características comuns dos ursos modernos incluem corpos grandes com pernas atarracadas, focinhos longos, orelhas pequenas e arredondadas, cabelos desgrenhados, patas plantígradas com cinco garras não retráteis e caudas curtas.</p>
<p>Os ursos são animais tipicamente solitários e, exceto quando estão a procura de um parceiro para acasalar ou mães acompanhando seus filhotes, passam a vida toda sozinhos.</p>
<p>Eles podem ter comportamentos diurnos ou noturnos e têm um excelente olfato.</p>
<p>Os ursos usam abrigos como cavernas e troncos, ou constroem suas tocas; a maioria das espécies ocupam suas tocas durante o inverno por um longo período de hibernação, até 100 dias.</p>
</section>
<section data-anime="show-down">
<h2>Lobo</h2>
<p>O lobo é uma espécie de mamífero canídeo do gênero <em>Canis</em>. É um sobrevivente da Era do Gelo, originário do Pleistoceno Superior, cerca de 300 mil anos atrás. É o maior membro remanescente selvagem da família canidae.</p>
<p>Embora não sejam tão adaptáveis à presença humana como geralmente ocorre com as demais espécies de canídeos, os lobos se desenvolveram em diversos ambientes, como florestas temperadas, desertos, montanhas, tundras, taigas, campos e até mesmo em algumas áreas urbanas.</p>
<p>Os lobos são capazes de percorrer longas distâncias com uma velocidade média de 10 quilômetros por hora e são conhecidos por atingir velocidades próximas a 65 quilômetros por hora durante uma perseguição.</p>
<p>Os lobos possuem uma audição bastante apurada, a ponto de serem capazes de ouvir a queda de folhas das árvores durante o outono. Sua visão noturna é a mais aguçada da família dos canídeos.</p>
</section>
<section data-anime="show-right">
<h2>Macaco</h2>
<p>Macacos são animais mamíferos, portanto, dentre suas principais características, podemos destacar a presença de pelos em seu corpo e de glândulas mamárias, as quais produzem leite, utilizado na alimentação dos filhotes. Os pelos dos macacos apresentam diferentes tonalidades a depender da espécie estudada.</p>
<p>Os macacos variam em tamanho desde o sagui-pigmeu, que pode ser tão pequeno quanto 117 milímetros, com 172 milímetros de cauda e pouco mais de 100 gramas em peso, para o mandril macho, quase 1 metro de comprimento e pesando até 36 quilos.</p>
<p>Alguns são arbóreos (vivendo em árvores), enquanto outros vivem na savana; as dietas diferem entre as várias espécies, mas podem conter qualquer um dos seguintes alimentos: frutas, folhas, sementes, nozes, flores, ovos e pequenos animais (incluindo insetos e aranhas).</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>O leão é o segundo maior felino depois do tigre, apresentando comprimento e peso menor, mas sendo mais alto na cernelha.</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>
<p>É 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.</p>
<p>O leão alimenta-se de qualquer presa que consiga apanhar, mas a dieta consiste principalmente de animais entre 50 e 300 quilos.</p>
<p>Leões vivem por volta de 10-14 anos na natureza, enquanto em cativeiro eles podem viver por até 30 anos. </p>
</section>
</div>
</section>
<section class="grid-section faq js-animationScroll" id="faq">
<h1 class="titulo">FAQ</h1>
<dl class="faq-lista js-accordionList">
<dt>Qual a idade dos animais?</dt>
<dd>As raposas são animais mamíferos e onívoros pertencentes à família Canidae. São vulpídeos de porte médio, caracterizados por um focinho comprido e uma cauda longa e peluda.</dd>
<dt>Eles são fantásticos?</dt>
<dd>Também apresentam como particularidade suas pupilas ovais semelhantes às pupilas verticais dos felídeos.</dd>
<dt>Qual a diferença?</dt>
<dd>As raposas são animais mamíferos e onívoros pertencentes à família Canidae. São vulpídeos de porte médio, caracterizados por um focinho comprido e uma cauda longa e peluda.</dd>
<dt>Como proteger?</dt>
<dd>Também apresentam como particularidade suas pupilas ovais, semelhantes às pupilas verticais dos felídeos.</dd>
</dl>
</section>
<section class="grid-section galeria js-animationScroll">
<h1 class="titulo">Galeria</h1>
<ul class="custom-controls">
<li><img src="img/slide/foto1-thumb.jpg" alt="Foto raposa"></li>
<li><img src="img/slide/foto2-thumb.jpg" alt="Foto esquilo"></li>
<li><img src="img/slide/foto3-thumb.jpg" alt="Foto urso"></li>
<li><img src="img/slide/foto4-thumb.jpg" alt="Foto lobo"></li>
<li><img src="img/slide/foto5-thumb.jpg" alt="Foto macaco"></li>
<li><img src="img/slide/foto6-thumb.jpg" alt="Foto leão"></li>
</ul>
<section class="slide-wrapper">
<ul class="slide">
<li><img src="img/slide/foto1.jpg" alt="Foto raposa"></li>
<li><img src="img/slide/foto2.jpg" alt="Foto esquilo"></li>
<li><img src="img/slide/foto3.jpg" alt="Foto urso"></li>
<li><img src="img/slide/foto4.jpg" alt="Foto lobo"></li>
<li><img src="img/slide/foto5.jpg" alt="Foto macaco"></li>
<li><img src="img/slide/foto6.jpg" alt="Foto leão"></li>
</ul>
</section>
</section>
<section class="grid-section numeros js-animationScroll">
<h1 class="titulo">Números</h1>
<div class="numeros-grid">
</div>
</section>
<section class="grid-section contato js-animationScroll" 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="">
</div>
<ul class="dados">
<li>[email protected]</li>
<li>+55 (21) 9.9999-9999</li>
<li>Rua de Tal, nº. 1.234</li>
<li>Rio de Janeiro/RJ</li>
<li data-semana="1, 2, 3, 4, 5" data-horario="8, 18">Seg à Sex, das 08:00 às 18:00</li>
<li>Faça sua doação de <span class="bitcoin-preco">0</span> bitcoin para nos ajudar</li>
</ul>
</section>
<footer class="copyright">
<p>Todos os direitos reservados.</p>
</footer>
</div>
<section class="modal-container" data-modal="container">
<div class="modal">
<button class="modal-fechar" data-modal="fechar">X</button>
<form action="">
<label for="email">E-mail</label>
<input type="email" name="email" id="email">
<label for="senha">Senha</label>
<input type="password" name="senha" id="senha">
<button type="submit">Entrar</button>
</form>
</div>
</section>
<script src="./main.js"></script> <!-- arquivo webpack -->
</body>
</html>