-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
330 lines (310 loc) · 15.4 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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
<!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">
<title>Tri Sélectif - Accueil</title>
<link rel="stylesheet" href="scss/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous">
</head>
<body>
<!-- NAV -->
<nav class="nav">
<div class="nav-left">
<div class="nav-item" id="top">
<p><i class="fas fa-leaf"></i> Le tri sélectif pour sauver notre planète !</p>
</div>
</div>
<div class="nav-center">
<a class="nav-item">
<span class="icon">
<i class="fab fa-youtube"></i>
</span>
</a>
<a class="nav-item">
<span class="icon">
<i class="fab fa-facebook-f"></i>
</span>
</a>
</div>
<div id="navMenu" class="nav-right nav-menu is-active navbar-menu">
<a class="nav-item" href="#tri_s" alt="Le tri sélectif" title="Le tri sélectif">
Le tri sélectif
</a>
<a class="nav-item" href="#famille_d" alt="Les familles de déchets" title="Les familles de déchets">
Les déchets
</a>
<a class="nav-item" href="#poubelles" alt="Les différentes poubelles" title="Les différentes poubelles">
Les poubelles
</a>
<a class="nav-item" href="#social" alt="Nous contacter" title="Nous contacter">
Contact
</a>
<span class="nav-item">
<a class="button is-primary">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Version PDF</span>
</a>
</span>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<div class="hero-body">
<div class="container">
<h1 class="title is-1">
<i class="fas fa-recycle"></i> Le Tri Sélectif <i class="fas fa-recycle"></i>
</h1>
<h2 class="subtitle is-3">
Trions nos déchets pour ne pas polluer notre environnement
</h2>
</div>
</div>
</section>
<!-- MAIN -->
<main class="has-text-centered">
<strong class="bloc">Les éco gestes et les bonnes pratiques permettent de privilégier notre environnement et de
préserver
notre santé. Consommer malin contribue aussi à la protection de notre planète.</strong>
<!-- SLIDER -->
<img name="slide" id="slider">
<!-- SECTION 1 - TRI SELECTIF -->
<section class="section bloc" id="tri_s">
<div class="container flex">
<article>
<div class="heading">
<h2 class="title"><img src="img/ico.jpg"> Pourquoi faire du tri sélectif ?</h2>
</div>
<p>La nature ne sait pas détruire nos déchets qui polluent la planète. On va donc récupérer nos
déchets pour économiser des matières premières telles que le bois afin de protéger les
forêts donc la nature. De ce fait, bien faire son tri a pour objectif de pouvoir réutiliser
des matériaux pour en faire des produits recyclés.</p>
</article>
<article>
<div class="heading">
<h2 class="title"><img src="img/ico.jpg"> Comment faire du tri sélectif ?</h2>
</div>
<p>On va trier ces différents déchets par famille. Ceux-ci seront déposés dans des poubelles ou
conteneurs adéquats ou transportés à la déchetterie.</p>
</article>
</div>
</section>
<!-- SECTION 2 - FAMILLE DECHETS -->
<section class="section bloc flex" id="famille_d">
<article>
<div class="heading">
<h2 class="title"><img src="img/ico.jpg"> Les différentes familles de produits ou déchets</h2>
<em class="subtitle is-6">Les produits ou déchets seront triés par famille, c'est-à-dire :</em>
</div>
<div class="flex">
<ul>
<li>plastique</li>
<li>papier carton</li>
<li>métaux</li>
<li>verre</li>
<li>déchets organiques</li>
<li>bois</li>
</ul>
<ul>
<li>textile, cuir</li>
<li>mobilier</li>
<li>électronique, électrique</li>
<li>déchets du bâtiment</li>
<li>déchets dangereux</li>
<li>divers</li>
</ul>
</div>
<h2 class="subtitle">
Pour effectuer un tri adapté :
</h2>
<ul>
<li>- on trie tous les emballages et le papier ;</li>
<li>- pour les emballages en plastique, seuls les bouteilles et les flacons doivent être triés ;
</li>
<li>- les papiers et les emballages carton humides ou trop gras vont directement dans la poubelle
des
ordures ménagères ;</li>
<li>- on peut laisser les bouchons sur les bouteilles en plastique. Il est inutile de laver les
emballages,
il suffit de bien les vider.</li>
</ul>
</article>
</section>
<!-- SECTION 3 - IMPORTANT -->
<section class="section bloc" id="important">
<div class="container flex">
<article>
<div class="heading">
<h2 class="title"><i class="fas fa-info-circle"></i> Bon à savoir <i class="fas fa-info-circle"></i></h2>
</div>
<p>Les professionnels ont une obligation de tri à la source des papiers de bureau, avec
l'organisation
d'une collecte indépendante des autres déchets lorsqu'ils ne sont pas traités sur place. Cette
obligation entre progressivement en vigueur selon le type d'établissement et l'effectif. Elle
est
entrée en vigueur le 1er juillet 2016 pour les administrations publiques de l'État et les
établissements publics de l'État de plus de 20 personnes, ainsi que pour les autres sociétés
avec
un effectif d'au moins 100 personnes. Elle entrera en vigueur le 1er janvier 2017 pour les
entreprises d'au moins 50 personnes, et le 1er janvier 2018 pour celles de 20 personnes.</p>
</article>
</div>
</section>
<!-- SECTION 4 - LES DIFFERENTES POUBELLES -->
<section class="section bloc" id="poubelles">
<div class="container flex">
<article>
<img src="img/pb.jpg" id="pb_colors">
<div class="heading">
<h2 class="title"><img src="img/ico.jpg"> Les différentes poubelles ou conteneurs de tri
sélectif</h2>
</div>
<p>On dispose de différentes poubelles à la maison pour trier ses déchets, à savoir : la poubelle
jaune,
la poubelle verte, la poubelle bleue, la poubelle ordinaire (couvercle marron, bordeaux).</p>
</article>
</div>
</section>
<!-- SECTION 5 - COULEUR DES POUBELLES -->
<section class="section bloc flex" id="poubelles_couleurs">
<div class="side flex art_flex">
<article class="container">
<div class="heading">
<h2 class="subtitle yellow"><i class="fas fa-trash-alt"></i> Poubelle jaune</h2>
</div>
<p>La poubelle jaune contient des :</p>
<ul>
<li>- bouteilles en plastique : eau, sodas, jus de fruits ;</li>
<li>- bouteilles de lait ;</li>
<li>- flacons plastiques de produits d'hygiène et de beauté (gel douche, bain moussant) ;</li>
<li>- flacons et bidons plastiques concernant les produits d'entretien (lave-vitres, produit
nettoyant) ;</li>
<li>- boîtes en carton et briques alimentaires sur emballages en carton (jus de fruits, soupe,
boîtes
de gâteaux, emballage de yaourts) ;</li>
<li>- boites de conserve en fer, canettes, bidons de sirop, boîte d'aliment pour animaux ;</li>
<li>- désodorisants, mousses à raser, barquettes en aluminium, laques pour cheveux.</li>
</ul>
</article>
<article class="container">
<div class="heading">
<h2 class="subtitle blue"><i class="fas fa-trash-alt"></i> Poubelle bleue</h2>
</div>
<p>La poubelle bleue contient les journaux et les magazines.</p>
</article>
</div>
<div class="side flex art_flex">
<article class="container">
<div class="heading">
<h2 class="subtitle green"><i class="fas fa-trash-alt"></i> Poubelle verte</h2>
</div>
<p>La poubelle verte contient des :</p>
<ul>
<li>- bouteilles de vin, de bière, jus de fruit, soupes ;</li>
<li>- pots de confiture ou petits pots à bébé ;</li>
<li>- bouteilles en verre transparent de couleur ambre verte ou jaune (liqueurs, apéritifs) ;</li>
<li>- papiers gras et souillés ;</li>
<li>- bouteilles d'huile et bocaux de conserve.</li>
</ul>
</article>
<article class="container">
<div class="heading">
<h2 class="subtitle marroon"><i class="fas fa-trash-alt"></i> Poubelle ordinaire ou marron</h2>
</div>
<p>La poubelle ordinaire (couvercle marron ou marron) contient :</p>
<ul>
<li>- des restes de repas ;</li>
<li>- des couches-culottes ;</li>
<li>- des pots de yaourts, etc., tout ce qui n'est pas recyclable.</li>
</ul>
</article>
</div>
</section>
<!-- SECTION 6 - AUTRES -->
<section class="section bloc flex" id="divers">
<article>
<div class="heading">
<h2 class="title"><img src="img/ico.jpg"> Tri sélectif : les autres produits</h2>
<em class="subtitle is-6">Les autres produits subissent un autre conditionnement ou sont
transportés à la déchetterie, comme :</em>
</div>
<ul>
<li>Les équipements électriques et électroniques : ils sont transportés à la déchetterie, repris
par les encombrants de la commune ou repris par l'enseigne à qui vous achetez un nouveau
produit.</li>
<li>Les objets dangereux (huile de vidange – peinture – produits toxiques) : ils sont transportés à
la déchetterie.</li>
<li>Les encombrants (mobilier, gravats, vélos cassés, etc.) : ils peuvent être emportés à la
déchetterie ou repris par les encombrants de la commune.</li>
<li>Les piles : elles sont déposées dans les grandes surfaces ou ramenées chez un vendeur de ce
produit.</li>
<li>Les médicaments : les médicaments non utilisés ou périmés sont rapportés au pharmacien.</li>
<li>Les déchets verts : ils peuvent être utilisés pour faire son compost, collectés par la mairie
ou déposés à la déchetterie.</li>
<li>Les vêtements, livres, jouets : ils peuvent être remis à des associations ou collectés par la
mairie pour les personnes défavorisées.</li>
</ul>
</article>
</section>
</main>
<!-- FOOTER -->
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
<strong>Pour aller plus loin :</strong> la page "Recyclage" de <a href="https://recyclage.ooreka.fr/astuce/voir/745361/tri-selectif"
alt="Lien vers Ooreka" title="Page Ooreka" target="_blank">Ooreka <i class="fas fa-external-link-alt"></i></a>.
</p>
<p>
Le code source est sous licence <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. Le contenu du site web est
licencié <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC ANS 4.0</a>.
</p>
<p id="social">
<a>
<i class="fab fa-youtube"></i>
</a>
<a>
<i class="fab fa-facebook-f"></i>
</a>
<span>Contactez-nous !</span>
<a><i class="fas fa-at"></i></a>
<a><i class="fas fa-phone"></i></a>
</p>
<p><a href="#top" alt="Retour en haut" title="Retour en haut">Retour en haut</a></p>
</div>
</div>
</footer>
<!-- SCRIPT -->
<script>
var i = 0; // Start Point
var images = []; // Images Array
var time = 3000; // Time Between Switch
// Image List
images[0] = "img/1.jpg";
images[1] = "img/2.jpg";
images[2] = "img/3.jpg";
images[3] = "img/4.jpg";
// Change Image
function changeImg() {
document.slide.src = images[i];
// Check If Index Is Under Max
if (i < images.length - 1) {
// Add 1 to Index
i++;
} else {
// Reset Back To O
i = 0;
}
// Run function every x seconds
setTimeout("changeImg()", time);
}
// Run function when page loads
window.onload = changeImg;
</script>
</body>
</html>