-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
294 lines (279 loc) · 13.6 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
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>COVI - Colonia Viveros</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="shortcut icon" href="favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="style.css" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<img class="top-button" src="assets/top.svg" id="top-button" />
<img src="assets/leaves.svg" class="left-margin"/>
<img src="assets/leaves2.svg" class="right-margin"/>
<header>
<nav>
<div class="container">
<ul>
<img src="assets/menu.svg" class="menu-burger" id="menu-burger" />
<div class="menu" id="menu">
<li><a href="#about">Introduccion</a></li>
<li><a href="#colony">La colonia</a></li>
<li><a href="#campaign">Campaña</a></li>
<li><a href="#join">Únete</a></li>
</div>
</ul>
</div>
</nav>
</header>
<section id="intro">
<div class="container center">
<img src="assets/logo.svg" class="huge-logo" />
<h1>¡Hola, soy Covi!</h1>
<p class="container">Mi misión y la de la Liga Gatuna es proteger Valencia de los intrusos indeseables que destrozan nuestros jardines y velar por la seguridad de sus habitantes. Somos una colonia de super gatos que habita en Viveros y unidos trabajamos día y noche para luchar contra las fuerzas del mal.</p>
</div>
</section>
<section id="about">
<div class="container flex flex-center">
<div class="responsive-section">
<h2>¿Sabes qué es una colonia?</h2>
<p>La colonia es nuestro hogar. En ella vivimos en comunidad todo tipo de super héroes. Tal vez alguna vez hayas escuchado el término <span style="font-weight: bold;">gato feral</span>. La mayoría de miembros de la colonia somos gatos ferales. Esto quiere decir que vivimos en libertad y no nos gusta estar encerrados. Cuidamos los unos de los otros y protegemos nuestra familia.</p>
</div>
<div class="responsive-section center">
<img src="assets/ciudad.svg" class="full-width city" />
</div>
</div>
</section>
<section id="colony">
<div class="container flex flex-center">
<div class="responsive-section center">
<img src="assets/explorar.svg" class="landing-illustration" />
</div>
<div class="right responsive-section">
<h2>¡Colonia a la vista!</h2>
<p>Cuando te acerques a la colonia debes tener en cuenta que es nuestro lugar de descanso. Evita comportamientos violentos como gritar o correr porque puedes asustar a algunos de nuestros colegas.</p><br/>
<p>Si ves una señal que indica que hay una colonia felina cerca, recuerda ponerle la correa a tu perro por su seguridad y la nuestra. El jardín es muy grande y hay espacio para todos.</p><br/>
<p>¡Es la hora de comer! Por favor no te acerques cuando veas a los voluntarios trabajando. Ellos dedican su tiempo a cuidar de nosotros.</p>
</div>
</div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="flex">
<div style="flex-grow: 1.4; background-image: url(assets/gat1.JPG)" class="cat-container responsive-section" >
</div>
<div class="fire pic-text">
<div class="container responsive-section">
<div class="container top-space">
<h3>Giorgi</h3>
<div class="cat-field">
<h4>4 años</h4>
</div>
<div class="cat-field">
<h4>Nacido en la colonia</h4>
</div>
<p>Es muy tranquilo. Le encanta hacer la croqueta al sol y vigilar la colonia mientras el resto de gatos juegan.</p>
<p>A veces el resto de super héroes acuden a él en busca de consejo. Le encanta pasear entre los setos y perseguir a los pequeños intrusos que alteran el orden en la colonia.</p>
</div>
</div>
</div>
</div>
</div>
<div class="mySlides fade flex">
<div class="flex">
<div style="flex-grow: 1.4; background-image: url(assets/gat3.JPG)" class="cat-container responsive-section">
</div>
<div class="sun pic-text">
<div class="container responsive-section">
<div class="container top-space">
<h3>Blondi</h3>
<div class="cat-field">
<h4>1 año</h4>
</div>
<div class="cat-field">
<h4>Abandonada</h4>
</div>
<p>Es muy precavida y siempre está atenta a los movimientos de su entorno.</p>
<p>Blondi es conocida como la centinela del equipo porque pasa las noches vigilando el jardín.</p>
</div>
</div>
</div>
</div>
</div>
<div class="mySlides fade">
<div class="flex">
<div style="flex-grow: 1.4; background-image: url(assets/gat4.JPG)" class="cat-container responsive-section">
</div>
<div class="fire pic-text">
<div class="container responsive-section">
<div class="container top-space">
<h3>Max</h3>
<div class="cat-field">
<h4>3 años</h4>
</div>
<div class="cat-field">
<h4>Abandonado</h4>
</div>
<p>Es muy tímido y no le gustan las visitas, sobretodo a la hora de comer.</p>
<p>Max es todo un atleta. Tiene el poder de correr como un rayo y trepar a los árboles en abrir y cerrar de ojos.</p>
</div>
</div>
</div>
</div>
</div>
<div class="mySlides fade">
<div class="flex">
<div style="flex-grow: 1.4; background-image: url(assets/gat5.JPG)" class="cat-container responsive-section">
</div>
<div class="sea pic-text">
<div class="container responsive-section">
<div class="container top-space">
<h3>Donatello</h3>
<div class="cat-field">
<h4>3 años</h4>
</div>
<div class="cat-field">
<h4>Nacido en la colonia</h4>
</div>
<p>Es muy sociable entre los suyos. Reparte cariño a todos sus colegas. Su misión es mantener a la colonia feliz y unida.</p>
<p>Le encanta tomar el sol y tiene el auténtico poder sanador del purr.</p>
</div>
</div>
</div>
</div>
</div>
<div class="mySlides fade flex">
<div class="flex">
<div style="flex-grow: 1.4; background-image: url(assets/gat6.JPG)" class="cat-container responsive-section">
</div>
<div class="sun pic-text">
<div class="container responsive-section">
<div class="container top-space">
<h3>Betty</h3>
<div class="cat-field">
<h4>1 año</h4>
</div>
<div class="cat-field">
<h4>Abandonada</h4>
</div>
<p>Betty apareció un día en la colonia. Aunque es muy tímida al principio, también es muy amorosa con los voluntarios.</p>
<p>Siempre agradece sus visitas y la comida, pero la vida en la calle no está hecha para ella. Nuestros sentidos agudos nos indican que Betty protegía un hogar hace un tiempo y necesita una nueva misión con una nueva familia.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
<span class="dot" onclick="currentSlide(5)"></span>
</div>
</section>
<section id="campaign">
<div class="container">
<h2>La campaña</h2>
<p>Durante años los gatos han sido tratados como una plaga en nuestra ciudad. Nuestro objetivo es educar y concienciar acerca de su papel fundamental en la sociedad. Ellos son los verdaderos héroes. Son quienes acaban con las plagas dañinas para nuestros jardines y nuestra salud.</p><br/>
<p>Pero los gatos no son los únicos invisibles para la gran mayoría de personas. Existe una red de voluntarios que dedican su tiempo y sus esfuerzos para desarrollar una gran labor social, controlando y manteniendo sanas las colonias ferales.</p>
<!--<span class="breathe"></span>
<img src="https://loremflickr.com/g/800/400/cat" class="full-width"/>-->
<span class="breathe"></span>
<div class="flex flex-center">
<div class="responsive-section">
<h3>Las señales</h3>
<p>Si ves esta señal es porque hay una colonia felina cerca de ti. No olvides llevar a tu perro con correa, pues nos asustamos fácilmente.</p>
</div>
<div class="center responsive-section">
<img src="assets/cartel2.png" class="poster-l"/>
</div>
</div>
<span class="breathe"></span>
<div class="flex flex-center">
<div class="center responsive-section flex-reverse">
<img src="assets/cartel1.png" class="poster-r"/>
</div>
<div class="responsive-section">
<h3>Los carteles</h3>
<p>La convivencia entre humanos y gatos ferales es posible. Solo hay que actuar con respeto y empatía.</p>
</div>
</div>
</div>
</section>
<section id="join">
<div class="container">
<div style="padding: 1em;">
<h2>¡La liga gatuna te necesita!</h2>
<p>Nuestra misión es posible gracias a la ayuda de la comunidad. Personas como tú que reconocen la importancia de la diversidad, del respeto y de la convivencia. Y sobretodo con los seres indefensos e invisibilizados en nuestra sociedad.</p>
</div>
<span class="breathe"></span>
<div class="flex">
<div class="card flex-card">
<div class="flex-card-main">
<h3>Apadrina</h3>
<p>Dentro de la Colonia hay espíritus indomables, que viven en libertad y no se pueden adaptar a un nuevo hogar fácilmente. A ellos también puedes ayudarles apadrinándolos para asegurarles una vida digna.</p>
</div>
<div class="center">
<img src="assets/apadrina.svg" class="full-width"/>
<button type="button" class="action-button">¡Vamos!</button>
</div>
</div>
<div class="card flex-card">
<div class="flex-card-main">
<h3>Dona</h3>
<p>La Liga Gatuna sigue combatiendo las fuerzas del mal que perturban el orden en Valencia gracias a los donativos que aseguran su bienestar y control. Tú también puedes formar parte de la comunidad que apoya a estos súper héroes.</p>
</div>
<div class="center">
<img src="assets/dona.svg" class="full-width"/>
<button type="button" class="action-button">¡Vamos!</button>
</div>
</div>
<div class="card flex-card">
<div class="flex-card-main">
<h3>Adopta</h3>
<p>A nuestra colonia muchas veces llegan gatos cuya misión siempre ha sido cuidar del hogar en el que vivían y han sido abandonados. Estos tienen menos posibilidades de sobrevivir y adaptarse a la vida fuera de casa. Por eso es necesario ubicarlos en un nuevo hogar donde pueda proteger a su nueva familia.</p>
</div>
<div class="center">
<img src="assets/adopta.svg" class="full-width"/>
<button type="button" class="action-button">¡Vamos!</button>
</div>
</div>
</div>
<span class="breathe"></span>
<div class="flex flex-center">
<div class="right responsive-section" style="flex-grow: 1.5">
<img src="assets/coviii.svg" class="full-width" />
</div>
<div class="center responsive-section">
<p>Si quieres conocer más sobre la Colonia de Viveros, entra en la página web de nuestro proyecto.</p>
<a class="action-button">¡Vamos!</a>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<p>Conexión Felina - Colonia Viveros - 2018</p>
<div class="flex logos">
<img src="assets/infusion.svg" class="logo"/>
<img src="assets/logo.png" class="logo"/>
<img src="assets/easd.svg" class="logo"/>
</div>
</div>
</footer>
<script src="index.js"></script>
</body>
</html>