-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
257 lines (231 loc) · 14.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MundoEco | Inicio </title>
<meta name="description" content="writing blog webpage">
<!-- Preload -->
<link rel="preload" href="css/styles.css" as="style">
<link rel="stylesheet" href="css/styles.css">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css" crossorigin="crossorigin" as="style">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.css">
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" as="style">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" as="style">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<!-- Header -->
<header id="header" class="vh-100 text-bg-success header-image">
<nav class="navbar navbar-expand-md bg-succes">
<div class="container">
<a href="#" class="navbar-brand fs-2 text-white">MundoEco</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="#header" class="nav-link text-white">Inicio</a>
</li>
<li class="nav-item">
<a href="#quienes-somos" class="nav-link text-white">¿Quiénes somos?</a>
</li>
<li class="nav-item">
<a href="#contacto" class="nav-link text-white">Contacto</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Showcacase-->
<div class="container d-flex flex-column justify-content-center align-items-center text-center h-100 header-content">
<!-- <h1 class="display-4">MundoEco</h1> -->
<p class="text-uppercase fs-4">Creando un futuro más verde y brillante para todos. Nuestra visión es un mundo en armonía con la naturaleza. ¿Compartes esta visión?</p>
<a href="#quienes-somos" class="btn btn-outline-light btn-lg mt-2">¡Conócenos!</a>
</div>
</header>
<!-- Quienes somos -->
<section id="quienes-somos" class="py-5">
<div class="container" data-aos="fade-up">
<div class="text-center">
<h2 class="mb-4">¿Quiénes somos?</h2>
<hr class="w-25 mx-auto">
</div>
<div class="row">
<!-- Card #1 -->
<div class="col-md-3 mb-2">
<div class="card custom-card">
<div class="card-body">
<i class="fa-solid fa-building-ngo fa-3x my-3" style="color: #005701;"></i>
<h5 class="fw-bold pb-2">Somos una ONG</h5>
<p class="text-muted">
Somos una organización no gubernamental sin fines de lucro comprometida con el
desarrollo sostenible y la conservación del medio ambiente. Fundada por jóvenes
apasionados que buscan un cambio significativo en el mundo en el que vivimos y que heredarán
las futuras generaciones.
<!-- <a href="#" class="btn btn-dark btn-sm text-uppercase">Leer más</a> -->
</div>
</div>
</div>
<!-- Card #2 -->
<div class="col-md-3 mb-2">
<div class="card custom-card">
<div class="card-body">
<i class="fa-solid fa-earth-americas fa-3x my-3" style="color: #005701;"></i>
<h5 class="fw-bold pb-2">Nuestra misión</h5>
<p class="text-muted">
Somos un equipo apasionado comprometido con la preservación del planeta. Nuestra misión es inspirar y movilizar
a individuos y comunidades para adoptar prácticas sostenibles y tomar medidas concretas para proteger el medio
ambiente. Creemos en un mundo en equilibrio, donde la naturaleza y la humanidad prosperan juntas.
</p>
</div>
</div>
</div>
<!-- Card #3 -->
<div class="col-md-3 mb-2">
<div class="card custom-card">
<div class="card-body">
<i class="fa-solid fa-heart fa-3x my-3" style="color: #005701;"></i>
<h5 class="fw-bold pb-2">Nuestros valores</h5>
<p class="text-muted">
En MundoEco, nos guiamos por valores fundamentales que reflejan nuestro compromiso con la sostenibilidad y la
conservación del medio ambiente. Valoramos la integridad, la colaboración, la innovación y la pasión por la
naturaleza. Estos valores son la base de nuestro enfoque en la búsqueda de soluciones creativas y efectivas
para los desafíos ambientales.
</p>
</div>
</div>
</div>
<!-- Card #4 -->
<div class="col-md-3 mb-2">
<div class="card custom-card">
<div class="card-body">
<i class="fa-solid fa-group-arrows-rotate fa-3x my-3" style="color: #005701;"></i>
<h5 class="fw-bold pb-2">Nuestra comunidad</h5>
<p class="text-muted">
En MundoEco, no estamos solos en nuestra misión. Contamos con una comunidad diversa de defensores del medio
ambiente, voluntarios y colaboradores comprometidos. Trabajamos juntos para crear un impacto positivo en todo el mundo.
Únete a nuestra comunidad y sé parte del cambio que el mundo necesita. Juntos, podemos lograr mucho más.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="acciones" class="py-5 bg-info-subtle">
<div class="container" data-aos="fade-down">
<div class="text-center">
<h2 class="mb-4">Actúa <span class="text-success">Ahora</span>: EcoPasos para un Mundo Mejor</h2>
<hr class="w-25 mx-auto">
</div>
<div class="row">
<div class="col-md-5">
<picture>
<source loading="lazy" srcset="/img/acciones.webp" type="image/webp" class="img-fluid rounded-5">
<img src="/img/acciones.jpg" alt="" class="img-fluid rounded-5">
</picture>
</div>
<div class="col-md-7">
<ul class="list-unstyled mt-2">
<li class="d-flex mb-3">
<i class="fa-solid fa-recycle fa-2x mx-4" style="color: #005701;"></i>
<p><span class="text-success-emphasis">Reutilizar, Reciclar:</span> Practica el lema de las tres "R" para minimizar los desechos.
Reduce el consumo de productos desechables, reutiliza objetos siempre que sea posible y recicla
materiales como papel, vidrio y plástico.</p>
</li>
<li class="d-flex mb-3">
<i class="fa-solid fa-leaf fa-2x mx-4" style="color: #005701;"></i>
<p><span class="text-success-emphasis">Conservación de Energía:</span> Reduce tu huella de carbono disminuyendo el consumo de energía.
Apaga las luces y dispositivos electrónicos cuando no los necesites, utiliza bombillas de bajo consumo y considera la instalación de
fuentes de energía renovable, como paneles solares.</p>
</li>
<li class="d-flex mb-3">
<i class="fa-solid fa-bus-simple fa-2x mx-4" style="color: #005701;"></i>
<p><span class="text-success-emphasis">Transporte sostenible:</span> Opta por medios de transporte sostenibles, como caminar, andar en bicicleta,
usar el transporte público o compartir vehículos. Estas opciones reducen las emisiones de gases de efecto invernadero y alivian la congestión
del tráfico.</p>
</li>
<li class="d-flex mb-3">
<i class="fa-solid fa-store fa-2x mx-4" style="color: #005701;"></i>
<p><span class="text-success-emphasis">Consumo responsable:</span> Compra productos de empresas comprometidas con prácticas sostenibles y éticas.
Prefiere alimentos locales y orgánicos, reduce el consumo de carne y apoya la reutilización de productos en lugar de comprar siempre nuevos.</p>
</li>
<li class="d-flex mb-3">
<i class="fa-solid fa-hand-holding-droplet fa-2x mx-4" style="color: #005701;"></i>
<p><span class="text-success-emphasis">Conservación del agua:</span> Utiliza el agua de manera eficiente en tu hogar. Repara las fugas, instala dispositivos
de bajo flujo y evita el desperdicio de agua. Considera la recolección de agua de lluvia para usos no potables.</p>
</li>
<li class="d-flex mb-3">
<i class="fa-solid fa-people-arrows fa-2x mx-4" style="color: #005701;"></i>
<p><span class="text-success-emphasis">Participación comunitaria:</span> Únete a grupos locales o comunidades que se dediquen a la conservación del medio ambiente.
Participa en proyectos de limpieza, reforestación y educación ambiental para generar un impacto positivo en tu área.</p>
</li>
<li class="d-flex mb-3">
<i class="fa-solid fa-person-chalkboard fa-2x mx-4" style="color: #005701;"></i>
<p><span class="text-success-emphasis">Educación y Concienciación:</span> Informa a otros sobre la importancia de la conservación del medio ambiente y la sostenibilidad.
Comparte tu conocimiento y promueve la toma de conciencia en tu familia, amigos y comunidad.</p>
</li>
</ul>
</div>
</div>
<div class="text-center">
<a href="#contacto" class="btn btn-outline-success btn-lg mt-2">¡Conoce más!</a>
</div>
</div>
</section>
<!-- Contacto -->
<section id="contacto" class="py-5 bg-success-subtle">
<div class="container">
<div class="row">
<div class="col-md-5" data-aos="fade-right">
<picture>
<source loading="lazy" srcset="/img/contactanos.webp" type="image/webp" class="img-fluid rounded-5">
<img src="/img/contactanos.jpg" alt="" class="img-fluid rounded-5">
</picture>
</div>
<div class="col-md-7" data-aos="fade-left">
<h2 class="my-4 text-center">¿Te interesa ser parte del <span class="text-success">cambio</span>? ¡Contáctanos!</h2>
<div class="contact-form p-4 bg-white shadow rounded">
<form>
<div class="mb-3">
<label for="nombre" class="form-label">Nombre</label>
<input type="text" class="form-control" id="nombre" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Correo Electrónico</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="mensaje" class="form-label">Mensaje</label>
<textarea class="form-control" id="mensaje" rows="4" required></textarea>
</div>
<button type="submit" class="btn btn-success">Enviar Mensaje</button>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="mainfooter bg-warning-subtle py-4">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="text-center small">© MundoEco - Todos los derechos reservados 2023</p>
</div>
</div>
</div>
</footer>
<script src="/js/modernizr.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/aos.js"></script>
<script>
AOS.init({
duration: 1000, // Duración de la animación en milisegundos
});
</script>
</body>
</html>