-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathespecies.html
executable file
·173 lines (173 loc) · 10.4 KB
/
especies.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
<!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>Especies | 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>
<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 href="css/especies.css" rel="stylesheet" type="text/css">
</head>
<body class="nav-is-fixed">
<header class="cd-main-header"></header>
<main class="cd-main-content">
<div class="text-center py-5 mt-5" id="e1">
<div class="container px-4 px-lg-5 mt-5">
<div class="row justify-content-center align-items-center">
<div class="col-10 animate__animated animate__fadeInLeft">
<h3 class="mb-4">¿Qué es una especie?</h3>
<p><i class="fas fa-headphones fa-2x text-white-70"></i>
<audio controls>
<source src="assets/audio/locucion/especie_1.mp3" type="audio/mpeg">
</audio>
</p>
<p>En nuestro planeta existen muchas clases de plantas, animales, hongos, bacterias y otros organismos tan pequeños que son casi invisibles. Algunos son muy familiares y otros son poco conocidos. Cada una de las plantas y animales que podemos nombrar como por ejemplo:
<strong>perro, gato, margarita, magnolia, maíz, rosa, piña, fresa, iguana verde, jaguar, lobo, cocodrilo de pantano, tortuga lora</strong> y
<strong>sapo borracho</strong> son especies diferentes. Y también los seres humanos somos otra especie.</p>
<p>Todas las especies tenemos necesidades distintas para vivir, alimentarnos, crecer y reproducirnos. Unas especies dependen directamente de la energía del sol (<strong>las plantas</strong>), mientras que otras especies (<strong>los animales</strong>) dependemos de las plantas o de otros animales para obtener energía. Sin ellos no podríamos vivir.
</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>
<div id="ima1_e1"><img src="assets/img/mexico/especies/e_estrella2.png"></div>
<div id="ima2_e1"><img src="assets/img/mexico/especies/e_estrella1.png"></div>
<div id="ima3_e1"><img src="assets/img/mexico/especies/e_macroartropodo.png"></div>
</div>
</div>
</div>
</div>
<section class="text-center pb-5" id="e2">
<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">
<h3 class="mb-4">¿Iguales pero diferentes? </h3>
<p>Los individuos de una misma especie de planta, animal, hongo o microorganismo tienen muchas diferencias de tamaño, forma, color, funcionamiento y comportamiento. Al igual que entre tus compañeros, amigos, parientes y hermanos, los hay altos, bajos, flacos, gordos, morenos y güeros.</p>
<p>Estas diferencias transmitidas de padres a hijos son fáciles de reconocer en la gran variedad de especies de plantas y animales domesticados como el maíz, jitomate, chiles,
<span class="nar">cempasúchil</span>, noche buena, vacas, perros y gatos y también existen en todas las especies del planeta.
</p>
<div id="ima1_e2">
<img src="assets/img/mexico/especies/e_cempasuchil1.png">
<img src="assets/img/mexico/especies/e_cempasuchil2.png">
<img src="assets/img/mexico/especies/e_cempasuchil3.png">
<img src="assets/img/mexico/especies/e_cempasuchil4.png"> <span class="timportante nar">Cempasúchil</span>
</div>
<div id="ima2_e2">
<img src="assets/img/mexico/especies/e_adn.png">
</div>
<div id="ima3_e2">
<img src="assets/img/mexico/especies/e_cromosoma.png">
</div>
</div>
</div>
</div>
</section>
<!-- Projects-->
<section class="projects-section" id="e3">
<div class="container-fluid gx-0 min-vh-100">
<div class="row gx-0 align-items-center text-center">
<div class="col-lg-12">
<h2 class="mb-4 nar2"> Nativas y exóticas</h2>
<p class="mb-4 nar2">De acuerdo a su distribución podemos distinguir dos grupos: nativas y exóticas.</p>
</div>
<div class="col-xl-6 col-lg-7 wow animate__animated animate__fadeInLeft">
<center><h3 class="nar2">Nativas</h3></center>
<div class="col-6" id="nativas1">
<img src="assets/img/mexico/especies/e_ballena.png" class="w-75">
<p><strong>Especies nativas</strong></p>
<p>
<span class="blanco">Estas especies tienen su origen en México pero también pueden vivir en otros países</span> (Ej: Águila real, Jaguar, Mariposa monarca, Ballena azul).
</p>
</div>
<div class="col-6" id="nativas2">
<img src="assets/img/mexico/especies/e_vaquita.png" class="w-75">
<p><strong>Especies endémicas</strong></p>
<p>
<span class="blanco">Algunas especies viven solamente en México y se conocen como endémicas</span> (Ej: Teporingo, Vaquita marina).
<span class="blanco">Pueden estar restringidas a un río, a una montaña, a una laguna, o a un estado.</span>
</p>
</div>
</div>
<div class="col-xl-6 col-lg-6 wow animate__animated animate__fadeInRight">
<div class="featured-text text-lg-left">
<center><h3 class="nar2">Exóticas</h3></center>
<div class="col-6" id="exoticas1">
<img src="assets/img/mexico/especies/e_gallina.png" class="w-75">
<p><strong>Especies exóticas</strong></p>
<p><span class="blanco">Las especies exóticas son las que no se originaron en México. Algunas las trajimos para satisfacer nuestras necesidades de alimento <span class="nar">(Ej: vacas, caballos, burros, gallinas, peces, trigo, plátano, café, abejas),</span> o por otro motivos <span class="nar">(Ej: eucaliptos, bugamibilias, jacarandas, tulipán africano, gatos y perros).</span></span>
</p>
</div>
<div class="col-6" id="exoticas2">
<img src="assets/img/mexico/especies/e_pleco+.png" class="w-75">
<p><strong>Especies invasoras</strong></p>
<p>
<span class="blanco">Algunas especies son introducidas de otros países a propósito o accidentalmente en barcos, aviones, carros, y pueden volverse un verdadero problema ya que compiten, depredan, parasitan, transmiten enfermedades o cambian el hábitat de las especies nativas</span>
</p>
<p><span class="nar"> (Ej: ratas, cucarachas, palomas, pez diablo, plecos, lirios).</span></p>
</div>
<p class="mt-3 ">
<a href="http://paismaravillas.mx/invasoras/index.html" target="_self" class="blanco">¿Quieres saber más sobre las especies invasoras?</a>
</p>
</div>
</div>
</div>
</div>
</section>
<section class="text-center pb-5" id="e4">
<div class="container px-4 px-lg-5">
<div class="row align-items-center">
<div class="col-lg-10 wow animate__animated animate__fadeInLeft min-vh-100">
<center><h3 class="nar3">Nombres en latín</h3></center>
<p>Cada especie recibe un nombre científico compuesto de dos partes. El nombre científico se escribe en latín para que en todos los países se utilice el mismo nombre. La primera parte es el género y nos señala al grupo al que pertenece. La segunda parte nos indica a qué especie pertenece. Son como tu apellido y tu nombre.</p>
<p>Por ejemplo, el jaguar se llama <em>Panthera onca</em>, el leopardo,
<em>Panthera pardus</em>, el león africano se llama <em>Panthera leo</em> y el tigre
<em>Panthera tigris</em>. El primer nombre nos indica que son parientes cercanos.</p>
<p>Por otro lado, el puma es <em>Puma concolor</em> y el gato es
<em>Felis silvestris catus</em>. Aunque sabemos que éstos dos también pertenecen a la familia de los gatos, no están tan cercanamente emparentados como el jaguar, el leopardo y el león.
</p>
<img id="ima4_e4" class="w-50 img-fluid mt-3" src="assets/img/mexico/especies/e_diagrama.png" alt="diagrama">
<div id="ima1_e4"><img class="w-50 img-fluid" src="assets/img/mexico/especies/e_escarabajos.png"></div>
<div id="ima2_e4"><img class="w-30 img-fluid" src="assets/img/mexico/especies/e_linne.png"></div>
<div id="ima3_e4"><img class="w-25 img-fluid" src="assets/img/mexico/especies/e_seleccion.png"></div>
</div>
</div>
</div>
</section>
<footer class="footer bg-verdeselva small text-center text-white-50" id="footer"></footer>
</main>
<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>
<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>