Séance 6
Objectifs
Comprendre le fonctionnement du box model.
Utiliser Flexbox pour organiser la mise en page du site.
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
</head>
11
12
<body>
13
14
<header id="haut" role="banner" aria-label="En-tête du site">
15
<figure role="img" aria-labelledby="figcaption-vv">
16
<img src="images/photo.jpg" alt="Photo de Vincent Vanneste">
17
<figcaption id="figcaption-vv">Vincent Vanneste</figcaption>
18
</figure>
19
20
<h1>Portfolio de Vincent Vanneste</h1>
21
<nav role="navigation" aria-label="Navigation principale">
22
<ul>
23
<li><a href="index.html">Accueil</a></li>
24
<li><a href="projets.html">Projets</a></li>
25
<li><a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a></li>
26
</ul>
27
</nav>
28
29
</header>
30
31
<main role="main">
32
<nav role="navigation" aria-label="Navigation interne à la page">
33
<ul>
34
<li><a href="#about">À propos</a></li>
35
<li><a href="#competences">Compétences</a></li>
36
<li><a href="#experiences">Expériences</a></li>
37
<li><a href="#formations">Formations</a></li>
38
</ul>
39
</nav>
40
41
<!-- À propos -->42
<section id="about" role="region" aria-labelledby="titre-about">
43
<h2 class="icon-about" id="titre-about">À propos</h2>
44
<p>Je suis directeur des études du DEUST WMI de Calais et j'enseigne les fondamentaux du développement web
45
(HTML, CSS, JavaScript, PHP). Passionné par la transmission des connaissances, j'accompagne mes
46
étudiants dans l'acquisition des compétences nécessaires pour réussir dans le secteur du numérique.</p>
47
<address role="contentinfo" aria-label="Coordonnées">
48
<dl>
49
<dt>Localisation :</dt>
50
<dd>Calais, France</dd>
51
<dt>Site :</dt>
52
<dd><a href="https://vincent-vanneste.fr/" target="_blank">vincent-vanneste.fr</a></dd>
53
<dt>Email :</dt>
54
<dd><a href="mailto:vincent.vanneste@univ-littoral.fr">vincent.vanneste@univ-littoral.fr</a></dd>
55
</dl>
56
</address>
57
</section>
58
59
60
61
<!-- Compétences -->62
<section id="competences" role="region" aria-labelledby="titre-competences">
63
<h2 class="icon-competences" id="titre-competences">Compétences</h2>
64
<ul>
65
<li>HTML</li>
66
<li>CSS</li>
67
<li>Responsive</li>
68
<li>Accessibilité</li>
69
<li>JavaScript</li>
70
<li>PHP • Laravel 11</li>
71
<li>MySQL</li>
72
<li>Git & GitHub</li>
73
</ul>
74
</section>
75
76
77
78
<!-- Expériences -->79
<section id="experiences" role="region" aria-labelledby="titre-experiences">
80
<h2 class="icon-experiences" id="titre-experiences">Expériences récentes</h2>
81
<ul>
82
<li>
83
<strong>Enseignant – Licence 1 Informatique</strong><br>
84
Depuis <time datetime="2025">2025</time> •
85
<address>
86
<a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a>
87
</address><br>
88
Introduction à HTML, CSS, JS
89
</li>
90
<li>
91
<strong>Directeur des études – DEUST WMI</strong><br>
92
Depuis <time datetime="2024">2024 → 2025</time> •
93
<address>
94
<a href="https://www.univ-littoral.fr/" target="_blank">FCU ULCO</a>
95
</address>
96
</li>
97
</ul>
98
</section>
99
100
<!-- Formations -->101
<section id="formations" role="region" aria-labelledby="titre-formations">
102
<h2 class="icon-formations" id="titre-formations">Formations</h2>
103
<ul>
104
<li>
105
<strong>Doctorat productique, automatique et informatique industrielle</strong><br>
106
<time datetime="2000">2000</time> •
107
<address>
108
<a href="https://www.univ-lille.fr/" target="_blank">Université de Lille</a>
109
</address>
110
</li>
111
<li>
112
<strong>CAPET Technologie</strong><br>
113
<time datetime="1998">1998</time> •
114
<address>
115
<a href="https://www.iufm-douai.fr/" target="_blank">IUFM Douais</a>
116
</address>
117
</li>
118
</ul>
119
</section>
120
121
</main>
122
123
<footer role="contentinfo" aria-label="Pied de page">
124
<p>© 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés.</p>
125
</footer>
126
127
128
</body>
129
130
</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
</head>
11
12
<body>
13
14
<header id="haut" role="banner" aria-label="En-tête du site">
15
<figure role="img" aria-labelledby="figcaption-vv">
16
<img src="images/photo.jpg" alt="Photo de Vincent Vanneste">
17
<figcaption id="figcaption-vv">Vincent Vanneste</figcaption>
18
</figure>
19
20
<h1>Portfolio de Vincent Vanneste</h1>
21
<nav role="navigation" aria-label="Navigation principale">
22
<ul>
23
<li><a href="index.html">Accueil</a></li>
24
<li><a href="projets.html">Projets</a></li>
25
<li><a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a></li>
26
</ul>
27
</nav>
28
29
</header>
30
31
<main role="main">
32
<h1>Mes projets</h1>
33
34
<section role="region" aria-labelledby="liste-projets">
35
<h2 id="liste-projets">Liste des projets</h2>
36
37
<div class="projets">
38
<article role="article" aria-labelledby="titre-projet1">
39
<h3 id="titre-projet1"><a href="projet1.html">Projet 1</a></h3>
40
<figure role="img" aria-labelledby="fig-projet1">
41
<img src="images/vignettes/projet1.jpg" alt="Aperçu du Projet 1">
42
<figcaption id="fig-projet1">Aperçu du Projet 1</figcaption>
43
</figure>
44
<p>Un projet qui présente les bases du HTML et de la mise en page.</p>
45
</article>
46
47
<article role="article" aria-labelledby="titre-projet2">
48
<h3 id="titre-projet2"><a href="projet2.html">Projet 2</a></h3>
49
<figure role="img" aria-labelledby="fig-projet2">
50
<img src="images/vignettes/projet2.jpg" alt="Aperçu du Projet 2">
51
<figcaption id="fig-projet2">Aperçu du Projet 2</figcaption>
52
</figure>
53
<p>Un site en CSS avec une mise en forme responsive adaptée aux mobiles.</p>
54
</article>
55
56
<article role="article" aria-labelledby="titre-projet3">
57
<h3 id="titre-projet3"><a href="projet3.html">Projet 3</a></h3>
58
<figure role="img" aria-labelledby="fig-projet3">
59
<img src="images/vignettes/projet3.jpg" alt="Aperçu du Projet 3">
60
<figcaption id="fig-projet3">Aperçu du Projet 3</figcaption>
61
</figure>
62
<p>Un mini-site en JavaScript avec des interactions simples.</p>
63
</article>
64
65
<article role="article" aria-labelledby="titre-projet4">
66
<h3 id="titre-projet4"><a href="projet4.html">Projet 4</a></h3>
67
<figure role="img" aria-labelledby="fig-projet4">
68
<img src="images/vignettes/projet4.jpg" alt="Aperçu du Projet 4">
69
<figcaption id="fig-projet4">Aperçu du Projet 4</figcaption>
70
</figure>
71
<p>Une application web utilisant PHP et MySQL pour gérer des données.</p>
72
</article>
73
74
<article role="article" aria-labelledby="titre-projet5">
75
<h3 id="titre-projet5"><a href="projet5.html">Projet 5</a></h3>
76
<figure role="img" aria-labelledby="fig-projet5">
77
<img src="images/vignettes/projet5.jpg" alt="Aperçu du Projet 5">
78
<figcaption id="fig-projet5">Aperçu du Projet 5</figcaption>
79
</figure>
80
<p>Un projet complet combinant HTML, CSS, JS et base de données.</p>
81
</article>
82
</div>
83
</section>
84
</main>
85
86
87
<footer role="contentinfo" aria-label="Pied de page">
88
<p>© 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés.</p>
89
</footer>
90
91
</body>
92
93
</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: Arial, sans-serif;
11
/* Police principale du texte : Arial ou une police sans-serif */12
color: #333;
13
/* Couleur du texte : gris foncé */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: #fff;
27
/* Fond de la page : blanc */28
}
29
30
/* ==========================================================================31
En-tête (Header)32
========================================================================== */33
header {34
/***************/35
/* Typographie */36
/***************/37
text-align: center;
38
/* Centre le contenu horizontalement */39
40
/**********************/41
/* Boîte & Espacement */42
/**********************/43
padding: 20px;
44
/* Espace intérieur autour du contenu du header */45
46
/****************************/47
/* Couleurs & Arrière-plans */48
/****************************/49
background: #f0f0f0;
50
/* Fond gris clair */51
52
/************/53
/* Bordures */54
/************/55
border-bottom: 2px solid #ddd;
56
/* Bordure en bas du header pour le séparer du contenu */57
}
58
59
/* --- Titre principal du Header (h1) --- */60
header h1 {
61
/***************/62
/* Typographie */63
/***************/64
font-size: 2rem;
65
/* Taille du texte plus grande pour le titre principal */66
67
/**********************/68
/* Boîte & Espacement */69
/**********************/70
margin: 10px 0;
71
/* Espace vertical autour du titre */72
}
73
74
/* --- Figure dans le header --- */75
header figure {
76
/**********************/77
/* Boîte & Espacement */78
/**********************/79
margin: 0 auto 10px;
80
/* Centre la figure horizontalement + marge basse de 10px */81
}
82
83
/* --- Image de profil --- */84
header img {
85
/**************/86
/* Dimensions */87
/**************/88
width: 150px;
89
/* Largeur fixe de l'image */90
91
/************/92
/* Bordures */93
/************/94
border-radius: 50%;
95
/* Rend l'image ronde */96
border: 3px solid #0066cc;
97
/* Bordure bleue autour de l'image */98
}
99
100
/* --- Légende de l'image de profil --- */101
header figcaption {
102
/***************/103
/* Typographie */104
/***************/105
font-size: 1rem;
106
/* Taille normale du texte */107
108
/**********************/109
/* Boîte & Espacement */110
/**********************/111
margin-top: 8px;
112
/* Espace entre l'image et la légende */113
}
114
115
/* --- Navigation principale (dans le header) --- */116
header nav ul {
117
/***********/118
/* Flexbox */119
/***********/120
display: flex;
121
/* Utilise Flexbox pour aligner les liens horizontalement */122
justify-content: center;
123
/* Centre les éléments horizontalement */124
125
/**********************/126
/* Boîte & Espacement */127
/**********************/128
gap: 15px;
129
/* Espace entre chaque élément de navigation */130
padding: 0;
131
/* Supprime le padding par défaut */132
margin: 10px 0 0;
133
/* Marge en haut de la liste, pas en bas */134
135
/******************/136
/* Style de liste */137
/******************/138
list-style: none;
139
/* Supprime les puces de la liste */140
}
141
142
/* --- Liens de navigation principale (dans le header) --- */143
header nav a {
144
/***************/145
/* Typographie */146
/***************/147
text-decoration: none;
148
/* Supprime le soulignement des liens */149
color: #0066cc;
150
/* Couleur bleue des liens */151
font-weight: bold;
152
/* Texte en gras */153
154
/**********************/155
/* Boîte & Espacement */156
/**********************/157
padding: 6px 10px;
158
/* Espace autour du texte pour créer un bouton */159
160
/************/161
/* Bordures */162
/************/163
border-radius: 4px;
164
/* Coins arrondis pour les liens */165
}
166
167
header nav a:hover {
168
/****************************/169
/* Couleurs & Arrière-plans */170
/****************************/171
background-color: #ddd;
172
/* Fond gris clair au survol pour indiquer l’interaction */173
}
174
175
/* ==========================================================================176
Contenu principal (Main)177
========================================================================== */178
179
/* --- Titre principal du main (h1) --- */180
main>h1 {
181
/***************/182
/* Typographie */183
/***************/184
text-align: center;
185
/* Centre le titre principal du main */186
color: #1e3a5f;
187
/* Couleur bleu foncé */188
font-size: 2rem;
189
/* Taille du texte plus grande */190
191
/**********************/192
/* Boîte & Espacement */193
/**********************/194
margin: 20px 0;
195
/* Espace vertical autour du titre */196
}
197
198
/* --- Sections principales du main --- */199
main>section {
200
/**********************/201
/* Boîte & Espacement */202
/**********************/203
max-width: 900px;
204
/* Largeur maximale du contenu */205
margin: 0 auto 40px;
206
/* Centre horizontalement + marge en bas de 40px */207
padding: 0 15px;
208
/* Espace intérieur gauche/droite de 15px */209
}
210
211
/* --- Titres de section (h2) --- */212
main>section h2 {
213
/***************/214
/* Typographie */215
/***************/216
color: #1e3a5f;
217
/* Couleur du titre (bleu foncé) */218
font-size: 1.5em;
219
/* Taille du texte 1,5 fois la taille normale */220
}
221
222
/* ==========================================================================223
Pied de page (Footer)224
========================================================================== */225
footer {226
/***************/227
/* Typographie */228
/***************/229
color: #fff;
230
/* Texte en blanc */231
text-align: center;
232
/* Centre le texte horizontalement */233
234
/**********************/235
/* Boîte & Espacement */236
/**********************/237
padding: 20px;
238
/* Espace intérieur autour du contenu */239
240
/****************************/241
/* Couleurs & Arrière-plans */242
/****************************/243
background: #1e3a5f;
244
/* Fond bleu foncé */245
}
246
247
footer p {
248
/**********************/249
/* Boîte & Espacement */250
/**********************/251
margin: 0;
252
/* Supprime la marge par défaut autour du paragraphe */253
}
1. display: flex;
Transforme la liste
<ul>en conteneur flex.Ses enfants directs
<li>deviennent des éléments flex.Par défaut, Flexbox aligne les éléments horizontalement (
flex-direction: row), donc les liens de navigation sont placés côte à côte au lieu de verticalement.
2. justify-content: center;
Centre les éléments flex horizontalement dans le conteneur.
Sans cela, les éléments se seraient alignés à gauche par défaut.
Dans ce cas, tous les liens de navigation sont centrés dans le header.
3. gap: 15px;
Crée un espace uniforme de 15px entre chaque élément flex (chaque
<li>).Plus pratique que de mettre des
margin-rightsur chaque<li>car Flex gère automatiquement l’espacement.
4. Compléments liés à Flex
Les autres propriétés (
list-style: none; padding: 0; margin: 10px 0 0;) ne font pas partie de Flexbox, mais elles permettent de nettoyer le style par défaut de la liste pour que la mise en page soit propre.
Méthode : css/accueil.css
1
/* ==========================================================================2
Navigation Interne (dans Main)3
========================================================================== */4
5
/* --- Liste de la navigation (ul) --- */6
main nav ul {
7
/***********/8
/* 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 (a) --- */35
main nav a {
36
/***************/37
/* Typographie */38
/***************/39
text-decoration: none;
40
/* Supprime le soulignement par défaut */41
color: #fff;
42
/* Couleur du texte : blanc */43
font-weight: bold;
44
/* Texte en gras */45
46
/**********************/47
/* Boîte & Espacement */48
/**********************/49
padding: 6px 12px;
50
/* Espace intérieur autour du texte */51
52
/****************************/53
/* Couleurs & Arrière-plans */54
/****************************/55
background-color: #0073e6;
56
/* Couleur de fond bleu vif */57
58
/************/59
/* Bordures */60
/************/61
border-radius: 6px;
62
/* Coins arrondis pour un effet "bouton" */63
}
64
65
/* --- Survol des liens de navigation --- */66
main nav a:hover {
67
/****************************/68
/* Couleurs & Arrière-plans */69
/****************************/70
background-color: #005bb5;
71
/* Fond bleu plus foncé au survol pour indiquer l’interaction */72
}
73
74
/* ==========================================================================75
Sections de Contenu76
========================================================================== */77
78
/* --- Style général des sections --- */79
section {80
/**********************/81
/* Boîte & Espacement */82
/**********************/83
margin: 20px auto;
84
/* Marge verticale de 20px et centre horizontalement */85
padding: 0 15px;
86
/* Espace intérieur gauche/droite de 15px */87
}
88
89
/* --- Titres de section (h2) --- */90
section h2 {
91
/***************/92
/* Typographie */93
/***************/94
font-size: 1.5rem;
95
/* Taille du titre légèrement plus grande */96
color: #1e3a5f;
97
/* Couleur bleu foncé */98
99
/**********************/100
/* Boîte & Espacement */101
/**********************/102
margin-top: 30px;
103
/* Espace au-dessus du titre */104
margin-bottom: 10px;
105
/* Espace en dessous du titre */106
padding-bottom: 5px;
107
/* Espace entre le texte et la ligne */108
109
/************/110
/* Bordures */111
/************/112
border-bottom: 2px solid #ddd;
113
/* Ligne sous le titre pour le séparer visuellement */114
}
115
116
/* --- Paragraphes de section --- */117
section p {
118
/**********************/119
/* Boîte & Espacement */120
/**********************/121
margin-bottom: 15px;
122
/* Espace sous les paragraphes */123
}
124
125
/* ==========================================================================126
Éléments de Contenu (Listes, Liens, Adresse)127
========================================================================== */128
129
/* --- Listes à puces (dans section) --- */130
section ul {
131
/**********************/132
/* Boîte & Espacement */133
/**********************/134
padding-left: 20px;
135
/* Décalage de la liste vers la droite */136
margin-bottom: 20px;
137
/* Espace sous la liste */138
}
139
140
/* --- Éléments de liste (dans section) --- */141
section li {
142
/**********************/143
/* Boîte & Espacement */144
/**********************/145
margin-bottom: 8px;
146
/* Espace entre les éléments de la liste */147
}
148
149
/* --- Liens (dans section) --- */150
section a {
151
/***************/152
/* Typographie */153
/***************/154
color: #0066cc;
155
/* Couleur bleue pour les liens */156
text-decoration: none;
157
/* Supprime le soulignement par défaut */158
}
159
160
section a:hover {
161
/***************/162
/* Typographie */163
/***************/164
text-decoration: underline;
165
/* Remet le soulignement au survol */166
}
167
168
/* --- Balise Adresse --- */169
address {170
/***************/171
/* Typographie */172
/***************/173
font-style: normal;
174
/* Texte non italique, contrairement au style par défaut */175
176
/**********************/177
/* Boîte & Espacement */178
/**********************/179
display: inline;
180
/* L'adresse s'affiche sur la même ligne si possible */181
}
182
183
/* ==========================================================================184
Classes Utilitaires (Icônes)185
========================================================================== */186
187
/* --- Base des icônes (pseudo-élément) --- */188
.icon-about::before,
189
.icon-competences::before,
190
.icon-experiences::before,
191
.icon-formations::before {
192
/**********************/193
/* Boîte & Espacement */194
/**********************/195
margin-right: 8px;
196
/* Espace entre l'icône et le texte du titre */197
}
198
199
/* --- Icônes spécifiques (Emoji) --- */200
.icon-about::before {
201
content: "👤";
202
/* Emoji représentant "À propos" */203
}
204
205
.icon-competences::before {
206
content: "💻";
207
/* Emoji représentant les compétences informatiques */208
}
209
210
.icon-experiences::before {
211
content: "📅";
212
/* Emoji représentant les expériences/agenda */213
}
214
215
.icon-formations::before {
216
content: "🎓";
217
/* Emoji représentant les formations/diplômes */218
}
1. display: flex;
Transforme la liste
<ul>en conteneur flex.Tous les enfants directs
<li>deviennent des éléments flex.Par défaut, Flex aligne les éléments horizontalement (
flex-direction: row), donc les liens apparaissent sur la même ligne.
2. justify-content: center;
Centre tous les éléments flex horizontalement dans le conteneur.
Sans cette propriété, les éléments resteraient alignés à gauche.
3. flex-wrap: wrap;
Permet aux éléments flex de passer à la ligne suivante si la largeur du conteneur est insuffisante.
Pratique pour les écrans plus petits ou si la liste est longue, afin que les boutons ne débordent pas.
4. gap: 12px;
Définit un espace de 12px entre chaque élément flex.
Plus simple et plus précis que d’ajouter des
marginmanuellement sur chaque<li>.
5. Autres propriétés
padding: 0;→ supprime le padding par défaut de la liste.margin: 20px 0;→ ajoute une marge verticale autour de la navigation.list-style: none;→ supprime les puces par défaut de la liste.
Méthode : css/projets.css
1
/* ==========================================================================2
Section des Projets (Conteneur)3
========================================================================== */4
.projets {5
/***********/6
/* Flexbox */7
/***********/8
display: flex;
9
/* Utilise Flexbox pour disposer les articles en ligne */10
flex-wrap: wrap;
11
/* Permet aux articles de passer à la ligne si l'espace est insuffisant */12
justify-content: center;
13
/* Centre les articles horizontalement dans le conteneur */14
15
/**********************/16
/* Boîte & Espacement */17
/**********************/18
gap: 20px;
19
/* Espace de 20px entre chaque article */20
padding: 10px 0;
21
/* Espace vertical en haut et en bas du conteneur */22
}
23
24
/* ==========================================================================25
Cartes de Projet (Article)26
========================================================================== */27
.projets article {
28
/***********/29
/* Flexbox */30
/***********/31
flex: 0 1 220px;
32
/* Largeur de base 220px, ne grandit pas, peut rétrécir */33
34
/**********************/35
/* Boîte & Espacement */36
/**********************/37
padding: 10px;
38
/* Espace intérieur autour du contenu de l'article */39
40
/****************************/41
/* Couleurs & Arrière-plans */42
/****************************/43
background: #f9f9f9;
44
/* Couleur de fond gris très clair */45
46
/************/47
/* Bordures */48
/************/49
border: 1px solid #ddd;
50
/* Bordure fine grise autour de l'article */51
border-radius: 8px;
52
/* Coins arrondis pour adoucir l'apparence */53
54
/***************/55
/* Typographie */56
/***************/57
text-align: left;
58
/* Texte aligné à gauche dans l'article */59
}
60
61
/* ==========================================================================62
Contenu des Cartes (Typo, Images, Liens)63
========================================================================== */64
65
/* --- Titres des projets (h3) --- */66
.projets h3 {
67
/**********************/68
/* Boîte & Espacement */69
/**********************/70
margin-top: 0;
71
/* Supprime l'espace au-dessus du titre */72
73
/***************/74
/* Typographie */75
/***************/76
font-size: 1.1rem;
77
/* Taille du texte légèrement plus grande */78
}
79
80
/* --- Paragraphes des projets --- */81
.projets p {
82
/***************/83
/* Typographie */84
/***************/85
font-size: 0.9rem;
86
/* Taille légèrement plus petite */87
color: #333;
88
/* Couleur gris foncé pour le texte */89
}
90
91
/* --- Liens des projets --- */92
.projets a {
93
/***************/94
/* Typographie */95
/***************/96
text-decoration: none;
97
/* Supprime le soulignement par défaut */98
color: #0066cc;
99
/* Couleur bleue pour le lien */100
font-weight: bold;
101
/* Texte en gras */102
}
103
104
/* --- Survol des liens --- */105
.projets a:hover {
106
/***************/107
/* Typographie */108
/***************/109
text-decoration: underline;
110
/* Soulignement au survol */111
}
112
113
/* --- Conteneur Figure (pour image) --- */114
.projets figure {
115
/**********************/116
/* Boîte & Espacement */117
/**********************/118
margin: 0;
119
/* Supprime les marges par défaut de la figure */120
padding: 0;
121
/* Supprime le padding par défaut */122
}
123
124
/* --- Images des projets --- */125
.projets figure img {
126
/**************/127
/* Dimensions */128
/**************/129
width: 100%;
130
/* L'image prend toute la largeur de son conteneur */131
height: auto;
132
/* La hauteur s'ajuste automatiquement */133
134
/**********************/135
/* Boîte & Espacement */136
/**********************/137
margin-bottom: 8px;
138
/* Espace entre l'image et la légende */139
140
/************/141
/* Bordures */142
/************/143
border-radius: 4px;
144
/* Coins légèrement arrondis pour l'image */145
border: 1px solid #ccc;
146
/* Bordure grise claire autour de l'image */147
}
148
149
/* --- Légendes des images --- */150
.projets figure figcaption {
151
/***************/152
/* Typographie */153
/***************/154
font-size: 0.85rem;
155
/* Taille du texte de la légende plus petite */156
color: #666;
157
/* Couleur gris moyen */158
text-align: center;
159
/* Centre le texte de la légende */160
}
1. flex: 0 1 220px;
0 → L’article ne grandira pas au-delà de sa taille de base pour remplir l’espace disponible.
1 → L’article peut rétrécir si l’espace horizontal manque.
220px → largeur de base de l’article.
Effet : chaque article fait 220px de large, mais si l’écran est plus petit, il peut se réduire pour s’adapter à l’espace disponible.
2. Autres propriétés
padding: 10px;Ajoute un espace intérieur autour du contenu pour ne pas toucher les bords de l’article.
background: #f9f9f9;Fond gris clair pour distinguer visuellement chaque article.
border: 1px solid #ddd;Bordure fine autour de chaque article pour mieux les délimiter.
border-radius: 8px;Coins arrondis pour un rendu plus doux et esthétique.
text-align: left;Texte du contenu aligné à gauche, comme pour la plupart des paragraphes.
Exemple :
See the Pen Séance 6-index by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Séance 6- Accueil
Exemple :
See the Pen Séance 6-projets by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Séance 6- Projets