Séance 9
Objectifs
Découvrir Grid et savoir l’utiliser pour organiser une page complexe.
Choisir entre Flexbox et Grid selon la situation.
Méthode : Arborescence
Arborescence
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
<!-- Import de polices externes (Google Fonts) -->11
<link
12
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Roboto:wght@400;700&display=swap"
13
rel="stylesheet">
14
<!-- Font Awesome CDN pour icônes -->15
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
16
</head>
17
18
<body>
19
20
<header id="haut" aria-label="En-tête du site">
21
<figure aria-labelledby="figcaption-vv">
22
<img src="images/photo.jpg" alt="Photo de Vincent Vanneste">
23
<figcaption id="figcaption-vv">Vincent Vanneste</figcaption>
24
</figure>
25
26
<h1>Portfolio de Vincent Vanneste</h1>
27
<nav aria-label="Navigation principale">
28
<ul>
29
<li><a href="index.html">Accueil</a></li>
30
<li><a href="projets.html">Projets</a></li>
31
<li><a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a></li>
32
</ul>
33
</nav>
34
35
</header>
36
37
<main aria-label="Contenu principal du site">
38
<nav aria-label="Navigation interne à la page">
39
<ul>
40
<li><a href="#about">À propos</a></li>
41
<li><a href="#competences">Compétences</a></li>
42
<li><a href="#experiences">Expériences</a></li>
43
<li><a href="#formations">Formations</a></li>
44
</ul>
45
</nav>
46
47
<!-- À propos -->48
<section id="about" aria-labelledby="titre-about">
49
<h2 class="icon-about" id="titre-about">À propos</h2>
50
<p>Je suis directeur des études du DEUST WMI de Calais et j'enseigne les fondamentaux du développement web
51
(HTML, CSS, JavaScript, PHP). Passionné par la transmission des connaissances, j'accompagne mes
52
étudiants dans l'acquisition des compétences nécessaires pour réussir dans le secteur du numérique.</p>
53
<address role="contentinfo" aria-label="Coordonnées">
54
<dl>
55
<dt>Localisation :</dt>
56
<dd>Calais, France</dd>
57
<dt>Site :</dt>
58
<dd><a href="https://vincent-vanneste.fr/" target="_blank">vincent-vanneste.fr</a></dd>
59
<dt>Email :</dt>
60
<dd><a href="mailto:vincent.vanneste@univ-littoral.fr">vincent.vanneste@univ-littoral.fr</a></dd>
61
</dl>
62
</address>
63
</section>
64
65
66
67
<!-- Compétences -->68
<section id="competences" aria-labelledby="titre-competences">
69
<h2 class="icon-competences" id="titre-competences">Compétences</h2>
70
<ul>
71
<li>HTML</li>
72
<li>CSS</li>
73
<li>Responsive</li>
74
<li>Accessibilité</li>
75
<li>JavaScript</li>
76
<li>PHP • Laravel 11</li>
77
<li>MySQL</li>
78
<li>Git & GitHub</li>
79
</ul>
80
</section>
81
82
83
84
<!-- Expériences -->85
<section id="experiences" aria-labelledby="titre-experiences">
86
<h2 class="icon-experiences" id="titre-experiences">Expériences récentes</h2>
87
<ul>
88
<li>
89
<strong>Enseignant – Licence 1 Informatique</strong><br>
90
<time datetime="2025">2025</time> •
91
<address>
92
<a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a>
93
</address><br>
94
Introduction à HTML, CSS, JS
95
</li>
96
<li>
97
<strong>Directeur des études – DEUST WMI</strong><br>
98
depuis <time datetime="2024">2024</time> •
99
<address>
100
<a href="https://www.univ-littoral.fr/" target="_blank">FCU ULCO</a>
101
</address>
102
</li>
103
</ul>
104
</section>
105
106
<!-- Formations -->107
<section id="formations" aria-labelledby="titre-formations">
108
<h2 class="icon-formations" id="titre-formations">Formations</h2>
109
<ul>
110
<li>
111
<strong>Doctorat productique, automatique et informatique industrielle</strong><br>
112
<time datetime="2000">2000</time> •
113
<address>
114
<a href="https://www.univ-lille.fr/" target="_blank">Université de Lille</a>
115
</address>
116
</li>
117
<li>
118
<strong>CAPET Technologie</strong><br>
119
<time datetime="1998">1998</time> •
120
<address>
121
<a href="https://www.iufm-douai.fr/" target="_blank">IUFM Douais</a>
122
</address>
123
</li>
124
</ul>
125
</section>
126
127
</main>
128
129
<footer aria-label="Pied de page">
130
<p>© 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés.</p>
131
<!-- Réseaux sociaux -->132
<div class="socials" role="navigation" aria-label="Réseaux sociaux">
133
<a href="https://www.facebook.com/" target="_blank" aria-label="Facebook">
134
<i class="fab fa-facebook-f"></i>
135
</a>
136
<a href="https://www.linkedin.com/in/" target="_blank" aria-label="LinkedIn">
137
<i class="fab fa-linkedin-in"></i>
138
</a>
139
<a href="https://www.instagram.com/" target="_blank" aria-label="Instagram">
140
<i class="fab fa-instagram"></i>
141
</a>
142
<a href="https://x.com/" target="_blank" aria-label="X">
143
<i class="fab fa-x-twitter"></i>
144
</a>
145
</div>
146
</footer>
147
148
149
</body>
150
151
</html>
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
<!-- Import de polices externes (Google Fonts) -->11
<link
12
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Roboto:wght@400;700&display=swap"
13
rel="stylesheet">
14
<!-- Font Awesome CDN pour icônes -->15
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
16
</head>
17
18
<body>
19
20
<header id="haut" aria-label="En-tête du site">
21
<figure aria-labelledby="figcaption-vv">
22
<img src="images/photo.jpg" alt="Photo de Vincent Vanneste">
23
<figcaption id="figcaption-vv">Vincent Vanneste</figcaption>
24
</figure>
25
26
<h1>Portfolio de Vincent Vanneste</h1>
27
<nav aria-label="Navigation principale">
28
<ul>
29
<li><a href="index.html">Accueil</a></li>
30
<li><a href="projets.html">Projets</a></li>
31
<li><a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a></li>
32
</ul>
33
</nav>
34
35
</header>
36
37
<main>
38
39
<section aria-labelledby="liste-projets" class="projets">
40
<h2 id="liste-projets">Liste des projets</h2>
41
42
<article aria-labelledby="titre-projet1">
43
<h3 id="titre-projet1"><a href="projets/projet1.html">Projet 1</a></h3>
44
<figure aria-labelledby="fig-projet1">
45
<img src="images/vignettes/projet1.jpg" alt="Aperçu du Projet 1">
46
<figcaption id="fig-projet1">Aperçu du Projet 1</figcaption>
47
</figure>
48
<p>Un projet qui présente les bases du HTML et de la mise en page.</p>
49
</article>
50
51
<article aria-labelledby="titre-projet2">
52
<h3 id="titre-projet2"><a href="projets/projet2.html">Projet 2</a></h3>
53
<figure aria-labelledby="fig-projet2">
54
<img src="images/vignettes/projet2.jpg" alt="Aperçu du Projet 2">
55
<figcaption id="fig-projet2">Aperçu du Projet 2</figcaption>
56
</figure>
57
<p>Un site en CSS avec une mise en forme responsive adaptée aux mobiles.</p>
58
</article>
59
60
<article aria-labelledby="titre-projet3">
61
<h3 id="titre-projet3"><a href="projets/projet3.html">Projet 3</a></h3>
62
<figure aria-labelledby="fig-projet3">
63
<img src="images/vignettes/projet3.jpg" alt="Aperçu du Projet 3">
64
<figcaption id="fig-projet3">Aperçu du Projet 3</figcaption>
65
</figure>
66
<p>Un mini-site en JavaScript avec des interactions simples.</p>
67
</article>
68
69
<article aria-labelledby="titre-projet4">
70
<h3 id="titre-projet4"><a href="projets/projet4.html">Projet 4</a></h3>
71
<figure aria-labelledby="fig-projet4">
72
<img src="images/vignettes/projet4.jpg" alt="Aperçu du Projet 4">
73
<figcaption id="fig-projet4">Aperçu du Projet 4</figcaption>
74
</figure>
75
<p>Une application web utilisant PHP et MySQL pour gérer des données.</p>
76
</article>
77
78
<article aria-labelledby="titre-projet5">
79
<h3 id="titre-projet5"><a href="projets/projet5.html">Projet 5</a></h3>
80
<figure aria-labelledby="fig-projet5">
81
<img src="images/vignettes/projet5.jpg" alt="Aperçu du Projet 5">
82
<figcaption id="fig-projet5">Aperçu du Projet 5</figcaption>
83
</figure>
84
<p>Un projet complet combinant HTML, CSS, JS et base de données.</p>
85
</article>
86
87
</section>
88
</main>
89
90
<footer aria-label="Pied de page">
91
<p>© 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés.</p>
92
<!-- Réseaux sociaux -->93
<div class="socials" role="navigation" aria-label="Réseaux sociaux">
94
<a href="https://www.facebook.com/" target="_blank" aria-label="Facebook">
95
<i class="fab fa-facebook-f"></i>
96
</a>
97
<a href="https://www.linkedin.com/in/" target="_blank" aria-label="LinkedIn">
98
<i class="fab fa-linkedin-in"></i>
99
</a>
100
<a href="https://www.instagram.com/" target="_blank" aria-label="Instagram">
101
<i class="fab fa-instagram"></i>
102
</a>
103
<a href="https://x.com/" target="_blank" aria-label="X">
104
<i class="fab fa-x-twitter"></i>
105
</a>
106
</div>
107
</footer>
108
</body>
109
110
</html>
Méthode : projets/projet1.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>Projet 1 - Portfolio de Vincent Vanneste</title>
8
<link rel="stylesheet" href="../css/style.css">
9
<link rel="stylesheet" href="../css/projet.css">
10
<!-- Google Fonts -->11
<link
12
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Roboto:wght@400;700&display=swap"
13
rel="stylesheet">
14
<!-- Font Awesome -->15
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
16
</head>
17
18
<body>
19
20
<header id="haut" aria-label="En-tête du site">
21
<figure aria-labelledby="figcaption-vv">
22
<img src="../images/photo.jpg" alt="Photo de Vincent Vanneste">
23
<figcaption id="figcaption-vv">Vincent Vanneste</figcaption>
24
</figure>
25
26
<h1>Portfolio de Vincent Vanneste</h1>
27
<nav aria-label="Navigation principale">
28
<ul>
29
<li><a href="../index.html">Accueil</a></li>
30
<li><a href=".../projets.html">Projets</a></li>
31
<li><a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a></li>
32
</ul>
33
</nav>
34
35
</header>
36
37
<main>
38
<article aria-labelledby="titre-projet1" class="projets">
39
40
<header>
41
<h2 id="titre-projet1">Projet 1 <br> Découverte du HTML et du CSS</h2>
42
<figure>
43
<img src="../images/projet1.jpg" alt="Capture d’écran du Projet 1">
44
<figcaption>Page d’accueil du projet HTML/CSS</figcaption>
45
</figure>
46
</header>
47
48
<section aria-labelledby="description-projet">
49
<h2 id="description-projet">Description du projet</h2>
50
<p>
51
Ce premier projet consiste à créer un mini-site en HTML et CSS.
52
L’objectif est de comprendre la structure d’une page web,
53
d’utiliser les balises sémantiques et d’appliquer les premières règles de style CSS.
54
</p>
55
</section>
56
57
<section aria-labelledby="objectifs-projet">
58
<h2 id="objectifs-projet">Objectifs pédagogiques</h2>
59
<ul>
60
<li>Découvrir la structure d’un document HTML5.</li>
61
<li>Apprendre à organiser un site web avec plusieurs pages liées.</li>
62
<li>Utiliser le CSS pour la mise en forme du contenu.</li>
63
<li>Publier le site sur GitHub Pages.</li>
64
</ul>
65
</section>
66
67
<section aria-labelledby="competences-visees">
68
<h2 id="competences-visees">Compétences visées</h2>
69
<ul>
70
<li>Structurer et organiser un site web en utilisant le HTML sémantique et les bonnes pratiques de
71
codage.</li>
72
<li>Mettre en forme et personnaliser l’apparence d’un site avec le CSS (Flexbox, Grid, couleurs,
73
polices, effets).</li>
74
<li>Créer un portfolio complet avec une navigation cohérente.</li>
75
<li>Intégrer des contenus multimédias accessibles et esthétiques.</li>
76
<li>Adapter un site aux différents écrans grâce au responsive design et aux media queries.</li>
77
<li>Déployer un site en ligne via GitHub Pages et le valider (W3C, Lighthouse).</li>
78
<li>Présenter et valoriser son travail avec une identité graphique cohérente.</li>
79
</ul>
80
</section>
81
82
<section aria-labelledby="resultat-projet">
83
<h2 id="resultat-projet">Résultat obtenu</h2>
84
<p>
85
Le projet final se compose d’une page d’accueil, d’une galerie de projets et d'une page par projet.
86
Le site est responsive et conforme aux standards du W3C.
87
</p>
88
<p>
89
<a href="" class="btn" target="_blank" rel="noopener">
90
<i class="fa-solid fa-eye"></i> Voir la démo
91
</a>
92
</p>
93
</section>
94
95
<nav class="nav-projets" aria-label="Navigation entre les projets">
96
<a href="../projets/projet2.html" class="next">Projet suivant →</a>
97
</nav>
98
99
</article>
100
</main>
101
102
<footer aria-label="Pied de page">
103
<p>© 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés.</p>
104
<!-- Réseaux sociaux -->105
<div class="socials" role="navigation" aria-label="Réseaux sociaux">
106
<a href="https://www.facebook.com/" target="_blank" aria-label="Facebook">
107
<i class="fab fa-facebook-f"></i>
108
</a>
109
<a href="https://www.linkedin.com/in/" target="_blank" aria-label="LinkedIn">
110
<i class="fab fa-linkedin-in"></i>
111
</a>
112
<a href="https://www.instagram.com/" target="_blank" aria-label="Instagram">
113
<i class="fab fa-instagram"></i>
114
</a>
115
<a href="https://x.com/" target="_blank" aria-label="X">
116
<i class="fab fa-x-twitter"></i>
117
</a>
118
</div>
119
</footer>
120
121
</body>
122
123
</html>
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: 'Poppins', Arial, sans-serif;
11
/* Police principale : Poppins si disponible, sinon Arial, puis une police sans-serif */12
color: #222;
13
/* Couleur du texte légèrement plus sombre que noir (priorise la couleur plus foncée de la deuxième définition) */14
line-height: 1.5;
15
/* Hauteur de ligne pour améliorer la lisibilité */16
17
/**********************/18
/* Boîte & Espacement */19
/**********************/20
margin: 0;
21
/* Supprime la marge par défaut autour de la page */22
23
/****************************/24
/* Couleurs & Arrière-plans */25
/****************************/26
background: linear-gradient(135deg, #e8f0ff 0%, #f9fcff 100%);
27
/* Fond dégradé diagonal du bleu clair vers le blanc */28
29
/***************/30
/* Transitions */31
/***************/32
transition: background 0.5s ease;
33
/* Transition douce si le fond change dynamiquement */34
}
35
36
/* ==========================================================================37
En-tête (Header)38
========================================================================== */39
body>header {
40
/***************/41
/* Typographie */42
/***************/43
text-align: center;
44
/* Centre le contenu horizontalement */45
color: white;
46
/* Texte en blanc (priorise la couleur blanche de la deuxième définition) */47
48
/**********************/49
/* Boîte & Espacement */50
/**********************/51
padding: 20px;
52
/* Espace intérieur autour du contenu du header */53
54
/****************************/55
/* Couleurs & Arrière-plans */56
/****************************/57
background: linear-gradient(135deg, #0073e6, #004a99);
58
/* Dégradé bleu du clair vers le foncé */59
60
/********************/61
/* Bordures & Ombre */62
/********************/63
border-bottom: 2px solid #ddd;
64
/* Bordure en bas du header pour le séparer du contenu */65
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
66
/* Ombre douce sous le header */67
68
/* Transitions */69
transition: background 0.3s ease;
70
/* Transition pour un changement de fond fluide */71
}
72
73
/* --- Titre principal du Header (h1) --- */74
body>header h1 {
75
/***************/76
/* Typographie */77
/***************/78
font-family: 'Roboto', sans-serif;
79
/* Police du titre : Roboto */80
font-size: 2rem;
81
/* Taille du texte plus grande pour le titre principal */82
letter-spacing: 0.5px;
83
/* Espacement des lettres pour un style plus aéré */84
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
85
/* Légère ombre portée pour améliorer la lisibilité */86
87
/**********************/88
/* Boîte & Espacement */89
/**********************/90
margin: 10px 0;
91
/* Espace vertical autour du titre */92
}
93
94
/* --- Figure dans le header --- */95
body>header figure {
96
/**********************/97
/* Boîte & Espacement */98
/**********************/99
margin: 0 auto 10px;
100
/* Centre la figure horizontalement + marge basse de 10px */101
}
102
103
/* --- Image de profil --- */104
body>header img {
105
/**************/106
/* Dimensions */107
/**************/108
width: 150px;
109
/* Largeur fixe de l'image */110
111
/********************/112
/* Bordures & Ombre */113
/********************/114
border-radius: 50%;
115
/* Rend l'image ronde */116
border: 3px solid #0066cc;
117
/* Bordure bleue autour de l'image */118
119
/***************/120
/* Transitions */121
/***************/122
transition: transform 0.3s ease, box-shadow 0.3s ease;
123
/* Transition fluide pour l'effet de zoom/rotation et l'ombre */124
}
125
126
body>header img:hover {
127
/*******************/128
/* Transformations */129
/*******************/130
transform: scale(1.08) rotate(2deg);
131
/* Agrandissement léger et rotation pour effet dynamique */132
133
/*********/134
/* Ombre */135
/*********/136
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
137
/* Ombre portée plus marquée au survol */138
}
139
140
/* --- Légende de l'image de profil --- */141
body>header figcaption {
142
/***************/143
/* Typographie */144
/***************/145
font-size: 1rem;
146
/* Taille normale du texte */147
148
/**********************/149
/* Boîte & Espacement */150
/**********************/151
margin-top: 8px;
152
/* Espace entre l'image et la légende */153
}
154
155
/* --- Navigation principale (dans le header) --- */156
body>header nav ul {
157
/***********/158
/* Flexbox */159
/***********/160
display: flex;
161
/* Utilise Flexbox pour aligner les liens horizontalement */162
justify-content: center;
163
/* Centre les éléments horizontalement */164
gap: 15px;
165
/* Espace entre chaque élément de navigation */166
167
/**********************/168
/* Boîte & Espacement */169
/**********************/170
padding: 0;
171
/* Supprime le padding par défaut */172
margin: 10px 0 0;
173
/* Marge en haut de la liste, pas en bas */174
175
/******************/176
/* Style de liste */177
/******************/178
list-style: none;
179
/* Supprime les puces de la liste */180
}
181
182
/* --- Liens de navigation principale (dans le header) --- */183
body>header nav a {
184
/***************/185
/* Typographie */186
/***************/187
text-decoration: none;
188
/* Supprime le soulignement des liens */189
color: #bfc5cb;
190
/* Couleur bleue des liens */191
font-weight: bold;
192
/* Texte en gras */193
194
/**********************/195
/* Boîte & Espacement */196
/**********************/197
padding: 6px 10px;
198
/* Espace autour du texte pour créer un bouton */199
200
/************/201
/* Bordures */202
/************/203
border-radius: 4px;
204
/* Coins arrondis pour les liens */205
206
/******************/207
/* Positionnement */208
/******************/209
position: relative;
210
/* Permet de positionner des pseudo-éléments par rapport au lien */211
overflow: hidden;
212
/* Masque tout ce qui dépasse du lien, utile pour l’animation de ::after */213
214
/***************/215
/* Transitions */216
/***************/217
transition: color 0.3s ease;
218
/* Rend le changement de couleur fluide lorsqu'il y a interaction */219
}
220
221
body>header nav a:hover {
222
/************/223
/* Couleurs */224
/************/225
background-color: #ddd;
226
/* Fond gris clair au survol pour indiquer l’interaction */227
color: #333;
228
}
229
230
/* --- Barre animée sous le lien (pseudo-élément) --- */231
body>header nav a::after {
232
content: "";
233
/* Nécessaire pour créer un pseudo-élément vide */234
235
/******************/236
/* Positionnement */237
/******************/238
position: absolute;
239
/* Position absolue par rapport au lien parent */240
bottom: 0;
241
/* Positionné en bas du lien */242
left: 0;
243
/* Aligne le pseudo-élément à gauche */244
245
/**************/246
/* Dimensions */247
/**************/248
width: 0%;
249
/* Largeur initiale : 0%, donc invisible */250
height: 3px;
251
/* Hauteur de la barre */252
253
/****************************/254
/* Couleurs & Arrière-plans */255
/****************************/256
background: white;
257
/* Couleur de la barre */258
259
/***************/260
/* Transitions */261
/***************/262
transition: width 0.3s ease;
263
/* Rend l’extension de la barre fluide */264
}
265
266
/* --- Effet sur le survol de la barre de navigation --- */267
body>header nav a:hover::after {
268
width: 100%;
269
/* La barre s’étend sur toute la largeur du lien */270
}
271
272
/* --- Effet de clic sur l’élément li du header --- */273
body>header nav li:active {
274
/*******************/275
/* Transformations */276
/*******************/277
transform: scale(0.9);
278
/* Réduit le lien de 10% lors du clic pour effet “pressé” */279
}
280
281
/* ==========================================================================282
Contenu principal (Main)283
========================================================================== */284
main {285
/**********************/286
/* Boîte & Espacement */287
/**********************/288
max-width: 1000px;
289
margin: auto;
290
}
291
292
/* --- Titre principal du main (h1) --- */293
main>h1 {
294
/***************/295
/* Typographie */296
/***************/297
text-align: center;
298
/* Centre le titre principal du main */299
color: #1e3a5f;
300
/* Couleur bleu foncé */301
font-size: 2rem;
302
/* Taille du texte plus grande */303
304
/**********************/305
/* Boîte & Espacement */306
/**********************/307
margin: 20px 0;
308
/* Espace vertical autour du titre */309
}
310
311
/* --- Sections et articles principaux du main --- */312
main>section,
313
main>article {
314
/**********************/315
/* Boîte & Espacement */316
/**********************/317
margin: 0 auto 40px;
318
/* Centre horizontalement + marge en bas de 40px */319
padding: 0 15px;
320
/* Espace intérieur gauche/droite de 15px */321
}
322
323
/* --- Titres de section et d'article (h2) --- */324
main>section h2,
325
main>article h2 {
326
/***************/327
/* Typographie */328
/***************/329
color: #1e3a5f;
330
/* Couleur du titre (bleu foncé) */331
font-size: 1.5em;
332
/* Taille du texte 1,5 fois la taille normale */333
}
334
335
/* ==========================================================================336
Pied de page (Footer)337
========================================================================== */338
footer {339
/***************/340
/* Typographie */341
/***************/342
color: #fff;
343
/* Texte en blanc */344
text-align: center;
345
/* Centre le texte horizontalement */346
347
/**********************/348
/* Boîte & Espacement */349
/**********************/350
padding: 20px;
351
/* Espace intérieur autour du contenu */352
353
/****************************/354
/* Couleurs & Arrière-plans */355
/****************************/356
background: linear-gradient(135deg, #1e3a5f, #0a2340, #224c80, #162d50);
357
/* Dégradé diagonal combinant plusieurs tons de bleu foncé à clair */358
background-size: 200% 200%;
359
/* Agrandit le gradient pour permettre le déplacement et créer l'animation visuelle */360
361
/***************/362
/* Transitions */363
/***************/364
transition: background-position 0.5s ease;
365
/* Rend le déplacement du gradient fluide sur 0.5 seconde */366
}
367
368
footer:hover {
369
background-position: right bottom;
370
/* Déplace le gradient vers le coin inférieur droit au survol */371
}
372
373
footer p {
374
/**********************/375
/* Boîte & Espacement */376
/**********************/377
margin: 0;
378
/* Supprime la marge par défaut autour du paragraphe */379
}
380
381
/* --- Réseaux sociaux dans le footer --- */382
footer .socials {
383
/***********/384
/* Flexbox */385
/***********/386
display: flex;
387
justify-content: center;
388
gap: 20px;
389
390
/**********************/391
/* Boîte & Espacement */392
/**********************/393
margin-top: 15px;
394
}
395
396
footer .socials a {
397
/***************/398
/* Typographie */399
/***************/400
font-size: 28px;
401
color: white;
402
403
/***************/404
/* Transitions */405
/***************/406
transition: transform 0.3s ease, color 0.3s ease;
407
}
408
409
footer .socials a:hover {
410
/*******************/411
/* Transformations */412
/*******************/413
transform: translateY(-3px) scale(1.2);
414
415
/************/416
/* Couleurs */417
/************/418
color: #00a2ff;
419
/* Changement de couleur au survol */420
}
Méthode : css/accueil.css
1
/* ==========================================================================2
Mise en page Grid (Contenu principal)3
========================================================================== */4
main {5
/***********************/6
/* Mise en page (Grid) */7
/***********************/8
display: grid;
9
/* Active le mode Grid pour le conteneur principal */10
grid-template-columns: 1fr 1fr 1fr;
11
/* Définit 3 colonnes de taille égale */12
grid-template-areas:13
"nav nav nav"14
"about about about"15
"competences experiences formations";16
/* Définit les zones nommées pour le positionnement des enfants */17
18
/**********************/19
/* Boîte & Espacement */20
/**********************/21
gap: 10px;
22
/* Espace de 10px entre les éléments de la grille */23
}
24
25
/* --- Assignation des zones de la grille --- */26
main>nav {
27
grid-area: nav;
28
/* Place la navigation dans la zone 'nav' */29
}
30
31
#about {32
grid-area: about;
33
/* Place la section 'about' dans la zone 'about' */34
}
35
36
#competences {37
grid-area: competences;
38
/* Place la section 'competences' dans la zone 'competences' */39
}
40
41
#experiences {42
grid-area: experiences;
43
/* Place la section 'experiences' dans la zone 'experiences' */44
}
45
46
#formations {47
grid-area: formations;
48
/* Place la section 'formations' dans la zone 'formations' */49
}
50
51
/* ==========================================================================52
Navigation Interne (dans Main)53
========================================================================== */54
55
/* --- Liste de la navigation interne --- */56
main nav ul {
57
/***********/58
/* Flexbox */59
/***********/60
display: flex;
61
/* Utilise Flexbox pour aligner les éléments horizontalement */62
justify-content: center;
63
/* Centre les éléments dans la ligne */64
flex-wrap: wrap;
65
/* Permet aux éléments de passer à la ligne si l'espace est insuffisant */66
67
/**********************/68
/* Boîte & Espacement */69
/**********************/70
gap: 12px;
71
/* Espace de 12px entre les éléments */72
padding: 0;
73
/* Supprime le padding par défaut de la liste */74
margin: 20px 0;
75
/* Marge verticale de 20px au-dessus et en dessous */76
77
/******************/78
/* Style de liste */79
/******************/80
list-style: none;
81
/* Supprime les puces de la liste */82
}
83
84
/* --- Liens de la navigation interne --- */85
main nav a {
86
/**********************/87
/* Boîte & Espacement */88
/**********************/89
display: inline-block;
90
/* Permet au lien d'être transformable et de gérer padding/marge */91
padding: 6px 12px;
92
/* Espace intérieur autour du texte */93
94
/***************/95
/* Typographie */96
/***************/97
text-decoration: none;
98
/* Supprime le soulignement par défaut */99
color: #fff;
100
/* Couleur du texte : blanc */101
font-weight: bold;
102
/* Texte en gras */103
104
/****************************/105
/* Couleurs & Arrière-plans */106
/****************************/107
background-color: #0073e6;
108
/* Couleur de fond bleu vif */109
110
/************/111
/* Bordures */112
/************/113
border-radius: 6px;
114
/* Coins arrondis pour un effet "bouton" */115
116
/***************/117
/* Transitions */118
/***************/119
transition: transform 0.2s ease;
120
/* Animation fluide pour le déplacement au survol */121
}
122
123
/* --- Survol des liens de navigation interne --- */124
main nav a:hover {
125
/****************************/126
/* Couleurs & Arrière-plans */127
/****************************/128
background: linear-gradient(135deg, #0073e6, #00a2ff);
129
/* Dégradé appliqué au survol (prioritaire sur la couleur unie) */130
131
/*******************/132
/* Transformations */133
/*******************/134
transform: translateY(-3px) scale(1.05);
135
/* Soulève le lien et l’agrandit légèrement */136
}
137
138
/* --- Focus (accessibilité) des liens de navigation interne --- */139
main nav a:focus {
140
/*********************/141
/* Accessibilité (Focus) */142
/*********************/143
outline: 3px solid #005bb5;
144
/* Contour bleu pour l’accessibilité lors du focus clavier */145
outline-offset: 2px;
146
/* Décalage du contour pour éviter qu’il touche le texte */147
}
148
149
/* ==========================================================================150
Sections de Contenu151
========================================================================== */152
153
/* --- Style général des sections --- */154
section {155
/**********************/156
/* Boîte & Espacement */157
/**********************/158
margin: 20px auto;
159
/* Marge verticale de 20px et centre horizontalement */160
padding: 0 15px;
161
/* Espace intérieur gauche/droite de 15px */162
163
/***********************/164
/* Animation & Effets */165
/***********************/166
opacity: 0;
167
/* Commence invisible (pour l'animation) */168
transform: translateY(15px);
169
/* Décalage vertical initial pour effet de glissement */170
animation: fadeIn 0.8s ease forwards;
171
/* Animation vers la position finale avec opacité pleine */172
}
173
174
/* --- Titres de section (h2) --- */175
section h2 {
176
/***************/177
/* Typographie */178
/***************/179
font-size: 1.5rem;
180
/* Taille du titre légèrement plus grande */181
color: #1e3a5f;
182
/* Couleur bleu foncé */183
184
/**********************/185
/* Boîte & Espacement */186
/**********************/187
margin-top: 30px;
188
/* Espace au-dessus du titre */189
margin-bottom: 10px;
190
/* Espace en dessous du titre */191
padding-bottom: 5px;
192
/* Espace entre le texte et la ligne */193
194
/************/195
/* Bordures */196
/************/197
border-bottom: 2px solid #ddd;
198
/* Ligne sous le titre pour le séparer visuellement */199
}
200
201
/* --- Paragraphes de section --- */202
section p {
203
/**********************/204
/* Boîte & Espacement */205
/**********************/206
margin-bottom: 15px;
207
/* Espace sous les paragraphes */208
}
209
210
/* ==========================================================================211
Éléments de Contenu (Listes, Liens, Adresse)212
========================================================================== */213
214
/* --- Listes à puces (dans section) --- */215
section ul {
216
/**********************/217
/* Boîte & Espacement */218
/**********************/219
padding-left: 20px;
220
/* Décalage de la liste vers la droite */221
margin-bottom: 20px;
222
/* Espace sous la liste */223
}
224
225
/* --- Éléments de liste (dans section) --- */226
section li {
227
/**********************/228
/* Boîte & Espacement */229
/**********************/230
margin-bottom: 8px;
231
/* Espace entre les éléments de la liste */232
}
233
234
/* --- Liens (dans section) --- */235
section a {
236
/***************/237
/* Typographie */238
/***************/239
color: #0066cc;
240
/* Couleur bleue pour les liens */241
text-decoration: none;
242
/* Supprime le soulignement par défaut */243
}
244
245
section a:hover {
246
/***************/247
/* Typographie */248
/***************/249
text-decoration: underline;
250
/* Remet le soulignement au survol */251
}
252
253
/* --- Balise Adresse --- */254
address {255
/***************/256
/* Typographie */257
/***************/258
font-style: normal;
259
/* Texte non italique, contrairement au style par défaut */260
261
/**********************/262
/* Boîte & Espacement */263
/**********************/264
display: inline;
265
/* L'adresse s'affiche sur la même ligne si possible */266
}
267
268
/* ==========================================================================269
Classes Utilitaires (Icônes)270
========================================================================== */271
272
/* --- Base des icônes (pseudo-élément) --- */273
.icon-about::before,
274
.icon-competences::before,
275
.icon-experiences::before,
276
.icon-formations::before {
277
/**********************/278
/* Boîte & Espacement */279
/**********************/280
margin-right: 8px;
281
/* Espace entre l'icône et le texte du titre */282
}
283
284
/* --- Icônes spécifiques (Emoji) --- */285
.icon-about::before {
286
content: "👤";
287
/* Emoji représentant "À propos" */288
}
289
290
.icon-competences::before {
291
content: "💻";
292
/* Emoji représentant les compétences informatiques */293
}
294
295
.icon-experiences::before {
296
content: "📅";
297
/* Emoji représentant les expériences/agenda */298
}
299
300
.icon-formations::before {
301
content: "🎓";
302
/* Emoji représentant les formations/diplômes */303
}
304
305
/* ==========================================================================306
Animations307
========================================================================== */308
309
/* --- Délais d'animation pour les sections --- */310
section:nth-of-type(2) {
311
animation-delay: 0.2s;
312
/* Décalage pour que cette section apparaisse après 0.2s */313
}
314
315
section:nth-of-type(3) {
316
animation-delay: 0.4s;
317
/* Décalage pour que cette section apparaisse après 0.4s */318
}
319
320
section:nth-of-type(4) {
321
animation-delay: 0.6s;
322
/* Décalage pour que cette section apparaisse après 0.6s */323
}
324
325
/* --- Définition de l’animation fadeIn --- */326
@keyframes fadeIn {
327
to {328
opacity: 1;
329
/* Devient complètement visible */330
transform: translateY(0);
331
/* Remonte à sa position normale */332
}
333
}
Méthode : css/projets.css
1
/* ==========================================================================2
Mise en page de la Grille "Projets"3
========================================================================== */4
.projets {5
/***********************/6
/* Mise en page (Grid) */7
/***********************/8
display: grid;
9
/* Active le mode Grille */10
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
11
/* Crée des colonnes responsives : 12
- auto-fit: autant de colonnes que possible13
- minmax: elles font au moins 300px et s'étendent (1fr) 14
*/15
16
/**********************/17
/* Boîte & Espacement */18
/**********************/19
gap: 20px;
20
/* Espace entre les articles de la grille */21
}
22
23
/* ==========================================================================24
Titre Principal de la Section "Projets"25
========================================================================== */26
.projets>h2 {
27
/***********************/28
/* Mise en page (Grid) */29
/***********************/30
grid-column: 1 / -1;
31
/* Force le titre à s'étendre sur toutes les colonnes de la grille */32
33
/***************/34
/* Typographie */35
/***************/36
text-align: center;
37
/* Centré horizontalement */38
font-size: 1.8rem;
39
/* Plus grand que les titres d’article */40
font-weight: 600;
41
/* Texte semi-gras */42
43
/**********************/44
/* Boîte & Espacement */45
/**********************/46
padding-bottom: 5px;
47
/* Espace entre le texte et la ligne */48
49
/************/50
/* Bordures */51
/************/52
border-bottom: 2px solid #ccc;
53
/* Ligne discrète sous le titre */54
}
55
56
/* ==========================================================================57
Cartes de Projet (Article)58
========================================================================== */59
60
/* --- Style de base des articles --- */61
.projets>article {
62
/**********************/63
/* Boîte & Espacement */64
/**********************/65
padding: 10px;
66
/* Espace intérieur */67
68
/****************************/69
/* Couleurs & Arrière-plans */70
/****************************/71
/* background: #f9f9f9; <- Redondant, écrasé par le gradient */72
background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 25%, #d0f0ff 50%, #f0f8ff 75%, #ffffff 100%);
73
background-size: 300% 300%;
74
/* Agrandit le gradient pour l'animation */75
76
/********************/77
/* Bordures & Ombre */78
/********************/79
border: 1px solid #ddd;
80
/* Bordure légère */81
border-radius: 8px;
82
/* Coins arrondis */83
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
84
/* Ombre discrète */85
86
/***************/87
/* Typographie */88
/***************/89
text-align: left;
90
/* Aligne le texte à gauche (par défaut) */91
92
/******************/93
/* Positionnement */94
/******************/95
position: relative;
96
/* Requis pour certains effets ou enfants positionnés */97
98
/***************/99
/* Transitions */100
/***************/101
transition: transform 0.3s ease, box-shadow 0.3s ease;
102
/* Transition fluide pour le survol */103
}
104
105
/* --- Survol des articles --- */106
.projets>article:hover {
107
/*******************/108
/* Transformations */109
/*******************/110
transform: translateY(-5px);
111
/* Soulève légèrement la carte */112
113
/********************/114
/* Bordures & Ombre */115
/********************/116
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
117
/* Ombre plus prononcée */118
119
/*************/120
/* Animation */121
/*************/122
animation: gradientMove 3s linear infinite;
123
/* Démarre l'animation du fond */124
}
125
126
/* ==========================================================================127
Contenu des Cartes (Typo, Images, Liens)128
========================================================================== */129
130
/* --- Titres des projets (h3) --- */131
.projets h3 {
132
/**********************/133
/* Boîte & Espacement */134
/**********************/135
margin-top: 0;
136
/* Supprime la marge haute par défaut */137
138
/***************/139
/* Typographie */140
/***************/141
font-size: 1.1rem;
142
/* Taille de police */143
}
144
145
/* --- Paragraphes des projets --- */146
.projets p {
147
/***************/148
/* Typographie */149
/***************/150
font-size: 0.9rem;
151
/* Taille de police réduite */152
color: #333;
153
/* Couleur de texte gris foncé */154
}
155
156
/* --- Conteneur Figure (pour image) --- */157
.projets figure {
158
/**********************/159
/* Boîte & Espacement */160
/**********************/161
margin: 0;
162
/* Supprime la marge par défaut */163
padding: 0;
164
/* Supprime le padding par défaut */165
}
166
167
/* --- Images des projets (fusion des doublons) --- */168
.projets figure img {
169
/**************/170
/* Dimensions */171
/**************/172
width: 100%;
173
/* Prend toute la largeur de la carte */174
height: auto;
175
/* Garde les proportions */176
177
/**********************/178
/* Boîte & Espacement */179
/**********************/180
display: block;
181
/* Évite les marges blanches sous l'image */182
margin-bottom: 8px;
183
/* Espace sous l'image */184
185
/************/186
/* Bordures */187
/************/188
border-radius: 4px;
189
/* Coins arrondis légers */190
border: 1px solid #ccc;
191
/* Bordure grise */192
193
/***************/194
/* Transitions */195
/***************/196
transition: transform 0.3s ease, box-shadow 0.3s ease;
197
/* Animation au survol */198
}
199
200
/* --- Survol des images --- */201
.projets figure img:hover {
202
/*******************/203
/* Transformations */204
/*******************/205
transform: scale(1.05);
206
/* Agrandit l'image */207
208
/********************/209
/* Bordures & Ombre */210
/********************/211
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
212
/* Ombre plus marquée */213
}
214
215
/* --- Légendes des images --- */216
.projets figure figcaption {
217
/***************/218
/* Typographie */219
/***************/220
font-size: 0.85rem;
221
/* Petite taille de police */222
color: #666;
223
/* Couleur gris moyen */224
text-align: center;
225
/* Texte centré */226
}
227
228
/* --- Liens des projets --- */229
.projets a {
230
/**********************/231
/* Boîte & Espacement */232
/**********************/233
display: inline-block;
234
/* Permet d'appliquer transform */235
236
/***************/237
/* Typographie */238
/***************/239
text-decoration: none;
240
/* Pas de soulignement par défaut */241
color: #0066cc;
242
/* Couleur bleue */243
font-weight: bold;
244
/* Texte en gras */245
246
/***************/247
/* Transitions */248
/***************/249
transition: color 0.3s ease, transform 0.2s ease;
250
/* Animation sur couleur et position */251
}
252
253
/* --- Survol des liens --- */254
.projets a:hover {
255
/***************/256
/* Typographie */257
/***************/258
color: #004a99;
259
/* Bleu plus foncé */260
text-decoration: underline;
261
/* Soulignement au survol */262
263
/*******************/264
/* Transformations */265
/*******************/266
transform: translateY(-2px) scale(1.05);
267
/* Léger saut et zoom */268
}
269
270
/* --- Focus (accessibilité) des liens --- */271
.projets a:focus {
272
/*********************/273
/* Accessibilité (Focus) */274
/*********************/275
outline: 3px solid #005bb5;
276
/* Contour visible pour la navigation clavier */277
outline-offset: 2px;
278
/* Espace entre le lien et le contour */279
}
280
281
/* ==========================================================================282
Animations (Keyframes)283
========================================================================== */284
285
/* --- Animation du gradient au survol des cartes --- */286
@keyframes gradientMove {
287
0% {288
background-position: 0% 0%;
289
/* Début en haut à gauche */290
}
291
292
50% {293
background-position: 100% 100%;
294
/* Milieu en bas à droite */295
}
296
297
100% {298
background-position: 0% 0%;
299
/* Retour au début */300
}
301
}
Méthode : css/projet.css
1
/* ==========================================================================2
En-tête d'Article3
========================================================================== */4
5
/* --- Conteneur de l'en-tête (article>header) --- */6
article>header {
7
/**********************/8
/* Boîte & Espacement */9
/**********************/10
margin-bottom: 30px;
11
/* Espace sous le header pour séparer du contenu suivant */12
13
/***************************/14
/* Alignement & Typographie */15
/***************************/16
text-align: center;
17
/* Centre le contenu horizontalement (texte, images, etc.) */18
}
19
20
/* --- Image de l'en-tête d'article --- */21
article>header img {
22
/**************/23
/* Dimensions */24
/**************/25
max-width: 100%;
26
/* L'image ne dépasse jamais la largeur de son conteneur (responsive) */27
height: auto;
28
/* Conserve les proportions de l'image lors du redimensionnement */29
30
/**********************/31
/* Boîte & Espacement */32
/**********************/33
margin-top: 20px;
34
/* Espace au-dessus de l'image pour détachement visuel */35
36
/********************/37
/* Bordures & Ombre */38
/********************/39
border-radius: 8px;
40
/* Bords légèrement arrondis */41
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
42
/* Ombre légère pour donner de la profondeur */43
}
44
45
/* ==========================================================================46
Titres de Section (H2)47
========================================================================== */48
49
/* --- Style commun des H2 de section (avec icônes) --- */50
section h2 {
51
/***********/52
/* Flexbox */53
/***********/54
display: flex;
55
/* Permet d'aligner l'icône (pseudo-élément) et le texte */56
align-items: center;
57
/* Centre verticalement l'icône et le texte */58
59
/**********************/60
/* Boîte & Espacement */61
/**********************/62
gap: 0.5em;
63
/* Espace entre le symbole (::before) et le texte */64
margin-bottom: 1rem;
65
/* Espace sous le titre */66
67
/***************/68
/* Typographie */69
/***************/70
font-size: 1.5rem;
71
/* Taille de la police */72
}
73
74
/* ==========================================================================75
Icônes des Titres (Pseudo-éléments)76
========================================================================== */77
78
/* --- Icône Description 📝 --- */79
#description-projet::before {
80
/***********************/81
/* Contenu (Pseudo-élément) */82
/***********************/83
content: "\1F4DD";
84
/* Emoji "Note" (📝) */85
}
86
87
/* --- Icône Objectifs 🎯 --- */88
#objectifs-projet::before {
89
/***********************/90
/* Contenu (Pseudo-élément) */91
/***********************/92
content: "\1F3AF";
93
/* Emoji "Cible" (🎯) */94
}
95
96
/* --- Icône Compétences 🛠️ --- */97
#competences-visees::before {
98
/***********************/99
/* Contenu (Pseudo-élément) */100
/***********************/101
content: "\1F6E0";
102
/* Emoji "Outils" (🛠️) */103
}
104
105
/* --- Icône Résultat ✅ --- */106
#resultat-projet::before {
107
/***********************/108
/* Contenu (Pseudo-élément) */109
/***********************/110
content: "\2705";
111
/* Emoji "Coche" (✅) */112
}
Exemple :
See the Pen Séance 9-index by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Séance 9- Accueil
Exemple :
See the Pen Séance 9-projets by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Séance 9- Projets
Exemple :
See the Pen Séance 9-projet1 by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Séance 9- Projet1