-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
178 lines (164 loc) · 10.8 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
<!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>fantastic-animals-js</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=IBM+Plex+Mono:wght@700&family=Playfair+Display+SC&display=swap" rel="stylesheet">
<script>document.documentElement.className += ' js'</script>
<link rel="stylesheet" href="./css/style.css">
<script type="module" src="./js/script.js" defer></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</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="https://github.com/adriwco" target="_blank">newsletter →</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.jpg" alt="raposa">
</li>
<li>
<img src="./img/imagem2.jpg" alt="esquilo">
</li>
<li>
<img src="./img/imagem3.jpg" alt="urso">
</li>
<li>
<img src="./img/imagem4.jpg" alt="lobo">
</li>
<li>
<img src="./img/imagem5.jpg" alt="macaco">
</li>
<li>
<img src="./img/imagem6.jpg" alt="leão">
</li>
</ul>
<div class="animias-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>Também apresentam como particularidade suas pupilas ovais, semelhantes às pupilas verticais dos felídeos. </p>
<p>De cerca de 40 espécies reconhecidas como raposas, somente 12 pertencem ao gênero Vulpes das "raposas verdadeiras", do qual a raposa vermelha é a mais comum.</p>
<p>Também apresentam como particularidade suas pupilas ovais, semelhantes às pupilas verticais dos felídeos.</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.</p>
<p>No Brasil, são também conhecidos como serelepe, caxinguelê, caxinxe, quatimirim, quatipuru, agutipuru ou acutipuru. Na Galiza e em algumas zonas de Portugal, também são conhecido por esquio.</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. Como todos os roedores, possuem presas fortíssimas, com que roem facilmente sementes, principalmente bolotas.</p>
</section>
<section data-anime="show-right">
<h2>Urso</h2>
<p>Os Ursos (latim científico: Ursidae) constituem uma família de mamíferos plantígrados, geralmente de grande porte, contendo os ursos e os pandas.</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>A maioria dos ursos costumam preparar-se para hibernar durante o inverno, comendo grandes quantidades de comida antes de entrar em uma toca para o período de sono profundo.</p>
<p>Os ursos existem em todos os continentes, em exceção na África, embora algumas fontes afirmem terem avistado o Urso nandi, mas sem comprovarem a sua existência.</p>
</section>
<section data-anime="show-down">
<h2>Lobo</h2>
<p>O lobo (também chamado de lobo-cinzento; nome científico: Canis lupus) é 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.</p>
<p>É o maior membro remanescente selvagem da família canidae. 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>
<p>Uma série de outras subespécies do lobo-cinzento foram identificadas, embora o número real de subespécies ainda esteja em discussão. 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>
</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. É 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.</p>
<p>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 [feminino: leoa] (nome científico: Panthera leo) é uma espécie de mamífero carnívoro do gênero Panthera e da família Felidae.</p>
<p>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>
</section>
</div>
</section>
<section class="grid-section faq" data-anime="scroll" id="faq">
<h2 class="titulo">FAQ</h2>
<dl class="faq-lista" data-anime="accordion">
<dt>Qual a idade dos animais?</dt>
<dd>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.</dd>
<dt>Eles são fantásticos?</dt>
<dd>Raposas são mamíferos da família Canidae, assim como lobos e cachorros. As raposas têm o crânio achatado, orelhas triangulares verticais, focinho pontiagudo e ligeiramente arrebitado e uma cauda longa e espessa.</dd>
<dt>Qual a diferença?</dt>
<dd>Em termos de proporções, as raposas são mais alongadas e têm pernas mais curtas do que as outras duas espécies. A cauda é a mais longa em relação ao corpo e a mais espessa, devido à sua densa pelagem. Por outro lado, os lobos são os mais robustos, largos e musculosos entre esses canídeos.</dd>
<dt>Como proteger?</dt>
<dd>Implementando práticas de conservação que ajudarão a minimizar a fragmentação da floresta e limitar as atividades que poderiam perturbar as tocas das raposas.</dd>
</dl>
</section>
<section class="grid-section numeros" data-anime="scroll">
<h1 class="titulo">Números</h1>
<div class="numeros-grid">
<div class="numero-animal">
<h2>Lobos</h2>
<span data-numero>4872</span>
</div>
<div class="numero-animal">
<h2>Raposas</h2>
<span data-numero>1072</span>
</div>
<div class="numero-animal">
<h2>Esquilos</h2>
<span data-numero>472</span>
</div>
<div class="numero-animal">
<h2>Ursos</h2>
<span data-numero>230</span>
</div>
</div>
</section>
<section class="grid-section contato" data-anime="scroll" id="contato">
<h2 class="titulo">Contato</h2>
<div class="iframe-googleMaps">
<iframe data-tooltip aria-label="Cidade de Atuação." src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d254788.95727363916!2d-38.66004889958366!3d-3.793303089016576!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7c74c3f464c783f%3A0x4661c60a0c6b37ca!2sFortaleza%20-%20CE!5e0!3m2!1spt-BR!2sbr!4v1659508334819!5m2!1spt-BR!2sbr" style="border:0; height: 400px;
border-radius: 10px;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<ul class="dados">
<li><a href="mailto:adriwco@gmail.com">adriwco@gmail.com</a></li>
<li><a href="tel:+5585991983369">+55 (85) 99198-3369</a></li>
<li><a href="tel:+351962655782">+351 962 655 782</a></li>
<li><span data-tooltip aria-label="Endereço próximo ao estacionamento.">Rua Bem Ali, n° 001</span></li>
<li>Fortaleza - CE</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 class="fechar" data-modal="fechar">X</button>
<form action="">
<label for="email">Email</label>
<input type="email" id="email" name="email">
<label for="password">Senha</label>
<input type="password" id="password" name="password">
<button type="submit">Entrar</button>
</form>
</div>
</section>
</body>
</html>