-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (131 loc) · 6.92 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="description" content="changements climatiques au Maroc et au Nord de l’Afrique">
<meta name="keywords" content="IAV Hassan II, Climate change, Climat, désertification, Forets, Afrique du nord, Maghreb, Maroc,Morocco">
<meta name="author" content="Bnoulkacem Zakaria">
<title>changements climatiques au Maroc et au Nord de l’Afrique </title>
<link rel="icon" type="image/png" href="./images/esgt.png">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Source+Sans+Pro:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<i class="icon-menu burger-button" id="burger-menu"></i>
<header class="header">
<div class="wrapper">
<figure class="logo"><img src="./images/esgt.png" width="80" height="80" alt="logo esgit"></figure>
<nav class="menu">
<ol>
<li><a class="link" href="https://github.com/zakbnou/Changementclim">Code source</a></li>
<li><a class="link" href="https://fr.wikipedia.org/wiki/D%C3%A9sertification#:~:text=Ses%20effets%2C%20qui%20r%C3%A9sultent%20d,en%20cause%20de%20la%20d%C3%A9sertification."> Plus d'info </a></li>
<li><a class="link contact-button" href="mailto: z.bnoulkacem@gmail.com">Contactez moi</a></li>
</ol>
</nav>
</div>
</header>
</section>
<maps>
<div class="wrapper">
<h2 id="maps" class="map-header">changements climatiques et désertification au Maroc et au Nord de l’Afrique</h2>
</div>
<section class="map-list">
<div class="wrapper">
<article class="map">
<figure class="map-imageWrapper"><img class="projimg" src="./images/maps/map1.jpg"
alt="Carte 1"></figure>
<div class="map-content">
<h3 class="map-title">Carte choroplète des terres de moyennes à hautes vulnérabilité à la sécheresse: </h3>
<p class="map-description">Cette carte représente un agrégat de Donnés de puis un document du WORLD BANK STUDIES
intitulé ''Climate Change and Migration: Evidence from the Middle East and North Africa'' montrant la vulnérabilité des terres à la sécheresse </p>
<a class="map-link" href="html-pages/map1.html">Ouvrir la carte.</a>
</div>
</article>
<article class="map">
<figure class="map-imageWrapper"><img class="projimg" src="./images/maps/map2.jpg"
alt="Carte 2"></figure>
<div class="map-content">
<h3 class="map-title">Carte à symboles proportionnels des incendies au Maroc à 2020</h3>
<p class="map-description">Donnés tirés depuis le Département des Eaux et Forêts.<br> Les pertes de forêts induisent une désertification, donc le rôle de protection assuré par les arbres est perdu. </p>
<a class="map-link" href="html-pages/map2.html">Ouvrir la carte.</a>
</div>
</article>
<article class="map">
<figure class="map-imageWrapper"><img class="projimg" src="./images/maps/map3.jpg"
alt="Carte 3"></figure>
<div class="map-content">
<h3 class="map-title">Carte dynamique des superficies des forêts perdues par année</h3>
<p class="map-description">tu px dire: Cette carte est une représentation des données tirées de la source: Globalforestwatch.org, qui cartographie les superficies perdues de forêts annuellement dans les pays du Nord d'Afrique.</p>
<a class="map-link" href="html-pages/map3.html">Ouvrir la carte.</a>
</div>
</article>
<article class="map">
<figure class="map-imageWrapper"><img class="projimg" src="./images/maps/map4.jpg"
alt="Carte 4"></figure>
<div class="map-content">
<h3 class="map-title">Carte 3D</h3>
<p class="map-description">Cette carte représente les pourcentages des terres désertifiées modérément à tres sévèrement depuis les donnés présentes dans
un papier intitulé ''Assessing désertification and water harvesting in the Middle East and North Africa: Policy implications'' </p>
<a class="map-link" href="html-pages/map4.html">Ouvrir la carte.</a>
</div>
</article>
<article class="map">
<figure class="map-imageWrapper"><img class="projimg" src="./images/maps/dataviz1.jpg"
alt="visualisation des Donnés"></figure>
<div class="map-content">
<h3 class="map-title">Histogramme des utilisations des terres dans les pays du Nord d'Afrique </h3>
<p class="map-description">Cet histogramme représente les donnés d'utilisation des terres dans les pays du Nord d'Afrique. Cette information nous donne un aperçu sur les superficies des terres à différents degrés de sensibilité à la désertification.</p>
<a class="map-link" href="html-pages/dataviz1.html">Ouvrir l'histogramme.</a>
</div>
</article>
<article class="map">
<figure class="map-imageWrapper"><img class="projimg" src="./images/maps/dataviz2.jpg"
alt="visualisation des Donnés"></figure>
<div class="map-content">
<h3 class="map-title">Graphe multiligne de la variation de la température de 1900 à 2013 </h3>
<p class="map-description">Ce graphe représente un des effets du changement climatique qui est le réchauffement climatique en traçant la variation des températures sur une durée de 114 ans. Ces infos sont issues d'une base donné sur kaagle </p>
<a class="map-link" href="html-pages/dataviz2.html">Ouvrir le graphe.</a>
</div>
</article>
</div>
</section>
</maps>
<!-- external links -->
<section id="contact" class="contact">
<div class="wrapper">
<form action="" class="form-email">
<h3>Contact</h3>
<h2>z.bnoulkacem@gmail.com</h2>
</form>
</div>
</section>
<section id="footer" class="footer">
<div class="wrapper">
<p>Made with ❤️ by <a href="mailto: z.bnoulkacem@gmail.com">Bnoulkacem Zakaria </a>.</p>
</div>
</section>
<script>
// ce srcript est pour une visualisation sur mobile
const mobile = window.matchMedia('screen and (max-width: 767px)');
const menu = document.querySelector('.menu');
const burgerButton = document.querySelector('#burger-menu');
mobile.addListener(validation);
function validation(event) {
if (event.matches) {
burgerButton.addEventListener('click', hideShow);
} else {
burgerButton.removeEventListener('click', hideShow);
}
}
validation(mobile);
function hideShow() {
if (menu.classList.contains('is-active')) {
menu.classList.remove('is-active');
} else {
menu.classList.add('is-active');
}
}
</script>
</body>
</html>