-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
69 lines (63 loc) · 5.37 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Penguinfo</title>
<link rel="icon" href="https://cdn-icons-png.flaticon.com/512/141/141791.png">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<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=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
</head>
<body>
<header class="header" id="header">
<nav class="nav">
<a href="#Home"><h1>PenguInfo</h1></a>
<ul class="nav-list">
<a href="#Home"><button><li>Home</li></button></a>
<a href="#sobre"><button><li>Sobre</li></button></a>
<a href="#Tipos"><button><li>Tipos</li></button></a>
</ul>
</nav>
</header>
<section class="Home" id="Home">
<div class="intro">
<h1>PENGUINFO</h1>
<p><strong>Tudo sobre pingudos <br> está aqui!</strong></p>
</div>
<img src="https://img.freepik.com/fotos-premium/papeis-de-parede-de-pinguim-fundos-de-penguim_961307-27379.jpg" alt="">
</section>
<section class="sobre" id="sobre">
<h1>Sobre</h1>
<p> pinguim é uma ave da família Spheniscidae, altamente modificadas para a uma vida aquática, sendo suas asas adaptadas para promover impulso através da água. Essas aves estão amplamente distribuídas pelas águas mais frias do hemisfério sul, especialmente na Antártida e ilhas dos mares austrais, chegado à Terra do Fogo, Ilhas Malvinas e África do Sul, entre outros. Apesar da maior diversidade de pinguins encontrar-se na Antártida e regiões polares, há também espécies que habitam nos trópicos como por exemplo o pinguim-das-galápagos (Spheniscus mendiculus), nas Ilhas Galápagos. Considerando o número de indivíduos, a maioria ocorre nas proximidades da Antártida, porém apenas as espécies Pygoscelis adeliae e Aptenodytes forsteri estão restritas a essa região, de forma que a maioria das 18 espécies está distribuída entre 45ºS e 60°S, com grande diversidade ocorrendo na Nova Zelândia e em ilhas ao redor.</p>
<h2>Reprodução</h2>
<p>
"Os pinguins, bem como outras aves, botam ovos. Entretanto, diferentemente da maioria das aves, os pinguins não nidificam individualmente, sendo observadas colônias com centenas de indivíduos. Apesar da nidificação em colônia parecer um prato cheio para predadores, a proximidade entre os ninhos favorece certa proteção. A proteção é maior nos ninhos mais centrais do que naqueles localizados na periferia."
</p>
<h2>Alimentação</h2>
<p>Os pinguins se alimentam no mar, comendo peixes e lulas ou pequenos crustáceos chamados krill. São capazes de mergulhar atrás de suas presas, permanecendo submersos por vários minutos. Geralmente, o formato dos bicos está relacionado com a dieta. As espécies que se alimentam de peixes e presas maiores possuem bicos mais longos e resistentes. As que comem presas pequenas têm os bicos mais curtos e delicados.
Beber água do mar não é problema para esses animais, pois eles possuem uma glândula capaz de secretar o excesso de sal que se acumula na circulação sanguínea</p>
</section>
<section class="Tipos" id="Tipos">
<div id="btn">
<div id="buttons">
<h1>Clique no Pinguim para mais detalhes</h1>
<button id="imperador"><img src="https://static.wixstatic.com/media/c4e423_d89704bbf8f142b3bd8194ea48a0bb78~mv2.jpg/v1/fill/w_1727,h_1538,al_c,q_90/c4e423_d89704bbf8f142b3bd8194ea48a0bb78~mv2.webp" alt=""><strong>IMPERIAL</strong></button>
<button id="rei"><img src="https://static.wixstatic.com/media/c4e423_f93b53b8ae72470b9216bd0c8ffb431c~mv2.jpg/v1/fill/w_1696,h_1538,al_c,q_90/c4e423_f93b53b8ae72470b9216bd0c8ffb431c~mv2.webp" alt=""><strong>REI</strong></button>
<button id="real"><img src="https://static.wixstatic.com/media/c4e423_f5732f8a46a24ed5882cf92d6d4ffee7~mv2.jpg/v1/fill/w_1749,h_1538,al_c,q_90/c4e423_f5732f8a46a24ed5882cf92d6d4ffee7~mv2.webp" alt=""><strong>REAL</strong></button>
</div>
<div id="buttonss">
<button id="africano"><img src="https://static.wixstatic.com/media/c4e423_4fc9454c84e44298941b7317f3a26576~mv2.jpg/v1/fill/w_1681,h_1538,al_c,q_90/c4e423_4fc9454c84e44298941b7317f3a26576~mv2.webp " alt=""><strong>AFRICANO</strong></button>
<button id="azul"><img src="https://static.wixstatic.com/media/c4e423_d092dd74e72644f58138f642d7b1ad7d~mv2.jpg/v1/fill/w_1755,h_1538,al_c,q_90/c4e423_d092dd74e72644f58138f642d7b1ad7d~mv2.webp" alt=""><strong>AZUL</strong></button>
<button id="galapago"><img src="https://static.wixstatic.com/media/c4e423_8de7a3ece7f2412e982e4ef762b1bb22~mv2.jpg/v1/fill/w_1789,h_1538,al_c,q_90/c4e423_8de7a3ece7f2412e982e4ef762b1bb22~mv2.webp" alt=""><strong>GALAPAGO</strong></button>
</div>
</div>
<div class="container">
<p id="texto">esse texto vai mudar</p>
</div>
</section>
<script src="funcoes.js" ></script>
</body>
</html>