-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (147 loc) · 8.79 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous" />
<title>Bats and the Origin of Outbreaks</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital@0;1&display=swap" rel="stylesheet" />
<style>
:root {
--bs-font-sans-serif: "DM Sans", sans-serif;
}
:hover {
transition: all ease 0.5s;
}
* {
font-weight: 300;
}
header p {
text-align: justify;
}
header p.lead {
line-height: 1.6;
}
.card,
.card-img-top {
border: none;
border-radius: 0 0;
}
.carousel-item h4, .carousel-item p {
letter-spacing: 0.05rem;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<header class="container">
<div class="row py-5">
<div class="col-12 col-sm-11 col-md-10 col-lg-9 col-xl-8 col-xxl-7 mx-auto">
<h1 class="mb-3 mt-5 text-center">Bats and the Origin of Outbreaks</h1>
<h2 class="fs-6 mb-5 text-center text-uppercase">Teresa Muñoz</h2>
<p class="lead">
El murciélago es un mamifero placentario con alas con 1100 especies diferentes, constatando al 20% de los mamiferos del planeta. Este animal esta presente en todos los continentes menos Antártida, por lo que esta presente en diversos nichos ecológicos, desempeñando un papel vital como polinizadores.
</p>
<p>Recientemente, este animal se ha hecho famoso por su capacidad de crear viruses y plagas, siendo el virus COVID-19 una de estas. A continuación se muestra una infografía sobre el animal.</p>
<img src="img/infografia.png" class="w-100 shadow my-4" alt="Infografía sobre murciélagos" />
</div>
</div>
</header>
<main class="container-fluid bg-light">
<div class="row py-5">
<div class="col-sm-11 mx-auto py-3">
<!--la paleta-->
<h3 class="text-center">Colores</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20" class="shadow-sm mt-3 mb-5">
<g id="colores"></g>
</svg>
<!--las fuentes-->
<h3 class="text-center pt-5 pb-1">Tipografías</h3>
<div class="row mt-2 mb-4 g-3">
<!--primera fuente-->
<div class="col-sm-6">
<div class="card shadow-sm">
<img src="img/f1.png" class="card-img-top" alt="Tipografía Freight Book" />
<div class="card-body">
<h4 class="card-title">Freight Book</h4>
<p class="card-text">Freight es una tipografía simple serifa diseñada por Joshua Darden. Dentro de la infografía es usada principalmente para textos. </p>
</div>
</div>
</div>
<!--segunda fuente-->
<div class="col-sm-6">
<div class="card shadow-sm">
<img src="img/f2.png" class="card-img-top" alt="Tipografía IM Fell French Canon" />
<div class="card-body">
<h4 class="card-title">IM Fell French Canon</h4>
<p class="card-text">IM Fell French Canon es una tipografía con serifa diseñada por Igino Marini. Dentro de la infografía es usada para títulos y sub-títulos. </p>
</div>
</div>
</div>
</div>
<!--no más fuentes-->
<!--las gráficas-->
<h3 class="text-center pt-5 pb-2">Gráficos</h3>
<div id="carouselExampleCaptions" class="carousel slide mx-5" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/grafico1.png" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h4>Gráfico figurativo</h4>
<p>A través de este gráfico se muestra la morfología del murciélago a través de una ilustración de su cuerpo.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/grafico2.png" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h4>Gráfico no figurativo</h4>
<p>Se representan las especies, familias y genética de lo murciélagos a través de la abstracción de agrupaciones de circulos.</p>
</div>
</div>
<div class="carousel-item">
<img src="img/grafico3.png" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h4>Gráfico no figurativo</h4>
<p>Se explica la relación entre la masa y los años de vida entre distintos animales mediante un gráfico de puntos, sintetizando de forma abstracta la información. </p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</main>
<footer class="container-fluid bg-dark text-white-50">
<div class="row py-3">
<div class="col-12">
<p class="d-flex justify-content-between small p-1 m-0">
<!--reemplaza el # que sigue con la URL de tu cuenta en GitHub-->
<a href="https://github.com/teremunozs" class="link-light">Teresa Muñoz</a>
<a href="https://github.com/profesorfaco/dno075-2021-1/" class="link-light">Infografía Digital</a>
<a href="https://github.com/profesorfaco/dno075-2021-1/tree/main/clase-04" class="d-none d-lg-inline link-light">Lunes 13 de septiembre, 2021</a>
</p>
</div>
</div>
</footer>
<script>
// Reemplaza los colores dentro del paréntesis cuadrado, respetando las comillas.
// Si necesitas que un color ocupe más espacio en la paleta: debes repetirlo.
var colores = ["#BFB3A4", "#BFB3A4", "#D9D7D0", "#D9D7D0", "#A69B8D", "#A69B8D", "#736B62", "#736B62", "#F2EFE4"];
// No reemplaces nada de lo que sigue.
var n = colores.length;
var w = 100 / n;
for (var x = 0; x < n; x++) {
document.getElementById("colores").innerHTML += '<rect width="' + w + '" height="20" x="' + x * w + '" y="0" fill="' + colores[x] + '" stroke="' + colores[x] + '"/>';
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>