Cleanweb/index.html at main · aciderix/Cleanweb · GitHub

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
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>C.L.E.A.N. - Zéro Déchet pour les Rivières de Nantes</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <!-- Water Animation Effects -->
    <div class="water-effect"></div>
    <div class="wave"></div>
    <div class="wave wave-2"></div>

    <!-- Navigation -->
    <nav id="navbar">
        <div class="nav-container">
            <a href="#" class="logo">
                <img src="Clean-logo.png" alt="C.L.E.A.N. Logo" />
            </a>
            <button class="mobile-menu-btn">☰</button>
            <ul class="nav-links">
                <li><a href="#about">À propos</a></li>
                <li><a href="#approach">Notre Approche</a></li>
                <li><a href="#events">Événements</a></li>
                <li><a href="#mission">Missions</a></li>
                <li><a href="#activities">Activités</a></li>
                <li><a href="#areas">Zones d'intervention</a></li>
                <li><a href="#partners">Partenaires</a></li>
                <li><a href="#contact">Contact</a></li>
                <li><a href="#support">Soutenir</a></li>
            </ul>
        </div>
    </nav>

    <!-- Header -->
    <header>
        <div class="drops-container" id="drops-container"></div>
        <div class="header-content">
            <h1>Zéro Déchet pour les Rivières de Nantes</h1>
            <p class="tagline">Agissons ensemble pour des rivières plus propres</p>
            <div>
                <a href="#support" class="cta-button">Nous soutenir</a>
                <a href="#activities" class="cta-button secondary">Découvrir nos actions</a>
            </div>
        </div>
    </header>

    <!-- About Section -->
    <section id="about">
        <div class="container">
            <h2 class="section-title">À propos de nous</h2>
            <div class="about-content">
                <div class="about-text hidden">
                    <h3>Qui sommes-nous ?</h3>
                    <p>C.L.E.A.N. - Conservation de l'Eau À Nantes est une association créée le 4 avril 2022 avec une mission ambitieuse : participer activement à la réduction des déchets dans nos rivières nantaises. Nous souhaitons apporter notre pierre à l'édifice en agissant concrètement là où nous pouvons avoir un impact direct.</p>
                    <p>Actuellement, nos actions se concentrent principalement sur l'Erdre, avec quelques interventions sur la Loire. À terme, nous aimerions étendre notre présence sur l'ensemble du réseau hydrographique nantais. Notre équipe de bénévoles passionnés développe des solutions pratiques comme les bacs à déchets et organise régulièrement des collectes.</p>
                    <p>Notre approche se veut collaborative et innovante : nous travaillons avec les usagers des cours d'eau, les associations locales et les collectivités pour imaginer et mettre en place des solutions durables. Nous sommes convaincus que c'est en unissant nos forces que nous pourrons avoir un réel impact sur la qualité de nos rivières.</p>
                    <p>Notre ambition ? Devenir un acteur efficace et durable de la protection des rivières nantaises, tout en menant des actions concrètes. Rejoignez l'aventure C.L.E.A.N. et participez à l'histoire que nous écrivons !</p>
                </div>
                <div class="about-image hidden">
                    <img src="rive.jpeg" alt="Vue d'une rivière nantaise">
                </div>
            </div>
        </div>
    </section>

    <!-- Our Approach Section -->
    <section id="approach">
        <div class="container">
            <h2 class="section-title">Notre Approche : Agir à Tous les Niveaux</h2>
            <div class="mission-cards">
                <div class="mission-card hidden">
                    <div class="mission-icon">🛡️</div>
                    <h3>Prévention</h3>
                    <p>Nous souhaitons agir à la source en sensibilisant sur l'impact des déchets dans nos rivières. Notre objectif est d'encourager des changements de comportements pour limiter la pollution de nos cours d'eau.</p>
                </div>
                <div class="mission-card hidden">
                    <div class="mission-icon">📢</div>
                    <h3>Animation</h3>
                    <p>Nous participons à divers événements comme les Rendez-vous de l'Erdre pour créer du lien avec le public. Notre approche se veut accessible et conviviale, pour permettre à chacun de contribuer à sa façon.</p>
                </div>
                <div class="mission-card hidden">
                    <div class="mission-icon">⬇️</div>
                    <h3>Réduction</h3>
                    <p>Notre priorité est de réduire la quantité de déchets qui atteignent nos rivières. Nous identifions les zones d'accumulation et développons des solutions pratiques comme les bacs à déchets .</p>
                </div>
                <div class="mission-card hidden">
                    <div class="mission-icon">🧤</div>
                    <h3>Collecte</h3>
                    <p>L'action de collecte est au cœur de notre engagement. Nous organisons régulièrement des sorties de nettoyage sur l'Erdre et sur la Loire, en mobilisant des bénévoles et en utilisant des méthodes adaptées aux milieux aquatiques.</p>
                </div>
                <div class="mission-card hidden">
                    <div class="mission-icon">🤝</div>
                    <h3>Collaboration</h3>
                    <p>Nous travaillons main dans la main avec les autres acteurs du territoire : associations locales, collectivités, usagers des cours d'eau. C'est ensemble que nous pourrons avoir un impact significatif sur la qualité de nos rivières.</p>
                </div>
                <div class="mission-card hidden">
                    <div class="mission-icon">📝</div>
                    <h3>Documentation</h3>
                    <p>Nous observons et documentons l'état de nos rivières pour mieux comprendre les problématiques. Ces observations nous permettent d'adapter nos actions et de partager notre expérience avec d'autres acteurs engagés.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Events Section -->
    <section id="events">
        <div class="container">
            <h2 class="section-title">Événements à venir</h2>
            <div class="events-list hidden">
                <div class="event-card hidden">
                    <h4 class="event-date">Prochainement</h4>
                    <h3 class="event-title">Première Éco-Navigation avec La Toue</h3>
                    <p class="event-description">Venez découvrir notre nouvelle formule de nettoyage de l'Erdre à bord de La Toue. Une expérience unique alliant action écologique et découverte du patrimoine fluvial.</p>
                    <a href="#contact" class="read-more">Se tenir informé</a>
                </div>
                <div class="event-card hidden">
                    <h4 class="event-date">À venir</h4>
                    <h3 class="event-title">Rendez-vous de l'Erdre</h3>
                    <p class="event-description">Retrouvez-nous lors des Rendez-vous de l'Erdre pour échanger sur nos actions et découvrir comment participer à la préservation de nos rivières.</p>
                    <a href="#contact" class="read-more">Plus d'informations</a>
                </div>
                <div class="event-card hidden">
                    <h4 class="event-date">En continu</h4>
                    <h3 class="event-title">Collectes sur l'Erdre</h3>
                    <p class="event-description">Nos actions de collecte se poursuivent régulièrement sur l'Erdre. Contactez-nous pour connaître les prochaines dates et rejoindre notre équipe de bénévoles.</p>
                    <a href="#contact" class="read-more">Nous contacter</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Missions Section -->
    <section id="mission">
        <div class="container">
            <h2 class="section-title">Nos missions</h2>
            <div class="mission-cards">
                <div class="mission-card hidden">
                    <div class="mission-icon">🌊</div>
                    <h3>Actions concrètes</h3>
                    <p>Notre priorité est d'agir sur le terrain pour réduire la pollution par les déchets dans nos cours d'eau. Nous menons des actions régulières de nettoyage sur l'Erdre et la Loire, en développant des solutions pratiques comme les bacs à déchets pour impliquer tous les usagers des rivières.</p>
                </div>
                <div class="mission-card hidden">
                    <div class="mission-icon">🌱</div>
                    <h3>Sensibilisation</h3>
                    <p>En participant à des événements locaux comme les Rendez-vous de l'Erdre, nous souhaitons sensibiliser le public aux enjeux de la pollution des rivières. Nous privilégions une approche positive et constructive, montrant qu'il est possible d'agir à son échelle.</p>
                </div>
                <div class="mission-card hidden">
                    <div class="mission-icon">🤝</div>
                    <h3>Collaboration</h3>
                    <p>Nous souhaitons contribuer à la dynamique locale en collaborant avec les autres acteurs du territoire - associations, collectivités, usagers des cours d'eau. Notre approche se veut complémentaire des actions existantes, en apportant des solutions innovantes comme les BADS.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Activities Section -->
    <section id="activities">
        <div class="container">
            <h2 class="section-title">Nos activités phares</h2>
            <div class="activities-grid">
                <div class="activity-card hidden">
                    <div class="activity-image">
                        <img src="bac.jpg" alt="Bac à déchets sauvages" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <div class="activity-content">
                        <h3>Projet BADS - Bacs à Déchets Sauvages</h3>
                        <p>Nous déployons un réseau de <span class="highlight-blue">Bacs à Déchets Sauvages (BADS)</span> sur les rivières de Nantes Métropole, en commençant par l'Erdre. Ces bacs, installés à des points stratégiques, permettent aux plaisanciers, sportifs nautiques et riverains de participer activement à la collecte des déchets flottants.  <span class="highlight-blue">Rejoignez le mouvement BADS et devenez acteur de la propreté de nos rivières !</span></p>
                        <a href="#contact" class="read-more">Participer au projet BADS</a>
                    </div>
                </div>
                <div class="activity-card hidden">
                    <div class="activity-image">
                        <img src="bateau.png" alt="Éco-Navigation sur l'Erdre" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <div class="activity-content">
                        <h3>Éco-Navigations : Nettoyons en Explorant</h3>
                        <p>Vivez une expérience unique avec nos <span class="highlight-blue">Éco-Navigations</span> ! Ces sorties en bateau, canoë ou paddle combinent découverte du patrimoine naturel et culturel de nos rivières et actions de nettoyage. <span class="highlight-blue">Explorez l'Erdre, la Loire et leurs affluents tout en contribuant concrètement à leur dépollution.</span> Une manière conviviale et originale de s'engager pour l'environnement.</p>
                        <a href="#contact" class="read-more">S'inscrire à une Éco-Navigation</a>
                    </div>
                </div>
                <div class="activity-card hidden">
                    <div class="activity-image">
                        <img src="sensibilisation.jpg" alt="Sensibilisation et éducation" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <div class="activity-content">
                        <h3>Sensibilisation : Partager et Échanger</h3>
                        <p>Lors d'événements comme les <span class="highlight-blue">Rendez-vous de l'Erdre</span>, nous allons à la rencontre du public pour échanger sur l'état de nos rivières. Notre approche se veut simple et accessible : nous partageons nos observations de terrain et montrons comment chacun peut, s'il le souhaite, participer à la préservation de nos cours d'eau.</p>
                        <a href="#contact" class="read-more">Nous rencontrer</a>
                    </div>
                </div>
                <div class="activity-card hidden">
                    <div class="activity-image">
                        <img src="collaboration.jpg" alt="Collaboration avec les acteurs locaux" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <div class="activity-content">
                        <h3>Collaboration avec les Acteurs Locaux</h3>
                        <p>Nous souhaitons travailler avec l'ensemble des acteurs engagés dans la protection des rivières nantaises. <span class="highlight-blue">Notre rôle est de participer à la réflexion collective</span> et d'apporter notre expérience de terrain pour contribuer à la mise en place de solutions durables.</p>
                        <a href="#contact" class="read-more">Échanger avec nous</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Intervention Areas Section -->
    <section id="areas">
        <div class="container">
            <h2 class="section-title">Zones d'intervention</h2>
            <div class="areas-container">
                <div class="area-card hidden">
                    <div class="area-header">
                        <div class="area-icon">🌍</div>
                        <h3>L'Erdre : Notre Zone d'Action Principale</h3>
                    </div>
                    <p>Actuellement, nos actions se concentrent sur l'Erdre et ses rives. C'est ici que nous développons et testons nos solutions, comme les bacs à déchets flottants, et que nous organisons régulièrement des collectes. Cette rivière est notre terrain d'apprentissage et d'innovation.</p>
                </div>
                <div class="area-card hidden">
                    <div class="area-header">
                        <div class="area-icon">🏞️</div>
                        <h3>La Loire : Des Actions Ponctuelles</h3>
                    </div>
                    <p>Nous menons également des actions ponctuelles sur la Loire. Ces interventions nous permettent d'appréhender des défis différents et d'étendre progressivement notre impact. À terme, nous aimerions renforcer notre présence sur ce fleuve emblématique.</p>
                </div>
                <div class="area-card hidden">
                    <div class="area-header">
                        <div class="area-icon">💧</div>
                        <h3>Une Vision d'Avenir</h3>
                    </div>
                    <p>Notre objectif à long terme est de contribuer à la protection de l'ensemble du réseau hydrographique nantais. Nous avançons pas à pas, en consolidant nos actions et en développant des partenariats avec les acteurs locaux déjà présents sur ces territoires.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Partners Section -->
    <section id="partners">
        <div class="container">
            <h2 class="section-title">Nos Partenaires</h2>
            <div class="partners-grid hidden">
                <a href="https://www.federation-des-amis-de-l-erdre.org//" target="_blank">
                    <img src="amis-erdre.png" alt="Logo Fédération des Amis de l'Erdre" class="partner-logo">
                </a>
                <a href="https://www.ecopole.org/" target="_blank">
                    <img src="ecopole.png" alt="Logo ECOPOLE" class="partner-logo">
                </a>
                <a href="https://www.helloasso.com/associations/swim-for-the-planet" target="_blank">
                    <img src="swim.jpg" alt="Logo Swim for the Planet" class="partner-logo">
                </a>
                <a href="https://metropole.nantes.fr/" target="_blank">
                    <img src="nantes.png" alt="Logo Nantes Métropole" class="partner-logo">
                </a>
                <a href="https://www.ports-nantes.fr/" target="_blank">
                    <img src="nge.png" alt="Logo NGE - Ports de Nantes" class="partner-logo">
                </a>
                <a href="https://www.ace-nantes.fr/" target="_blank">
                    <img src="ace.png" alt="Logo ACE" class="partner-logo">
                </a>
                <a href="https://oceanfest.fr/" target="_blank">
                    <img src="ocean-fest-logo.jpg" alt="Logo Océan Fest" class="partner-logo">
                </a>
            </div>
        </div>
    </section>


    <!-- Contact Section -->
    <section id="contact">
        <div class="container">
            <h2 class="section-title">Contactez-nous</h2>
            <div class="contact-container">
                <div class="contact-info hidden">
                    <h3>Informations de contact</h3>
                    <p>N'hésitez pas à nous contacter pour toute question, demande de partenariat, proposition de bénévolat ou toute autre demande.</p>
                    <div class="contact-item">
                        <div class="contact-icon">📞</div>
                        <div class="contact-details">
                            <h4>Téléphone</h4>
                            <p><a href="tel:0676695026">06 76 69 50 26</a></p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-icon">✉️</div>
                        <div class="contact-details">
                            <h4>Email</h4>
                            <p><a href="mailto:clean.eau.nantes@lilo.org">clean.eau.nantes@lilo.org</a></p>
                        </div>
                    </div>
                    <div class="contact-item">
                        <div class="contact-icon">📍</div>
                        <div class="contact-details">
                            <h4>Adresse postale</h4>
                            <p>Péniche le Sémaphore, Quai Malakoff<br>44000 Nantes, France</p>
                            <p>(Siège social - pour correspondance)</p>
                        </div>
                    </div>
                    <div class="social-media">
                        <h3 class="social-title">Suivez-nous sur les réseaux sociaux</h3>
                        <div class="social-icons">
                            <a href="https://www.instagram.com/clean.eau.nantes/" class="social-icon" target="_blank" aria-label="Instagram"><i class="fab fa-instagram"></i><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. --><path fill="currentColor" d="M224,202.7c-34.7,0-63-28.3-63-63s28.3-63,63-63,63,28.3,63,63S258.7,202.7,224,202.7Zm144-24.7V480H80V178L149.1,111h77.8L368,178ZM408,72V408c0,13.3-10.7,24-24,24H64c-13.3,0-24-10.7-24-24V72c0-13.3,10.7-24,24-24H384C397.3,48,408,58.7,408,72Z"/></svg></a>
                            <!-- Add other social media icons here if available -->
                        </div>
                    </div>
                </div>
                <div class="contact-form hidden">
                    <h3>Formulaire de contact</h3>
                    <form action="#" method="post">
                        <div class="form-group">
                            <label for="name">Nom</label>
                            <input type="text" id="name" name="name" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" name="email" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="message">Message</label>
                            <textarea id="message" name="message" rows="5" class="form-control" required></textarea>
                        </div>
                        <button type="submit" class="submit-btn">Envoyer</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- Support Section -->
    <section id="support" style="background-color: var(--gray-bg);">
        <div class="container">
            <h2 class="section-title">Soutenez notre action</h2>
            <div class="about-content">
                <div class="about-text hidden">
                    <h3>Votre soutien est essentiel</h3>
                    <p>Votre soutien est précieux pour nous permettre de poursuivre et développer nos actions sur l'Erdre et la Loire. Vous pouvez contribuer de différentes manières :</p>
                    <h4>Faire un don</h4>
                    <p>Votre don financier, même modeste, nous aide concrètement à financer l'achat de matériel pour les collectes et le déploiement du projet BADS (bacs à déchets). Vous pouvez faire un don en ligne via la plateforme HelloAsso, partenaire solidaire des associations :</p>
                    <p><a href="https://www.helloasso.com/associations/clean-conservation-de-l-eau-a-nantes/formulaires/1" class="cta-button secondary" target="_blank">Faire un don sur HelloAsso</a></p>

                    <h4>Devenir bénévole</h4>
                    <p>Rejoignez notre équipe sur le terrain ! Nous avons besoin de bénévoles pour nos collectes de déchets sur l'Erdre et la Loire, les Éco-Navigations, et pour nous aider à entretenir les BADS. Chaque contribution compte, quelle que soit sa forme. Contactez-nous pour connaître les prochaines opportunités de bénévolat.</p>
                    <p><a href="#contact" class="cta-button secondary">Devenir bénévole</a></p>
                </div>
                <div class="about-image hidden">
                    <img src="visuel-clean.png" alt="Soutenez C.L.E.A.N.">
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container footer-content">
            <div class="footer-column">
                <a href="#" class="footer-logo">
                    <img src="Clean-logo-blanc.png" alt="C.L.E.A.N. Logo" />
                </a>
                <p class="footer-desc">Association pour la Conservation de l'Eau à Nantes et sa région. Ensemble, agissons pour la protection de nos cours d'eau et de notre environnement, vers l'objectif Zéro Déchet.</p>
            </div>
            <div class="footer-column">
                <h4 class="footer-title">Liens utiles</h4>
                <ul class="footer-links">
                    <li><a href="#about">À propos</a></li>
                    <li><a href="#approach">Notre Approche</a></li>
                    <li><a href="#events">Événements</a></li>
                    <li><a href="#mission">Nos missions</a></li>
                    <li><a href="#activities">Nos activités</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#support">Soutenez-nous</a></li>
                    <li><a href="#partners">Partenaires</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h4 class="footer-title">Contact</h4>
                <ul class="footer-links">
                    <li><a href="mailto:clean.eau.nantes@lilo.org">clean.eau.nantes@lilo.org</a></li>
                    <li><a href="tel:0676695026">06 76 69 50 26</a></li>
                    <li>Péniche le Sémaphore, Quai Malakoff, 44000 NANTES, FRANCE</li>
                </ul>
            </div>
        </div>
        <p class="copyright">© 2024 C.L.E.A.N. - Conservation de l'Eau À Nantes. Tous droits réservés.</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>