Séance 11
Objectifs
Être capable d’utiliser des variables CSS pour faciliter la personnalisation et la maintenance d’un site.
Savoir appliquer une palette de couleurs et une identité visuelle cohérente grâce aux variables.
Développer une identité graphique personnelle et professionnelle.
Méthode :
Afin d'améliorer la maintenabilité et d'éviter la répétition de valeurs, le CSS intègre un mécanisme de variables (Propriétés Personnalisées). Celles-ci permettent de centraliser la définition d'une valeur pour la réutiliser dans différents sélecteurs.
Pour nommer ces variables, on distingue deux stratégies principales : l'approche littérale et l'approche sémantique.
Dénomination Littérale (Basée sur la valeur) :
Exemple :
--color-blue-500: #0073e6;Analyse : Le nom de la variable décrit la valeur elle-même. C'est utile pour définir une palette de base, mais il ne communique aucune intention d'utilisation.
Dénomination Sémantique (Basée sur le contexte/l'utilité) :
Exemple :
--color-primary: #0073e6;Analyse : Le nom de la variable décrit son rôle dans l'interface (la "couleur principale"). C'est une abstraction de plus haut niveau.
L'approche sémantiques permet de modifier la charte graphique globale en ne changeant que les valeurs des variables. Les sélecteurs CSS qui les utilisent (ex: background: var(--color-bg-header);) restent inchangés. Cela permet de modifier le visuel d'ne application sans réécrire la logique des composants.
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/variables.css">
9
<link rel="stylesheet" href="css/style.css">
10
<link rel="stylesheet" href="css/accueil.css">
11
<!-- Import de polices externes (Google Fonts) -->12
<link
13
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Roboto:wght@400;700&display=swap"
14
rel="stylesheet">
15
<!-- Font Awesome CDN pour icônes -->16
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
17
</head>
18
19
<body>
20
21
<header id="haut" aria-label="En-tête du site">
22
<figure aria-labelledby="figcaption-vv">
23
<img src="images/photo.jpg" alt="Photo de Vincent Vanneste">
24
<figcaption id="figcaption-vv">Vincent Vanneste</figcaption>
25
</figure>
26
27
<h1>Portfolio de Vincent Vanneste</h1>
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
36
</header>
37
38
<main aria-label="Contenu principal du site">
39
<nav aria-label="Navigation interne à la page">
40
<ul>
41
<li><a href="#about">À propos</a></li>
42
<li><a href="#competences">Compétences</a></li>
43
<li><a href="#experiences">Expériences</a></li>
44
<li><a href="#formations">Formations</a></li>
45
</ul>
46
</nav>
47
48
<!-- À propos -->49
<section id="about" aria-labelledby="titre-about">
50
<h2 class="icon-about" id="titre-about">À propos</h2>
51
<p>Je suis directeur des études du DEUST WMI de Calais et j'enseigne les fondamentaux du développement web
52
(HTML, CSS, JavaScript, PHP). Passionné par la transmission des connaissances, j'accompagne mes
53
étudiants dans l'acquisition des compétences nécessaires pour réussir dans le secteur du numérique.</p>
54
<address role="contentinfo" aria-label="Coordonnées">
55
<dl>
56
<dt>Localisation :</dt>
57
<dd>Calais, France</dd>
58
<dt>Site :</dt>
59
<dd><a href="https://vincent-vanneste.fr/" target="_blank">vincent-vanneste.fr</a></dd>
60
<dt>Email :</dt>
61
<dd><a href="mailto:vincent.vanneste@univ-littoral.fr">vincent.vanneste@univ-littoral.fr</a></dd>
62
</dl>
63
</address>
64
</section>
65
66
67
68
<!-- Compétences -->69
<section id="competences" aria-labelledby="titre-competences">
70
<h2 class="icon-competences" id="titre-competences">Compétences</h2>
71
<ul>
72
<li>HTML</li>
73
<li>CSS</li>
74
<li>Responsive</li>
75
<li>Accessibilité</li>
76
<li>JavaScript</li>
77
<li>PHP • Laravel 11</li>
78
<li>MySQL</li>
79
<li>Git & GitHub</li>
80
</ul>
81
</section>
82
83
84
85
<!-- Expériences -->86
<section id="experiences" aria-labelledby="titre-experiences">
87
<h2 class="icon-experiences" id="titre-experiences">Expériences récentes</h2>
88
<ul>
89
<li>
90
<strong>Enseignant – Licence 1 Informatique</strong><br>
91
<time datetime="2025">2025</time> •
92
<address>
93
<a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a>
94
</address><br>
95
Introduction à HTML, CSS, JS
96
</li>
97
<li>
98
<strong>Directeur des études – DEUST WMI</strong><br>
99
depuis <time datetime="2024">2024</time> •
100
<address>
101
<a href="https://www.univ-littoral.fr/" target="_blank">FCU ULCO</a>
102
</address>
103
</li>
104
</ul>
105
</section>
106
107
<!-- Formations -->108
<section id="formations" aria-labelledby="titre-formations">
109
<h2 class="icon-formations" id="titre-formations">Formations</h2>
110
<ul>
111
<li>
112
<strong>Doctorat productique, automatique et informatique industrielle</strong><br>
113
<time datetime="2000">2000</time> •
114
<address>
115
<a href="https://www.univ-lille.fr/" target="_blank">Université de Lille</a>
116
</address>
117
</li>
118
<li>
119
<strong>CAPET Technologie</strong><br>
120
<time datetime="1998">1998</time> •
121
<address>
122
<a href="https://www.iufm-douai.fr/" target="_blank">IUFM Douais</a>
123
</address>
124
</li>
125
</ul>
126
</section>
127
128
</main>
129
130
<footer aria-label="Pied de page">
131
<p>© 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés.</p>
132
<!-- Réseaux sociaux -->133
<div class="socials" role="navigation" aria-label="Réseaux sociaux">
134
<a href="https://www.facebook.com/" target="_blank" aria-label="Facebook">
135
<i class="fab fa-facebook-f"></i>
136
</a>
137
<a href="https://www.linkedin.com/in/" target="_blank" aria-label="LinkedIn">
138
<i class="fab fa-linkedin-in"></i>
139
</a>
140
<a href="https://www.instagram.com/" target="_blank" aria-label="Instagram">
141
<i class="fab fa-instagram"></i>
142
</a>
143
<a href="https://x.com/" target="_blank" aria-label="X">
144
<i class="fab fa-x-twitter"></i>
145
</a>
146
</div>
147
</footer>
148
149
150
</body>
151
152
</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/variables.css">
9
<link rel="stylesheet" href="css/style.css">
10
<link rel="stylesheet" href="css/projets.css">
11
<!-- Import de polices externes (Google Fonts) -->12
<link
13
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Roboto:wght@400;700&display=swap"
14
rel="stylesheet">
15
<!-- Font Awesome CDN pour icônes -->16
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
17
</head>
18
19
<body>
20
21
<header id="haut" aria-label="En-tête du site">
22
<figure aria-labelledby="figcaption-vv">
23
<img src="images/photo.jpg" alt="Photo de Vincent Vanneste">
24
<figcaption id="figcaption-vv">Vincent Vanneste</figcaption>
25
</figure>
26
27
<h1>Portfolio de Vincent Vanneste</h1>
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
36
</header>
37
38
<main>
39
40
<section aria-labelledby="liste-projets" class="projets">
41
<h2 id="liste-projets">Liste des projets</h2>
42
43
<article aria-labelledby="titre-projet1">
44
<h3 id="titre-projet1"><a href="projets/projet1.html">Projet 1</a></h3>
45
<figure 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 aria-labelledby="titre-projet2">
53
<h3 id="titre-projet2"><a href="projets/projet2.html">Projet 2</a></h3>
54
<figure 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 aria-labelledby="titre-projet3">
62
<h3 id="titre-projet3"><a href="projets/projet3.html">Projet 3</a></h3>
63
<figure 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 aria-labelledby="titre-projet4">
71
<h3 id="titre-projet4"><a href="projets/projet4.html">Projet 4</a></h3>
72
<figure 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 aria-labelledby="titre-projet5">
80
<h3 id="titre-projet5"><a href="projets/projet5.html">Projet 5</a></h3>
81
<figure 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
<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
</body>
110
111
</html>
Méthode : projets/projet1.html
1
2
<html lang="fr">
3
4
<head>
5
<base href="../">
6
<meta charset="UTF-8">
7
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8
<title>Projet 1 - Portfolio de Vincent Vanneste</title>
9
<link rel="stylesheet" href="css/variables.css">
10
<link rel="stylesheet" href="css/style.css">
11
<link rel="stylesheet" href="css/projet.css">
12
<!-- Google Fonts -->13
<link
14
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Roboto:wght@400;700&display=swap"
15
rel="stylesheet">
16
<!-- Font Awesome -->17
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
18
</head>
19
20
<body>
21
22
<header id="haut" aria-label="En-tête du site">
23
<figure aria-labelledby="figcaption-vv">
24
<img src="images/photo.jpg" alt="Photo de Vincent Vanneste">
25
<figcaption id="figcaption-vv">Vincent Vanneste</figcaption>
26
</figure>
27
28
<h1>Portfolio de Vincent Vanneste</h1>
29
<nav aria-label="Navigation principale">
30
<ul>
31
<li><a href="index.html">Accueil</a></li>
32
<li><a href="projets.html">Projets</a></li>
33
<li><a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a></li>
34
</ul>
35
</nav>
36
37
</header>
38
39
<main>
40
<article aria-labelledby="titre-projet1" class="projets">
41
42
<header>
43
<h2 id="titre-projet1">Projet 1 <br> Découverte du HTML et du CSS</h2>
44
<figure>
45
<img src="images/projet1.jpg" alt="Capture d’écran du Projet 1">
46
<figcaption>Page d’accueil du projet HTML/CSS</figcaption>
47
</figure>
48
</header>
49
50
<section aria-labelledby="description-projet">
51
<h2 id="description-projet">Description du projet</h2>
52
<p>
53
Ce premier projet consiste à créer un mini-site en HTML et CSS.
54
L’objectif est de comprendre la structure d’une page web,
55
d’utiliser les balises sémantiques et d’appliquer les premières règles de style CSS.
56
</p>
57
</section>
58
59
<section aria-labelledby="objectifs-projet">
60
<h2 id="objectifs-projet">Objectifs pédagogiques</h2>
61
<ul>
62
<li>Découvrir la structure d’un document HTML5.</li>
63
<li>Apprendre à organiser un site web avec plusieurs pages liées.</li>
64
<li>Utiliser le CSS pour la mise en forme du contenu.</li>
65
<li>Publier le site sur GitHub Pages.</li>
66
</ul>
67
</section>
68
69
<section aria-labelledby="competences-visees">
70
<h2 id="competences-visees">Compétences visées</h2>
71
<ul>
72
<li>Structurer et organiser un site web en utilisant le HTML sémantique et les bonnes pratiques de
73
codage.</li>
74
<li>Mettre en forme et personnaliser l’apparence d’un site avec le CSS (Flexbox, Grid, couleurs,
75
polices, effets).</li>
76
<li>Créer un portfolio complet avec une navigation cohérente.</li>
77
<li>Intégrer des contenus multimédias accessibles et esthétiques.</li>
78
<li>Adapter un site aux différents écrans grâce au responsive design et aux media queries.</li>
79
<li>Déployer un site en ligne via GitHub Pages et le valider (W3C, Lighthouse).</li>
80
<li>Présenter et valoriser son travail avec une identité graphique cohérente.</li>
81
</ul>
82
</section>
83
84
<section aria-labelledby="resultat-projet">
85
<h2 id="resultat-projet">Résultat obtenu</h2>
86
<p>
87
Le projet final se compose d’une page d’accueil, d’une galerie de projets et d'une page par projet.
88
Le site est responsive et conforme aux standards du W3C.
89
</p>
90
<p>
91
<a href="" class="btn" target="_blank" rel="noopener">
92
<i class="fa-solid fa-eye"></i> Voir la démo
93
</a>
94
</p>
95
</section>
96
97
<nav class="nav-projets" aria-label="Navigation entre les projets">
98
<a href="projets/projet2.html" class="next">Projet suivant →</a>
99
</nav>
100
101
</article>
102
</main>
103
104
<footer aria-label="Pied de page">
105
<p>© 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés.</p>
106
<!-- Réseaux sociaux -->107
<div class="socials" role="navigation" aria-label="Réseaux sociaux">
108
<a href="https://www.facebook.com/" target="_blank" aria-label="Facebook">
109
<i class="fab fa-facebook-f"></i>
110
</a>
111
<a href="https://www.linkedin.com/in/" target="_blank" aria-label="LinkedIn">
112
<i class="fab fa-linkedin-in"></i>
113
</a>
114
<a href="https://www.instagram.com/" target="_blank" aria-label="Instagram">
115
<i class="fab fa-instagram"></i>
116
</a>
117
<a href="https://x.com/" target="_blank" aria-label="X">
118
<i class="fab fa-x-twitter"></i>
119
</a>
120
</div>
121
</footer>
122
123
</body>
124
125
</html>
Méthode : css/variables.css
1
/* ==========================================================================2
Variables Sémantiques3
========================================================================== */4
:root {5
6
/* === Couleurs de Marque (Brand) === */7
--color-brand-primary: #0073e6;
8
--color-brand-dark: #004a99;
9
--color-brand-accent: #0066cc;
10
/* Utilisé pour les bordures, liens... */11
--color-brand-hover: #00a2ff;
12
/* Pour les survols interactifs */13
14
/* === Couleurs de Fond (Background) === */15
--color-bg-body: linear-gradient(135deg, #e8f0ff 0%, #f9fcff 100%);
16
--color-bg-header: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-dark));
17
--color-bg-footer: linear-gradient(135deg, #1e3a5f, #0a2340, #224c80, #162d50);
18
--color-bg-nav-hover: #ddd;
19
--color-bg-card-light: #f0f8ff;
20
/* Pour dégradé carte projet */21
--color-bg-card-mid: #d0f0ff;
22
/* Pour dégradé carte projet */23
--color-bg-card: linear-gradient(135deg,
24
var(--color-text-inverted, #fff) 0%,
25
var(--color-bg-card-light, #f0f8ff) 25%,
26
var(--color-bg-card-mid, #d0f0ff) 50%,
27
var(--color-bg-card-light, #f0f8ff) 75%,
28
var(--color-text-inverted, #fff) 100%);
29
30
/* === Couleurs de Texte === */31
--color-text-primary: #222;
32
/* Corps de texte principal */33
--color-text-secondary: #333;
34
/* Plus clair (ex: survol nav) */35
--color-text-heading: #1e3a5f;
36
/* Titres (H1, H2) dans Main */37
--color-text-inverted: white;
38
/* Texte sur fonds sombres (header, footer) */39
--color-text-nav-link: #bfc5cb;
40
/* Liens nav header (discret) */41
--color-text-caption: #666;
42
/* Légendes projet */43
44
/* === Couleurs de Bordure et UI === */45
--color-border-subtle: #ddd;
46
/* Bordures discrètes (header) */47
--color-border-medium: #ccc;
48
/* Bordures projet */49
--color-ui-nav-bar: white;
50
/* Barre animée nav */51
52
/* === Polices === */53
--font-family-body: 'Poppins', Arial, sans-serif;
54
--font-family-heading: 'Roboto', sans-serif;
55
--font-weight-heading: 600;
56
57
/* === Échelle de Typographie Fluide === */58
--font-size-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
59
--font-size-caption-avatar: clamp(0.85rem, 0.8rem + 0.2vw, 1rem);
60
--font-size-caption-project: clamp(0.8rem, 0.75rem + 0.2vw, 0.85rem);
61
--font-size-p-project: clamp(0.85rem, 0.8rem + 0.2vw, 0.9rem);
62
--font-size-h1-header: clamp(2rem, 1.75rem + 1vw, 2.5rem);
63
--font-size-h1-main: clamp(2rem, 1.8rem + 0.5vw, 2.2rem);
64
--font-size-h2: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
65
--font-size-h3-project: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
66
--font-size-h2-project: clamp(1.5rem, 1.3rem + 1vw, 1.8rem);
67
--font-size-social-icon: clamp(1.5rem, 1.4rem + 0.5vw, 1.75rem);
68
69
/* === Espacements === */70
--spacing-xs: 8px;
71
/* 0.5rem */72
--spacing-sm: 10px;
73
/* 0.625rem */74
--spacing-md: 12px;
75
/* 0.75rem */76
--spacing-lg: 16px;
77
/* 1rem */78
--spacing-xl: 20px;
79
/* 1.25rem (ex: padding section) */80
--spacing-xxl: 32px;
81
/* 2rem */82
83
/* === Tailles de Layout === */84
--avatar-size-mobile: 120px;
85
--avatar-size-desktop: 150px;
86
--container-max-width: 1000px;
87
88
/* === Arrondis (Borders) === */89
--border-radius-sm: 4px;
90
--border-radius-md: 6px;
91
--border-radius-lg: 8px;
92
93
/* === Ombres (Shadows) === */94
--shadow-card: 0 2px 6px rgba(0, 0, 0, 0.1);
95
--shadow-header: 0 4px 10px rgba(0, 0, 0, 0.15);
96
--shadow-image: 0 4px 8px rgba(0, 0, 0, 0.1);
97
--shadow-avatar-hover: 0 4px 12px rgba(0, 0, 0, 0.3);
98
--shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.2);
99
--shadow-text: 1px 1px 2px rgba(0, 0, 0, 0.25);
100
}
Méthode : css/style.css
1
/* ==========================================================================2
CSS Général3
========================================================================== */4
5
/* --- Body --- */6
body {7
font-family: var(--font-family-body);
8
color: var(--color-text-primary);
9
line-height: 1.5;
10
font-size: var(--font-size-body);
11
margin: 0;
12
background: var(--color-bg-body);
13
transition: background 0.5s ease;
14
}
15
16
/* --- Médias fluides --- */17
img,18
video,19
iframe {20
max-width: 100%;
21
height: auto;
22
}
23
24
/* ==========================================================================25
En-tête (Header)26
========================================================================== */27
body>header {
28
text-align: center;
29
color: var(--color-text-inverted);
30
padding: var(--spacing-xl);
31
background: var(--color-bg-header);
32
border-bottom: 2px solid var(--color-border-subtle);
33
box-shadow: var(--shadow-header);
34
transition: background 0.3s ease;
35
}
36
37
/* --- Header H1 --- */38
body>header h1 {
39
font-family: var(--font-family-heading);
40
font-size: var(--font-size-h1-header);
41
letter-spacing: 0.5px;
42
text-shadow: var(--shadow-text);
43
margin: 10px 0;
44
}
45
46
/* --- Header Figure --- */47
body>header figure {
48
margin: 0 auto 10px;
49
}
50
51
/* --- Image de profil --- */52
body>header img {
53
width: var(--avatar-size-mobile);
54
border-radius: 50%;
55
border: 3px solid var(--color-brand-accent);
56
transition: transform 0.3s ease, box-shadow 0.3s ease;
57
}
58
59
body>header img:hover {
60
transform: scale(1.08) rotate(2deg);
61
box-shadow: var(--shadow-avatar-hover);
62
}
63
64
/* --- Légende (Figcaption) --- */65
body>header figcaption {
66
font-size: var(--font-size-caption-avatar);
67
margin-top: var(--spacing-xs);
68
}
69
70
/* --- Nav Principale (Liste) --- */71
body>header nav ul {
72
display: flex;
73
flex-direction: column;
74
/* Mobile First: empilé */75
align-items: center;
76
gap: var(--spacing-sm);
77
padding: 0;
78
margin: 10px 0 0;
79
list-style: none;
80
}
81
82
/* --- Nav Principale (Lien) --- */83
body>header nav a {
84
text-decoration: none;
85
color: var(--color-text-nav-link);
86
font-weight: bold;
87
padding: 6px 10px;
88
border-radius: var(--border-radius-sm);
89
position: relative;
90
overflow: hidden;
91
transition: color 0.3s ease;
92
}
93
94
body>header nav a:hover {
95
background-color: var(--color-bg-nav-hover);
96
color: var(--color-text-secondary);
97
}
98
99
/* --- Barre animée Nav --- */100
body>header nav a::after {
101
content: "";
102
position: absolute;
103
bottom: 0;
104
left: 0;
105
width: 0%;
106
height: 3px;
107
background: var(--color-ui-nav-bar);
108
transition: width 0.3s ease;
109
}
110
111
body>header nav a:hover::after {
112
width: 100%;
113
}
114
115
/* --- Clic Nav --- */116
body>header nav li:active {
117
transform: scale(0.9);
118
}
119
120
/* ==========================================================================121
Contenu Principal (Main)122
========================================================================== */123
main {124
max-width: var(--container-max-width);
125
margin: auto;
126
}
127
128
/* --- Main H1 --- */129
main>h1 {
130
text-align: center;
131
color: var(--color-text-heading);
132
font-size: var(--font-size-h1-main);
133
margin: 20px 0;
134
}
135
136
/* --- Sections Main --- */137
main>section,
138
main>article {
139
padding: 0 15px;
140
}
141
142
/* --- Main H2 --- */143
main>section h2,
144
main>article h2 {
145
color: var(--color-text-heading);
146
font-size: var(--font-size-h2);
147
}
148
149
/* ==========================================================================150
Pied de page (Footer)151
========================================================================== */152
footer {153
color: var(--color-text-inverted);
154
text-align: center;
155
padding: var(--spacing-xl);
156
background: var(--color-bg-footer);
157
background-size: 200% 200%;
158
transition: background-position 0.5s ease;
159
}
160
161
footer:hover {
162
background-position: right bottom;
163
}
164
165
footer p {
166
margin: 0;
167
}
168
169
/* --- Réseaux sociaux Footer --- */170
footer .socials {
171
display: flex;
172
justify-content: center;
173
gap: var(--spacing-xl);
174
margin-top: 15px;
175
}
176
177
footer .socials a {
178
font-size: var(--font-size-social-icon);
179
color: var(--color-text-inverted);
180
transition: transform 0.3s ease, color 0.3s ease;
181
}
182
183
footer .socials a:hover {
184
transform: translateY(-3px) scale(1.2);
185
color: var(--color-brand-hover);
186
}
187
188
189
/* ==========================================================================190
Responsive (Point de rupture)191
========================================================================== */192
193
/* S'applique à partir de 768px et plus */194
195
@media (min-width: 768px) {
196
197
/* --- Restaure taille avatar desktop --- */198
body>header img {
199
width: var(--avatar-size-desktop);
200
}
201
202
/* --- Restaure nav horizontale --- */203
body>header nav ul {
204
flex-direction: row;
205
justify-content: center;
206
gap: 15px;
207
}
208
}
Méthode : css/accueil.css
1
/* ==========================================================================2
Mise en page Grid (Contenu principal)3
========================================================================== */4
main {5
/***********************/6
/* Mise en page (Grid) */7
/***********************/8
display: grid;
9
10
/* "Mobile First" (1 colonne par défaut) */11
grid-template-columns: 1fr;
12
grid-template-areas:13
"nav"14
"about"15
"competences"16
"experiences"17
"formations";18
19
/**********************/20
/* Boîte & Espacement */21
/**********************/22
gap: var(--spacing-sm);
23
/* 10px */24
}
25
26
/* --- Assignation des zones de la grille --- */27
main>nav {
28
grid-area: nav;
29
}
30
31
#about {32
grid-area: about;
33
}
34
35
#competences {36
grid-area: competences;
37
}
38
39
#experiences {40
grid-area: experiences;
41
}
42
43
#formations {44
grid-area: formations;
45
}
46
47
/* ==========================================================================48
Navigation Interne (dans Main)49
========================================================================== */50
51
/* --- Liste de la navigation interne --- */52
main nav ul {
53
/***********/54
/* Flexbox */55
/***********/56
display: flex;
57
justify-content: center;
58
flex-wrap: wrap;
59
60
/**********************/61
/* Boîte & Espacement */62
/**********************/63
gap: var(--spacing-md);
64
/* 12px */65
padding: 0;
66
margin: var(--spacing-xl) 0;
67
/* 20px */68
69
/******************/70
/* Style de liste */71
/******************/72
list-style: none;
73
}
74
75
/* --- Liens de la navigation interne --- */76
main nav a {
77
/**********************/78
/* Boîte & Espacement */79
/**********************/80
display: inline-block;
81
padding: 6px 12px;
82
83
/***************/84
/* Typographie */85
/***************/86
text-decoration: none;
87
color: var(--color-text-inverted);
88
font-weight: bold;
89
90
/****************************/91
/* Couleurs & Arrière-plans */92
/****************************/93
background-color: var(--color-brand-primary);
94
95
/************/96
/* Bordures */97
/************/98
border-radius: var(--border-radius-md);
99
/* 6px */100
101
/***************/102
/* Transitions */103
/***************/104
transition: transform 0.2s ease;
105
}
106
107
/* --- Survol des liens de navigation interne --- */108
main nav a:hover {
109
/****************************/110
/* Couleurs & Arrière-plans */111
/****************************/112
background: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-hover));
113
114
/*******************/115
/* Transformations */116
/*******************/117
transform: translateY(-3px) scale(1.05);
118
}
119
120
/* --- Focus (accessibilité) des liens de navigation interne --- */121
main nav a:focus {
122
/*********************/123
/* Accessibilité (Focus) */124
/*********************/125
/* Valeur #005bb5 (proche de #0066cc) */126
outline: 3px solid var(--color-brand-accent);
127
outline-offset: 2px;
128
}
129
130
/* ==========================================================================131
Sections de Contenu132
========================================================================== */133
134
/* --- Style général des sections --- */135
section {136
/***********************/137
/* Animation & Effets */138
/***********************/139
opacity: 0;
140
transform: translateY(15px);
141
animation: fadeIn 0.8s ease forwards;
142
}
143
144
/* --- Titres de section (h2) --- */145
section h2 {
146
/***************/147
/* Typographie */148
/***************/149
font-size: var(--font-size-h2);
150
color: var(--color-text-heading);
151
152
/**********************/153
/* Boîte & Espacement */154
/**********************/155
margin-top: 30px;
156
margin-bottom: var(--spacing-sm);
157
/* 10px */158
padding-bottom: 5px;
159
160
/************/161
/* Bordures */162
/************/163
border-bottom: 2px solid var(--color-border-subtle);
164
}
165
166
/* --- Paragraphes de section --- */167
section p {
168
/**********************/169
/* Boîte & Espacement */170
/**********************/171
margin-bottom: 15px;
172
/* On garde 15px pour l'instant */173
}
174
175
/* ==========================================================================176
Éléments de Contenu (Listes, Liens, Adresse)177
========================================================================== */178
179
/* --- Listes à puces (dans section) --- */180
section ul {
181
/**********************/182
/* Boîte & Espacement */183
/**********************/184
padding-left: var(--spacing-xl);
185
/* 20px */186
margin-bottom: var(--spacing-xl);
187
/* 20px */188
}
189
190
/* --- Éléments de liste (dans section) --- */191
section li {
192
/**********************/193
/* Boîte & Espacement */194
/**********************/195
margin-bottom: var(--spacing-xs);
196
/* 8px */197
}
198
199
/* --- Liens (dans section) --- */200
section a {
201
/***************/202
/* Typographie */203
/***************/204
color: var(--color-brand-accent);
205
text-decoration: none;
206
}
207
208
section a:hover {
209
/***************/210
/* Typographie */211
/***************/212
text-decoration: underline;
213
}
214
215
/* --- Balise Adresse --- */216
address {217
/***************/218
/* Typographie */219
/***************/220
font-style: normal;
221
222
/**********************/223
/* Boîte & Espacement */224
/**********************/225
display: inline;
226
}
227
228
/* ==========================================================================229
Classes Utilitaires (Icônes)230
========================================================================== */231
232
/* --- Base des icônes (pseudo-élément) --- */233
.icon-about::before,
234
.icon-competences::before,
235
.icon-experiences::before,
236
.icon-formations::before {
237
/**********************/238
/* Boîte & Espacement */239
/**********************/240
margin-right: var(--spacing-xs);
241
/* 8px */242
}
243
244
/* --- Icônes spécifiques (Emoji) --- */245
.icon-about::before {
246
content: "👤";
247
}
248
249
.icon-competences::before {
250
content: "💻";
251
}
252
253
.icon-experiences::before {
254
content: "📅";
255
}
256
257
.icon-formations::before {
258
content: "🎓";
259
}
260
261
/* ==========================================================================262
Animations263
========================================================================== */264
265
/* --- Délais d'animation pour les sections --- */266
section:nth-of-type(2) {
267
animation-delay: 0.2s;
268
}
269
270
section:nth-of-type(3) {
271
animation-delay: 0.4s;
272
}
273
274
section:nth-of-type(4) {
275
animation-delay: 0.6s;
276
}
277
278
/* --- Définition de l’animation fadeIn --- */279
@keyframes fadeIn {
280
to {281
opacity: 1;
282
transform: translateY(0);
283
}
284
}
285
286
287
/* ==========================================================================288
Responsive (Point de rupture)289
========================================================================== */290
291
/* S'applique à 768px OU PLUS */292
/* Rappel : les variables ne fonctionnent pas dans cette ligne,293
donc 768px est écrit en dur. */294
295
@media (min-width: 768px) {
296
297
main {298
/* Restaure la mise en page 3 colonnes pour les grands écrans */299
grid-template-columns: 1fr 1fr 1fr;
300
grid-template-areas:301
"nav nav nav"302
"about about about"303
"competences experiences formations";304
}
305
}
Méthode : css/projets.css
1
/* ==========================================================================2
Mise en page de la Grille "Projets"3
========================================================================== */4
.projets {5
/***********************/6
/* Mise en page (Grid) */7
/***********************/8
display: grid;
9
/* C'est déjà responsive ! */10
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
11
12
/**********************/13
/* Boîte & Espacement */14
/**********************/15
gap: var(--spacing-xl);
16
/* 20px */17
}
18
19
/* ==========================================================================20
Titre Principal de la Section "Projets"21
========================================================================== */22
.projets>h2 {
23
/***********************/24
/* Mise en page (Grid) */25
/***********************/26
grid-column: 1 / -1;
27
28
/***************/29
/* Typographie */30
/***************/31
text-align: center;
32
font-size: var(--font-size-h2-project);
33
font-weight: var(--font-weight-heading);
34
35
/**********************/36
/* Boîte & Espacement */37
/**********************/38
padding-bottom: 5px;
39
40
/************/41
/* Bordures */42
/************/43
border-bottom: 2px solid var(--color-border-medium);
44
}
45
46
/* ==========================================================================47
Cartes de Projet (Article)48
========================================================================== */49
50
/* --- Style de base des articles --- */51
.projets>article {
52
/**********************/53
/* Boîte & Espacement */54
/**********************/55
padding: var(--spacing-sm);
56
/* 10px */57
58
/****************************/59
/* Couleurs & Arrière-plans */60
/****************************/61
/* NOTE: Vous devez ajouter --color-bg-card-light, --color-bg-card-mid,62
et --color-bg-card à votre :root principal */63
background: var(--color-bg-card,
64
linear-gradient(135deg,
65
var(--color-text-inverted, #fff) 0%,
66
var(--color-bg-card-light, #f0f8ff) 25%,
67
var(--color-bg-card-mid, #d0f0ff) 50%,
68
var(--color-bg-card-light, #f0f8ff) 75%,
69
var(--color-text-inverted, #fff) 100%));
70
background-size: 300% 300%;
71
72
/********************/73
/* Bordures & Ombre */74
/********************/75
border: 1px solid var(--color-border-subtle);
76
border-radius: var(--border-radius-lg);
77
box-shadow: var(--shadow-card);
78
79
/***************/80
/* Typographie */81
/***************/82
text-align: left;
83
84
/******************/85
/* Positionnement */86
/******************/87
position: relative;
88
89
/***************/90
/* Transitions */91
/***************/92
transition: transform 0.3s ease, box-shadow 0.3s ease;
93
}
94
95
/* --- Survol des articles --- */96
.projets>article:hover {
97
/*******************/98
/* Transformations */99
/*******************/100
transform: translateY(-5px);
101
102
/********************/103
/* Bordures & Ombre */104
/********************/105
box-shadow: var(--shadow-card-hover);
106
107
/*************/108
/* Animation */109
/*************/110
animation: gradientMove 3s linear infinite;
111
}
112
113
/* ==========================================================================114
Contenu des Cartes (Typo, Images, Liens)115
========================================================================== */116
117
/* --- Titres des projets (h3) --- */118
.projets h3 {
119
/**********************/120
/* Boîte & Espacement */121
/**********************/122
margin-top: 0;
123
124
/***************/125
/* Typographie */126
/***************/127
font-size: var(--font-size-h3-project);
128
}
129
130
/* --- Paragraphes des projets --- */131
.projets p {
132
/***************/133
/* Typographie */134
/***************/135
font-size: var(--font-size-p-project);
136
color: var(--color-text-secondary);
137
}
138
139
/* --- Conteneur Figure (pour image) --- */140
.projets figure {
141
/**********************/142
/* Boîte & Espacement */143
/**********************/144
margin: 0;
145
padding: 0;
146
}
147
148
/* --- Images des projets (fusion des doublons) --- */149
.projets figure img {
150
/**************/151
/* Dimensions */152
/**************/153
width: 100%;
154
height: auto;
155
156
/**********************/157
/* Boîte & Espacement */158
/**********************/159
display: block;
160
margin-bottom: var(--spacing-xs);
161
/* 8px */162
163
/************/164
/* Bordures */165
/************/166
border-radius: var(--border-radius-sm);
167
/* 4px */168
border: 1px solid var(--color-border-medium);
169
170
/***************/171
/* Transitions */172
/***************/173
transition: transform 0.3s ease, box-shadow 0.3s ease;
174
}
175
176
/* --- Survol des images --- */177
.projets figure img:hover {
178
/*******************/179
/* Transformations */180
/*******************/181
transform: scale(1.05);
182
183
/********************/184
/* Bordures & Ombre */185
/********************/186
box-shadow: var(--shadow-text);
187
}
188
189
/* --- Légendes des images --- */190
.projets figure figcaption {
191
/***************/192
/* Typographie */193
/***************/194
font-size: var(--font-size-caption-project);
195
color: var(--color-text-caption);
196
text-align: center;
197
}
198
199
/* --- Liens des projets --- */200
.projets a {
201
/**********************/202
/* Boîte & Espacement */203
/**********************/204
display: inline-block;
205
206
/***************/207
/* Typographie */208
/***************/209
text-decoration: none;
210
color: var(--color-brand-accent);
211
font-weight: bold;
212
213
/***************/214
/* Transitions */215
/***************/216
transition: color 0.3s ease, transform 0.2s ease;
217
}
218
219
/* --- Survol des liens --- */220
.projets a:hover {
221
/***************/222
/* Typographie */223
/***************/224
color: var(--color-brand-dark);
225
text-decoration: underline;
226
227
/*******************/228
/* Transformations */229
/*******************/230
transform: translateY(-2px) scale(1.05);
231
}
232
233
/* --- Focus (accessibilité) des liens --- */234
.projets a:focus {
235
/*********************/236
/* Accessibilité (Focus) */237
/*********************/238
outline: 3px solid var(--color-brand-accent);
239
outline-offset: 2px;
240
}
241
242
/* ==========================================================================243
Animations (Keyframes)244
========================================================================== */245
246
/* --- Animation du gradient au survol des cartes --- */247
@keyframes gradientMove {
248
0% {249
background-position: 0% 0%;
250
}
251
252
50% {253
background-position: 100% 100%;
254
}
255
256
100% {257
background-position: 0% 0%;
258
}
259
}
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: var(--spacing-xxl);
11
/* 32px */12
13
/***************************/14
/* Alignement & Typographie */15
/***************************/16
text-align: center;
17
}
18
19
/* --- Image de l'en-tête d'article --- */20
article>header img {
21
/**************/22
/* Dimensions */23
/**************/24
/* C'est déjà parfaitement responsive ! */25
max-width: 100%;
26
height: auto;
27
28
/**********************/29
/* Boîte & Espacement */30
/**********************/31
margin-top: var(--spacing-xl);
32
/* 20px */33
34
/********************/35
/* Bordures & Ombre */36
/********************/37
border-radius: var(--border-radius-lg);
38
box-shadow: var(--shadow-image);
39
}
40
41
/* ==========================================================================42
Titres de Section (H2)43
========================================================================== */44
45
/* --- Style commun des H2 de section (avec icônes) --- */46
section h2 {
47
/***********/48
/* Flexbox */49
/***********/50
display: flex;
51
align-items: center;
52
53
/**********************/54
/* Boîte & Espacement */55
/**********************/56
gap: 0.5em;
57
margin-bottom: var(--spacing-lg);
58
/* 16px */59
60
/***************/61
/* Typographie */62
/***************/63
font-size: var(--font-size-h2);
64
}
65
66
/* ==========================================================================67
Icônes des Titres (Pseudo-éléments)68
========================================================================== */69
70
/* --- Icône Description 📝 --- */71
#description-projet::before {
72
/***********************/73
/* Contenu (Pseudo-élément) */74
/***********************/75
content: "\1F4DD";
76
/* Emoji "Note" (📝) */77
}
78
79
/* --- Icône Objectifs 🎯 --- */80
#objectifs-projet::before {
81
/***********************/82
/* Contenu (Pseudo-élément) */83
/***********************/84
content: "\1F3AF";
85
/* Emoji "Cible" (🎯) */86
}
87
88
/* --- Icône Compétences 🛠️ --- */89
#competences-visees::before {
90
/***********************/91
/* Contenu (Pseudo-élément) */92
/***********************/93
content: "\1F6E0";
94
/* Emoji "Outils" (🛠️) */95
}
96
97
/* --- Icône Résultat ✅ --- */98
#resultat-projet::before {
99
/***********************/100
/* Contenu (Pseudo-élément) */101
/***********************/102
content: "\2705";
103
/* Emoji "Coche" (✅) */104
}
Exemple :
See the Pen Séance 11-index by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Séance 11- Accueil
Exemple :
See the Pen Séance 11-projets by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Séance 11- Projets
Exemple :
See the Pen Séance 11-projet1 by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Séance 11- Projet1