-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (152 loc) · 7.34 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" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
<style>
header {
background: linear-gradient(#e1f5fe, #f8f9fa);
}
.short {
max-width: 5vw;
border: 2px solid white;
margin: 2rem auto;
}
</style>
<title>Fauna endémica en Chile | Zorro de Chiloé</title>
</head>
<body class="bg-light">
<header class="container-fluid py-5">
<div class="row">
<div class="col text-center py-5">
<h1>Sketching</h1>
<h2>Fauna endémica en Chile</h2>
<h3>Zorro de Chiloé</h3>
<h6>Marcos Fernández, Elisa Román, Rosario González, Agustina González y Cristian Risco</h6>
</div>
</div>
</header>
<section class="container pt-5">
<div class="row">
<div class="col-sm-10 col-md-8 mx-auto">
<p class="lead">
Lycalopex fulvipes es el nombre científico del zorro de Chiloé, siendo este del reino de los mamíferos carnívoros, proveniente de la familia de los Canidae, actualmente en peligro de extinción. A continuación se presenta el proceso de ideación del equipo mediante bocetos para diverger y converger en ideas de cómo mostrar la información, qué mostrar y dónde ubicarla.
</p>
<p>
Primero, el equipo trabajó en cuáles temas iba a abordar, tales como la anatomía, distribución geográfica, comparaciones con otras especies, etc. Luego, se realizó la primera iteración, la que buscaba que cada integrante divergiera en formas de mostrar la información y dónde ubicarla. Segundo, el equipo dio feedback entre sus integrantes para pasar a la segunda iteración, la que debía contener las mejoras descritas en el feedback. Por último, se convergió en un boceto grupal el cual contiene los elementos más destacables e importantes para el proyecto.
</p>
</div>
</div>
</section>
<section class="container my-5">
<div class="row g-4">
<!-- TÍTULO PARA PRIMEROS BOCETOS-->
<div class="col-12 text-center">
<hr class="short" />
<h4>Primera Iteración</h4>
</div>
<!-- 1 de 5-->
<div class="col-sm-6 col-md-4">
<div class="card">
<img class="card-img" src="img/Marcos1.png" />
<div class="card-footer text-center">Marcos Fernández</div>
</div>
</div>
<!-- 2 de 5-->
<div class="col-sm-6 col-md-4">
<div class="card">
<img class="card-img" src="img/Elisa1.jpeg" />
<div class="card-footer text-center">Elisa Román</div>
</div>
</div>
<!-- 3 de 5-->
<div class="col-sm-6 col-md-4">
<div class="card">
<img class="card-img" src="img/Rosario1.jpeg" />
<div class="card-footer text-center">Rosario González</div>
</div>
</div>
<!-- 4 de 5-->
<div class="col-sm-6 col-md-4">
<div class="card">
<img class="card-img" src="img/cristian1.png" />
<div class="card-footer text-center">Cristian Risco</div>
</div>
</div>
<!-- 5 de 5-->
<div class="col-sm-6 col-md-4">
<div class="card">
<img class="card-img" src="img/Agustina1.png" />
<div class="card-footer text-center">Agustina González</div>
</div>
</div>
<!--
En caso que su grupo solo tenga 4 integrantes
lo que puede hacer es eliminar el quinto <div class="col-sm-6 col-md-4">…</div>
y en las cuatro divisiones que quedan, cambien la segunda clase, para que quede
<div class="col-sm-6 col-md-3">…</div>
-->
</div>
</section>
<section class="container my-5">
<div class="row align-items-center g-4">
<!-- TÍTULO PARA SEGUNDOS BOCETOS-->
<div class="col-12 text-center">
<hr class="short" />
<h4>Segunda Iteración</h4>
</div>
<!-- 1 de 5-->
<div class="col-sm-6 col-md-4">
<div class="card">
<img class="card-img" src="img/Marcos2.png" />
<div class="card-footer text-center">Marcos Fernández</div>
</div>
</div>
<!-- 2 de 5-->
<div class="col-sm-6 col-md-4">
<div class="card">
<img class="card-img" src="img/Elisa2.png" />
<div class="card-footer text-center">Elisa Román</div>
</div>
</div>
<!-- 3 de 5-->
<div class="col-sm-6 col-md-4">
<div class="card">
<img class="card-img" src="img/Rosario2.jpg" />
<div class="card-footer text-center">Rosario González</div>
</div>
</div>
<!-- 4 de 5-->
<div class="col-sm-6 col-md-4">
<div class="card">
<img class="card-img" src="img/cristian2.jpg" />
<div class="card-footer text-center">Cristián Risco</div>
</div>
</div>
<!-- 5 de 5-->
<div class="col-sm-6 col-md-4">
<div class="card">
<img class="card-img" src="img/Agustina2.png" />
<div class="card-footer text-center">Agustina González</div>
</div>
</div>
<!--
En caso que su grupo solo tenga 4 integrantes
lo que puede hacer es eliminar el quinto <div class="col-sm-6 col-md-4">…</div>
y en las cuatro divisiones que quedan, cambien la segunda clase, para que quede
<div class="col-sm-6 col-md-3">…</div>
-->
</div>
</section>
<section class="container my-5">
<div class="row">
<div class="col-sm-8 text-center mx-auto">
<hr class="short" />
<h4>Sketch grupal</h4>
<img class="w-100 my-3 shadow" src="img/sketchgrupal.jpg" />
</div>
</div>
</section>
</body>
</html>