Séance 7

Objectifs

  • Être capable d’améliorer l’esthétique d’un site avec CSS.

  • Savoir appliquer des effets d’interaction simples.

MéthodeArborescence

Arborescence

Méthodeindex.html

1
<!DOCTYPE html>
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" role="banner" aria-label="En-tête du site">
21
        <figure role="img" 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 role="navigation" 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 role="main">
38
        <nav role="navigation" 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" role="region" 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" role="region" 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" role="region" 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
                    <time datetime="2024-2025">2024 → 2025</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" role="region" 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 role="contentinfo" aria-label="Pied de page">
130
        <p>&copy; 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés.</p>
131
        <!-- Réseaux sociaux -->
132
        <div class="socials" 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éthodeprojets.html
1
<!DOCTYPE html>
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" role="banner" aria-label="En-tête du site">
21
        <figure role="img" 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 role="navigation" 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 role="main">
38
39
        <section aria-labelledby="liste-projets" class="projets">
40
            <h2 id="liste-projets">Liste des projets</h2>
41
42
43
            <article role="article" aria-labelledby="titre-projet1">
44
                <h3 id="titre-projet1"><a href="projet1.html">Projet 1</a></h3>
45
                <figure role="img" aria-labelledby="fig-projet1">
46
                    <img src="images/vignettes/projet1.jpg" alt="Aperçu du Projet 1">
47
                    <figcaption id="fig-projet1">Aperçu du Projet 1</figcaption>
48
                </figure>
49
                <p>Un projet qui présente les bases du HTML et de la mise en page.</p>
50
            </article>
51
52
            <article role="article" aria-labelledby="titre-projet2">
53
                <h3 id="titre-projet2"><a href="projet2.html">Projet 2</a></h3>
54
                <figure role="img" aria-labelledby="fig-projet2">
55
                    <img src="images/vignettes/projet2.jpg" alt="Aperçu du Projet 2">
56
                    <figcaption id="fig-projet2">Aperçu du Projet 2</figcaption>
57
                </figure>
58
                <p>Un site en CSS avec une mise en forme responsive adaptée aux mobiles.</p>
59
            </article>
60
61
            <article role="article" aria-labelledby="titre-projet3">
62
                <h3 id="titre-projet3"><a href="projet3.html">Projet 3</a></h3>
63
                <figure role="img" aria-labelledby="fig-projet3">
64
                    <img src="images/vignettes/projet3.jpg" alt="Aperçu du Projet 3">
65
                    <figcaption id="fig-projet3">Aperçu du Projet 3</figcaption>
66
                </figure>
67
                <p>Un mini-site en JavaScript avec des interactions simples.</p>
68
            </article>
69
70
            <article role="article" aria-labelledby="titre-projet4">
71
                <h3 id="titre-projet4"><a href="projet4.html">Projet 4</a></h3>
72
                <figure role="img" aria-labelledby="fig-projet4">
73
                    <img src="images/vignettes/projet4.jpg" alt="Aperçu du Projet 4">
74
                    <figcaption id="fig-projet4">Aperçu du Projet 4</figcaption>
75
                </figure>
76
                <p>Une application web utilisant PHP et MySQL pour gérer des données.</p>
77
            </article>
78
79
            <article role="article" aria-labelledby="titre-projet5">
80
                <h3 id="titre-projet5"><a href="projet5.html">Projet 5</a></h3>
81
                <figure role="img" aria-labelledby="fig-projet5">
82
                    <img src="images/vignettes/projet5.jpg" alt="Aperçu du Projet 5">
83
                    <figcaption id="fig-projet5">Aperçu du Projet 5</figcaption>
84
                </figure>
85
                <p>Un projet complet combinant HTML, CSS, JS et base de données.</p>
86
            </article>
87
88
        </section>
89
    </main>
90
91
92
    <footer role="contentinfo" aria-label="Pied de page">
93
        <p>&copy; 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés.</p>
94
        <!-- Réseaux sociaux -->
95
        <div class="socials" aria-label="Réseaux sociaux">
96
            <a href="https://www.facebook.com/" target="_blank" aria-label="Facebook">
97
                <i class="fab fa-facebook-f"></i>
98
            </a>
