Séance 5
Objectifs
Être capable d’intégrer et de décrire des images correctement.
Être capable d’intégrer l’accessibilité dans le code.
Savoir insérer des icônes pour enrichir une interface.
Méthode : Arborescence
Arborescence
Des images ainsi que leurs versions miniatures ont été ajoutées.
Méthode : index.html
1
2
<html lang="fr">
3
4
<head>
5
<meta charset="UTF-8">
6
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
<title>Portfolio de Vincent Vanneste</title>
8
<link rel="stylesheet" href="css/style.css">
9
<link rel="stylesheet" href="css/accueil.css">
10
</head>
11
12
<body>
13
14
<header id="haut" aria-label="En-tête du site">
15
<figure aria-labelledby="figcaption-vv">
16
<img src="images/photo.jpg" alt="Photo de Vincent Vanneste">
17
<figcaption id="figcaption-vv">Vincent Vanneste</figcaption>
18
</figure>
19
20
<h1>Portfolio de Vincent Vanneste</h1>
21
<nav aria-label="Navigation principale">
22
<ul>
23
<li><a href="index.html">Accueil</a></li>
24
<li><a href="projets.html">Projets</a></li>
25
<li><a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a></li>
26
</ul>
27
</nav>
28
29
</header>
30
31
<main>
32
<nav aria-label="Navigation interne à la page">
33
<ul>
34
<li><a href="#about">À propos</a></li>
35
<li><a href="#competences">Compétences</a></li>
36
<li><a href="#experiences">Expériences</a></li>
37
<li><a href="#formations">Formations</a></li>
38
</ul>
39
</nav>
40
41
<!-- À propos -->42
<section id="about" aria-labelledby="titre-about">
43
<h2 class="icon-about" id="titre-about">À propos</h2>
44
<p>Je suis directeur des études du DEUST WMI de Calais et j'enseigne les fondamentaux du développement web
45
(HTML, CSS, JavaScript, PHP). Passionné par la transmission des connaissances, j'accompagne mes
46
étudiants dans l'acquisition des compétences nécessaires pour réussir dans le secteur du numérique.</p>
47
<address role="contentinfo" aria-label="Coordonnées">
48
<dl>
49
<dt>Localisation :</dt>
50
<dd>Calais, France</dd>
51
<dt>Site :</dt>
52
<dd><a href="https://vincent-vanneste.fr/" target="_blank">vincent-vanneste.fr</a></dd>
53
<dt>Email :</dt>
54
<dd><a href="mailto:vincent.vanneste@univ-littoral.fr">vincent.vanneste@univ-littoral.fr</a></dd>
55
</dl>
56
</address>
57
</section>
58
59
60
61
<!-- Compétences -->62
<section id="competences" aria-labelledby="titre-competences">
63
<h2 class="icon-competences" id="titre-competences">Compétences</h2>
64
<ul>
65
<li>HTML</li>
66
<li>CSS</li>
67
<li>Responsive</li>
68
<li>Accessibilité</li>
69
<li>JavaScript</li>
70
<li>PHP • Laravel 11</li>
71
<li>MySQL</li>
72
<li>Git & GitHub</li>
73
</ul>
74
</section>
75
76
77
78
<!-- Expériences -->79
<section id="experiences" aria-labelledby="titre-experiences">
80
<h2 class="icon-experiences" id="titre-experiences">Expériences récentes</h2>
81
<ul>
82
<li>
83
<strong>Enseignant – Licence 1 Informatique</strong><br>
84
Depuis <time datetime="2025">2025</time> •
85
<address>
86
<a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a>
87
</address><br>
88
Introduction à HTML, CSS, JS
89
</li>
90
<li>
91
<strong>Directeur des études – DEUST WMI</strong><br>
92
Depuis <time datetime="2024">2024</time> •
93
<address>
94
<a href="https://www.univ-littoral.fr/" target="_blank">FCU ULCO</a>
95
</address>
96
</li>
97
</ul>
98
</section>
99
100
<!-- Formations -->101
<section id="formations" aria-labelledby="titre-formations">
102
<h2 class="icon-formations" id="titre-formations">Formations</h2>
103
<ul>
104
<li>
105
<strong>Doctorat productique, automatique et informatique industrielle</strong><br>
106
<time datetime="2000">2000</time> •
107
<address>
108
<a href="https://www.univ-lille.fr/" target="_blank">Université de Lille</a>
109
</address>
110
</li>
111
<li>
112
<strong>CAPET Technologie</strong><br>
113
<time datetime="1998">1998</time> •
114
<address>
115
<a href="https://www.iufm-douai.fr/" target="_blank">IUFM Douais</a>
116
</address>
117
</li>
118
</ul>
119
</section>
120
121
</main>
122
123
<footer aria-label="Pied de page">
124
125
<p>© 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés. | <a href="#haut">Haut de page</a></p>
126
127
</footer>
128
129
</body>
130
131
</html>
Rôle des attributs role
L’attribut role indique la fonction ou le rôle sémantique d’un élément pour les technologies d’assistance (lecteurs d’écran, etc.). Il permet à l’utilisateur d’identifier rapidement la structure et la fonction de chaque section du site, même si la balise HTML ne donne pas cette information.
Dans le document :
role="contentinfo"sur<address>:Indique que cet élément contient des informations sur le site ou le contact.
Rôle des attributs ARIA (aria-*)
Les attributs ARIA (Accessible Rich Internet Applications) fournissent des informations supplémentaires aux technologies d’assistance sur la structure ou le contenu d’un élément.
Dans ton document :
aria-label:Sert à donner un nom ou une description explicite à un élément lorsque son rôle ou son contenu n’est pas suffisamment clair.
Exemples :
<header aria-label="En-tête du site">→ décrit le contenu de l’en-tête.<nav aria-label="Navigation principale">→ précise que ce menu est le menu principal du site.<footer aria-label="Pied de page">→ décrit la fonction du pied de page.
aria-labelledby:Permet de lier un élément à un autre élément qui le décrit. L’élément lié fournit la description ou le titre qui sera lu par les lecteurs d’écran.
Exemple :
<figure role="img" aria-labelledby="figcaption-vv"> <img src="images/photo.jpg" alt="Photo de Vincent Vanneste"> <figcaption id="figcaption-vv">Vincent Vanneste</figcaption> </figure>Ici, l’image a pour description le contenu du
<figcaption>identifié parfigcaption-vv.
Résumé pratique
role→ dit quoi est l’élément (en-tête, navigation, image, section, etc.).aria-*→ fournit des détails supplémentaires pour les lecteurs d’écran (nom, description, lien avec un autre élément).
En combinant ces deux attributs, ton site devient beaucoup plus accessible, surtout pour les personnes utilisant des technologies d’assistance.
Méthode : projets.html
1
2
<html lang="fr">
3
4
<head>
5
<meta charset="UTF-8">
6
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
<title>Portfolio - Projets</title>
8
<link rel="stylesheet" href="css/style.css">
9
<link rel="stylesheet" href="css/projets.css">
10
</head>
11
12
<body>
13
14
<header id="haut" aria-label="En-tête du site">
15
<figure aria-labelledby="figcaption-vv">
16
<img src="images/photo.jpg" alt="Photo de Vincent Vanneste">
17
<figcaption id="figcaption-vv">Vincent Vanneste</figcaption>
18
</figure>
19
20
<h1>Portfolio de Vincent Vanneste</h1>
21
<nav aria-label="Navigation principale">
22
<ul>
23
<li><a href="index.html">Accueil</a></li>
24
<li><a href="projets.html">Projets</a></li>
25
<li><a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a></li>
26
</ul>
27
</nav>
28
29
</header>
30
31
<main>
32
<h1>Mes projets</h1>
33
34
<section aria-labelledby="liste-projets">
35
<h2 id="liste-projets">Liste des projets</h2>
36
37
<div class="projets">
38
<article aria-labelledby="titre-projet1">
39
<h3 id="titre-projet1"><a href="projet1.html">Projet 1</a></h3>
40
<figure class='premiere' aria-labelledby="fig-projet1">
41
<img src="images/vignettes/projet1.jpg" alt="Aperçu du Projet 1">
42
<figcaption id="fig-projet1">Aperçu du Projet 1</figcaption>
43
</figure>
44
<p>Un projet qui présente les bases du HTML et de la mise en page.</p>
45
</article>
46
47
<article aria-labelledby="titre-projet2">
48
<h3 id="titre-projet2"><a href="projet2.html">Projet 2</a></h3>
49
<figure aria-labelledby="fig-projet2">
50
<img src="images/vignettes/projet2.jpg" alt="Aperçu du Projet 2">
51
<figcaption id="fig-projet2">Aperçu du Projet 2</figcaption>
52
</figure>
53
<p>Un site en CSS avec une mise en forme responsive adaptée aux mobiles.</p>
54
</article>
55
56
<article aria-labelledby="titre-projet3">
57
<h3 id="titre-projet3"><a href="projet3.html">Projet 3</a></h3>
58
<figure aria-labelledby="fig-projet3">
59
<img src="images/vignettes/projet3.jpg" alt="Aperçu du Projet 3">
60
<figcaption id="fig-projet3">Aperçu du Projet 3</figcaption>
61
</figure>
62
<p>Un mini-site en JavaScript avec des interactions simples.</p>
63
</article>
64
65
<article aria-labelledby="titre-projet4">
66
<h3 id="titre-projet4"><a href="projet4.html">Projet 4</a></h3>
67
<figure aria-labelledby="fig-projet4">
68
<img src="images/vignettes/projet4.jpg" alt="Aperçu du Projet 4">
69
<figcaption id="fig-projet4">Aperçu du Projet 4</figcaption>
70
</figure>
71
<p>Une application web utilisant PHP et MySQL pour gérer des données.</p>
72
</article>
73
74
<article aria-labelledby="titre-projet5">
75
<h3 id="titre-projet5"><a href="projet5.html">Projet 5</a></h3>
76
<figure aria-labelledby="fig-projet5">
77
<img src="images/vignettes/projet5.jpg" alt="Aperçu du Projet 5">
78
<figcaption id="fig-projet5">Aperçu du Projet 5</figcaption>
79
</figure>
80
<p>Un projet complet combinant HTML, CSS, JS et base de données.</p>
81
</article>
82
</div>
83
</section>
84
</main>
85
86
87
<footer aria-label="Pied de page">
88
89
<p>© 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés. | <a href="#haut">Haut de page</a></p>
90
</footer>
91
92
</body>
93
94
</html>
Intérêt principal de <figure>
Sémantique claire :
<figure>signale que l’image a une valeur informative ou illustrative, et que son contenu est autonome par rapport au reste du texte.Les moteurs de recherche et les technologies d’assistance comprennent mieux le rôle de l’image.
Accessibilité améliorée :
Associé à
<figcaption>ouaria-labelledby, un lecteur d’écran peut annoncer la légende de l’image, ce qui aide les utilisateurs malvoyants à comprendre le contenu visuel.
Organisation du contenu :
<figure>permet de regrouper l’image et sa légende dans un seul bloc, pratique pour le style et la mise en page.Le navigateur sait que l’image et sa légende sont liées et peuvent être déplacées ensemble avec CSS si nécessaire.
Indépendance du contenu :
Le contenu d’un
<figure>peut être référencé indépendamment dans le texte, par exemple avec<a href="#id-figure">…</a>.Cela montre que l’image et sa légende ont un sens complet même hors du contexte immédiat.
3. Bonnes pratiques
Toujours fournir un
altdescriptif sur l’image pour l’accessibilité.Utiliser
<figcaption>pour décrire l’image ou donner un titre explicatif.Éviter
<figure>pour des images purement décoratives (dans ce cas,<img>avecalt=""suffit).
Résumé :
Utiliser <figure> avec <figcaption> rend ton contenu plus structuré, sémantique et accessible, et permet aux utilisateurs et moteurs de recherche de comprendre le rôle et le sens de l’image.
Méthode : css/style.css
1
/* ==========================================================================2
CSS Général3
========================================================================== */4
5
/* --- Corps de la page --- */6
body {7
/***************/8
/* Typographie */9
/***************/10
font-family: Arial, sans-serif;
11
/* Définit la police principale du texte */12
color: #333;
13
/* Couleur du texte (gris foncé) */14
15
/****************************/16
/* Couleurs & Arrière-plans */17
/****************************/18
background: #fff;
19
/* Couleur d’arrière-plan blanche */20
21
/**********************/22
/* Boîte & Espacement */23
/**********************/24
margin: 0;
25
/* Supprime la marge par défaut du navigateur */26
}
27
28
/* ==========================================================================29
En-tête (Header)30
========================================================================== */31
32
/* --- Conteneur principal du header --- */33
header {34
/***************/35
/* Typographie */36
/***************/37
text-align: center;
38
/* Centre le contenu du header horizontalement */39
40
/**********************/41
/* Boîte & Espacement */42
/**********************/43
padding: 20px;
44
/* Ajoute de l’espace intérieur (haut/bas/gauche/droite) */45
46
/****************************/47
/* Couleurs & Arrière-plans */48
/****************************/49
background: #f0f0f0;
50
/* Couleur de fond gris clair */51
52
/************/53
/* Bordures */54
/************/55
border-bottom: 2px solid #ddd;
56
/* Ligne grise en bas du header */57
}
58
59
/* --- Figure (photo & nom) --- */60
header figure {
61
/**********************/62
/* Boîte & Espacement */63
/**********************/64
margin: 0;
65
/* Supprime la marge par défaut de la balise figure */66
display: inline-block;
67
/* Permet de garder la figure à côté d’autres éléments */68
69
/***************/70
/* Typographie */71
/***************/72
text-align: center;
73
/* Centre le contenu de la figure (image + légende) */74
}
75
76
/* --- Image de la figure --- */77
header figure img {
78
/**************/79
/* Dimensions */80
/**************/81
width: 150px;
82
/* Largeur fixe de l’image */83
height: auto;
84
/* Hauteur automatique (conserve les proportions) */85
86
/************/87
/* Bordures */88
/************/89
border-radius: 50%;
90
/* Rend l’image parfaitement ronde */91
border: 3px solid #0066cc;
92
/* Bordure bleue autour de la photo */93
}
94
95
/* --- Légende de la figure --- */96
header figure figcaption {
97
/**********************/98
/* Boîte & Espacement */99
/**********************/100
margin-top: 8px;
101
/* Espace au-dessus de la légende */102
103
/***************/104
/* Typographie */105
/***************/106
font-size: 1rem;
107
/* Taille du texte normale */108
color: #333;
109
/* Couleur du texte */110
}
111
112
/* --- Titre principal du site (h1) --- */113
header h1 {
114
/**********************/115
/* Boîte & Espacement */116
/**********************/117
margin: 10px 0;
118
/* Espace vertical autour du titre */119
120
/***************/121
/* Typographie */122
/***************/123
font-size: 2rem;
124
/* Taille du texte plus grande */125
color: #333;
126
/* Couleur du texte */127
}
128
129
/* --- Liste de navigation principale (ul) --- */130
header nav ul {
131
/******************/132
/* Style de liste */133
/******************/134
list-style: none;
135
/* Supprime les puces de la liste */136
137
/**********************/138
/* Boîte & Espacement */139
/**********************/140
padding: 0;
141
/* Supprime le retrait interne */142
margin: 10px 0 0;
143
/* Marge au-dessus de la navigation */144
}
145
146
/* --- Éléments de navigation (li) --- */147
header nav li {
148
/**********************/149
/* Boîte & Espacement */150
/**********************/151
display: inline-block;
152
/* Affiche les éléments de la liste sur une même ligne */153
margin: 0 15px;
154
/* Espace horizontal entre les liens */155
}
156
157
/* --- Liens de navigation (a) --- */158
header nav a {
159
/***************/160
/* Typographie */161
/***************/162
text-decoration: none;
163
/* Supprime le soulignement des liens */164
color: #0066cc;
165
/* Couleur bleue pour les liens */166
font-weight: bold;
167
/* Met le texte en gras */168
}
169
170
/* --- Survol des liens de navigation --- */171
header nav a:hover {
172
/***************/173
/* Typographie */174
/***************/175
text-decoration: underline;
176
/* Soulignement au survol */177
}
178
179
/* ==========================================================================180
Contenu principal (Main)181
========================================================================== */182
183
/* --- Titre principal (h1) du main --- */184
main>h1 {
185
/***************/186
/* Typographie */187
/***************/188
text-align: center;
189
/* Centre le titre principal du main */190
color: #1e3a5f;
191
/* Couleur bleu foncé */192
font-size: 2rem;
193
/* Taille du texte plus grande */194
195
/**********************/196
/* Boîte & Espacement */197
/**********************/198
margin: 20px 0;
199
/* Espace vertical autour du titre */200
}
201
202
/* --- Sections du main --- */203
main>section {
204
/**********************/205
/* Boîte & Espacement */206
/**********************/207
max-width: 900px;
208
/* Largeur maximale du contenu */209
margin: 0 auto 40px;
210
/* Centre horizontalement + marge basse */211
padding: 0 15px;
212
/* Espace intérieur à gauche et à droite */213
}
214
215
/* --- Titres (h2) de section --- */216
main>section h2 {
217
/***************/218
/* Typographie */219
/***************/220
color: #1e3a5f;
221
/* Couleur du titre (bleu foncé) */222
font-size: 1.5em;
223
/* Taille du texte 1,5 fois la taille normale */224
}
225
226
/* ==========================================================================227
Pied de page (Footer)228
========================================================================== */229
footer {230
/****************************/231
/* Couleurs & Arrière-plans */232
/****************************/233
background: #1e3a5f;
234
/* Fond bleu foncé */235
236
/***************/237
/* Typographie */238
/***************/239
color: #fff;
240
/* Texte blanc */241
text-align: center;
242
/* Centre le texte horizontalement */243
244
/**********************/245
/* Boîte & Espacement */246
/**********************/247
padding: 20px;
248
/* Espace intérieur autour du contenu */249
}
250
251
/* --- Liens du footer --- */252
footer a {
253
/***************/254
/* Typographie */255
/***************/256
color: #ff8c42;
257
/* Liens orange */258
text-decoration: none;
259
/* Pas de soulignement */260
}
261
262
/* --- Survol des liens du footer --- */263
footer a:hover {
264
/***************/265
/* Typographie */266
/***************/267
color: #ffcc00;
268
/* Jaune vif au survol */269
}
Méthode : css/accueil.css
1
/* ==========================================================================2
Navigation Interne (dans Main)3
========================================================================== */4
5
/* --- Liste de la navigation (ul) --- */6
main nav ul {
7
/******************/8
/* Style de liste */9
/******************/10
list-style: none;
11
/* Supprime les puces */12
13
/**********************/14
/* Boîte & Espacement */15
/**********************/16
padding: 0;
17
/* Supprime le retrait interne */18
margin: 0 0 20px;
19
/* Espace en dessous de la liste */20
21
/***************/22
/* Typographie */23
/***************/24
text-align: center;
25
/* Centre les éléments horizontalement */26
}
27
28
/* --- Éléments de la navigation (li) --- */29
main nav li {
30
/**********************/31
/* Boîte & Espacement */32
/**********************/33
display: inline-block;
34
/* Place les éléments sur une seule ligne */35
margin: 0 10px;
36
/* Espace horizontal entre les liens */37
}
38
39
/* --- Liens de la navigation (a) --- */40
main nav a {
41
/***************/42
/* Typographie */43
/***************/44
text-decoration: none;
45
/* Supprime le soulignement */46
color: #1e90ff;
47
/* Couleur bleue claire */48
font-weight: bold;
49
/* Met le texte en gras */50
}
51
52
/* --- Survol des liens de navigation --- */53
main nav a:hover {
54
/***************/55
/* Typographie */56
/***************/57
color: #0056b3;
58
/* Change la couleur au survol (bleu plus foncé) */59
}
60
61
/* ==========================================================================62
Contenu des Sections (dans Main)63
========================================================================== */64
65
/* --- Paragraphes de section --- */66
main>section p {
67
/***************/68
/* Typographie */69
/***************/70
color: #333;
71
/* Couleur du texte */72
font-family: Georgia, serif;
73
/* Police à empattements (meilleure lisibilité) */74
}
75
76
/* --- Liens de section --- */77
main>section a {
78
/***************/79
/* Typographie */80
/***************/81
color: #1e90ff;
82
/* Couleur des liens */83
text-decoration: underline;
84
/* Soulignement visible par défaut */85
}
86
87
/* --- Survol des liens de section --- */88
main>section a:hover {
89
/***************/90
/* Typographie */91
/***************/92
color: #0056b3;
93
/* Change la couleur au survol */94
}
Méthode : css/projets.css
1
/* ==========================================================================2
Section des Projets (Conteneur)3
========================================================================== */4
.projets {5
/***************/6
/* Typographie */7
/***************/8
text-align: center;
9
/* centre les articles (inline-block) à l'intérieur du conteneur */10
}
11
12
/* ==========================================================================13
Cartes de Projet (Article)14
========================================================================== */15
.projets article {
16
/**********************/17
/* Boîte & Espacement */18
/**********************/19
display: inline-block;
20
/* affiche les articles les uns à côté des autres (comme du texte) */21
vertical-align: top;
22
/* aligne le haut des articles entre eux */23
margin: 10px;
24
/* espace extérieur autour de chaque carte */25
padding: 10px;
26
/* espace intérieur entre le bord et le contenu */27
28
/**************/29
/* Dimensions */30
/**************/31
width: 220px;
32
/* largeur fixe pour chaque carte */33
34
/****************************/35
/* Couleurs & Arrière-plans */36
/****************************/37
background: #f9f9f9;
38
/* couleur de fond gris très clair */39
40
/************/41
/* Bordures */42
/************/43
border: 1px solid #ddd;
44
/* bordure fine et grise autour des cartes */45
border-radius: 8px;
46
/* arrondit légèrement les coins de la carte */47
48
/***************/49
/* Typographie */50
/***************/51
text-align: left;
52
/* le texte à l’intérieur est aligné à gauche */53
}
54
55
/* ==========================================================================56
Contenu des Cartes (Typo, Images, Liens)57
========================================================================== */58
59
/* --- Titres des projets (h3) --- */60
.projets h3 {
61
/**********************/62
/* Boîte & Espacement */63
/**********************/64
margin-top: 0;
65
/* supprime l’espace au-dessus du titre */66
67
/***************/68
/* Typographie */69
/***************/70
font-size: 1.1rem;
71
/* définit la taille du titre en unités relatives */72
}
73
74
/* --- Paragraphes des projets --- */75
.projets p {
76
/***************/77
/* Typographie */78
/***************/79
font-size: 0.9rem;
80
/* définit une taille de texte légèrement plus petite */81
color: #333;
82
/* applique une couleur gris foncé au texte */83
}
84
85
/* --- Liens des projets --- */86
.projets a {
87
/***************/88
/* Typographie */89
/***************/90
text-decoration: none;
91
/* enlève le soulignement par défaut des liens */92
color: #0066cc;
93
/* applique une couleur bleue au lien */94
font-weight: bold;
95
/* met le lien en gras */96
}
97
98
/* --- Survol des liens --- */99
.projets a:hover {
100
/***************/101
/* Typographie */102
/***************/103
text-decoration: underline;
104
/* remet le soulignement quand on survole le lien */105
}
106
107
/* --- Conteneur Figure (pour image) --- */108
.projets figure {
109
/**********************/110
/* Boîte & Espacement */111
/**********************/112
margin: 0;
113
/* supprime les marges par défaut autour de la figure */114
padding: 0;
115
/* supprime le padding par défaut */116
}
117
118
/* --- Images des projets --- */119
.projets figure img {
120
/**************/121
/* Dimensions */122
/**************/123
width: 100%;
124
/* l'image prend toute la largeur de la carte (fusionné) */125
height: auto;
126
/* la hauteur s'ajuste automatiquement pour garder les proportions */127
128
/**********************/129
/* Boîte & Espacement */130
/**********************/131
margin-bottom: 8px;
132
/* espace entre l'image et la légende */133
134
/************/135
/* Bordures */136
/************/137
border-radius: 4px;
138
/* arrondit légèrement les coins de l'image */139
border: 1px solid #ccc;
140
/* ajoute une bordure grise claire autour de l'image */141
}
142
143
/* --- Légendes des images --- */144
.projets figure figcaption {
145
/***************/146
/* Typographie */147
/***************/148
font-size: 0.85rem;
149
/* taille de la police de la légende */150
color: #666;
151
/* couleur gris moyen pour la légende */152
text-align: center;
153
/* centre le texte de la légende */154
}
Exemple :
See the Pen Séance 5-index by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Séance 5- Accueil
Exemple :
See the Pen Séance 5-projets by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Séance 5- Projets