-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
41 lines (41 loc) · 2.13 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
<!DOCTYPE html>
<html lang="fr">
<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">
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Lato:ital@0;1&family=Open+Sans:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
crossorigin=""/>
<link rel="stylesheet" href="saeGraphique.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js" defer></script>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
crossorigin=""></script>
<script src="script.js" defer></script>
<link rel="shortcut icon" href="logoData.png" type="image/x-icon">
<title>Dataviz - Évolution du droit à l'avortement en Europe</title>
<style type="text/css">
.leaflet-container{background-color:#c5e8ff;}
</style>
</head>
<body>
<img id="logo" src="logoDataWhite.png" alt="logo dataviz">
<h1>Évolution du droit à l'avortement en Europe</h1>
<div class="parent">
<div id="information">
<p>Nous avons décidé de traiter un sujet qui touche toutes les femmes dans le monde. À l'échelle de l'Europe, découvrez les différentes législations établies par les gouvernements depuis 1910 jusqu'à aujourd'hui. Pour en savoir plus sur la réalisation de ce projet, cliquez <a href="PageInformations.html">ici</a>.</p>
</div>
<div id="map" style="width: 45vw; height: 30vw;">
</div>
<div id="slide">
<label class="slider">
<div id="cursorSlide"><span id="rangeValue">1910</span>
<input id="fader" type="range" min="1910" max="2022" step="1" value="1910"></div>
</label>
</div>
<div id="explication">
<p>Cliquez sur un pays coloré pour obtenir plus d'informations.</p>
</div>
</div>
</body>
</html>