99
            <a href="https://www.linkedin.com/in/" target="_blank" aria-label="LinkedIn">
100
                <i class="fab fa-linkedin-in"></i>
101
            </a>
102
            <a href="https://www.instagram.com/" target="_blank" aria-label="Instagram">
103
                <i class="fab fa-instagram"></i>
104
            </a>
105
            <a href="https://x.com/" target="_blank" aria-label="X">
106
                <i class="fab fa-x-twitter"></i>
107
            </a>
108
        </div>
109
    </footer>
110
111
</body>
112
113
</html>
Méthodecss/style.css
1
/* ================
2
   CSS Général
3
   ================ */
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 (priorité Poppins) */
12
    color: #222;
13
    /* Couleur du texte (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é (priorise la deuxième définition au lieu du blanc uni) */
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 (priorise la deuxième définition au lieu du gris uni) */
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
    /***************/
69
    /* Transitions */
70
    /***************/
71
    transition: background 0.3s ease;
72
    /* Transition pour un changement de fond fluide */
73
}
74
75
/* --- Titre principal du Header (h1) --- */
76
body>header h1 {
77
    /***************/
78
    /* Typographie */
79
    /***************/
80
    font-family: 'Roboto', sans-serif;
81
    /* Police du titre : Roboto */
82
    font-size: 2rem;
83
    /* Taille du texte plus grande pour le titre principal */
84
    letter-spacing: 0.5px;
85
    /* Espacement des lettres pour un style plus aéré */
86
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
87
    /* Légère ombre portée pour améliorer la lisibilité */
88
89
    /**********************/
90
    /* Boîte & Espacement */
91
    /**********************/
92
    margin: 10px 0;
93
    /* Espace vertical autour du titre */
94
}
95
96
/* --- Figure dans le header --- */
97
body>header figure {
98
    /**********************/
99
    /* Boîte & Espacement */
100
    /**********************/
101
    margin: 0 auto 10px;
102
    /* Centre la figure horizontalement + marge basse de 10px */
103
}
104
105
/* --- Image de profil --- */
106
body>header img {
107
    /**************/
108
    /* Dimensions */
109
    /**************/
110
    width: 150px;
111
    /* Largeur fixe de l'image */
112
113
    /********************/
114
    /* Bordures & Ombre */
115
    /********************/
116
    border-radius: 50%;
117
    /* Rend l'image ronde */
118
    border: 3px solid #0066cc;
119
    /* Bordure bleue autour de l'image */
120
121
    /***************/
122
    /* Transitions */
123
    /***************/
124
    transition: transform 0.3s ease, box-shadow 0.3s ease;
125
    /* Transition fluide pour l'effet de zoom/rotation et l'ombre */
126
}
127
128
body>header img:hover {
129
    /*******************/
130
    /* Transformations */
131
    /*******************/
132
    transform: scale(1.08) rotate(2deg);
133
    /* Agrandissement léger et rotation pour effet dynamique */
134
135
    /********************/
136
    /* Bordures & Ombre */
137
    /********************/
138
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
139
    /* Ombre portée plus marquée au survol */
140
}
141
142
/* --- Légende de l'image de profil --- */
143
body>header figcaption {
144
    /***************/
145
    /* Typographie */
146
    /***************/
147
    font-size: 1rem;
148
    /* Taille normale du texte */
149
150
    /**********************/
151
    /* Boîte & Espacement */
152
    /**********************/
153
    margin-top: 8px;
154
    /* Espace entre l'image et la légende */
155
}
156
157
/* --- Navigation principale (dans le header) --- */
158
body>header nav ul {
159
    /***********/
160
    /* Flexbox */
161
    /***********/
162
    display: flex;
163
    /* Utilise Flexbox pour aligner les liens horizontalement */
164
    justify-content: center;
165
    /* Centre les éléments horizontalement */
166
    gap: 15px;
167
    /* Espace entre chaque élément de navigation */
168
169
    /**********************/
170
    /* Boîte & Espacement */
171
    /**********************/
172
    padding: 0;
173
    /* Supprime le padding par défaut */
174
    margin: 10px 0 0;
175
    /* Marge en haut de la liste, pas en bas */
176
177
    /******************/
178
    /* Style de liste */
179
    /******************/
180
    list-style: none;
181
    /* Supprime les puces de la liste */
182
}
183
184
/* --- Liens de navigation principale (dans le header) --- */
185
body>header nav a {
186
    /***************/
187
    /* Typographie */
188
    /***************/
189
    text-decoration: none;
190
    /* Supprime le soulignement des liens */
191
    color: #bfc5cb;
192
    /* Couleur bleue des liens */
193
    font-weight: bold;
194
    /* Texte en gras */
195
196
    /**********************/
197
    /* Boîte & Espacement */
198
    /**********************/
199
    padding: 6px 10px;
200
    /* Espace autour du texte pour créer un bouton */
201
202
    /************/
203
    /* Bordures */
204
    /************/
205
    border-radius: 4px;
206
    /* Coins arrondis pour les liens */
207
208
    /******************/
209
    /* Positionnement */
210
    /******************/
211
    position: relative;
212
    /* Permet de positionner des pseudo-éléments par rapport au lien */
213
    overflow: hidden;
214
    /* Masque tout ce qui dépasse du lien, utile pour l’animation de ::after */
215
216
    /***************/
217
    /* Transitions */
218
    /***************/
219
    transition: color 0.3s ease;
220
    /* Rend le changement de couleur fluide lorsqu'il y a interaction */
221
}
222
223
body>header nav a:hover {
224
    /****************************/
225
    /* Couleurs & Arrière-plans */
226
    /****************************/
227
    background-color: #ddd;
228
    /* Fond gris clair au survol pour indiquer l’interaction */
229
    color: #333;
230
    /* Couleur du texte au survol */
231
}
232
233
/* --- Barre animée sous le lien (pseudo-élément) --- */
234
body>header nav a::after {
235
    /***********************/
236
    /* Contenu (Pseudo-élément) */
237
    /***********************/
238
    content: "";
239
    /* Nécessaire pour créer un pseudo-élément vide */
240
241
    /******************/
242
    /* Positionnement */
243
    /******************/
244
    position: absolute;
245
    /* Position absolue par rapport au lien parent */
246
    bottom: 0;
247
    /* Positionné en bas du lien */
248
    left: 0;
249
    /* Aligne le pseudo-élément à gauche */
250
251
    /**************/
252
    /* Dimensions */
253
    /**************/
254
    width: 0%;
255
    /* Largeur initiale : 0%, donc invisible */
256
    height: 3px;
257
    /* Hauteur de la barre */
258
259
    /****************************/
260
    /* Couleurs & Arrière-plans */
261
    /****************************/
262
    background: white;
263
    /* Couleur de la barre */
264
265
    /***************/
266
    /* Transitions */
267
    /***************/
268
    transition: width 0.3s ease;
269
    /* Rend l’extension de la barre fluide */
270
}
271
272
/* --- Effet sur le survol de la barre de navigation --- */
273
body>header nav a:hover::after {
274
    /**************/
275
    /* Dimensions */
276
    /**************/
277
    width: 100%;
278
    /* La barre s’étend sur toute la largeur du lien */
279
}
280
281
/* --- Effet de clic sur l’élément li du header --- */
282
body>header nav li:active {
283
    /*******************/
284
    /* Transformations */
285
    /*******************/
286
    transform: scale(0.9);
287
    /* Réduit le lien de 10% lors du clic pour effet “pressé” */
288
}
289
290
/* ===========================
291
   Contenu principal (Main)
292
   =========================== */
