-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
392 lines (347 loc) · 20 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
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name="description" content="Sitio web de adopción de mascotas">
<title>Adóptame</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="icon" type="image/jpg" href="img/favicon/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon/favicon-16x16.png">
<link rel='stylesheet' type='text/css' media='screen' href='css/styles.css'>
</head>
<body>
<div id="header"></div>
<section class="page-content">
<h2 class="title">Adóptame</h2>
<h3 class="section-title">Adopta un gatito</h3>
<section class="gatos">
<div class="card-grid">
<div class="animal-card sombra redondeo-puntas-opuestas gradiente">
<img src="img/home/tarjetas/gatos/Grisa.jpg" alt="Grisa">
<h3>Grisa</h3>
<p>Le encanta salir a la calle, y pasar horas sobre el afeizar de la ventana, se lleva bien con
otros animales y es muy compañera.</p><br>
<b>
<p>Características destacables</p>
</b>
<p>Juguetona<br>Cariñosa<br>Sociable</p><br>
<div class="inclinacion">
<a href="contacto.html?petname=GRISA&pettype=0" class="btnAdoptar">Adoptar</a>
</div>
</div>
<div class="animal-card sombra redondeo-puntas-opuestas gradiente">
<img src="img/home/tarjetas/gatos/Arturo.jpg" alt="Arturo">
<h3>Arturo</h3>
<p>Es algo tímido, poco acostumbrado al contacto humano, aunque cuando gana confianza es muy
cariñoso y travieso. </p><br>
<b>
<p>Características destacables</p>
</b>
<p>Muy activo<br>Obediente<br>Inteligente</p><br>
<div class="inclinacion">
<a href="contacto.html?petname=ARTURO&pettype=0" class="btnAdoptar">Adoptar</a>
</div>
</div>
<div class="animal-card sombra redondeo-puntas-opuestas gradiente">
<img src="img/home/tarjetas/gatos/Felipo.jpg" alt="Felipo">
<h3>Felipo</h3>
<p>Rueda y rueda sin parar, le gusta esconderse y atraparte cuando menos lo esperes. Tal cual a un
intrépido cazador innato.</p><br>
<b>
<p>Características destacables</p>
</b>
<p>Activo<br>Inteligente<br>Juguetón</p><br>
<div class="inclinacion">
<a href="contacto.html?petname=FELIPO&pettype=0" class="btnAdoptar">Adoptar</a>
</div>
</div>
<div class="animal-card sombra redondeo-puntas-opuestas gradiente">
<img src="img/home/tarjetas/gatos/Lucky.jpg" alt="Lucky">
<h3>Lucky</h3>
<p>La suerte la tendrás vos una vez que lo adoptes, ya que es una panterita ronroneante que
se apoyará siempre sobre tu regazo. Buena compañía para trabajar. </p><br>
<b>
<p>Características destacables</p>
</b>
<p>Cariñoso<br>Divertido<br>Sociable</p><br>
<div class="inclinacion">
<a href="contacto.html?petname=LUCKY&pettype=0" class="btnAdoptar">Adoptar</a>
</div>
</div>
<div class="animal-card sombra redondeo-puntas-opuestas gradiente">
<img src="img/home/tarjetas/gatos/Garfield.jpg" alt="Garfield">
<h3>Garfield</h3>
<p>A pesar de lo que se podría mostrar en las caricaturas, este gato no es para nada
haragán ni dormilón, aún así no ha perdido su toque mágico, y
su cariño incondicional.</p><br>
<b>
<p>Características destacables</p>
</b>
<p>Activo<br>Inteligente<br>Obediente</p><br>
<div class="inclinacion">
<a href="contacto.html?petname=GARFIELD&pettype=0" class="btnAdoptar">Adoptar</a>
</div>
</div>
<div class="animal-card sombra redondeo-puntas-opuestas gradiente">
<img src="img/home/tarjetas/gatos/Bella.jpg" alt="Bella">
<h3>Bella</h3>
<p>Es obediente y tranquila, y suele pasar horas durmiendo.¡Eso sí! si llegas a no
encontrartela, se deberá a que por seguro anda jugando contigo a las escondidas. </p><br>
<b>
<p>Características destacables</p>
</b>
<p>Nerviosa<br>Curiosa<br>Tímida</p><br>
<div class="inclinacion">
<a href="contacto.html?petname=BELLA&pettype=0" class="btnAdoptar">Adoptar</a>
</div>
</div>
<div class="animal-card sombra redondeo-puntas-opuestas gradiente">
<img src="img/home/tarjetas/gatos/Hayako.jpg" alt="Hayako">
<h3>Hayako</h3>
<p>Es una inevitable bola de pelos ronroneante, que se acerca y te sigue a todos lados, ten por
seguro que nunca te faltará compañia y atención con ella.</p><br>
<b>
<p>Características destacables</p>
</b>
<p>Juguetona<br>Activa<br>Tímida</p><br>
<div class="inclinacion">
<a href="contacto.html?petname=HAYAKO&pettype=0" class="btnAdoptar">Adoptar</a>
</div>
</div>
<div class="animal-card sombra redondeo-puntas-opuestas gradiente">
<img src="img/home/tarjetas/gatos/Remo.jpg" alt="Remo">
<h3>Remo</h3>
<p>Ni en toda Roma vas a encontrar un gato tan simpático como este. Es resistente, callejero,
y nunca parará de jugar con cualquier cosa colgante que lleves en la mano. </p><br>
<b>
<p>Características destacables</p>
</b>
<p>Activo<br>Inteligente<br>Sociable</p><br>
<div class="inclinacion">
<a href="contacto.html?petname=REMO&pettype=0" class="btnAdoptar">Adoptar</a>
</div>
</div>
<div class="animal-card sombra redondeo-puntas-opuestas gradiente">
<img src="img/home/tarjetas/gatos/Filo.jpg" alt="Filo">
<h3>Filo</h3>
<p>Es el gatito más tierno que podés tener, siempre querrá dormir con vos en la
cama o en los sillones. Y también arriba de tu sweater mientras miras una peli.</p><br>
<b>
<p>Características destacables</p>
</b>
<p>Tierno<br>Sensible<br>Compañero</p><br>
<div class="inclinacion">
<a href="contacto.html?petname=FILO&pettype=0" class="btnAdoptar">Adoptar</a>
</div>
</div>
</div>
</section>
<h3 class="section-title">Adopta un perrito</h3>
<section class="perros">
<div class="card-grid">
<div class="animal-card sombra redondeo-puntas-opuestas gradiente">
<img src="img/home/tarjetas/perros/Blanca.jpg" alt="Blanca">
<h3>Blanca</h3>
<p>Juguetona y alegre, aficionada a los juguetes, en especial los ositos de peluche. No se lleva con
perros.</p><br>
<b>
<p>Características destacables</p>
</b>
<p>Juguetona<br>Mansa<br>Tamaño pequeño</p><br>
<div class="inclinacion">
<a href="contacto.html?petname=BLANCA&pettype=1" class="btnAdoptar">Adoptar</a>
</div>
</div>
<div class="animal-card sombra redondeo-puntas-opuestas gradiente">
<img src="img/home/tarjetas/perros/Edén.jpg" alt="Edén">
<h3>Edén</h3>
<p>Es un animal adulto dócil, es muy cariñoso y le encanta acompañarte en tus
actividades diarias. Le gusta comerse las flores del jardín. </p><br>
<b>
<p>Características destacables</p>
</b>
<p>Tranquilo<br>Sociable<br>Inteligente</p><br>
<div class="inclinacion">
<a href="contacto.html?petname=EDEN&pettype=1" class="btnAdoptar">Adoptar</a>
</div>
</div>
<div class="animal-card sombra redondeo-puntas-opuestas gradiente">
<img src="img/home/tarjetas/perros/Facundo.jpg" alt="Facundo">
<h3>Facundo</h3>
<p>Es un perro de temperamento tranquilo, pero no es inactivo, le gusta mucho el aire libre y le
gusta mucho que le tiren un hueso para que lo recoja.</p><br>
<b>
<p>Características destacables</p>
</b>
<p>Tranquilo<br>Inteligente<br>Dinámico</p><br>
<div class="inclinacion">
<a href="contacto.html?petname=FACUNDO&pettype=1" class="btnAdoptar">Adoptar</a>
</div>
</div>
<div class="animal-card sombra redondeo-puntas-opuestas gradiente">
<img src="img/home/tarjetas/perros/Lucero.jpg" alt="Lucero">
<h3>Lucero</h3>
<p>Ella es adorable y curiosa, además de ser una enérgica bola de pelos adorable e
irresistible. Le gustan mucho los peluches peludos y los sweater pelo de mono.</p><br>
<b>
<p>Características destacables</p>
</b>
<p>Cachorro<br>Divertida<br>Sociable</p><br>
<div class="inclinacion">
<a href="contacto.html?petname=LUCERO&pettype=1" class="btnAdoptar">Adoptar</a>
</div>
</div>
<div class="animal-card sombra redondeo-puntas-opuestas gradiente">
<img src="img/home/tarjetas/perros/Malevo.jpg" alt="Malevo">
<h3>Malevo</h3>
<p>Es un perro que a simple vista parece serio, pero en realidad es un leal compañero que te
sigue a todos lados, le encanta los paseos y los juegos al aire libre.</p><br>
<b>
<p>Características destacables</p>
</b>
<p>Activo<br>Inteligente<br>Obediente</p><br>
<div class="inclinacion">
<a href="contacto.html?petname=MALEVO&pettype=1" class="btnAdoptar">Adoptar</a>
</div>
</div>
<div class="animal-card sombra redondeo-puntas-opuestas gradiente">
<img src="img/home/tarjetas/perros/Rolo.jpg" alt="Rolo">
<h3>Rolo</h3>
<p>Es una animal adulto atento y enfocado, suele ser fácil adiestrarlo. Siempre te sigue si
lo llamas y le silvas, indudablemente se va a tirar sobre tus piernas en tu regazo. </p><br>
<b>
<p>Características destacables</p>
</b>
<p>Activo<br>Inteligente<br>Sociable</p><br>
<div class="inclinacion">
<a href="contacto.html?petname=ROLO&pettype=1" class="btnAdoptar">Adoptar</a>
</div>
</div>
<div class="animal-card sombra redondeo-puntas-opuestas gradiente">
<img src="img/home/tarjetas/perros/Silva.jpeg" alt="Silva">
<h3>Silva</h3>
<p>Silva es un animal que necesita de mucha actividad diaria, porque tiene mucha energia aunque sea
obediente. Es muy cariñosa, y te tira la pata cuando busca de tu atención.</p><br>
<b>
<p>Características destacables</p>
</b>
<p>Juguetona<br>Activa<br>Sociable</p><br>
<div class="inclinacion">
<a href="contacto.html?petname=SILVA&pettype=1" class="btnAdoptar">Adoptar</a>
</div>
</div>
<div class="animal-card sombra redondeo-puntas-opuestas gradiente">
<img src="img/home/tarjetas/perros/Terra.jpg" alt="Terra">
<h3>Terra</h3>
<p>Ella es muy intrepida, y siempre se lanzará sobre ti cuando entres a tu casa. Le gusta los
paseos, y tiene demasiado amor para dar, siempre paciente y en tu busqueda.</p><br>
<b>
<p>Características destacables</p>
</b>
<p>Juguetona<br>Activa<br>Sociable</p><br>
<div class="inclinacion">
<a href="contacto.html?petname=TERRA&pettype=1" class="btnAdoptar">Adoptar</a>
</div>
</div>
<div class="animal-card sombra redondeo-puntas-opuestas gradiente">
<img src="img/home/tarjetas/perros/Panchito.jpeg" alt="Panchito">
<h3>Panchito</h3>
<p>Es un perro super juguetón, nunca te puedes aburrir con él. Si pasa una navidad
contigo, tené cuidado porque le gustan los fosforitos y las mariposas.</p><br>
<b>
<p>Características destacables</p>
</b>
<p>Travieso<br>Divertido<br>Alocado</p><br>
<div class="inclinacion">
<a href="contacto.html?petname=PANCHITO&pettype=1" class="btnAdoptar">Adoptar</a>
</div>
</div>
</div>
</section>
<h3 class="section-title">Por amor a los animales</h3>
<section class="adoptados">
<div class="actions-grid">
<div class="actions-img">
<img src="img/home/adoptados/gatos.jpg" alt="gatos">
</div>
<div class="actions-img">
<img src="img/home/adoptados/perros.webp" alt="perros">
</div>
<div class="actions-img">
<img src="img/home/adoptados/rescatados.jpg" alt="rescatados">
</div>
<div class="actions-text iluminacion">
<br>
<div><span>Perros</span></div>
<br>
Somos una protectora de animales dedicada al cuidado y
rescate de animales; en esta sección podrás acceder a todo tipo de animales, en este
caso perros tanto de raza
como criollos.
<br><br>
Los perros suelen ser excelentes compañeros para aquellos que necesitan de una
compañía constante,
siempre te esperarán alegres cuando llegues a tu casa, y nunca te faltará un amigo
confiable. ¡No te olvides
del refrán "el perro es el mejor amigo del hombre"!
<br><br>
</div>
<div class="actions-text iluminacion">
<br>
<div><span>Gatos</span></div>
<br>
Por otra parte, si sos una persona más ocupada e
independiente, puede ser que el animal que se adapte más a tus necesidades sean los gatos.
<br><br>
Como algunos dicen, los perros tienen dueños y los gatos sirvientes. Nuestros amigos felinos
suelen
ser animales más independientes y cazan por sí mismos, acostumbrados a un
hábitat más predecible, son
curiosos y muchas veces, traviesos.
<br><br>
¡Estamos seguros de que no te defraudará tu elección!
</div>
<div class="actions-text iluminacion">
<br>
<div><span>Rescatados y adoptados</span></div>
<br>
Todos sabemos cuán débiles son nuestros corazones ante
los animales necesitados. Acá les mostraremos nuestra labor y pasión por el rescate
responsable de animales.
<br><br>
Estamos orgullosos por brindarles una segunda oportunidad, y que puedan acceder a la posibilidad de
una mejor calidad de vida; algunos desafortunadamente fueron abandonados y otros nacieron de manera
irresponsable
en la intemperie de la calle.
<br><br>
Solo entrá y echá un vistazo a quienes ya fueron adoptados.
</div>
</div>
<div class="refugios-img">
<img class="nosotros-img" src="https://cataas.com/cat/gif/says/Adopta%20un%20gatito" alt="adoptame gif"
width="45%" height="300px" />
<img class="nosotros-img" src="https://cataas.com/cat/gif/says/¿No%20necesitás%20un%20michi%3F"
alt="adoptame gif" width="45%" height="300px" />
</div>
<div class="youtube-iframe">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/M54E5AYn1jg"
title="YouTube video player" frameborder="5"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</div>
<div id="api-animal-container"></div>
</section>
</section>
<a href="https://api.whatsapp.com/send?phone=5491111111111" class="whatsapp-float" target="_blank">
<i class="fa fa-whatsapp"></i>
</a>
<div id="footer"></div>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/84ee914179.js" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</body>