-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
318 lines (300 loc) · 21.5 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
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
<!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">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="styles/index.css" />
<link rel="icon" href="img/logo/logo-Panda.png" />
<title>The Zoo</title>
</head>
<body>
<!--Menu Superior-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="img/logo/logo-Texto_Horizontal.png" alt="Logo do The Zoo" width="120px">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarItens" aria-controls="navbarItens" aria-expanded="false" aria-label="Toggler button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarItens">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a href="#section-Novidades" class="nav-link">Novidades</a>
</li>
<li class="nav-item">
<a href="#section-Atracoes" class="nav-link">Atrações</a>
</li>
<li class="nav-item">
<a href="#section-Preservacao" class="nav-link">Preservação</a>
</li>
</ul>
</div>
</div>
</nav>
<!--Carrossel-->
<section class="carousel slide" id="section-Carrossel" data-bs-ride="carousel" data-bs-pause="false">
<div class="carousel-inner">
<!--Indicadores-->
<div class="carousel-indicators">
<button class="active" type="button" data-bs-target="#section-Carrossel" aria-current="true" data-bs-slide-to="0"></button>
<button type="button" data-bs-target="#section-Carrossel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#section-Carrossel" data-bs-slide-to="2"></button>
<button type="button" data-bs-target="#section-Carrossel" data-bs-slide-to="3"></button>
<button type="button" data-bs-target="#section-Carrossel" data-bs-slide-to="4"></button>
<button type="button" data-bs-target="#section-Carrossel" data-bs-slide-to="5"></button>
</div>
<!--Imagens-->
<div class="carousel-item active">
<a href="#atracao-Ilha_dos_Pandas" class="text-decoration-none">
<picture>
<source srcset="img/carrossel/01-pandas/pandas(2000x800).jpg" media="(min-width: 1400px)">
<source srcset="img/carrossel/01-pandas/pandas(1400x800).jpg" media="(min-width: 769px)">
<source srcset="img/carrossel/01-pandas/pandas(800x500).jpg" media="(min-width: 577px)">
<img srcset="img/carrossel/01-pandas/pandas(600x500).jpg" alt="Mãe panda com seu filhote" class="d-block img-fluid">
</picture>
<div class="position-absolute w-100 bottom-0 carousel-gradient"></div>
<div class="carousel-caption text-start">
<h2>Ilha dos Pandas</h2>
<p>Conheça Susane e Mike, a família mais fofa do mundo</p>
</div>
</a>
</div>
<div class="carousel-item">
<a href="#atracao-Praca_das_Capivaras" class="text-decoration-none">
<picture>
<source srcset="img/carrossel/02-praca_das_capivaras/praca_das_capivaras(2000x800).jpg" media="(min-width: 1400px)">
<source srcset="img/carrossel/02-praca_das_capivaras/praca_das_capivaras(1400x800).jpg" media="(min-width: 769px)">
<source srcset="img/carrossel/02-praca_das_capivaras/praca_das_capivaras(800x500).jpg" media="(min-width: 577px)">
<img srcset="img/carrossel/02-praca_das_capivaras/praca_das_capivaras(600x500).jpg" alt="Bando de capivaras pastando" class="d-block img-fluid">
</picture>
<div class="position-absolute w-100 bottom-0 carousel-gradient"></div>
<div class="carousel-caption">
<h2>Praça das Capivaras</h2>
<p>Venha interagir e Alimentar esses "Hamsters" gigantes!</p>
</div>
</a>
</div>
<div class="carousel-item">
<a href="#atracao-Passeio_Gigantes_da_Africa" class="text-decoration-none">
<picture>
<source srcset="img/carrossel/03-passeio_gigantes_da_africa/passeio_gigantes_da_africa(2000x800).jpg" media="(min-width: 1400px)">
<source srcset="img/carrossel/03-passeio_gigantes_da_africa/passeio_gigantes_da_africa(1400x800).jpg" media="(min-width: 769px)">
<source srcset="img/carrossel/03-passeio_gigantes_da_africa/passeio_gigantes_da_africa(800x500).jpg" media="(min-width: 577px)">
<img srcset="img/carrossel/03-passeio_gigantes_da_africa/passeio_gigantes_da_africa(600x500).jpg" alt="Elefante jogando areia com sua tromba" class="d-block img-fluid">
</picture>
<div class="position-absolute w-100 bottom-0 carousel-gradient"></div>
<div class="carousel-caption">
<h2>Passeio Gigantes da África</h2>
<p>Faça uma excursão pelos habitats de Elefantes, Girafas, Rinocerontes e muito mais!</p>
</div>
</a>
</div>
<div class="carousel-item">
<a href="#atracao-Velozes_e_Amistosos" class="text-decoration-none">
<picture>
<source srcset="img/carrossel/04-velozes_e_amistosos/velozes_e_amistosos(2000x800).jpg" media="(min-width: 1400px)">
<source srcset="img/carrossel/04-velozes_e_amistosos/velozes_e_amistosos(1400x800).jpg" media="(min-width: 769px)">
<source srcset="img/carrossel/04-velozes_e_amistosos/velozes_e_amistosos(800x500).jpg" media="(min-width: 577px)">
<img srcset="img/carrossel/04-velozes_e_amistosos/velozes_e_amistosos(600x500).jpg" alt="Mãe guepardo com seu filhotes" class="d-block img-fluid">
</picture>
<div class="position-absolute w-100 bottom-0 carousel-gradient"></div>
<div class="carousel-caption">
<h2>Velozes e Amistosos</h2>
<p>Conheça os Guepardos mais fantásticos do mundo</p>
</div>
</a>
</div>
<div class="carousel-item">
<a href="#atracao-Passeio_Congelante" class="text-decoration-none">
<picture>
<source srcset="img/carrossel/05-passeio_congelante/passeio_congelante(2000x800).jpg" media="(min-width: 1400px)">
<source srcset="img/carrossel/05-passeio_congelante/passeio_congelante(1400x800).jpg" media="(min-width: 769px)">
<source srcset="img/carrossel/05-passeio_congelante/passeio_congelante(800x500).jpg" media="(min-width: 577px)">
<img srcset="img/carrossel/05-passeio_congelante/passeio_congelante(600x500).jpg" alt="Grupo de penguins próximos da água" class="d-block img-fluid">
</picture>
<div class="position-absolute w-100 bottom-0 carousel-gradient"></div>
<div class="carousel-caption">
<h2>Passeio Congelante</h2>
<p>Descubra as maravilhas da Antártica com nossos guias!</p>
</div>
</a>
</div>
<div class="carousel-item">
<a href="#preservacao-Em_Resgate_a_Amazonia" class="text-decoration-none">
<picture>
<source srcset="img/carrossel/06-em_resgate_a_amazonia/em_resgate_a_amazonia(2000x800).jpg" media="(min-width: 1400px)">
<source srcset="img/carrossel/06-em_resgate_a_amazonia/em_resgate_a_amazonia(1400x800).jpg" media="(min-width: 769px)">
<source srcset="img/carrossel/06-em_resgate_a_amazonia/em_resgate_a_amazonia(800x500).jpg" media="(min-width: 577px)">
<img srcset="img/carrossel/06-em_resgate_a_amazonia/em_resgate_a_amazonia(600x500).jpg" alt="Arara-azul-grande em meio as folhas de uma árvore" class="d-block img-fluid">
</picture>
<div class="position-absolute w-100 bottom-0 carousel-gradient"></div>
<div class="carousel-caption text-end">
<h2>Em Resgate à Amazônia</h2>
<p>The Zoo participa ativamente de programas de proteção e preservação da Amazônia</p>
</div>
</a>
</div>
</div>
<!--Botões-->
<button class="carousel-control-prev" type="button" data-bs-target="#section-Carrossel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Anterior</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#section-Carrossel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Próximo</span>
</button>
</section>
<!--Seção Novidades-->
<section class="container text-center py-5 border-bottom" id="section-Novidades">
<header class="mb-4">
<h1>Novidades</h1>
<h5 class="fw-normal text-secondary">Dê as boas vindas para os <span class="text-success fw-bold">novos animais</span> do The Zoo</h5>
</header>
<div class="row">
<article class="col-12 col-lg-4 mb-2 mb-lg-0">
<img class="rounded-circle w-50" src="img/section-Novidades/01-Leonardo-pavao.jpg" alt="Pavão macho">
<h2>Leonardo</h2>
<p>Eae galera, blz? Eu sou o Leonardo, o mais novo pavão da área, e to morando perto das capivaras, dá uma passada aqui!</p>
</article>
<article class="col-12 col-lg-4 mb-2 mb-lg-0">
<img class="rounded-circle w-50" src="img/section-Novidades/02-Marta-Iguana.jpg" alt="Pavão macho">
<h2>Marta</h2>
<p>Oi pessoal, eu sou a Marta. Por que você não vem conhecer a mim e a minha família de Iguanas das Galápagos? Tem sombra e água fresca aqui!</p>
</article>
<article class="col-12 col-lg-4 mb-2 mb-lg-0">
<img class="rounded-circle w-50" src="img/section-Novidades/03-Eloisa-lemure.jpg" alt="Pavão macho">
<h2>Eloisa</h2>
<p>Olá você! Eu sou a Eloisa, uma Lêmure de Calda Anelada, e estou ansiosa para conhecer você! Dê um pulo aqui na minha casa!</p>
</article>
</div>
</section>
<!--Seção Atrações-->
<section class="container py-5 border-bottom" id="section-Atracoes">
<header class="text-center">
<h1>Atrações</h1>
<h5 class="fw-normal text-secondary">Conheça um pouco mais sobre nossas principais <span class="text-warning fw-bold">atrações.</span> Elas vão te encantar!</h5>
</header>
<!--Atração Ilha dos Pandas-->
<article class="border-start border-5 border-warning my-5 row" id="atracao-Ilha_dos_Pandas">
<header class="col-lg-7 my-auto text-start">
<h2>Ilha dos Pandas</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum feugiat sed metus eget imperdiet.
Morbi laoreet hendrerit sollicitudin. Etiam eu tortor pharetra, commodo nisl ac, lobortis neque.
Cras porta velit vitae pretium mattis. Morbi vitae leo non augue auctor molestie eget at libero.
</p>
</header>
<aside class="col-lg-5">
<img class="w-100" src="img/section-Atracoes/01-pandas.png" alt="Mãe panda com seu filhote">
</aside>
</article>
<!--Atração Praça das Capivaras-->
<article class="border-end border-5 border-warning my-5 row" id="atracao-Praca_das_Capivaras">
<header class="col-lg-7 order-lg-2 my-auto text-end">
<h2>Praça das Capivaras</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum feugiat sed metus eget imperdiet.
Morbi laoreet hendrerit sollicitudin. Etiam eu tortor pharetra, commodo nisl ac, lobortis neque.
Cras porta velit vitae pretium mattis. Morbi vitae leo non augue auctor molestie eget at libero.
</p>
</header>
<aside class="col-lg-5 order-lg-1">
<img class="w-100" src="img/section-Atracoes/02-praca_capivaras.png" alt="Bando de capivaras pastando">
</aside>
</article>
<!--Atração Passeio Gigantes da África-->
<article class="border-start border-5 border-warning my-5 row" id="atracao-Passeio_Gigantes_da_Africa">
<header class="col-lg-7 my-auto text-start">
<h2>Passeio Gigantes da África</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum feugiat sed metus eget imperdiet.
Morbi laoreet hendrerit sollicitudin. Etiam eu tortor pharetra, commodo nisl ac, lobortis neque.
Cras porta velit vitae pretium mattis. Morbi vitae leo non augue auctor molestie eget at libero.
</p>
</header>
<aside class="col-lg-5">
<img class="w-100" src="img/section-Atracoes/03-gigantes_da_africa.png" alt="Elefante jogando areia com sua tromba">
</aside>
</article>
<!--Atração Velozes e Amistosos-->
<article class="border-end border-5 border-warning my-5 row" id="atracao-Velozes_e_Amistosos">
<header class="col-lg-7 order-lg-2 my-auto text-end">
<h2>Velozes e Amistosos</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum feugiat sed metus eget imperdiet.
Morbi laoreet hendrerit sollicitudin. Etiam eu tortor pharetra, commodo nisl ac, lobortis neque.
Cras porta velit vitae pretium mattis. Morbi vitae leo non augue auctor molestie eget at libero.
</p>
</header>
<aside class="col-lg-5 order-lg-1">
<img class="w-100" src="img/section-Atracoes/04-velozes_e_amistosos.png" alt="Mãe guepardo com seu filhotes">
</aside>
</article>
<!--Atração Passeio Congelante-->
<article class="border-start border-5 border-warning mt-5 row" id="atracao-Passeio_Congelante">
<header class="col-lg-7 my-auto text-start">
<h2>Passeio Congelante</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum feugiat sed metus eget imperdiet.
Morbi laoreet hendrerit sollicitudin. Etiam eu tortor pharetra, commodo nisl ac, lobortis neque.
Cras porta velit vitae pretium mattis. Morbi vitae leo non augue auctor molestie eget at libero.
</p>
</header>
<aside class="col-lg-5">
<img class="w-100" src="img/section-Atracoes/05-passeio_congelante.png" alt="Grupo de penguins próximos da água">
</aside>
</article>
</section>
<!--Seção Preservação-->
<section class="container py-5" id="section-Preservacao">
<header class="text-center">
<h1>Presevação</h1>
<h5 class="fw-normal text-secondary">The Zoo age para além de seus muros, participando ativamente de projetos de <span class="fw-bold text-success">presevação</span> da fauna e flora do nosso planeta!</h5>
</header>
<!--Preservação Em Resgate à Amazônia-->
<article class="border-end border-5 border-success mt-5 row" id="preservacao-Em_Resgate_a_Amazonia">
<header class="col-lg-7 order-lg-2 my-auto text-end">
<h2>Em Resgate à Amazônia</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum feugiat sed metus eget imperdiet.
Morbi laoreet hendrerit sollicitudin. Etiam eu tortor pharetra, commodo nisl ac, lobortis neque.
Cras porta velit vitae pretium mattis. Morbi vitae leo non augue auctor molestie eget at libero.
</p>
</header>
<aside class="col-lg-5 order-lg-1">
<img class="w-100" src="img/section-Atracoes/06-em_resgate_a_amazonia.png" alt="Arara-azul-grande em meio as folhas de uma árvore">
</aside>
</article>
</section>
<!--Footer-->
<footer class="container-fluid py-5 bg-dark text-light text-center">
<section class="row">
<article class="col" id="footer-Dev">
<p>Desenvolvido por <a class="fw-bold text-decoration-none" href="https://www.linkedin.com/in/gustavo-herrero-nunes-329070212/" target="_blank" rel="noopener noreferrer">Gustavo HerreroNunes</a></p>
<p>
<a class="text-decoration-none text-light me-2" href="https://www.linkedin.com/in/gustavo-herrero-nunes-329070212/" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>
</a>
<a class="text-decoration-none text-light" href="https://github.com/GustavoHerreroNunes/" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
</p>
</article>
<article class="col" id="footer-Logo">
<a href="#">
<img src="img/logo/logo-Texto_Vertical.png" alt="Logo do The Zoo" width="75">
</a>
</article>
<article class="col" id="footer-Creditos">
<p>
Ícone de Panda criado por Eucalyp - <a class="fw-bold text-decoration-none" href="https://www.flaticon.com/free-icons/panda" title="panda icons">Flaticon</a>
</p>
</article>
</section>
</footer>
<!--Scripts do projeto-->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>