293
294
/* --- Titre principal du main (h1) --- */
295
main>h1 {
296
    /***************/
297
    /* Typographie */
298
    /***************/
299
    text-align: center;
300
    /* Centre le titre principal du main */
301
    color: #1e3a5f;
302
    /* Couleur bleu foncé */
303
    font-size: 2rem;
304
    /* Taille du texte plus grande */
305
306
    /**********************/
307
    /* Boîte & Espacement */
308
    /**********************/
309
    margin: 20px 0;
310
    /* Espace vertical autour du titre */
311
}
312
313
/* --- Sections et articles principaux du main --- */
314
main>section,
315
main>article {
316
    /**********************/
317
    /* Boîte & Espacement */
318
    /**********************/
319
    max-width: 900px;
320
    /* Largeur maximale du contenu */
321
    margin: 0 auto 40px;
322
    /* Centre horizontalement + marge en bas de 40px */
323
    padding: 0 15px;
324
    /* Espace intérieur gauche/droite de 15px */
325
}
326
327
/* --- Titres de section et d'article (h2) --- */
328
main>section h2,
329
main>article h2 {
330
    /***************/
331
    /* Typographie */
332
    /***************/
333
    color: #1e3a5f;
334
    /* Couleur du titre (bleu foncé) */
335
    font-size: 1.5em;
336
    /* Taille du texte 1,5 fois la taille normale */
337
}
338
339
/* =========================
340
   Pied de page (Footer)
341
   ========================= */
