forked from eldelentes/comoayudarmx
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (136 loc) · 7.33 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
<!DOCTYPE html>
<html>
<head>
<title>Cómo Ayudar MX | Información para ayudar.</title>
<meta name="description" content="Repositorio de información para ayudar a los afectados del sismo." />
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@comoayudarmx">
<meta name="twitter:title" content="Ayuda a los afectados del sismo.">
<meta name="twitter:description" content="Sitio para encontrar diferentes organizaciones, centros de acopio o formas de ayudar a los afectados o rescatistas del sismo.">
<meta name="twitter:image" content="http://javierivero.com/twitter.png">
<!-- Open Graph data -->
<meta property="og:title" content="Ayuda a los afectados del sismo." />
<meta property="og:type" content="web" />
<meta property="og:url" content="http://comoayudar.mx/" />
<meta property="og:image" content="facebook.jpg" />
<meta property="og:description" content="Ayuda a los afectados del sismo. Información de cómo ayudar." />
<link rel="stylesheet" type="text/css" href="style.min.css">
<link rel="stylesheet" type="text/css" href="lib/chosen/chosen.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/chosen/chosen.jquery.min.js" ></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,500" rel="stylesheet">
<link rel="icon" href="favicon.png" type="image/x-icon" />
</head>
<body>
<header class="mainHeader">
<div class="container">
<h2 class="logo"><a href="index.html">¿Como Ayudar?</a></h2>
<nav class="mainNav">
<a class="modal__link" href="#" data-modal="about">Acerca de</a>
<a class="hide-mobile" href="contactos.html">Contactos de Emergencia</a>
<a class="hide-mobile" href="voluntarios.html">Voluntarios</a>
<a href="world.html">English</a>
<a class="hide-mobile" href="https://github.com/eldelentes/comoayudarmx" target="_blank">Contribuir <i class="fa fa-github"></i></a>
</nav>
</div>
</header>
<section class="intro">
<div>
<h2 class="intro__title">Ayuda Sismo 19 de Septiembre</h2>
<h4 class="intro__location"><i class="fa fa-globe"></i>CDMX, Puebla, Morelos</h4>
<div class="buttons">
<a class="button" href="#cards">¿Cómo ayudar?</a>
<a class="button modal__link" href="#" data-modal="new">Públicar <i class="fa fa-edit"></i></a>
</div>
</div>
</section>
<section class="cards" id="cards">
<div class="cards__intro">
<h3>¿Cómo ayudar a los afectados del Sismo?</h3>
<p>A continuación encontrarás diferentes organizaciones, centros de acopio o formas de ayudar a los afectados o rescatistas del sismo.</p>
<p>Si conoces alguna otra forma de ayudar <a class="modal__link" data-modal="new" href="#">Contáctanos</a></p>
</div>
<div class="filters">
<div class="container">
<div class="filter">
<label for="donation_type">Filtrar por tipo de donación</label>
<select class="filter" id="donation_type">
<option selected disabled>Selecciona una opción</option>
<option value="all">Todas</option>
</select>
</div>
<div class="filter">
<label for="location">Filtrar por locación</label>
<select class="filter" id="location">
<option selected disabled>Selecciona una opción</option>
<option value="all">Todas</option>
</select>
</div>
</div>
</div>
<div id="cards_container" class="container">
<!-- Aquí se agregan las tarjetas -->
<!-- Por favor, no modifiques el markup/html de las tarjetas, solamente remplaza la información. -->
<template id="card_template">
<article class="card">
<h2 class="card__title"></h2>
<div class="card__badges"></div>
<!-- Agrega una pequeña descripción -->
<p class="card__desc"></p>
<div class="card__info">
<div class="card__type">
<h4>Tipo de donación:</h4>
<!-- Especifica si la ayuda es en especie, monetaria, ayuda, etc. -->
<h3><i class="fa fa-info-circle"></i></h3>
</div>
<div class="card__location">
<h4>Puedes ayudar desde:</h4>
<!-- Especifica si se puede ayudar desde una parte o en todo México -->
<h3><i class="fa fa-globe"></i></h3>
</div>
</div>
<!-- Link al contacto, imágen, correo o información -->
<a class="card__button" target="__blank" href="">Más Información</a>
</article>
</template>
</div>
<div id="no_results" class="container">
<i class="fa fa-exclamation-circle" aria-hidden="true"></i> No hay resultados para tu busqueda
</div>
</section>
<section class="modal" data-modal="about">
<a href="#" class="modal__close">Cerrar</a>
<div class="modal__container">
<h2>Acerca de Como Ayudar</h2>
<p>Este proyecto sin fines de lucro busca crear un repositorio de información para centralizar el apoyo y la rápida distribución de ayuda.</p>
<p>Si deseas ayudar y tienes conocimientos de programación colabora con nosotros en <a href="https://github.com/eldelentes/comoayudarmx"><i class="fa fa-github"></i>Github</a></p>
<hr>
<p> Sí lo que deseas es agregar un método de ayuda por favor envíanos la información pertinente a:</p>
<a href="https://twitter.com/comoayudarmx" target="_blank" class="modal__button"><i class="fa fa-twitter"></i>@comoayudarmx</a> o <a class="modal__email" href="mailto:comoayudarmx@gmail.com">comoayudarmx@gmail.com</a>
</div>
</section>
<section class="modal" data-modal="new">
<a href="#" class="modal__close">Cerrar</a>
<div class="modal__container">
<h2>Públicar Forma de Ayuda</h2>
<p>Envía la información del método de ayuda con toda la información pertinente como: A quién se ayuda, Desde dónde se puede ayudar, que tipo de ayuda necesitan. desde los siguientes medios de contacto:</p>
<a href="https://twitter.com/comoayudarmx" target="_blank" class="modal__button"><i class="fa fa-twitter"></i>@comoayudarmx</a> o <a class="modal__email" href="mailto:comoayudarmx@gmail.com">comoayudarmx@gmail.com</a>
</div>
</section>
<script src="cards.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="modals.js" type="text/javascript"></script>
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-106793072-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'UA-106793072-1');
</script>
</body>
</html>