-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (100 loc) · 6.26 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
<!DOCTYPE html>
<html lang="en">
<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>Women and water</title>
<link rel="stylesheet" href="./css/style.css">
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyBNIDSVy368M64DXJVqW0OL_BVjTu1ZZW4"></script>
<script defer src='https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js'></script>
<script defer src='https://cdnjs.cloudflare.com/ajax/libs/mapbox-polyline/1.1.1/polyline.min.js'></script>
<script defer src='./js/lib/html2canvas.min.js'></script>
<script defer src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script defer type="module" src="./js/app.js"></script>
</head>
<body class="prevent__click no-scroll">
<div class="loader__container">
<div class="loader"></div>
</div>
<section class="introduction__container introduction__step active">
<article class="introduction__article">
<header>
<h1 class="introduction__main-title">
Your live without water at home
</h1>
</header>
<section class="introduction__text">
<article class="introduction__text-article">
<h2 class="article__title">Sustainable development</h2>
In 2015 all member states of the United Nations adopted "The 2030 Agenda for Sustainable Development". The agenda provides a shared blueprint for people and the planet, now and into the future. In it's midst are the 17 Sustainable Development Goals (also reffered to as SDG's) which are an urgent call for action by all countries - developend and developing - in a global partnership. The goals recognize that ending poverty and other deprivations must go hand-in-hand with strategies that improve health and eductaion, reduce inequality, and spur economic growth - all while tackling climate change and working to preserve our oceans and forests.
</article>
<article class="introduction__text-article">
<h2 class="article__title">Gender inequalities</h2>
UN Women states that it's very simple. There can be no sustainable development without gender equality. But in reality gender inequalities are stil present in every dimension of sustainable development.
</article>
<article class="introduction__text-article">
<h2 class="article__title">Too slow</h2>
In many areas the current rate of progress is too slow to achieve the SDG's by 2030. One of the things we can do is to take public action to tackle inequalities and discrimination. Which is exactly what I hope to do with this visualisation.
</article>
<article class="introduction__text-article">
<h2 class="article__title">Women and water
</h2>
<a href="">The 2018 SDG Monitoring report</a> states that women and girls are still responsible for water collection in 80 percent of households without access to water on premises.
Data on the use of safely managed drinking water services is still hard to find as there are still big gaps.
</article>
<article class="introduction__text-article">
<h2 class="article__title">Household surveys
</h2>
tell something sbout the household surveys here
</article>
<article class="introduction__text-article">
<h2 class="article__title">Niger in focus
</h2>
As it was not easy to find data about this subject I chose to use Niger's national figures about:
<ul>
<li>
Percentage of people with access to source of drinking water
</li>
<li>
Deaths related to unsafe water
</li>
<li>
Average distance women and girls walk for water daily
</li>
<li>
Literacy rate for youngsters
</li>
<li>
Problems women deal with along the way
</li>
</ul>
I chose Niger as this is one of the countries with the most deaths related to unsafe water.
</article>
<article class="introduction__text-article">
<h2 class="article__title">Your walk for water
</h2>
This visualisation shows you what it would be like if you would be in the shoes of women and girls in Niger in your own environment.
</article>
</section>
</article>
<div class="introduction__mobile-background">
<img class="introduction__image" src="https://www.unicef.org/sites/default/files/styles/hero_desktop/public/UN0406867.jpg?itok=8m4I9Bd1" alt="woman getting water">
</div>
</section>
<div class="search__container introduction__step active">
<!-- <label for="search">Search for an address:</label> -->
<span class="material-icons search__icon">search</span>
<input type="search" class="search__input" id="search" name="q"
aria-label="Search for address" placeholder="Enter your address">
<button class="search__location-button"> <span class="material-icons">gps_fixed</span> use my location</button>
</div>
<div class="hud__container">
<!-- <img class="hud__img-jerrycan" src="./static/icons/jerrycan.svg" alt="jerrycan image"> -->
<strong class="hud__clock">09:00</strong>
</div>
<div id="map"></div>
</body>
</html>