342
footer {
343
    /***************/
344
    /* Typographie */
345
    /***************/
346
    color: #fff;
347
    /* Texte en blanc */
348
    text-align: center;
349
    /* Centre le texte horizontalement */
350
351
    /**********************/
352
    /* Boîte & Espacement */
353
    /**********************/
354
    padding: 20px;
355
    /* Espace intérieur autour du contenu */
356
357
    /****************************/
358
    /* Couleurs & Arrière-plans */
359
    /****************************/
360
    background: linear-gradient(135deg, #1e3a5f, #0a2340, #224c80, #162d50);
361
    /* Dégradé (priorise la deuxième définition au lieu du fond uni) */
362
    background-size: 200% 200%;
363
    /* Agrandit le gradient pour permettre le déplacement et l'animation */
364
365
    /***************/
366
    /* Transitions */
367
    /***************/
368
    transition: background-position 0.5s ease;
369
    /* Rend le déplacement du gradient fluide sur 0.5 seconde */
370
}
371
372
footer:hover {
373
    /****************************/
374
    /* Couleurs & Arrière-plans */
375
    /****************************/
376
    background-position: right bottom;
377
    /* Déplace le gradient vers le coin inférieur droit au survol */
378
}
379
380
footer p {
381
    /**********************/
382
    /* Boîte & Espacement */
383
    /**********************/
384
    margin: 0;
385
    /* Supprime la marge par défaut autour du paragraphe */
386
}
387
388
/* --- Réseaux sociaux dans le footer --- */
389
footer .socials {
390
    /***********/
391
    /* Flexbox */
392
    /***********/
393
    display: flex;
394
    /* Utilise Flexbox */
395
    justify-content: center;
396
    /* Centre les icônes */
397
    gap: 20px;
398
    /* Espace entre les icônes */
399
400
    /**********************/
401
    /* Boîte & Espacement */
402
    /**********************/
403
    margin-top: 15px;
404
    /* Espace au-dessus des icônes */
405
}
406
407
footer .socials a {
408
    /***************/
409
    /* Typographie */
410
    /***************/
411
    font-size: 28px;
412
    /* Taille de l'icône/police */
413
    color: white;
414
    /* Couleur de l'icône */
415
416
    /***************/
417
    /* Transitions */
418
    /***************/
419
    transition: transform 0.3s ease, color 0.3s ease;
420
    /* Animation sur la position et la couleur */
421
}
422
423
footer .socials a:hover {
424
    /*******************/
425
    /* Transformations */
426
    /*******************/
427
    transform: translateY(-3px) scale(1.2);
428
    /* Soulève et zoome l'icône */
429
430
    /************/
431
    /* Couleurs */
432
    /************/
433
    color: #00a2ff;
434
    /* Changement de couleur au survol */
435
}
Méthodecss/accueil.css
1
/* =================================
2
   Navigation Interne (dans Main)
3
   ================================= */
4
5
/* --- Liste de la navigation interne (ul) --- */
6
main nav ul {
7
    /***********/
8
    /* Flexbox */
9
    /***********/
10
    display: flex;
11
    /* Utilise Flexbox pour aligner les éléments horizontalement */
12
    justify-content: center;
13
    /* Centre les éléments dans la ligne */
14
    flex-wrap: wrap;
15
    /* Permet aux éléments de passer à la ligne si l'espace est insuffisant */
16
17
    /**********************/
18
    /* Boîte & Espacement */
19
    /**********************/
20
    gap: 12px;
21
    /* Espace de 12px entre les éléments */
22
    padding: 0;
23
    /* Supprime le padding par défaut de la liste */
24
    margin: 20px 0;
25
    /* Marge verticale de 20px au-dessus et en dessous */
26
27
    /******************/
28
    /* Style de liste */
29
    /******************/
30
    list-style: none;
31
    /* Supprime les puces de la liste */
32
}
33
34
/* --- Liens de la navigation interne (a) --- */
35
main nav a {
36
    /**********************/
37
    /* Boîte & Espacement */
38
    /**********************/
39
    display: inline-block;
40
    /* Permet au lien d'être transformable et de gérer le padding */
41
    padding: 6px 12px;
42
    /* Espace intérieur autour du texte */
43
44
    /***************/
45
    /* Typographie */
46
    /***************/
47
    text-decoration: none;
48
    /* Supprime le soulignement par défaut */
49
    color: #fff;
50
    /* Couleur du texte : blanc */
51
    font-weight: bold;
52
    /* Texte en gras */
53
54
    /****************************/
55
    /* Couleurs & Arrière-plans */
56
    /****************************/
57
    background-color: #0073e6;
58
    /* Couleur de fond bleu vif */
59
60
    /************/
61
    /* Bordures */
62
    /************/
63
    border-radius: 6px;
64
    /* Coins arrondis pour un effet "bouton" */
65
66
    /***************/
67
    /* Transitions */
68
    /***************/
69
    transition: transform 0.2s ease;
70
    /* Animation fluide pour le déplacement au survol */
71
}
72
73
/* --- Survol des liens de navigation interne --- */
74
main nav a:hover {
75
    /****************************/
76
    /* Couleurs & Arrière-plans */
77
    /****************************/
78
    /* background-color: #005bb5; <- Propriété écrasée par le dégradé ci-dessous */
79
    background: linear-gradient(135deg, #0073e6, #00a2ff);
80
    /* Dégradé appliqué au survol */
81
82
    /*******************/
83
    /* Transformations */
84
    /*******************/
85
    transform: translateY(-3px) scale(1.05);
86
    /* Soulève le lien et l’agrandit légèrement */
87
}
88
89
/* --- Focus (accessibilité) des liens de navigation interne --- */
90
main nav a:focus {
91
    /*********************/
92
    /* Accessibilité (Focus) */
93
    /*********************/
94
    outline: 3px solid #005bb5;
95
    /* Contour bleu pour l’accessibilité lors du focus clavier */
96
    outline-offset: 2px;
97
    /* Décalage du contour pour éviter qu’il touche le texte */
98
}
99
100
/* =====================
101
   Sections de Contenu
102
   ===================== */
103
104
/* --- Style général des sections --- */
105
section {
106
    /**********************/
107
    /* Boîte & Espacement */
108
    /**********************/
109
    margin: 20px auto;
110
    /* Marge verticale de 20px et centre horizontalement */
111
    padding: 0 15px;
112
    /* Espace intérieur gauche/droite de 15px */
113
114
    /***********************/
115
    /* Animation & Effets */
116
    /***********************/
117
    opacity: 0;
118
    /* Commence invisible (pour l'animation) */
119
    transform: translateY(15px);
120
    /* Décalage vertical initial pour effet de glissement */
121
    animation: fadeIn 0.8s ease forwards;
122
    /* Animation vers la position finale avec opacité pleine */
123
}
124
125
/* --- Titres de section (h2) --- */
126
section h2 {
127
    /***************/
128
    /* Typographie */
129
    /***************/
130
    font-size: 1.5rem;
131
    /* Taille du titre légèrement plus grande */
132
    color: #1e3a5f;
133
    /* Couleur bleu foncé */
134
135
    /**********************/
136
    /* Boîte & Espacement */
137
    /**********************/
138
    margin-top: 30px;
139
    /* Espace au-dessus du titre */
140
    margin-bottom: 10px;
141
    /* Espace en dessous du titre */
142
    padding-bottom: 5px;
143
    /* Espace entre le texte et la ligne */
144
145
    /************/
146
    /* Bordures */
147
    /************/
148
    border-bottom: 2px solid #ddd;
149
    /* Ligne sous le titre pour le séparer visuellement */
150
}
151
152
/* --- Paragraphes de section --- */
153
section p {
154
    /**********************/
155
    /* Boîte & Espacement */
156
    /**********************/
157
    margin-bottom: 15px;
158
    /* Espace sous les paragraphes */
159
}
160
161
/* =============================================
162
   Éléments de Contenu (Listes, Liens, Adresse) 
163
   ============================================= */
164
165
/* --- Listes à puces (dans section) --- */
166
section ul {
167
    /**********************/
168
    /* Boîte & Espacement */
169
    /**********************/
170
    padding-left: 20px;
171
    /* Décalage de la liste vers la droite */
172
    margin-bottom: 20px;
173
    /* Espace sous la liste */
174
}
175
176
/* --- Éléments de liste (dans section) --- */
177
section li {
178
    /**********************/
179
    /* Boîte & Espacement */
180
    /**********************/
181
    margin-bottom: 8px;
182
    /* Espace entre les éléments de la liste */
183
}
184
185
/* --- Liens (dans section) --- */
186
section a {
187
    /***************/
188
    /* Typographie */
189
    /***************/
190
    color: #0066cc;
191
    /* Couleur bleue pour les liens */
192
    text-decoration: none;
193
    /* Supprime le soulignement par défaut */
194
}
195
196
section a:hover {
197
    /***************/
198
    /* Typographie */
199
    /***************/
200
    text-decoration: underline;
201
    /* Remet le soulignement au survol */
202
}
203
204
/* --- Balise Adresse --- */
205
address {
206
    /***************/
207
    /* Typographie */
208
    /***************/
209
    font-style: normal;
210
    /* Texte non italique, contrairement au style par défaut */
211
212
    /**********************/
213
    /* Boîte & Espacement */
214
    /**********************/
215
    display: inline;
216
    /* L'adresse s'affiche sur la même ligne si possible */
217
}
218
219
/* ===============================
220
   Classes Utilitaires (Icônes)
221
   =============================== */
222
223
/* --- Base des icônes (pseudo-élément) --- */
224
.icon-about::before,
225
.icon-competences::before,
226
.icon-experiences::before,
227
.icon-formations::before {
228
    /**********************/
229
    /* Boîte & Espacement */
230
    /**********************/
231
    margin-right: 8px;
232
    /* Espace entre l'icône et le texte du titre */
233
}
234
235
/* --- Icônes spécifiques (Emoji) --- */
236
.icon-about::before {
237
    content: "👤";
238
    /* Emoji représentant "À propos" */
239
}
240
241
.icon-competences::before {
242
    content: "💻";
243
    /* Emoji représentant les compétences informatiques */
244
}
245
246
.icon-experiences::before {
247
    content: "📅";
248
    /* Emoji représentant les expériences/agenda */
249
}
250
251
.icon-formations::before {
252
    content: "🎓";
253
    /* Emoji représentant les formations/diplômes */
254
}
255
256
/* ==============
257
   Animations
258
   ============== */
259
260
/* --- Délais d'animation pour les sections --- */
261
section:nth-of-type(2) {
262
    animation-delay: 0.2s;
263
    /* Décalage pour que cette section apparaisse après 0.2s */
264
}
265
266
section:nth-of-type(3) {
267
    animation-delay: 0.4s;
268
    /* Décalage pour que cette section apparaisse après 0.4s */
269
}
270
271
section:nth-of-type(4) {
272
    animation-delay: 0.6s;
273
    /* Décalage pour que cette section apparaisse après 0.6s */
274
}
275
276
/* --- Définition de l’animation fadeIn --- */
277
@keyframes fadeIn {
278
    to {
279
        opacity: 1;
280
        /* Devient complètement visible */
281
        transform: translateY(0);
282
        /* Remonte à sa position normale */
283
    }
284
}
Méthodecss/projets.css
1
/* ==================================
2
   Section des Projets (Conteneur)
3
   ================================== */
4
.projets {
5
    /***********/
6
    /* Flexbox */
7
    /***********/
8
    display: flex;
9
    /* Active Flexbox pour le conteneur */
10
    flex-wrap: wrap;
11
    /* Permet aux éléments de passer à la ligne */
12
    justify-content: center;
13
    /* Centre les articles horizontalement */
14
15
    /**********************/
16
    /* Boîte & Espacement */
17
    /**********************/
18
    gap: 20px;
19
    /* Espace de 20px entre les articles */
20
    padding: 10px 0;
21
    /* Espace intérieur vertical */
22
}
23
24
/* --- Titre principal de la section --- */
25
.projets>h2 {
26
    /**************/
27
    /* Dimensions */
28
    /**************/
29
    width: 100%;
30
    /* Prend toute la largeur */
31
32
    /***************/
33
    /* Typographie */
34
    /***************/
35
    text-align: center;
36
    /* Centré horizontalement */
37
    font-size: 1.8rem;
38
    /* Plus grand que les titres d’article */
39
    font-weight: 600;
40
    /* Texte semi-gras */
41
42
    /**********************/
43
    /* Boîte & Espacement */
44
    /**********************/
45
    margin-bottom: 20px;
46
    /* Espace sous le titre */
47
    margin-top: 10px;
48
    /* Espace au-dessus du titre */
49
    padding-bottom: 5px;
50
    /* Espace entre le texte et la ligne */
51
52
    /************/
53
    /* Bordures */
54
    /************/
55
    border-bottom: 2px solid #ccc;
56
    /* Ligne discrète sous le titre */
57
}
58
59
/* ================================
60
   Cartes de Projet (Article)
61
   ================================ */
62
63
/* --- Articles individuels --- */
64
.projets>article {
65
    /***********/
66
    /* Flexbox */
67
    /***********/
68
    flex: 0 1 220px;
69
    /* Base de 220px, ne grandit pas, peut rétrécir */
70
71
    /**********************/
72
    /* Boîte & Espacement */
73
    /**********************/
74
    padding: 10px;
75
    /* Espace intérieur */
76
77
    /****************************/
78
    /* Couleurs & Arrière-plans */
79
    /****************************/
80
    /* background: #f9f9f9; <- Supprimé car écrasé par le dégradé */
81
    background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 25%, #d0f0ff 50%, #f0f8ff 75%, #ffffff 100%);
82
    background-size: 300% 300%;
83
    /* Agrandit le dégradé pour l'animation */
84
85
    /********************/
86
    /* Bordures & Ombre */
87
    /********************/
88
    border: 1px solid #ddd;
89
    /* Bordure grise légère */
90
    border-radius: 8px;
91
    /* Coins arrondis */
92
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
93
    /* Ombre discrète */
94
95
    /***************/
96
    /* Typographie */
97
    /***************/
98
    text-align: left;
99
    /* Aligne le texte à gauche */
100
101
    /******************/
102
    /* Positionnement */
103
    /******************/
104
    position: relative;
105
    /* Contexte pour d'éventuels éléments absolus */
106
107
    /***************/
108
    /* Transitions */
109
    /***************/
110
    transition: transform 0.3s ease, box-shadow 0.3s ease;
111
    /* Animation fluide au survol */
112
}
113
114
/* --- Survol des articles --- */
115
.projets>article:hover {
116
    /*******************/
117
    /* Transformations */
118
    /*******************/
119
    transform: translateY(-5px);
120
    /* Soulève la carte */
121
122
    /********************/
123
    /* Bordures & Ombre */
124
    /********************/
125
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
126
    /* Ombre plus prononcée */
127
128
    /*************/
129
    /* Animation */
130
    /*************/
131
    animation: gradientMove 3s linear infinite;
132
    /* Lance l'animation du dégradé */
133
}
134
135
/* ===========================================
136
   Contenu des Cartes (Typo, Images, Liens)
137
   =========================================== */
138
139
/* --- Titres des projets (h3) --- */
140
.projets h3 {
141
    /**********************/
142
    /* Boîte & Espacement */
143
    /**********************/
144
    margin-top: 0;
145
    /* Supprime la marge haute */
146
147
    /***************/
148
    /* Typographie */
149
    /***************/
150
    font-size: 1.1rem;
151
    /* Taille du titre de la carte */
152
}
153
154
/* --- Paragraphes des projets --- */
155
.projets p {
156
    /***************/
157
    /* Typographie */
158
    /***************/
159
    font-size: 0.9rem;
160
    /* Taille du texte réduite */
161
    color: #333;
162
    /* Couleur gris foncé */
163
}
164
165
/* --- Conteneur Figure (image) --- */
166
.projets figure {
167
    /**********************/
168
    /* Boîte & Espacement */
169
    /**********************/
170
    margin: 0;
171
    /* Supprime les marges par défaut */
172
    padding: 0;
173
    /* Supprime le padding par défaut */
174
}
175
176
/* --- Images des projets --- */
177
.projets figure img {
178
    /**************/
179
    /* Dimensions */
180
    /**************/
181
    width: 100%;
182
    /* Image responsive en largeur */
183
    height: auto;
184
    /* Maintient les proportions */
185
186
    /**********************/
187
    /* Boîte & Espacement */
188
    /**********************/
189
    margin-bottom: 8px;
190
    /* Espace sous l'image */
191
192
    /************/
193
    /* Bordures */
194
    /************/
195
    border-radius: 4px;
196
    /* Coins légèrement arrondis */
197
    border: 1px solid #ccc;
198
    /* Bordure grise */
199
200
    /***************/
201
    /* Transitions */
202
    /***************/
203
    transition: transform 0.3s ease, box-shadow 0.3s ease;
204
    /* Animation au survol */
205
}
206
207
/* --- Survol des images --- */
208
.projets figure img:hover {
209
    /*******************/
210
    /* Transformations */
211
    /*******************/
212
    transform: scale(1.05);
213
    /* Léger zoom */
214
215
    /********************/
216
    /* Bordures & Ombre */
217
    /********************/
218
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
219
    /* Ombre plus marquée */
220
}
221
222
/* --- Légendes des images --- */
223
.projets figure figcaption {
224
    /***************/
225
    /* Typographie */
226
    /***************/
227
    font-size: 0.85rem;
228
    /* Petite taille de police */
229
    color: #666;
230
    /* Couleur gris moyen */
231
    text-align: center;
232
    /* Texte centré */
233
}
234
235
/* --- Liens des projets --- */
236
.projets a {
237
    /**********************/
238
    /* Boîte & Espacement */
239
    /**********************/
240
    display: inline-block;
241
    /* Permet l'application de 'transform' */
242
243
    /***************/
244
    /* Typographie */
245
    /***************/
246
    text-decoration: none;
247
    /* Supprime le soulignement */
248
    color: #0066cc;
249
    /* Couleur bleue */
250
    font-weight: bold;
251
    /* Texte en gras */
252
253
    /***************/
254
    /* Transitions */
255
    /***************/
256
    transition: color 0.3s ease, transform 0.2s ease;
257
    /* Animation sur la couleur et la position */
258
}
259
260
/* --- Survol des liens --- */
261
.projets a:hover {
262
    /***************/
263
    /* Typographie */
264
    /***************/
265
    color: #004a99;
266
    /* Bleu plus foncé */
267
    text-decoration: underline;
268
    /* Ajoute le soulignement */
269
270
    /*******************/
271
    /* Transformations */
272
    /*******************/
273
    transform: translateY(-2px) scale(1.05);
274
    /* Léger saut et zoom */
275
}
276
277
/* --- Focus (accessibilité) des liens --- */
278
.projets a:focus {
279
    /*********************/
280
    /* Accessibilité (Focus) */
281
    /*********************/
282
    outline: 3px solid #005bb5;
283
    /* Contour visible pour la navigation clavier */
284
    outline-offset: 2px;
285
    /* Espace entre le lien et le contour */
286
}
287
288
/* ===========================
289
   Animations (Keyframes)
290
   =========================== */
291
292
/* --- Animation du dégradé de fond --- */
293
@keyframes gradientMove {
294
    0% {
295
        background-position: 0% 0%;
296
        /* Début en haut à gauche */
297
    }
298
299
    50% {
300
        background-position: 100% 100%;
301
        /* Milieu en bas à droite */
302
    }
303
304
    100% {
305
        background-position: 0% 0%;
306
        /* Retour au début */
307
    }
308
}
Exemple

  See the Pen 
  Séance 7-index by Vincent-Vanneste (@vincent-vanneste)
  on CodePen.




Séance 7- Accueil
Exemple

  See the Pen 
  Séance 7-projets by Vincent-Vanneste (@vincent-vanneste)
  on CodePen.




Séance 7- Projets