-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
186 lines (167 loc) · 10.9 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="animais fantásticos">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animais Fantásticos</title>
<link rel="preload" href="./css/style.css" as="style">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="icon" href="./img/fox.svg" type="image/x-icon">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display+SC&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<script>document.documentElement.className += ' js';</script>
</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.html">Sobre</a>
<ul class="dropdown-menu">
<li><a href="empresa.html">A Empresa</a></li>
<li><a href="equipe.html">Equipe</a></li>
<li><a href="socios.html">Sócios</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 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="img/imagem1.webp" width="600" height="800" alt="raposa">
</li>
<li>
<img src="img/imagem2.webp" width="600" height="800" alt="esquilo">
</li>
<li>
<img src="img/imagem3.webp" width="600" height="800" alt="urso">
</li>
<li>
<img src="img/imagem4.webp" width="600" height="800" alt="lobo">
</li>
<li>
<img src="img/imagem5.webp" width="600" height="800" alt="macaco">
</li>
<li>
<img src="img/imagem6.webp" width="600" height="800" alt="leão">
</li>
</ul>
<div class="animais-descricao" data-tab="content">
<section data-anime="show-right">
<h2>Raposa</h2>
<p>As raposas são pequenos a médios mamíferos onívoros pertencentes a vários gêneros da família Canidae. Possuem 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>Elas 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>
</section>
<section data-anime="show-right">
<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>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. Possuem presas fortíssimas, com que roem facilmente sementes, principalmente bolotas.</p>
<p>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, acabando por plantar árvores como araucária.</p>
</section>
<section data-anime="show-right">
<h2>Urso</h2>
<p>Constituem uma família de mamíferos plantígrados, geralmente de grande porte, contendo os ursos e os pandas. Algumas características comuns são pelagem espessa, rabo curto, o olfato desenvolvido e as garras não retráteis. Geralmente são animais omnívoros, mas se alimentam principalmente de carne.</p>
<p>É um animal solitário, sabe conviver pacificamente quando existe abundância de alimento. Durante o inverno, ele busca covas e cavernas para entrar em estado de letargia, que pode durar até sete meses.</p>
<p>Tamanho e peso variam consideravelmente de acordo com a subespécie, ou sazonalmente, em vista de que quando saem da hibernação na primavera estão relativamente magros, devido a falta de forrageamento durante a letargia.</p>
</section>
<section data-anime="show-right">
<h2>Lobo</h2>
<p>O lobo (também chamado de lobo-cinzento) é uma espécie de mamífero canídeo do gênero Canis. É 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>São tipicamente predadores ápice nos ecossistemas que ocupam. Se desenvolveram em diversos ambientes, como florestas temperadas, desertos, montanhas, tundras, campos e até mesmo em algumas áreas urbanas.
</p>
<p>São capazes de percorrer longas distâncias com uma velocidade média de 10 km/h e são conhecidos por atingir velocidades próximas a 65 km/h durante uma perseguição, além disso possuem uma audição bastante apurada, a ponto de serem capazes de ouvir a queda de folhas das árvores durante o outono.</p>
<p></p>
</section>
<section data-anime="show-right">
<h2>Macaco</h2>
<p>Macaco é um termo de origem africana utilizado como designação comum às espécies de símios ou primatas antropoides. No sentido estrito, "macaco" refere-se às espécies de primatas pertencentes ao gênero Macaca.</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>
<p> Variam em tamanho desde o sagui-pigmeu, que pode ser tão pequeno quanto 117 mm com 172 mm de cauda e pouco mais de 100 g em peso, para o mandril macho, quase 1 m de comprimento e pesando até 36 kg.</p>
</section>
<section data-anime="show-right">
<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>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>Vivem em bandos de 5 a 40 indivíduos, sendo os únicos felinos de hábitos gregários. Em um bando, há divisão de tarefas: as fêmeas são encarregadas da caça e do cuidado dos filhotes, enquanto o macho é responsável pela demarcação do território e pela defesa do grupo de animais maiores ou mais numerosos.</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> A expectativa de vida depende de cada animal.</dd>
<dt>Eles são fantásticos?</dt>
<dd>Sim, todos são.</dd>
<dt>Como proteger?</dt>
<dd>Devemos seguir todas as indicações que nos são dadas quando estamos em áreas protegidas.<br>
Se formos a um local que não possui sinalização, devemos sempre buscar o cuidado com o local e as espécies que o habitam.</dd>
</dl>
</section>
<section class="grid-section galeria" data-anime="scroll">
<ul class="custom-controls">
<li><img src="./img/slide/foto1-thumb.webp" width="400" height="400" alt="raposa"></li>
<li><img src="./img/slide/foto2-thumb.webp" width="400" height="400" alt="esquilo"></li>
<li><img src="./img/slide/foto3-thumb.webp" width="400" height="400" alt="urso"></li>
<li><img src="./img/slide/foto4-thumb.webp" width="400" height="400" alt="lobo"></li>
<li><img src="./img/slide/foto5-thumb.webp" width="400" height="400" alt="macaco"></li>
<li><img src="./img/slide/foto6-thumb.webp" width="400" height="400" alt="leao"></li>
</ul>
<div class="slide-wrapper">
<ul class="slide">
<li><img src="./img/slide/foto1.webp" width="1200" height="700" alt="raposa"></li>
<li><img src="./img/slide/foto2.webp" width="1200" height="700" alt="esquilo"></li>
<li><img src="./img/slide/foto3.webp" width="1200" height="700" alt="urso"></li>
<li><img src="./img/slide/foto4.webp" width="1200" height="700" alt="lobo"></li>
<li><img src="./img/slide/foto5.webp" width="1200" height="700" alt="macaco"></li>
<li><img src="./img/slide/foto6.webp" width="1200" height="700" alt="leao"></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="img/mapa.webp" width="1200" height="1600" alt="mapa">
</div>
<ul class="dados">
<li>[email protected]</li>
<li>+55 (11) 9999-9999</li>
<li>Rua do Conde, nº 21</li>
<li>São Paulo - SP</li>
<li>Doe <span class="bitcoin-preco">0</span> bitcoin para nos ajudar</li>
<li data-semana="1,2,3,4,5" data-horario="8, 18">Seg à Sex das 8 às 18</li>
</ul>
</section>
<footer class="copy">
<p>Todos os direitos reservados.</p>
</footer>
</div>
<section class="modal-container" data-modal="container">
<div class="modal">
<button data-modal="fechar" class="fechar"></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 src="main.js"></script>
</body>
</html>