-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
99 lines (92 loc) · 5.11 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OCEX | INICIO</title>
<!-- /FAVICONS/ -->
<link rel="apple-touch-icon" sizes="57x57" href="././assets/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="././assets/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="././assets/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="././assets/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="././assets/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="././assets/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="././assets/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="././assets/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="././assets/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="././assets/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="././assets/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="././assets/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="././assets/favicons/favicon-16x16.png">
<link rel="manifest" href="././assets/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="././assets/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#047C99">
<!-- /CSS - GLOBAL STYLES/ -->
<link rel="stylesheet" href="./src/css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- /CDN - FONT AWESOME/ -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- /CSS - MAPA INTERACTIVO / -->
<link rel="stylesheet" href="./src/css/indexstyle.css">
<!-- /CDN - MAPBOX/ -->
<link href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" rel="stylesheet">
<!-- /CDN - MAPBOX/ -->
<script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js"></script>
</head>
<body>
<div id="map"></div>
<section>
<div id="sideBar" class="sideBar">
<button class="showHide" href="javascript:void(0)" onclick="showHideSideBar()">
<i><img src="./assets/img/isotipo-ocex-img.png"></i>
</button>
<div id="intro">
<div class="container">
<img class="sidebar__img" src="./assets/img/logo-ocex-white.png">
<div class="texto-info">
<p>En pleno S.XXI la sociedad sigue desconociendo los animales en peligro de extinción que
actualmente se encuentran amenazados en nuestro planeta. Las acciones que provocan un
deterioro de la biodiversidad están provocadas por factores humanos y naturales. El mayor
impacto negativo y el que sitúa los animales en peligro de extinción es el provocado por el
ser humano. </p>
<br>
<p>“En México, el cambio climático, el crecimiento de la población, la contaminación, el tráfico
de especies y la caza hacen que más del 20 por ciento de las especies estén en peligro” </p>
<br>
<p> <cite>Dr. Gerardo Ceballos González, investigador del Instituto de Ecología de la UNAM.
</cite></p>
</div>
<button class="showHideB" href="javascript:void(0)" onclick="showHideSideBar()" --content: 'Hover me!>
<i>Empieza a explorar</i>
</button>
</div>
</div>
</div>
</section>
<div class="menuAnimals" id="menuAnimals">
<ul id="listOfAnimalNames">
<nav>
<a href="./app/enciclopedia/enciclopedia.html">
<button class="btn__new" href="javascript:void(0)" onclick="showHideSideBar()" --content: 'Hover me!>
<i>Ver Enciclopedia</i>
</button>
</a>
</nav>
</ul>
<button class="listButton" id="listButton"href="javascript:void(0)" onclick="showHideLateral()">
<i class="fa-solid fa-list-ul"></i>
</button>
</div>
<div id="animalName">
<div id="animalText"></div>
</div>
<footer>
<script src="././src/js/main.js"></script>
</footer>
</body>
</html>