-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
169 lines (151 loc) · 6.59 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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<meta name="generator" content="">
<title>Map gallery</title>
<!-- <link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/album/"> -->
<!-- Bootstrap core CSS -->
<link href="./assets/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.jumbotron {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
footer {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.container {
max-width: 90% !important;
}
</style>
<!-- Custom styles for this template -->
<link href="home.css" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2"
viewBox="0 0 24 24" focusable="false">
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
<circle cx="12" cy="13" r="4" />
</svg>
<strong>Map gallery</strong>
</a>
</div>
</div>
</header>
<main role="main">
<section class="jumbotron text-center">
<div class="container">
<h1>MapBox WebMap</h1>
<p class="lead text-muted">Cartographies intéractives basées sur MapBox.</p>
</div>
</section>
<div class="album py-5 bg-light">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="card mb-4 shadow-sm">
<a href="./assets/pages/01-administratives-boudaries/index.html">
<img src="https://drive.google.com/uc?id=1u6QHXa-WY7_3UNzXRNkcJ3VOVPNReDe7"
style="width: 100%;height: 225px;object-fit: cover;">
</a>
<div class="card-body">
<p class="card-text text-justify">Subdivision administrative : 22 Régions, 119 Districts, 1578 Communes
et 17465 Fokontany selon les délimitations disponibles.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a href="./assets/pages/01-administratives-boudaries/index.html">
<button type="button" class="btn btn-sm btn-outline-secondary">Voir</button>
</a>
<!-- <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> -->
</div>
<small class="text-muted">Source : HumanData</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 shadow-sm">
<a href="./assets/pages/02-population/index.html">
<img src="https://drive.google.com/uc?id=1ycEcvWcfzRWbQm_wOzwwj-omeqS85Lzv"
style="width: 100%;height: 225px;object-fit: cover;">
</a>
<div class="card-body">
<p class="card-text text-justify">Une population repartie de manière inégale sur le territoire : une
forte concentration au Centre et à l'Est dûe à la centralité et aux conditions physiques.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a href="./assets/pages/02-population/index.html">
<button type="button" class="btn btn-sm btn-outline-secondary">Voir</button>
</a>
<!-- <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> -->
</div>
<small class="text-muted">Source : HumanData | Instat</small>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card mb-4 shadow-sm">
<a href="./assets/pages/03-hillshade/index.html">
<img src="https://drive.google.com/uc?id=10EhADyiLPewhbLg6DEUcxvWDuLgXf5Ig"
style="width: 100%;height: 225px;object-fit: cover;">
</a>
<div class="card-body">
<p class="card-text text-justify">Trois bandes de relief : Hautes terres centrales, bande côtière
étroite à l'Est et une zone de plateaux plus bas et de plaines à l'Ouest.
<i>(<a href="https://fr.wikipedia.org/wiki/Madagascar">Wikipedia</a>)</i>
</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<a href="./assets/pages/03-hillshade/index.html">
<button type="button" class="btn btn-sm btn-outline-secondary">Voir</button>
</a>
</div>
<small class="text-muted">Source : MapBox</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="text-muted" style="font-size: 11pt; ">
<div class="container">
<!-- <p class="float-right" >
<a href="#">Retourner en haut</a>
</p> -->
<p> Les codes sources sont disponibles sur <a href="https://github.com/Xpirix/maps-showcase">Github</a>.</p>
<p style="font-style: italic;">Cartes basées sur des données disponibles sur le web et/ou traitées par l'auteur.
<a href="mailto:[email protected]">Xpirix</a> 2023 © </p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.slim.min.js"><\/script>')</script>
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
</html>