-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathmexico.html
executable file
·275 lines (275 loc) · 12.1 KB
/
mexico.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
<!DOCTYPE html>
<html lang="es-MX">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="description" content="México, país de las maravillas. Sitio web interactivo cuyo objetivo es el acercamiento de los niños al conocimiento de la riqueza natural del país a través de caricaturas, fotografías, videos, juegos y sonidos."/>
<meta name="author" content="Comisión Nacional para el Conocimiento y Uso de la Biodiversidad, CONABIO."/>
<title>México | El país de las maravillas</title>
<link rel="icon" type="image/x-icon" href="assets/img/favicon.png"/>
<!-- jquery del CDN de google -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" crossorigin="anonymous"></script>
<!-- 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=Pangolin&family=Work+Sans:ital,wght@0,300;0,400;0,800;1,400&display=swap" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet"/>
<!-- animate-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="assets/mega-site-navigation/css/style.css"> <!-- menu -->
<link rel="stylesheet" href="assets/animated-headline/css/style.css"> <!-- animacion de texto se escribe -->
<link href="css/mexico.css" rel="stylesheet" type="text/css"> <!-- estilos del sitio pais de las maravillas versión anterior -->
</head>
<body class="nav-is-fixed">
<header class="cd-main-header"></header>
<main class="cd-main-content">
<section class="text-center pb-5 m1" id="tito">
<div class="container px-4 px-lg-5 mt-5">
<div class="row justify-content-center align-items-center">
<div class="col-lg-8 wow animate__animated animate__fadeInLeft">
<h3 class="mb-4">México es un país de maravillas</h3>
<p><i class="fas fa-headphones fa-2x text-white-70"></i>
<audio controls>
<source src="assets/audio/locucion/mexico_1.mp3" type="audio/mpeg">
</audio>
</p>
<p>Gozamos de una gran riqueza natural y de una gran riqueza cultural. De entre más de
<strong>190 países en el mundo</strong>, México se encuentra entre los cinco primeros lugares en cuanto a su cantidad de plantas, animales y ecosistemas.
</p>
<p>Tenemos desde organismos pequeñísimos, que sólo se pueden ver con la ayuda de un microscopio hasta la gigantesca ballena azul, el animal más grande que ha existido en el planeta.</p>
<img class="w-180 img-fluid" src="assets/img/mexico/mexico/m_titomicroscopio.png" alt="Tito Curioso"/>
</div>
<div class="col-lg-4 wow animate__animated animate__fadeInRight">
<img src="assets/img/mexico/mexico/m_ballena.png" alt="image" class="w-80 img-fluid d-none d-lg-block">
</div>
</div>
</div>
</section>
<section class="text-center pb-5 m2" id="tito">
<div class="container px-4 px-lg-5 mt-5">
<div class="row justify-content-center align-items-center">
<div class="col-lg-12 wow animate__animated animate__fadeInRight">
<p>Entre más especies nativas de flora y fauna tenemos, hay más opciones para disfrutar, investigar, curar, comer, beber y construir. Por eso: la mayor riqueza de México es su flora y su fauna.</p>
<div class="offset-2 col-9">
<table class="table table-primary table-striped table-responsive table-hover">
<tr>
<th>Especies</th>
<th>Lugar de México en el mundo</th>
<th>Número de especies</th>
</tr>
<tr>
<td>Plantas vasculares</td>
<td>5º</td>
<td>23,424</td>
</tr>
<tr>
<td>Mamíferos</td>
<td>3º</td>
<td>535</td>
</tr>
<tr>
<td>Aves</td>
<td>8º</td>
<td>1,107</td>
</tr>
<tr>
<td>Reptiles</td>
<td>2º</td>
<td>804</td>
</tr>
<tr>
<td>Anfibios</td>
<td>5º</td>
<td>361</td>
</tr>
</table>
</div>
<h3 class="mt-4 az">¿A qué se debe tanta riqueza?</h3>
<p><i class="fas fa-headphones fa-2x text-white-70"></i>
<audio controls>
<source src="assets/audio/locucion/mexico_2.mp3" type="audio/mpeg">
</audio>
</p>
<h4 class="timportante mt-4">Existen seis razones por las que México tiene tanta riqueza natural</h4>
<img class="w-90 mt-5 img-fluid" src="assets/img/mexico/mexico/pluma.png" alt="pluma"/>
</div>
</div>
</div>
</section>
<section class="text-center pb-5 m3">
<div class="container px-4 px-lg-5">
<div class="row align-items-center">
<div class="col-lg-12 wow animate__animated animate__fadeInLeft min-vh-100">
<p><i class="fas fa-headphones fa-2x text-white-70"></i>
<audio controls>
<source src="assets/audio/locucion/mexico_3.mp3" type="audio/mpeg">
</audio>
</p>
<p class="nbig"><strong>1</strong></p>
<p>México se encuentra en la zona tropical en donde
<strong>el clima es menos extremo</strong>. Aquí no hay ni mucho frío como en los polos, ni mucho calor como en los desiertos.
</p>
<img class="w-30 ima1_m3 img-fluid" src="assets/img/mexico/mexico/m_planisferio.png" alt="Planisferio"/>
</div>
</div>
</div>
</section>
<!-- Projects-->
<section class="projects-section m4" id="projects">
<div class="container-fluid gx-0">
<div class="row gx-0 align-items-center bg-cafecito">
<div class="col-xl-6 col-lg-7 wow animate__animated animate__fadeInLeft">
<img class="img-fluid mb-lg-0" src="assets/img/mexico/mexico/m_montanas.jpg" alt="..."/>
</div>
<div class="col-xl-5 col-lg-5 wow animate__animated animate__fadeInRight">
<div class="featured-text text-lg-left">
<div class=" w-100 mx-auto">
<p class="nbig"><strong>2</strong></p>
<p><i class="fas fa-headphones fa-2x text-white-70"></i>
<audio controls>
<source src="assets/audio/locucion/mexico_4.mp3" type="audio/mpeg">
</audio>
</p>
<br>
<p class="text-center">México está lleno de montañas que producen suelos, climas y ambientes distintos. En la punta hay nieve y pastizales alpinos, y en el pie de las montañas hay bosques y matorrales.</p>
</div>
</div>
</div>
</div>
<!-- Featured Project Row-->
<!-- Project One Row-->
<div class="row gx-0 mb-lg-0 justify-content-center">
<div class="col-lg-6 wow animate__animated animate__fadeInLeft">
<div class="m5 text-center h-100 project">
<div class="d-flex h-100 offset-1 col-10">
<div class="project-text w-100 my-auto text-lg-left">
<p class="nbig"><strong>3</strong></p>
<p class="mb-3">
<i class="fas fa-headphones fa-2x text-white-70"></i>
<audio controls>
<source src="assets/audio/locucion/mexico_5.mp3" type="audio/mpeg">
</audio>
</p>
<p class="text-center">
<span style="color:#FFFDCA;"><strong>México está rodeado de mares</strong></span> con diversas temperaturas y diversas profundidades. El Océano Pacífico es más profundo y frío que el Golfo y el Caribe.
</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6 wow animate__animated animate__fadeInRight">
<div id="ima1_m5">
<img src="assets/img/mexico/mexico/m_titosnorkel.png" class="d-none d-lg-block">
</div>
<img class="img-fluid" src="assets/img/mexico/mexico/m_mar.jpg" alt="..."/>
</div>
</div>
<!-- Project Two Row-->
<div class="row gx-0 mb-5 mb-lg-0 justify-content-center">
<div class="col-lg-6 m6 wow animate__animated animate__fadeInLeft d-none d-xl-block py-5">
<center>
<img src="assets/img/mexico/mexico/m_planisferio_2.png" class="w-75 wow animate__animated animate__swing">
</center>
</div>
<div class="col-lg-6 wow animate__animated animate__fadeInRight">
<div class="m6 text-center project h-100">
<div class="d-flex offset-1 col-10">
<div class="project-text w-100 my-auto text-lg-left">
<p class="nbig"><strong>4</strong></p>
<p><i class="fas fa-headphones fa-2x text-white-70"></i>
<audio controls>
<source src="assets/audio/locucion/mexico_6.mp3" type="audio/mpeg">
</audio>
</p>
<br>
<p class="text-center">En México se mezclan las plantas y animales de Norte América
<strong>(como el mapache)</strong> y de Sudamérica <strong>(como el tlacuache).</strong></p>
</div>
</div>
</div>
</div>
</div>
<!-- Project 3 Row-->
<div class="row gx-0 mb-5 mb-lg-0 justify-content-center">
<div class="col-lg-6 wow animate__animated animate__fadeInLeft">
<div class="m7 text-center h-100 project">
<div class="d-flex h-100 offset-1 col-10">
<div class="project-text w-100 my-auto text-lg-left">
<p class="nbig"><strong>5</strong></p>
<p class="mb-3">
<i class="fas fa-headphones fa-2x text-white-70"></i>
<audio controls>
<source src="assets/audio/locucion/mexico_7.mp3" type="audio/mpeg">
</audio>
</p>
<p class="text-center">México es bastante grande ocupando el
<strong>lugar número 14 en el mundo.</strong></p>
</div>
</div>
</div>
</div>
<div class="col-lg-6 m7 wow animate__animated animate__fadeInRight d-none d-xl-block">
<div class="d-inline-flex flex-column align-items-center">
<img class="img-fluid" src="assets/img/mexico/mexico/m_paisesrepresentacion.png">
<img class="img-fluid" src="assets/img/mexico/mexico/m_grafica.png" id="grafica"/>
</div>
</div>
</div>
<!-- Project 4 Row-->
<div class="row gx-0 align-items-center m8">
<div class="col-xl-6 col-lg-7 wow animate__animated animate__fadeInLeft">
<img class="img-fluid mb-lg-0" src="assets/img/mexico/mexico/m_productos.jpg" alt="..."/>
</div>
<div class="col-xl-5 col-lg-5 wow animate__animated animate__fadeInRight">
<div class="featured-text text-lg-left">
<div class=" w-100 mx-auto">
<p class="nbig"><strong>6</strong></p>
<p class="mb-3">
<i class="fas fa-headphones fa-2x text-white-70"></i>
<audio controls>
<source src="assets/audio/locucion/mexico_8.mp3" type="audio/mpeg">
</audio>
</p>
<p class="text-center">México es hogar de muchas culturas indígenas que, a través de miles de años, han producido numerosas variedades de
<strong>maíz, frijol, calabaza, chile </strong>y de otras especies de las cuales nos alimentamos.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer bg-verdeselva small text-center text-white-50" id="footer"></footer>
</main>
<!-- Usar load para cargar contenido de menu y footer-->
<script>
$(document).ready(function () {
$('header').load('./includes/header.html', function () {
$.getScript('./assets/mega-site-navigation/js/main.js');
$.getScript('./assets/mega-site-navigation/js/jquery.mobile.custom.min.js');
});
$('footer').load('./includes/footer.html');
});
</script>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!--wow js-->
<script src="js/wow.js"></script>
<!--scripts fuera del template base, tomé los del morphing modals, pero podrían ser en una carpeta afuera-->
<script src="assets/morphing-modal/js/jquery-2.1.1.js"></script> <!-- jquery -->
<script src="assets/morphing-modal/js/velocity.min.js"></script> <!-- velocity -->
<script src="assets/morphing-modal/js/modernizr.js"></script> <!-- Modernizr -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-295WCBSQXS"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-295WCBSQXS');
</script>
<!-- End Google tag (Google analytics 4) -->
</body>
</html>