-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
338 lines (321 loc) · 21.1 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
331
332
333
334
335
336
337
338
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>#AhTaSante</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<!-- Google font -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans&family=Karla&display=swap" rel="stylesheet">
<!-- fontawesome script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/e206f53c0e.js" crossorigin="anonymous"></script>
<!-- scripts flip -->
<link rel="stylesheet" href="jquery.flip-quote.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<!---------------------------------------------- HEADER --------------------------------------------->
<section class="container-fluid">
<div class="row">
<nav class="col navbar navbar-expand-lg fixed-top">
<a class="navbar-brand ml-5" href="index.html">
<!-- <img src="" alt="logo atasante" width="140" height="140"></a> -->
<a class="nav-link" href="index.html">#AHTASANTE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fas fa-bars text-custom-color"></i></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<div class="row d-flex justify-content-end ml-5">
<ul class="navbar-nav ml-5">
<!-- <li class="nav-item active ml-5">
<a class="nav-link" href="index.html">#AHTASANTE</a>
</li> -->
<li class="nav-item ml-5">
<a class="nav-link" href="#93Express">93-EXPRESS</a>
</li>
<li class="nav-item ml-5">
<a class="nav-link" href="#gettUp">GETT'UP</a>
</li>
<li class="nav-item ml-5">
<a class="nav-link" href="#projet">PROJET</a>
</li>
<li class="nav-item ml-5">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</section>
<!---------------------------------------------- FIN HEADER ---------------------------------->
<!---------------------------------------------- SECTION 93 EXPRESS------------------------------------>
<section class="container-fluid pt-5" >
<div class="row d-flex justify-content-center pt-5" id="home">
<img class="imgAccueil img-fluid" src="/images/93.jpg" alt="93Express">
</div>
</section>
<!-- la section Qui sommes-nous -->
<section pt-5>
<div id="93Express"></div>
<div class="container mt-5">
<div class="row d-flex">
<div class="col-12">
<h2>QUI SOMMES-NOUS ?</h2>
<p class="text-justify">Nous sommes des jeunes du programme éducatif européen <a href="https://ghettup.fr/les-ateliers-93-express/">93-EXPRESS</a> de 11 à 24 ans de différents profils étudiants (collégiens, lycéens et étudiants) qui développons un projet autour de la santé mentale des jeunes durant la crise sanitaire.
</p>
</div>
</div>
</div>
</section>
<!-- la section Qu'est-ce-que 93-Express ? -->
<section >
<div class="container mt-5">
<div class="row d-flex">
<div class="col-12">
<h2>QU'EST-CE QUE 93-EXPRESS ?</h2>
<p class="text-justify">Les ateliers <a href="https://ghettup.fr/les-ateliers-93-express/">93-EXPRESS</a> by <a href="https://ghettup.fr/">GETT’UP</a> permettent à des jeunes collégiens et lycéens de la Seine-Saint-Denis d’entrer en connexion via Skype avec leurs homologues à travers le monde pour parler musique, cinéma, lifestyle mais aussi
actualité, économie, politique et tous les sujets brûlants de notre société.
Le programme alterne les séances d’échanges et de débat et les formations pour permettre aux jeunes de prendre confiance en eux et de s’ouvrir tout en développant des compétences qui leur serviront en toutes circonstances et tout au long
de leur vie.</p>
<p>A la fin du cycle les participants restituent leurs apprentissages à travers le montage d’un projet local. Âgés de 14 à 19 ans, nous souhaitons apporter à ces jeunes un voyage initiatique au fond d’eux-mêmes et au bout de leurs
potentialités.</p>
</div>
</div>
</div>
</section>
<div id="gettUp"></div>
<section class="container-fluid">
<div class="row d-flex justify-content-center pt-5">
<img class="imgBanniere img-fluid" src="images/banniere.jpeg" alt="Banniere">
</div>
</section>
<!-- la section La vision Gett'up -->
<section >
<div class="container mt-5">
<div class="row d-flex">
<div class="col-12">
<h2>LA VISION GETT'UP</h2>
<p class="text-justify"><a href="https://ghettup.fr/">GETT’UP</a> est un réseau de jeunes acteurs de changement qui travaillent à la revalorisation de l’image des quartiers auprès du grand public mais surtout auprès de leurs habitantes eux-mêmes. Nous souhaitons créer les conditions pour que les jeunes des quartiers populaires se valorisent, se réalisent et prennent leur place dans la société. Nous voulons inspirer, former, faire émerger et mettre en réseau des acteurs et actrices de changements issus des quartiers populaires, parce que le monde en a besoin.</p>
</div>
</div>
</div>
</section>
<!---------------------------------------- PROJET ---------------------------------------->
<div id="projet"></div>
<div class="container py-5">
<div class="row">
<div class ="col-lg-7 col-sm-12">
<img class="img-fluid" src="images/events.jpeg" alt="flyer évènement" width="600px">
</div>
<div class ="col-lg-5 col-sm-12">
<img class="img-fluid" src="images/brainstorming.jpeg" alt="brainstorming instagram" width="405px">
</div>
</div>
</div>
<div class="container text-justify pb-5">
<h2>PROJET :</h2>
<p>Dans le cadre du <a href="https://ghettup.fr/les-ateliers-93-express/">93-EXPRESS</a>, notre programme d'éducation populaire et citoyenne à destination des collégiens et lycéens, une partie de la promotion 2020 a choisi de créer un espace de dialogue sur la question de la santé mentale des étudiants en période de crise.
Face aux difficultés économiques et sociales que beaucoup d'entre eux ont rencontrés, amenant parfois à des situations tragiques, les jeunes ont décidé de réagir en invitant des professionnels de la santé et des étudiants pour discuter ensemble des solutions à adopter pour préserver sa santé mentale mais également repérer et accompagner les étudiants victimes de dépression, de stress ou d'anxiété.
</p>
<h3 class="font-weight-bold">Pourquoi ce projet ?</h3>
<p>Nous avons décidé de faire ce projet car c’est un projet qui nous concerne
directement non seulement parce que nous avons vécu l’isolement qu’ont pu
provoquer les cours à distance mais également parce que nous avons vu la santé
mentale de certains de nos camarades tomber au plus bas.
C’est pourquoi nous voulions discuter de ce phénomène afin de le comprendre mais
également de le prévenir grâce aux conseils des professionnels de santé : comment
détecter des symptômes de dépression ou comment accompagner, à notre échelle,
des personnes qui en sont victimes ?
</p>
<h3 class="font-weight-bold">Nos objectifs ?</h3>
<p>Nous souhaiterions ouvrir la parole sur ce sujet en récoltant divers témoignages d’étudiants ayant plus ou moins bien vécu les cours à distance et la crise sanitaire mais également donner les clés aux étudiants pour surmonter cette épreuve le mieux possible (les étudiants universitaire n’ayant pour l’instant aucune perspective de reprise de cours en présentiels). L’explication des professionnels de santé, à savoir une psychologue et une coach de vie, sur le témoignage des jeunes permettra à ceux qui ont témoigné comme au public de comprendre comment préserver sa santé mentale.</p>
</div>
<!---------------------------------------- FIN PROJET ---------------------------------------->
<!---------------------------------------- CAROUSEL---------------------------------------->
<div class="container pb-5">
<div class="row">
<div class="col-md-9 mx-auto">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="0">
<!-- Carousel indicators -->
<!-- <ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol> -->
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-sm-4">
<div class="img-box"><img src="/images/img_1.jpg" class="img-fluid" alt=""></div>
</div>
<div class="col-sm-4">
<div class="img-box"><img src="/images/img_2.jpg" class="img-fluid" alt=""></div>
</div>
<div class="col-sm-4">
<div class="img-box"><img src="/images/img_3.jpg" class="img-fluid" alt=""></div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm-4">
<div class="img-box"><img src="/images/img_4.jpg" class="img-fluid" alt=""></div>
</div>
<div class="col-sm-4">
<div class="img-box"><img src="/images/img_5.jpg" class="img-fluid" alt=""></div>
</div>
<div class="col-sm-4">
<div class="img-box"><img src="/images/img_6.jpg" class="img-fluid" alt=""></div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm-4">
<div class="img-box"><img src="/images/img_7.jpg" class="img-fluid" alt=""></div>
</div>
<div class="col-sm-4">
<div class="img-box"><img src="/images/img_8.jpg" class="img-fluid" alt=""></div>
</div>
<div class="col-sm-4">
<div class="img-box"><img src="/images/img_9.jpg" class="img-fluid" alt=""></div>
</div>
</div>
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<i class="fa fa-chevron-right"></i>
</a>
</div>
</div>
</div>
</div>
<!---------------------------------------- EVENEMENT --------------------------->
<div class="container text-justify">
<h2>Le déroulé de l’événement</h2>
<p>Le 10 avril de 14h00 à 16h00 a eu lieu sur ZOOM un événement organisé par les jeunes du <a href="https://ghettup.fr/les-ateliers-93-express/">93-EXPRESS</a> intitulé la santé mentale des étudiants en temps de crise.
Les jeunes, <a href="https://ghettup.fr/les-ateliers-93-express/">93-EXPRESS</a> et l’association GHETT’UP ont débuté ce meet virtuel en se présentant et en exposant le projet, six jeunes ont ensuite partagé leurs témoignages personnels.</p>
<p>Les témoignages des jeunes ont été expliqué d’un point de vue professionnel et des conseils ont été donné afin de préserver sa santé mentale. Professionnels et jeunes ont pu échanger sur des thèmes liés au COVID.</p>
<p>En effet, depuis le début de la crise sanitaire, force est de constater que 75% des 15 - 20 ans ont perdu en motivation et se cherchent. Ou encore le troublant ratio de 1/5 des étudiants présentent des troubles dépressifs.</p>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<ul>
<p>Ces échanges ont mené les professionnels à répondre à des questions telles que :</p>
<li>Qu'est-ce qu'un trouble dépressif ?</li>
<li>Qu’est-ce que l'anxiété ? </li>
<li>Qu'est-ce qu'est le stress ?</li>
<li>Quelle est la différence entre une personne stressée et une personne anxieuse ? </li>
<li>Quels sont les remèdes face à nos émotions ?</li>
</ul>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 mb-3">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="images/mental_health.jpeg" alt="mental health matter" height="310px" width="540px">
</div>
<div class="flip-card-back">
<h1 class="pt-5">Ihsène, 12 ans</h1>
<p class="font-italic p-3">"Sinega, une élève brillante en première année de médecine à la Sorbonne a mis fin à ses jours alors qu’elle venait de fêter ses 18 ans."</p>
</div>
</div>
</div>
</div>
</div>
</div>
<p class="py-3">L’une des conséquences de la perte de motivation est le décrochage scolaire. Les jeunes ont reçu des astuces lorsqu’ils sentent qu’ils sont en train de décrocher que ce soit à cause du travail à distance, d'une perte de motivation ou d'une mauvaise gestion du stress.</p>
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 mb-3 d-flex align-items-center">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img class="img-fluid" src="images/boys_get_sad.jpeg" alt="mental health matter" height="310px" width="540px">
</div>
<div class="flip-card-back">
<h1 class="pt-5">Ihsène, 12 ans</h1>
<p class="p-5">Comment expliquer son geste ?
Combien de Sinega faudra-t-il encore pour agir sur la situation mentale des jeunes ?</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<ul>
<p>Les professionnels ont répondu aux questions suivantes :</p>
<li>« Comment identifier la cause de notre décrochage pour pouvoir mieux y pallier ? Quelles sont les astuces ? »</li>
<li>« Certains jeunes craignent pour leur futur professionnel, quelles seront nos perspectives à la fin de nos études ? »</li>
<li>« Est-ce que le confinement aura des répercutions sur mes études? Aurais-je mon diplôme? Vais-je valider mon année ? Vais-je trouver un stage ? »</li>
</ul>
</div>
</div>
</div>
<p>Les jeunes avaient été suivis en amont afin de mener au mieux leur projet de sensibilisation sur la santé mentale des étudiants durant la période de crise sanitaire « un sujet qui leur tient à cœur ! » affirmait Armelle Mahé, Cheffe de projet pédagogique et culturel chez GHETT’UP.</p>
<p>Le 23 janvier 2021, Armelle Mahé, accompagnait les jeunes avec Tehani Omar dans la gestion du projet durant un atelier organisé par Khadidja Sissoko et Djeinaba Traoré de GHETT’UP dans le cadre du programme <a href="https://ghettup.fr/les-ateliers-93-express/">93-EXPRESS</a>.</p>
<p>« Je suis très fière de participer à ce projet et j'ai hâte de vivre cette aventure avec eux ! » annonçait-elle.</p>
<p class="pb-5">Ce magnifique programme d'échange international réservé aux jeunes de Seine-Saint-Denis repose sur 3 objectifs : l'ouverture culturelle, le développement de l'esprit critique par la connaissance et enfin la prise de confiance en soi, une condition essentielle pour faire des citoyens de demain, des citoyens épanouis.</p>
</div>
<div id="contact"></div>
<!---------------------------------------- CONTACT ---------------------------------------->
<section class="bg" id="contact">
<h2 class="pb-5 text-center font-weight-bold">Contactez-nous !</h2>
<div class="container">
<div class="row d-flex justify-content-center align-items-center">
<div class="col-10">
<form class="pb-5" action="https://formspree.io/" method="POST">
<label>
<input type="text" id="nom" name="nom" placeholder="Nom"required="required">
</label>
<label>
<input type="text" id="prenom" name="prenom" placeholder="Prénom" required="required">
</label>
<label>
<input type="text" id="email" name="email" placeholder="E-mail"required="required">
</label>
<label>
<input type="tel" name="tel" pattern="[0-9]{10}" placeholder="Téléphone"
required="required">
</label>
<textarea id="message" name="message" placeholder="Message">
</textarea>
<button>ENVOYER</button>
</form>
</div>
</div>
</div>
</section>
<!---------------------------------------- GO TO TOP BUTTON ---------------------------------------->
<button onclick="topFunction()" id="goToTop" title="Go to top">Top</button>
<!---------------------------------------- FOOTER ---------------------------------------->
<footer class="container-fluid">
<div class="row d-flex justify-content-between">
<p class="col-md-10">© #AHTASANTE</p>
<div class="col-md-2 d-flex justify-content-around">
<p><a class="fab fa-facebook-square" href="https://www.facebook.com/ghettupfr"></a></p>
<p><a class="fab fa-twitter-square" href="https://twitter.com/ghettup?lang=fr"></a></p>
<p><a class="fab fa-instagram-square" href="https://www.instagram.com/ghettup_/"></a></p>
<p><a class="fab fa-linkedin" href="https://www.linkedin.com/company/ghett%27up/"></a></p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>