-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex_mob.html
82 lines (71 loc) · 3.79 KB
/
index_mob.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<!-- <base href="http://127.0.0.1/traficomadrid/">-->
<link href="https://fonts.googleapis.com/css?family=Londrina+Solid" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/BootstrapXL.css">
<link href="bower_components/jbox/Source/jBox.css" rel="stylesheet">
<link rel="stylesheet" href="css/css/mobile.css">
<!-- JAVASCRIPT -->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- jbox -->
<script src="bower_components/jbox/Source/jBox.min.js"></script>
<script type="text/javascript" src="bower_components/d3/d3.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bower_components/jsrender/jsrender.min.js"></script>
<script type="text/javascript" src="js/main-mvl.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" >
<div class="container-fluid">
<div class="col-xs-6">
<a class="navbar-brand-custom" href="#">Historia de Zainab</a>
<span class="chapter-name">Capítulo 1 </span> <a class="next" href="#"><span class="circle glyphicon glyphicon-chevron-right"> </span></a>
</div>
<div class="col-xs-2 nopadding ">
<a class="link-menu" href="#story"><img src="images/c1_menu_story.png" class="img-menu"/>
story
</a>
</div>
<div class="col-xs-2 nopadding">
<a class="link-menu" href="#mapa"> <img src="images/c1_menu_mapa.png" class="img-menu"/>
mapa
</a>
</div>
<div class="col-xs-2 nopadding">
<a class="link-menu" href="#datos"> <img src="images/c1_menu_datos.png" class="img-menu"/>
datos
</a>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div id="main-content">
<div id="story" class="section">
<img src="images/c1_IMG_story_mob.jpg" class="img-responsive"/>
<div id="story-text">
Este cómic quiere visibilizar el éxodo de Zainab y su familia que, como otros 11 millones de personas, se han visto obligadas a abandonar su hogar desde que en 2011 comenzó la guerra en Siria.
</div>
</div>
<div id="mapa" class="section">
<img src="images/c1_mapa_mob.jpg" class="img-responsive"/>
</div>
<div id="datos" class="section">
<img src="images/c1_IMG_grafico_mob.jpg" class="img-responsive"/>
<div id="map-text">
Este proyecto se ha realizado durante Visualizar'17, un proceso de investigación participativo sobre visualización de información y migraciones.
Los datos entran en acción para contar una historia. Y si a menudo es difícil obtener datos fiables, en un contexto de guerra todas las cifras se convierten en estimaciones.
No por ello dejan de representar una realidad que están viviendo millones de personas tratadas como números.
Aquí tratamos a los números como personas.
</div>
</div>
</div>
</div>
</body>
</html>