-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
361 lines (312 loc) · 17.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
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
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="description" content="O AdoteAqui é um site com o intuito de promover a adoção de animais de estimação que precisam de uma casinha para chamar de sua.">
<meta name="keywords" content="adoção, para adoção, para adotar, a adoção, sobre adoção, adoção de, adotar é, adote um, adoção é, da adoção, adotar, adote aqui, cachorro, gato, animais de estimação, patinhas online, patinhas">
<!-- Favicon created here: https://favicon.io/ -->
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<title>AdoteAqui — Adote agora!</title>
<!-- Google Fonts -->
<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=Lily+Script+One&family=Open+Sans&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/190e245c5e.js" crossorigin="anonymous"></script>
<!-- Local CSS -->
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/style.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="style/responsive.css">
</head>
<body>
<div class="container">
<header class="header">
<nav class="nav">
<a class="logo" href="">
<span class="fas fa-paw"></span> AdoteAqui
</a>
<!-- This code is hidden on larger screens. -->
<input type="checkbox" id="check-menu">
<div class="burger-menu">
<label for="check-menu">
<svg class="burger" width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.375 14.875H44.625" stroke="#efef42" stroke-width="3.5" stroke-linecap="round"/>
<path d="M6.375 25.5H44.625" stroke="#efef42" stroke-width="3.5" stroke-linecap="round"/>
<path d="M6.37488 36.0625H28.0002" stroke="#efef42" stroke-width="3.5" stroke-linecap="round"/>
</svg>
<svg class="close" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M23 23L3 3" stroke="#f16d6d" stroke-width="5.5" stroke-linecap="round"/>
<path d="M3 23L23 3" stroke="#f16d6d" stroke-width="5.5" stroke-linecap="round"/>
</svg>
</label>
</div> <!-- .burger-menu -->
<ul class="nav__links">
<li>
<a class="nav__link" href="#home">Início</a>
</li>
<li>
<a class="nav__link nav__link--bgc-white" href="#adoption">Adoção</a>
</li>
<li>
<a class="nav__link" href="#about">Sobre</a>
</li>
</ul> <!-- .nav__links -->
</nav> <!-- .nav -->
</header>
<main>
<section class="homepage" id="home">
<div class="homepage__content">
<h1 class="title">
Mude <strong>vidas</strong>
</h1>
<p class="homepage__text">
Você não vai mudar o mundo adotando um cachorro, mas você vai mudar o mundo desse cachorro.
</p>
<a class="btn" href="#adoption">Adotar</a>
</div> <!-- .homepage__content -->
</section> <!-- .homepage -->
<section class="adoption" id="adoption">
<h2 class="title title--medium">
<strong>Adoção</strong>
</h2>
<div class="adoption__cards">
<figure class="card">
<img class="card__img" src="images/pets/fusca-dog1.png" alt="Imagem de um cachorro fofinho cute cute chamado Fusca">
<figcaption class="card__content">
<article class="card__pet-about">
<h3 class="card__pet-name">Fusca</h3>
<p class="card__pet-info">
<strong>Nascimento:</strong> Julho/2011 <br>
<strong>Sexo:</strong> Macho <br>
<q>Este é o Fusca, um garotão cheio de energia, que quando está em seu pequeno cantinho fica muito triste, pedindo carinho.</q>
</p>
</article> <!-- .card__pet-about -->
<a class="btn btn--small" href="https://www.patinhasonline.org.br/detalhes.php?id=57" target="_blank" rel="noopener external" title="Adotar o Fusca">
Adotar
</a>
</figcaption>
</figure>
<figure class="card">
<img class="card__img" src="images/pets/aramis-cat1.png" alt="Imagem de um gato fofinho cute cute chamado Aramis">
<figcaption class="card__content">
<article class="card__pet-about">
<h3 class="card__pet-name">Aramis</h3>
<p class="card__pet-info">
<strong>Nascimento:</strong> Julho/2013 <br>
<strong>Sexo:</strong> Macho <br>
<q>O Aramis é desconfiado e "na dele". Vai saber o que já passou na vida? Precisa de um lar estável para se tornar um peludo sociável e carinhoso.</q>
</p>
</article> <!-- .card__pet-about -->
<a class="btn btn--small" href="https://www.patinhasonline.org.br/detalhes.php?id=273" target="_blank" rel="noopener external" title="Adotar o Aramis">
Adotar
</a>
</figcaption>
</figure>
<figure class="card">
<img class="card__img" src="images/pets/java-dog2.png" alt="Imagem de um cachorro fofinho cute cute chamado Java">
<figcaption class="card__content">
<article class="card__pet-about">
<h3 class="card__pet-name">Java</h3>
<p class="card__pet-info">
<strong>Nascimento:</strong> Fevereiro/2014 <br>
<strong>Sexo:</strong> Fêmea <br>
<q>Assustadinha e carente, esse é o perfil da nossa pequena Java.</q>
</p>
</article> <!-- .card__pet-about -->
<a class="btn btn--small" href="https://www.patinhasonline.org.br/detalhes.php?id=216" target="_blank" rel="noopener external" title="Adotar a Java">
Adotar
</a>
</figcaption>
</figure>
<figure class="card">
<img class="card__img" src="images/pets/pascal-dog3.png" alt="Imagem de um cachorro fofinho cute cute chamado Pascal">
<figcaption class="card__content">
<article class="card__pet-about">
<h3 class="card__pet-name">Pascal</h3>
<p class="card__pet-info">
<strong>Nascimento:</strong> Fevereiro/2014 <br>
<strong>Sexo:</strong> Macho <br>
<q>Não é nem um adulto ainda e já sofreu tanto! O Pascal é irmãozinho da Java, está conosco desde filhote e sempre foi medrosinho e assustado.</q>
</p>
</article> <!-- .card__pet-about -->
<a class="btn btn--small" href="https://www.patinhasonline.org.br/detalhes.php?id=249" target="_blank" rel="noopener external" title="Adotar o Pascal">
Adotar
</a>
</figcaption>
</figure>
<figure class="card">
<img class="card__img" src="images/pets/salvatore-dog4.png" alt="Imagem de um cachorro fofinho cute cute chamado Salvatore">
<figcaption class="card__content">
<article class="card__pet-about">
<h3 class="card__pet-name">Salvatore</h3>
<p class="card__pet-info">
<strong>Nascimento:</strong> Abril/2012 <br>
<strong>Sexo:</strong> Macho <br>
<q>O Salvatore tem um porte lindo e um temperamento difícil. É um cão sem um pingo de agressividade, mas com muito medo!</q>
</p>
</article> <!-- .card__pet-about -->
<a class="btn btn--small" href="https://www.patinhasonline.org.br/detalhes.php?id=325" target="_blank" rel="noopener external" title="Adotar o Salvatore">
Adotar
</a>
</figcaption>
</figure>
<figure class="card">
<img class="card__img" src="images/pets/caetano-dog5.png" alt="Imagem de um cachorro fofinho cute cute chamado Caetano">
<figcaption class="card__content">
<article class="card__pet-about">
<h3 class="card__pet-name">Caetano</h3>
<p class="card__pet-info">
<strong>Nascimento:</strong> Junho/2014 <br>
<strong>Sexo:</strong> Macho <br>
<q>O Caetano teve uma infância complicada, mas felizmente agora ele está bem. Um pouco tímido, precisa ser conquistado para abrir seu lindo sorriso!</q>
</p>
</article> <!-- .card__pet-about -->
<a class="btn btn--small" href="https://www.patinhasonline.org.br/detalhes.php?id=272" target="_blank" rel="noopener external" title="Adotar o Caetano">
Adotar
</a>
</figcaption>
</figure>
<figure class="card">
<img class="card__img" src="images/pets/chico-dog6.png" alt="Imagem de um cachorro fofinho cute cute chamado Chico">
<figcaption class="card__content">
<article class="card__pet-about">
<h3 class="card__pet-name">Chico</h3>
<p class="card__pet-info">
<strong>Nascimento:</strong> Dezembro/2012 <br>
<strong>Sexo:</strong> Macho <br>
<q>O Chico é muito carinhoso e companheiro, se dá bem com outros animais e é totalmente independente.</q>
</p>
</article> <!-- .card__pet-about -->
<a class="btn btn--small" href="https://www.patinhasonline.org.br/detalhes.php?id=66" target="_blank" rel="noopener external" title="Adotar o Chico">
Adotar
</a>
</figcaption>
</figure>
<figure class="card">
<img class="card__img" src="images/pets/jorjao-dog7.png" alt="Imagem de um cachorro fofinho cute cute chamado Jorjão">
<figcaption class="card__content">
<article class="card__pet-about">
<h3 class="card__pet-name">Jorjão</h3>
<p class="card__pet-info">
<strong>Nascimento:</strong> Maio/2006 <br>
<strong>Sexo:</strong> Macho <br>
<q>Esse é o Jorge, mais conhecido como Jorjão por conta de seu porte respeitável e de seu temperamento, peculiar. Jorjão é um doce... com os íntimos!</q>
</p>
</article> <!-- .card__pet-about -->
<a class="btn btn--small" href="https://www.patinhasonline.org.br/detalhes.php?id=51" target="_blank" rel="noopener external" title="Adotar o Jorjão">
Adotar
</a>
</figcaption>
</figure>
<figure class="card">
<img class="card__img" src="images/pets/manguinho-dog8.png" alt="Imagem de um cachorro fofinho cute cute chamado Manguinho">
<figcaption class="card__content">
<article class="card__pet-about">
<h3 class="card__pet-name">Manguinho</h3>
<p class="card__pet-info">
<strong>Nascimento:</strong> Feveiro/2016 <br>
<strong>Sexo:</strong> Macho <br>
<q>Manguinho é uma simpátia! Chegou com uma fratura consolidada na pata, que não o impede de fazer nada! Ele quer muito ir para um novo lar!</q>
</p>
</article> <!-- .card__pet-about -->
<a class="btn btn--small" href="https://www.patinhasonline.org.br/detalhes.php?id=474" target="_blank" rel="noopener external" title="Adotar o Manguinho">
Adotar
</a>
</figcaption>
</figure>
<figure class="card">
<img class="card__img" src="images/pets/elliot-dog9.png" alt="Imagem de um cachorro fofinho cute cute chamado Elliot">
<figcaption class="card__content">
<article class="card__pet-about">
<h3 class="card__pet-name">Elliot</h3>
<p class="card__pet-info">
<strong>Nascimento:</strong> Março/2011 <br>
<strong>Sexo:</strong> Macho <br>
<q>Molecão, com muita energia e amor para dar. No caso esse é o Elliot, ele é extremamente companheiro e carinhoso! Fora o charme, né?</q>
</p>
</article> <!-- .card__pet-about -->
<a class="btn btn--small" href="https://www.patinhasonline.org.br/detalhes.php?id=82" target="_blank" rel="noopener external" title="Adotar o Elliot">
Adotar
</a>
</figcaption>
</figure>
<figure class="card">
<img class="card__img" src="images/pets/kinder-dog10.png" alt="Imagem de um cachorro fofinho cute cute chamado Kinder">
<figcaption class="card__content">
<article class="card__pet-about">
<h3 class="card__pet-name">Kinder</h3>
<p class="card__pet-info">
<strong>Nascimento:</strong> Setembro/2012 <br>
<strong>Sexo:</strong> Macho <br>
<q>Simpático rapaz à procura de um lar e de uma família. Esse menino é muito carinhoso, ativo e brincalhão.</q>
</p>
</article> <!-- .card__pet-about -->
<a class="btn btn--small" href="https://www.patinhasonline.org.br/detalhes.php?id=371" target="_blank" rel="noopener external" title="Adotar o Kinder">
Adotar
</a>
</figcaption>
</figure>
<figure class="card">
<img class="card__img" src="images/pets/cido-dog11.png" alt="Imagem de um cachorro fofinho cute cute chamado Cido">
<figcaption class="card__content">
<article class="card__pet-about">
<h3 class="card__pet-name">Cido</h3>
<p class="card__pet-info">
<strong>Nascimento:</strong> Outubro/2008 <br>
<strong>Sexo:</strong> Macho <br>
<q>Esse olhar animado do Cido traduz bem o que ele é: um cão muito ativo e carente, que precisa de um lar. Ele adora um carinho e é muito meigo!</q>
</p>
</article> <!-- .card__pet-about -->
<a class="btn btn--small" href="https://www.patinhasonline.org.br/detalhes.php?id=59" target="_blank" rel="noopener external" title="Adotar o Cido">
Adotar
</a>
</figcaption>
</figure>
</div> <!-- .adoption__cards -->
</section> <!-- .adoption -->
</main>
<footer class="footer" id="about">
<section class="footer__content">
<div class="footer__wrapper-content">
<article class="footer__about">
<h2 class="title title--small">Sobre</h2>
<p class="footer__text">
O AdoteAqui é um site com o intuito de promover a adoção de animais de estimação que precisam de uma casinha para chamar de sua. Os bichinhos que estão para adoção aqui foram escolhidos através do site <a href="https://www.patinhasonline.org.br/" target="_blank" rel="noopener external"><strong>Patinhas Online</strong></a>, pode ser que alguns deles já tenham sido adotados (o que deixa o meu coração quentinho). Se você realmente quer um bichinho, de uma chance para eles e <strong>adote</strong>, não compre!
</p>
</article> <!-- .footer__about -->
<div class="footer__links">
<a class="logo" href="">
<span class="fas fa-paw"></span> AdoteAqui
</a>
<ul class="footer__social-medias">
<li>
<a href="https://instagram.com/patinhasonline" target="_blank" rel="noopener external">
<span class="fab fa-instagram-square"></span>
</a>
</li>
<li>
<a href="https://twitter.com/patinhas_online" target="_blank" rel="noopener external">
<span class="fab fa-twitter-square"></span>
</a>
</li>
<li>
<a href="https://www.facebook.com/patinhasonline" target="_blank" rel="noopener external">
<span class="fab fa-facebook-square"></span>
</a>
</li>
</ul>
</div> <!-- .footer__social-medias -->
</div> <!-- .footer__wrapper-content -->
<div class="footer__copyright">
<p class="footer__text">
<a href="https://www.linkedin.com/in/william-rodrigues-dev/" targe="_blank" rel="noreferrer noopener exernal"><strong>William Rodrigues</strong></a> © 2021 - Todos os direitos reservados. <br>
<span>Site desenvolvido para fins educacionais.</span>
</p>
</div>
</section> <!-- .footer__content -->
</footer>
</div>
</body>
</html>