forked from zoub-a11y/zoub-a11y
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
273 lines (240 loc) · 12.8 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
<!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.0">
<meta name="description" content="Site web Linktr.ee de Zoubeir Haffez">
<title>Linktree Zoubeir Haffez</title>
<link rel="shortcut icon" type="image/png" href="images/ZoubeirLogo.png">
<!-- Lien CSS -->
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
<!-- HEADER -->
<header>
<!-- Boutons en haut à droite -->
<section class="boutonHaut">
<a href="ZoubeirHaffezContact.vcf">
<button class="contact" aria-label="Telecharger la fiche contact" title="Fiche contact pour retrouver mes coordonnées" tabindex="0">
<!-- Icône pour le bouton Contact -->
<img src="images/logo/boutonRond/contact.svg" alt="Contact">
</button>
</a>
<a href='javascript:void(favoris());' rel='shortcut'>
<button class="favori" aria-label="Ajouter la page aux favoris" title="Favoriser cette page pour un accès facile ultérieur" tabindex="1">
<!-- Icône pour le bouton Favori -->
<img src="images/logo/boutonRond/favori.svg" alt="Favori">
</button>
</a>
<button id="shareButton" class="partager" aria-label="Partager le site" title="copier le lien ou l'envoyer" tabindex="2" onclick="shareOrCopyLink()">
<!-- Icône pour le bouton Partager -->
<img src="images/logo/boutonRond/partager.svg" alt="Partager">
<a href="https://zoub-a11y.github.io/zoub-a11y/" id="lien"></a>
<textarea id="zone-texte" style="position: absolute; left: -9999px;"></textarea>
</button>
</section>
<!-- Titre/Nom -->
<div class="nom">
<!-- Titre principal -->
<h1 title="Mon nom" tabindex="3">Zoubeir Haffez</h1>
</div>
<!-- Bouton switch darkmode/lightmode -->
<div class="blocSwitch">
<label class="switch">
<input type="checkbox" id="themeSwitch" title="Passer du mode clair au mode sombre" aria-label="Passer du mode clair au mode sombre" tabindex="4" />
<span></span>
</label>
</div>
</header>
<!-- MAIN CONTENT -->
<main>
<div class="contenu">
<!-- Présentation écrite -->
<div class="presentation">
<!-- Titre de la présentation -->
<h2 tabindex="5">Défenseur de l'accessibilité</h2>
<!-- Texte de présentation -->
<div class="texte" tabindex="6">
<p>
Réalisateur, Documentariste, Reporter et Journaliste spécialisé
dans les domaines des nouvelles technologies et de
l'accessibilité.
</p>
<br />
<p>
J'évolue dans le milieu de l'audiovisuel et du cinéma depuis 15
ans, passionné d'image malgré mon handicap visuel, j'ai suivi une
formation chez JARIS, puis une alternance (EICAR) au sein du
groupe M6. Je réalise et monte des vidéos à mon compte depuis
2018, tout en gérant ma chaine YouTube orientée sur
l'accessibilité. Je publie régulièrement des newsletters et des
podcasts.
</p>
<br />
<p>
Je souhaite sensibiliser les entreprises et les collectivités sur
les questions de l'accessibilité pour les personnes en situation
de handicap dans des domaines aussi divers que les nouvelles
technologies, l'accès aux infrastructures, ou tout simplement la
vie au quotidien. Je propose une expertise #accessibility #a11y
sous la forme d'interventions, d'ateliers et la mise en place de
"Bilans" auprès des différents acteurs du secteur.
</p>
</div>
</div>
<!-- Fin de la présentation écrite -->
<!-- Image de Zoubeir -->
<div class="logoZoubeir">
<img src="images/ZoubeirLogo.png" alt="LogoZoubeirV" title="Image de Zoubeir Haffez" aria-label="Photographie de Zoubeir Haffez qui fait un cadre avec ses mains" tabindex="7">
</div>
<!-- Boutons réseaux sociaux -->
<div class="boutonReseaux">
<a href="https://instagram.com/zoubeir.haffez?igshid=MzRlODBiNWFlZA==" target="_blank">
<button class="instagram" aria-label="Voir mon instagram" title="Lien vers ma page instagram" tabindex="8">
<!-- Icône pour le bouton Instagram -->
<img src="images/logo/boutonReseau/instagram.svg" alt="instagram">
</button>
</a>
<a href="https://twitter.com/ZoubeirH" target="_blank">
<button class="twitter" aria-label="Voir mon twitter" title="Lien vers ma page Twitter" tabindex="9">
<!-- Icône pour le bouton Twitter -->
<img src="images/logo/boutonReseau/twitter.svg" alt="twitter">
</button>
</a>
<a href="https://fr.linkedin.com/in/zoubeirhaffez" target="_blank">
<button class="linkedin" aria-label="Voir mon linkedin" title="Lien vers ma page linkedin" tabindex="10">
<!-- Icône pour le bouton LinkedIn -->
<img src="images/logo/boutonReseau/linkedin.svg" alt="linkedin">
</button>
</a>
<a href="https://www.facebook.com/zoubeir.haffez" target="_blank">
<button class="facebook" aria-label="Voir mon facebook" title="Lien vers ma page facebook" tabindex="11">
<!-- Icône pour le bouton Facebook -->
<img src="images/logo/boutonReseau/facebook.svg" alt="facebook">
</button>
</a>
</div>
</div>
<!-- FIN de la présentation -->
<!-- BLOC SAPIN DE NOEL -->
<div class="textePublication">
<!-- Titre du bloc -->
<h2 tabindex="12">Ne ratez aucune de mes publications</h2>
</div>
<!-- Boutons vers les liens -->
<div class="blocBoutonLien">
<!-- Bouton vers YouTube -->
<button class="boutonLien" aria-label="Lien vers ma page YouTube" title="Lien vers Youtube" tabindex="13">
<a href="https://www.youtube.com/@zoubeirhaffez/featured" target="_blank">
<div class="youtube">
<!-- Icône pour YouTube -->
<img src="images/logo/logoLien/youtube.svg" alt="Youtube">
<p>YouTube</p>
</div>
</a>
</button>
<!-- Bouton vers Spotify -->
<button class="boutonLien" aria-label="Lien vers ma page Spotify" title="Lien vers Spotify" tabindex="14">
<a href="https://open.spotify.com/show/0gped3xtNvt3WDlIbhkVvu" target="_blank">
<div class="spotify">
<!-- Icône pour Spotify -->
<img src="images/logo/logoLien/spotify.svg" alt="Spotify">
<p>Spotify</p>
</div>
</a>
</button>
<!-- Bouton vers les podcasts -->
<button class="boutonLien" aria-label="Lien vers mes podcasts" title="Lien vers mes podcasts" tabindex="15">
<a href="https://podcasts.apple.com/us/podcast/zcast-dans-mes-baskets-lepodcast/id1572062730" target="_blank">
<div class="podcast">
<!-- Icône pour les podcasts -->
<img src="images/logo/logoLien/podcast.svg" alt="podcast">
<p>Podcast</p>
</div>
</a>
</button>
<!-- Bouton vers les podcasts ZCAST -->
<button class="boutonLien" aria-label="Lien vers mes podcasts ZCAST" title="Lien vers mes podcasts ZCAST" tabindex="16">
<a href="https://anchor.fm/zoubeir-haffez" target="_blank">
<div class="zcast">
<p>ZCAST - Le Podcast</p>
</div>
</a>
</button>
<!-- Bouton vers Substack -->
<button class="boutonLien" aria-label="Lien vers mon substack" title="Lien vers mon substack" tabindex="17">
<a href="https://zoubeir.substack.com/" target="_blank">
<div class="substack">
<!-- Icône pour Substack -->
<img src="images/logo/logoLien/substack.svg" alt="substack">
<p>Substack</p>
</div>
</a>
</button>
<!-- Bouton vers Clubhouse -->
<button class="boutonLien" aria-label="Lien vers mon clubhouse" title="Lien vers mon clubhouse" tabindex="18">
<a href="https://www.clubhouse.com/@zoubeir.h" target="_blank">
<div class="clubhouse">
<!-- Icône pour Clubhouse -->
<img src="images/logo/logoLien/clubhouse.svg" alt="clubhouse">
<p>Clubhouse</p>
</div>
</a>
</button>
<!-- Bouton Le digital pour tous -->
<button class="boutonLien" aria-label="Le digital pour tous" title="Le digital pour tous" tabindex="19">
<a href="https://ledigitalpourtous.fr/author/zoubeirh/" target="_blank">
<div class="digital">
<p>Le digital pour tous</p>
</div>
</a>
</button>
<!-- Bouton vers GitHub -->
<button class="boutonLien" aria-label="Lien vers mon Github" title="Lien vers mon Github" tabindex="20">
<a href="https://github.com/zoub-a11y" target="_blank">
<div class="github">
<!-- Icône pour GitHub -->
<img src="images/logo/logoLien/github.svg" alt="github">
<p>Github</p>
</div>
</a>
</button>
<!-- Bouton vers Uncut Network -->
<button class="boutonLien" aria-label="Lien vers mon Uncut" title="Uncut Network" tabindex="21">
<a href="https://uncut.network/user/4294970274" target="_blank">
<div class="uncut">
<img src="images/logo/logoLien/uncut.svg" alt="uncut">
<p>Uncut Network</p>
</div>
</a>
</button>
</div>
<!-- Fin des boutons pour les liens -->
<!-- Bouton haut de page -->
<div class="boutonHautPage" onclick="topFunction()" aria-label="Revenir en haut de la page" title="Bouton pour revenir en haut de page" tabindex="22">
<!-- Icône pour le bouton haut de page -->
<img src="images/boutonHautPage/boutonHautLight.svg" alt="haut de page">
</div>
<!-- Fin bouton haut de page -->
</main>
<!-- FOOTER -->
<footer>
<!-- Liens du footer -->
<div class="listeFooter">
<a href="CGU.html" aria-label="Conditions générales d'utilisation" title="Conditions générales d'utilisation" tabindex="23">CGU</a>
<a href="#" aria-label="En savoir plus sur l'accessibilité" title="En savoir plus sur l'accessibilité" tabindex="24">Accessibilité</a>
<a href="contact.html" aria-label="Me contacter" title="Lien vers un formulaire de contact" tabindex="25">Me contacter</a>
</div>
<!-- Mention légale -->
<div class="copyright">
<p aria-label="Mention Légales et Droit d'auteur" title="Mentions légales et droit d'auteur" tabindex="26">
Mentions légales | © Copyright 2023 | Version 2.02
</p>
</div>
</footer>
<!-- Lien vers le fichier JS pour les animations-->
<script src="script.js"></script>
</body>
</html>