Séance 8
Objectifs
Être capable de créer des pages reliées entre elles.
Structurer du contenu répétitif avec un modèle réutilisable.
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>
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
91
<footer aria-label="Pied de page">
92
<p>© 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés.</p>
93
<!-- Réseaux sociaux -->94
<div class="socials" role="navigation" aria-label="Réseaux sociaux">
95
<a href="https://www.facebook.com/" target="_blank" aria-label="Facebook">
96
<i class="fab fa-facebook-f"></i>
97
</a>
98
<a href="https://www.linkedin.com/in/" target="_blank" aria-label="LinkedIn">
99
<i class="fab fa-linkedin-in"></i>
100
</a>
101
<a href="https://www.instagram.com/" target="_blank" aria-label="Instagram">
102
<i class="fab fa-instagram"></i>
103
</a>
104
<a href="https://x.com/" target="_blank" aria-label="X">
105
<i class="fab fa-x-twitter"></i>
106
</a>
107
</div>
108
</footer>
109
110
</body>
111
112
</html>
Méthode : projets/projetX.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" role="banner" aria-label="En-tête du site">
21
<figure>
22
<img src="../images/photo.jpg" alt="Photo de Vincent Vanneste">
23
<figcaption>Vincent Vanneste</figcaption>
24
</figure>
25
26
<h1>Portfolio de Vincent Vanneste</h1>
27
28
<nav role="navigation" aria-label="Navigation principale">
29
<ul>
30
<li><a href="../index.html">Accueil</a></li>
31
<li><a href="../projets.html">Projets</a></li>
32
<li><a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a></li>
33
</ul>
34
</nav>
35
</header>
36
37
<main role="main">
38
<article role="article" aria-labelledby="titre-projetX" class="projets">
39
40
<header>
41
<h1 id="titre-projetX">Projet X</h1>
42
<h2>Découverte du HTML et du CSS</h2>
43
<figure>
44
<img src="../images/projetX.png" alt="Capture d’écran du Projet X">
45
<figcaption>Image représentant le projet X</figcaption>
46
</figure>
47
</header>
48
49
<section aria-labelledby="description-projet">
50
<h2 id="description-projet">Description du projet</h2>
51
<p>
52
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, voluptate sapiente? Est praesentium
53
consequuntur aut aperiam inventore rem facilis dolore excepturi in dolorem itaque, mollitia
54
voluptatibus et perferendis, dignissimos ipsam?
55
</p>
56
</section>
57
58
<section aria-labelledby="objectifs-projet">
59
<h2 id="objectifs-projet">Objectifs pédagogiques</h2>
60
<ul>
61
<li>Lorem ipsum dolor sit amet.</li>
62
<li>Lorem ipsum dolor sit amet.</li>
63
<li>Lorem ipsum dolor sit amet.</li>
64
<li>Lorem ipsum dolor sit amet.</li>
65
</ul>
66
</section>
67
68
<section aria-labelledby="competences-visees">
69
<h2 id="competences-visees">Compétences visées</h2>
70
<ul>
71
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, expedita!</li>
72
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, et.</li>
73
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, expedita!</li>
74
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, et.</li>
75
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, expedita!</li>
76
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, et.</li>
77
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, expedita!</li>
78
</ul>
79
</section>
80
81
<section aria-labelledby="resultat-projet">
82
<h2 id="resultat-projet">Résultat obtenu</h2>
83
<p>
84
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam illum optio asperiores quo eveniet
85
possimus maiores. Nesciunt, vel? Odit exercitationem architecto fuga magni quidem ea, tempore ullam
86
mollitia libero nesciunt?
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/projetX-1.html" class="prev">← Projet précédent</a>
97
<a href="../projets/projetX+1.html" class="next">Projet suivant →</a>
98
</nav>
99
100
</article>
101
</main>
102
103
<footer role="contentinfo" aria-label="Pied de page">
104
<p>© 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés.</p>
105
<div class="socials">
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 (Twitter)">
116
<i class="fab fa-x-twitter"></i>
117
</a>
118
</div>
119
</footer>
120
121
</body>
122
123
</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>
22
<img src="../images/photo.jpg" alt="Photo de Vincent Vanneste">
23
<figcaption>Vincent Vanneste</figcaption>
24
</figure>
25
26
<h1>Portfolio de Vincent Vanneste</h1>
27
28
<nav aria-label="Navigation principale">
29
<ul>
30
<li><a href="../index.html">Accueil</a></li>
31
<li><a href="../projets.html">Projets</a></li>
32
<li><a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a></li>
33
</ul>
34
</nav>
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
<div class="socials" role="navigation" aria-label="Réseaux sociaux">
105
<a href="https://www.facebook.com/" target="_blank" aria-label="Facebook">
106
<i class="fab fa-facebook-f"></i>
107
</a>
108
<a href="https://www.linkedin.com/in/" target="_blank" aria-label="LinkedIn">
109
<i class="fab fa-linkedin-in"></i>
110
</a>
111
<a href="https://www.instagram.com/" target="_blank" aria-label="Instagram">
112
<i class="fab fa-instagram"></i>
113
</a>
114
<a href="https://x.com/" target="_blank" aria-label="X (Twitter)">
115
<i class="fab fa-x-twitter"></i>
116
</a>
117
</div>
118
</footer>
119
120
</body>
121
122
</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 (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éthode : css/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 Contenu102
========================================================================== */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
Animations258
========================================================================== */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éthode : css/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
}
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 8-index by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Séance 8- Accueil
Exemple :
See the Pen Séance 8-projets by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Séance 8- Projets
Exemple :
See the Pen Séance 8-index by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Séance 8- Projet1