Séance 10
Objectifs
Comprendre les principes du responsive design.
Être capable d’adapter un site pour différents écrans.
Méthode :
L'objectif du Responsive Web Design est de garantir qu'un unique site web offre la meilleure expérience possible à tous les utilisateurs, quel que soit leur appareil (téléphone, tablette, ordinateur).
Le site doit s'adapter automatiquement pour rester lisible et fonctionnel partout.
Voici les concepts clés à intégrer pour que votre site devienne responsive.
1. L'approche "Mobile First" (Le mobile d'abord)
C'est la stratégie la plus importante. Au lieu de concevoir un site complexe pour ordinateur et d'essayer ensuite de "réduire" les choses pour un téléphone (ce qui est difficile), nous faisons l'inverse :
Nous concevons d'abord la version la plus simple pour les petits écrans mobiles.
Ensuite, nous ajoutons des fonctionnalités et des colonnes à mesure que l'écran s'agrandit.
2. Les Mises en Page Fluides
Nous arrêtons de penser en pixels fixes (ex: width: 960px;). Nous utilisons des unités flexibles qui peuvent "grandir" ou "rétrécir" :
Les pourcentages (
%) :width: 100%signifie "prends toute la largeur de ton parent".Les unités de "viewport" (
vw) :1vwéquivaut à 1% de la largeur de la fenêtre du navigateur.Flexbox et CSS Grid : Ce sont des outils CSS modernes conçus spécifiquement pour créer des mises en page complexes et flexibles.
3. Les Médias Fluides
Une image trop grande est la cause n°1 d'un site "cassé" sur mobile (obligeant l'utilisateur à zoomer en arrière). La solution est une simple règle CSS qui dit à toutes les images : "Ne sois jamais plus large que le conteneur dans lequel tu te trouves".
1
img, video {
2
max-width: 100%;
3
height: auto;
4
}
4. Les Typographie Fluide avec clamp()
C'est une amélioration moderne de la typographie responsive. Au lieu de "sauts" de police (petite taille sur mobile, grande taille sur desktop), nous avons une croissance fluide.
1
h1 { 2
font-size: clamp(2rem, 1.75rem + 1vw, 2.5rem);
3
}
La police des
h1ne sera jamais plus petite que2rem(le minimum).Elle ne sera jamais plus grande que
2.5rem(le maximum).Entre ces deux bornes, elle grandira en douceur en fonction de la largeur de l'écran (grâce à
1.75rem + 1vw).
5. Les Media Queries (Points de Rupture)
C'est la "magie" du responsive. Une media query est une règle CSS qui dit : "SI l'écran fait (au moins) telle largeur, ALORS applique ces styles."
Cela permet de changer radicalement la mise en page à des "points de rupture" définis (par exemple, 768px pour les tablettes). C'est ainsi qu'un site passe d'une seule colonne sur mobile à trois colonnes sur ordinateur.
1
/* Styles de base (Mobile First) */2
.colonne { width: 100%; }
3
/* Point de rupture pour les écrans plus grands */4
@media (min-width: 768px) {
5
.colonne { width: 33%; }
6
}
Méthode : Arborescence
Arborescence
Méthode : index.html
1
2
<html lang="fr">
3
4
<head>
5
<meta charset="UTF-8">
6
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
<title>Portfolio de Vincent Vanneste</title>
8
<link rel="stylesheet" href="css/style.css">
9
<link rel="stylesheet" href="css/accueil.css">
10
<!-- Import de polices externes (Google Fonts) -->11
<link
12
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Roboto:wght@400;700&display=swap"
13
rel="stylesheet">
14
<!-- Font Awesome CDN pour icônes -->15
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
16
</head>
17
18
<body>
19
20
<header id="haut" aria-label="En-tête du site">
21
<figure aria-labelledby="figcaption-vv">
22
<img src="images/photo.jpg" alt="Photo de Vincent Vanneste">
23
<figcaption id="figcaption-vv">Vincent Vanneste</figcaption>
24
</figure>
25
26
<h1>Portfolio de Vincent Vanneste</h1>
27
<nav aria-label="Navigation principale">
28
<ul>
29
<li><a href="index.html">Accueil</a></li>
30
<li><a href="projets.html">Projets</a></li>
31
<li><a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a></li>
32
</ul>
33
</nav>
34
35
</header>
36
37
<main aria-label="Contenu principal du site">
38
<nav aria-label="Navigation interne à la page">
39
<ul>
40
<li><a href="#about">À propos</a></li>
41
<li><a href="#competences">Compétences</a></li>
42
<li><a href="#experiences">Expériences</a></li>
43
<li><a href="#formations">Formations</a></li>
44
</ul>
45
</nav>
46
47
<!-- À propos -->48
<section id="about" aria-labelledby="titre-about">
49
<h2 class="icon-about" id="titre-about">À propos</h2>
50
<p>Je suis directeur des études du DEUST WMI de Calais et j'enseigne les fondamentaux du développement web
51
(HTML, CSS, JavaScript, PHP). Passionné par la transmission des connaissances, j'accompagne mes
52
étudiants dans l'acquisition des compétences nécessaires pour réussir dans le secteur du numérique.</p>
53
<address role="contentinfo" aria-label="Coordonnées">
54
<dl>
55
<dt>Localisation :</dt>
56
<dd>Calais, France</dd>
57
<dt>Site :</dt>
58
<dd><a href="https://vincent-vanneste.fr/" target="_blank">vincent-vanneste.fr</a></dd>
59
<dt>Email :</dt>
60
<dd><a href="mailto:vincent.vanneste@univ-littoral.fr">vincent.vanneste@univ-littoral.fr</a></dd>
61
</dl>
62
</address>
63
</section>
64
65
66
67
<!-- Compétences -->68
<section id="competences" aria-labelledby="titre-competences">
69
<h2 class="icon-competences" id="titre-competences">Compétences</h2>
70
<ul>
71
<li>HTML</li>
72
<li>CSS</li>
73
<li>Responsive</li>
74
<li>Accessibilité</li>
75
<li>JavaScript</li>
76
<li>PHP • Laravel 11</li>
77
<li>MySQL</li>
78
<li>Git & GitHub</li>
79
</ul>
80
</section>
81
82
83
84
<!-- Expériences -->85
<section id="experiences" aria-labelledby="titre-experiences">
86
<h2 class="icon-experiences" id="titre-experiences">Expériences récentes</h2>
87
<ul>
88
<li>
89
<strong>Enseignant – Licence 1 Informatique</strong><br>
90
<time datetime="2025">2025</time> •
91
<address>
92
<a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a>
93
</address><br>
94
Introduction à HTML, CSS, JS
95
</li>
96
<li>
97
<strong>Directeur des études – DEUST WMI</strong><br>
98
depuis <time datetime="2024">2024</time> •
99
<address>
100
<a href="https://www.univ-littoral.fr/" target="_blank">FCU ULCO</a>
101
</address>
102
</li>
103
</ul>
104
</section>
105
106
<!-- Formations -->107
<section id="formations" aria-labelledby="titre-formations">
108
<h2 class="icon-formations" id="titre-formations">Formations</h2>
109
<ul>
110
<li>
111
<strong>Doctorat productique, automatique et informatique industrielle</strong><br>
112
<time datetime="2000">2000</time> •
113
<address>
114
<a href="https://www.univ-lille.fr/" target="_blank">Université de Lille</a>
115
</address>
116
</li>
117
<li>
118
<strong>CAPET Technologie</strong><br>
119
<time datetime="1998">1998</time> •
120
<address>
121
<a href="https://www.iufm-douai.fr/" target="_blank">IUFM Douais</a>
122
</address>
123
</li>
124
</ul>
125
</section>
126
127
</main>
128
129
<footer aria-label="Pied de page">
130
<p>© 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés.</p>
131
<!-- Réseaux sociaux -->132
<div class="socials" role="navigation" aria-label="Réseaux sociaux">
133
<a href="https://www.facebook.com/" target="_blank" aria-label="Facebook">
134
<i class="fab fa-facebook-f"></i>
135
</a>
136
<a href="https://www.linkedin.com/in/" target="_blank" aria-label="LinkedIn">
137
<i class="fab fa-linkedin-in"></i>
138
</a>
139
<a href="https://www.instagram.com/" target="_blank" aria-label="Instagram">
140
<i class="fab fa-instagram"></i>
141
</a>
142
<a href="https://x.com/" target="_blank" aria-label="X">
143
<i class="fab fa-x-twitter"></i>
144
</a>
145
</div>
146
</footer>
147
148
149
</body>
150
151
</html>
Méthode : projets.html
1
2
<html lang="fr">
3
4
<head>
5
<meta charset="UTF-8">
6
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
<title>Portfolio - Projets</title>
8
<link rel="stylesheet" href="css/style.css">
9
<link rel="stylesheet" href="css/projets.css">
10
<!-- Import de polices externes (Google Fonts) -->11
<link
12
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Roboto:wght@400;700&display=swap"
13
rel="stylesheet">
14
<!-- Font Awesome CDN pour icônes -->15
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
16
</head>
17
18
<body>
19
20
<header id="haut" aria-label="En-tête du site">
21
<figure aria-labelledby="figcaption-vv">
22
<img src="images/photo.jpg" alt="Photo de Vincent Vanneste">
23
<figcaption id="figcaption-vv">Vincent Vanneste</figcaption>
24
</figure>
25
26
<h1>Portfolio de Vincent Vanneste</h1>
27
<nav aria-label="Navigation principale">
28
<ul>
29
<li><a href="index.html">Accueil</a></li>
30
<li><a href="projets.html">Projets</a></li>
31
<li><a href="https://www.univ-littoral.fr/" target="_blank">ULCO</a></li>
32
</ul>
33
</nav>
34
35
</header>
36
37
<main>
38
39
<section aria-labelledby="liste-projets" class="projets">
40
<h2 id="liste-projets">Liste des projets</h2>
41
42
<article aria-labelledby="titre-projet1">
43
<h3 id="titre-projet1"><a href="projets/projet1.html">Projet 1</a></h3>
44
<figure aria-labelledby="fig-projet1">
45
<img src="images/vignettes/projet1.jpg" alt="Aperçu du Projet 1">
46
<figcaption id="fig-projet1">Aperçu du Projet 1</figcaption>
47
</figure>
48
<p>Un projet qui présente les bases du HTML et de la mise en page.</p>
49
</article>
50
51
<article aria-labelledby="titre-projet2">
52
<h3 id="titre-projet2"><a href="projets/projet2.html">Projet 2</a></h3>
53
<figure aria-labelledby="fig-projet2">
54
<img src="images/vignettes/projet2.jpg" alt="Aperçu du Projet 2">
55
<figcaption id="fig-projet2">Aperçu du Projet 2</figcaption>
56
</figure>
57
<p>Un site en CSS avec une mise en forme responsive adaptée aux mobiles.</p>
58
</article>
59
60
<article aria-labelledby="titre-projet3">
61
<h3 id="titre-projet3"><a href="projets/projet3.html">Projet 3</a></h3>
62
<figure aria-labelledby="fig-projet3">
63
<img src="images/vignettes/projet3.jpg" alt="Aperçu du Projet 3">
64
<figcaption id="fig-projet3">Aperçu du Projet 3</figcaption>
65
</figure>
66
<p>Un mini-site en JavaScript avec des interactions simples.</p>
67
</article>
68
69
<article aria-labelledby="titre-projet4">
70
<h3 id="titre-projet4"><a href="projets/projet4.html">Projet 4</a></h3>
71
<figure aria-labelledby="fig-projet4">
72
<img src="images/vignettes/projet4.jpg" alt="Aperçu du Projet 4">
73
<figcaption id="fig-projet4">Aperçu du Projet 4</figcaption>
74
</figure>
75
<p>Une application web utilisant PHP et MySQL pour gérer des données.</p>
76
</article>
77
78
<article aria-labelledby="titre-projet5">
79
<h3 id="titre-projet5"><a href="projets/projet5.html">Projet 5</a></h3>
80
<figure aria-labelledby="fig-projet5">
81
<img src="images/vignettes/projet5.jpg" alt="Aperçu du Projet 5">
82
<figcaption id="fig-projet5">Aperçu du Projet 5</figcaption>
83
</figure>
84
<p>Un projet complet combinant HTML, CSS, JS et base de données.</p>
85
</article>
86
87
</section>
88
</main>
89
90
<footer aria-label="Pied de page">
91
<p>© 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés.</p>
92
<!-- Réseaux sociaux -->93
<div class="socials" role="navigation" aria-label="Réseaux sociaux">
94
<a href="https://www.facebook.com/" target="_blank" aria-label="Facebook">
95
<i class="fab fa-facebook-f"></i>
96
</a>
97
<a href="https://www.linkedin.com/in/" target="_blank" aria-label="LinkedIn">
98
<i class="fab fa-linkedin-in"></i>
99
</a>
100
<a href="https://www.instagram.com/" target="_blank" aria-label="Instagram">
101
<i class="fab fa-instagram"></i>
102
</a>
103
<a href="https://x.com/" target="_blank" aria-label="X">
104
<i class="fab fa-x-twitter"></i>
105
</a>
106
</div>
107
</footer>
108
</body>
109
110
</html>
Méthode : projets/projet1.html
1
2
<html lang="fr">
3
4
<head>
5
<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/style.css">
10
<link rel="stylesheet" href="css/projet.css">
11
<!-- 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 -->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
<article aria-labelledby="titre-projet1" class="projets">
40
41
<header>
42
<h2 id="titre-projet1">Projet 1 <br> Découverte du HTML et du CSS</h2>
43
<figure>
44
<img src="images/projet1.jpg" alt="Capture d’écran du Projet 1">
45
<figcaption>Page d’accueil du projet HTML/CSS</figcaption>
46
</figure>
47
</header>
48
49
<section aria-labelledby="description-projet">
50
<h2 id="description-projet">Description du projet</h2>
51
<p>
52
Ce premier projet consiste à créer un mini-site en HTML et CSS.
53
L’objectif est de comprendre la structure d’une page web,
54
d’utiliser les balises sémantiques et d’appliquer les premières règles de style CSS.
55
</p>
56
</section>
57
58
<section aria-labelledby="objectifs-projet">
59
<h2 id="objectifs-projet">Objectifs pédagogiques</h2>
60
<ul>
61
<li>Découvrir la structure d’un document HTML5.</li>
62
<li>Apprendre à organiser un site web avec plusieurs pages liées.</li>
63
<li>Utiliser le CSS pour la mise en forme du contenu.</li>
64
<li>Publier le site sur GitHub Pages.</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>Structurer et organiser un site web en utilisant le HTML sémantique et les bonnes pratiques de
72
codage.</li>
73
<li>Mettre en forme et personnaliser l’apparence d’un site avec le CSS (Flexbox, Grid, couleurs,
74
polices, effets).</li>
75
<li>Créer un portfolio complet avec une navigation cohérente.</li>
76
<li>Intégrer des contenus multimédias accessibles et esthétiques.</li>
77
<li>Adapter un site aux différents écrans grâce au responsive design et aux media queries.</li>
78
<li>Déployer un site en ligne via GitHub Pages et le valider (W3C, Lighthouse).</li>
79
<li>Présenter et valoriser son travail avec une identité graphique cohérente.</li>
80
</ul>
81
</section>
82
83
<section aria-labelledby="resultat-projet">
84
<h2 id="resultat-projet">Résultat obtenu</h2>
85
<p>
86
Le projet final se compose d’une page d’accueil, d’une galerie de projets et d'une page par projet.
87
Le site est responsive et conforme aux standards du W3C.
88
</p>
89
<p>
90
<a href="" class="btn" target="_blank" rel="noopener">
91
<i class="fa-solid fa-eye"></i> Voir la démo
92
</a>
93
</p>
94
</section>
95
96
<nav class="nav-projets" aria-label="Navigation entre les projets">
97
<a href="projets/projet2.html" class="next">Projet suivant →</a>
98
</nav>
99
100
</article>
101
</main>
102
103
<footer aria-label="Pied de page">
104
<p>© 2025 <strong>Vincent Vanneste</strong>. Tous droits réservés.</p>
105
<!-- Réseaux sociaux -->106
<div class="socials" role="navigation" aria-label="Réseaux sociaux">
107
<a href="https://www.facebook.com/" target="_blank" aria-label="Facebook">
108
<i class="fab fa-facebook-f"></i>
109
</a>
110
<a href="https://www.linkedin.com/in/" target="_blank" aria-label="LinkedIn">
111
<i class="fab fa-linkedin-in"></i>
112
</a>
113
<a href="https://www.instagram.com/" target="_blank" aria-label="Instagram">
114
<i class="fab fa-instagram"></i>
115
</a>
116
<a href="https://x.com/" target="_blank" aria-label="X">
117
<i class="fab fa-x-twitter"></i>
118
</a>
119
</div>
120
</footer>
121
122
</body>
123
124
</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
color: #222;
12
line-height: 1.5;
13
14
/* MODIFIÉ : Typographie fluide pour tout le corps du texte */15
/* MIN, PRÉFÉRÉ (base + fluidité), MAX */16
font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
17
18
/**********************/19
/* Boîte & Espacement */20
/**********************/21
margin: 0;
22
23
/****************************/24
/* Couleurs & Arrière-plans */25
/****************************/26
background: linear-gradient(135deg, #e8f0ff 0%, #f9fcff 100%);
27
28
/***************/29
/* Transitions */30
/***************/31
transition: background 0.5s ease;
32
}
33
34
/* --- Médias fluides (Images, Vidéos) --- */35
/* AJOUTÉ : Garantit que les médias ne dépassent jamais de leur conteneur */36
img,37
video,38
iframe {39
max-width: 100%;
40
height: auto;
41
}
42
43
/* ==========================================================================44
En-tête (Header)45
========================================================================== */46
body>header {
47
/***************/48
/* Typographie */49
/***************/50
text-align: center;
51
color: white;
52
53
/**********************/54
/* Boîte & Espacement */55
/**********************/56
padding: 20px;
57
58
/****************************/59
/* Couleurs & Arrière-plans */60
/****************************/61
background: linear-gradient(135deg, #0073e6, #004a99);
62
63
/********************/64
/* Bordures & Ombre */65
/********************/66
border-bottom: 2px solid #ddd;
67
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
68
69
/* Transitions */70
transition: background 0.3s ease;
71
}
72
73
/* --- Titre principal du Header (h1) --- */74
body>header h1 {
75
/***************/76
/* Typographie */77
/***************/78
font-family: 'Roboto', sans-serif;
79
80
/* MODIFIÉ : Typographie fluide */81
/* MIN, PRÉFÉRÉ (base + fluidité), MAX */82
font-size: clamp(2rem, 1.75rem + 1vw, 2.5rem);
83
84
letter-spacing: 0.5px;
85
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
86
87
/**********************/88
/* Boîte & Espacement */89
/**********************/90
margin: 10px 0;
91
}
92
93
/* --- Figure dans le header --- */94
body>header figure {
95
/**********************/96
/* Boîte & Espacement */97
/**********************/98
margin: 0 auto 10px;
99
}
100
101
/* --- Image de profil --- */102
body>header img {
103
/**************/104
/* Dimensions */105
/**************/106
/* MODIFIÉ : Taille par défaut pour mobile */107
width: 120px;
108
109
/********************/110
/* Bordures & Ombre */111
/********************/112
border-radius: 50%;
113
border: 3px solid #0066cc;
114
115
/***************/116
/* Transitions */117
/***************/118
transition: transform 0.3s ease, box-shadow 0.3s ease;
119
}
120
121
body>header img:hover {
122
/*******************/123
/* Transformations */124
/*******************/125
transform: scale(1.08) rotate(2deg);
126
127
/*********/128
/* Ombre */129
/*********/130
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
131
}
132
133
/* --- Légende de l'image de profil --- */134
body>header figcaption {
135
/***************/136
/* Typographie */137
/***************/138
/* MODIFIÉ : Typographie fluide */139
font-size: clamp(0.85rem, 0.8rem + 0.2vw, 1rem);
140
141
/**********************/142
/* Boîte & Espacement */143
/**********************/144
margin-top: 8px;
145
}
146
147
/* --- Navigation principale (dans le header) --- */148
body>header nav ul {
149
/***********/150
/* Flexbox */151
/***********/152
display: flex;
153
/* MODIFIÉ : Styles "Mobile First" */154
flex-direction: column;
155
align-items: center;
156
gap: 10px;
157
158
/**********************/159
/* Boîte & Espacement */160
/**********************/161
padding: 0;
162
margin: 10px 0 0;
163
164
/******************/165
/* Style de liste */166
/******************/167
list-style: none;
168
}
169
170
/* --- Liens de navigation principale (dans le header) --- */171
body>header nav a {
172
/***************/173
/* Typographie */174
/***************/175
text-decoration: none;
176
color: #bfc5cb;
177
font-weight: bold;
178
/* La taille de la police sera héritée du 'body' fluide */179
180
/**********************/181
/* Boîte & Espacement */182
/**********************/183
padding: 6px 10px;
184
185
/************/186
/* Bordures */187
/************/188
border-radius: 4px;
189
190
/******************/191
/* Positionnement */192
/******************/193
position: relative;
194
overflow: hidden;
195
196
/***************/197
/* Transitions */198
/***************/199
transition: color 0.3s ease;
200
}
201
202
body>header nav a:hover {
203
/************/204
/* Couleurs */205
/************/206
background-color: #ddd;
207
color: #333;
208
}
209
210
/* --- Barre animée sous le lien (pseudo-élément) --- */211
body>header nav a::after {
212
content: "";
213
position: absolute;
214
bottom: 0;
215
left: 0;
216
width: 0%;
217
height: 3px;
218
background: white;
219
transition: width 0.3s ease;
220
}
221
222
/* --- Effet sur le survol de la barre de navigation --- */223
body>header nav a:hover::after {
224
width: 100%;
225
}
226
227
/* --- Effet de clic sur l’élément li du header --- */228
body>header nav li:active {
229
/*******************/230
/* Transformations */231
/*******************/232
transform: scale(0.9);
233
}
234
235
/* ==========================================================================236
Contenu principal (Main)237
========================================================================== */238
main {239
/**********************/240
/* Boîte & Espacement */241
/**********************/242
max-width: 1000px;
243
margin: auto;
244
}
245
246
/* --- Titre principal du main (h1) --- */247
main>h1 {
248
/***************/249
/* Typographie */250
/***************/251
text-align: center;
252
color: #1e3a5f;
253
254
/* MODIFIÉ : Typographie fluide */255
/* MIN, PRÉFÉRÉ (base + fluidité), MAX */256
font-size: clamp(2rem, 1.8rem + 0.5vw, 2.2rem);
257
258
/**********************/259
/* Boîte & Espacement */260
/**********************/261
margin: 20px 0;
262
}
263
264
/* --- Sections et articles principaux du main --- */265
main>section,
266
main>article {
267
/**********************/268
/* Boîte & Espacement */269
/**********************/270
padding: 0 15px;
271
}
272
273
/* --- Titres de section et d'article (h2) --- */274
main>section h2,
275
main>article h2 {
276
/***************/277
/* Typographie */278
/***************/279
color: #1e3a5f;
280
281
/* MODIFIÉ : Typographie fluide */282
/* MIN, PRÉFÉRÉ (base + fluidité), MAX */283
font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
284
}
285
286
/* ==========================================================================287
Pied de page (Footer)288
========================================================================== */289
footer {290
/***************/291
/* Typographie */292
/***************/293
color: #fff;
294
text-align: center;
295
/* La taille de police est héritée du 'body' fluide */296
297
/**********************/298
/* Boîte & Espacement */299
/**********************/300
padding: 20px;
301
302
/****************************/303
/* Couleurs & Arrière-plans */304
/****************************/305
background: linear-gradient(135deg, #1e3a5f, #0a2340, #224c80, #162d50);
306
background-size: 200% 200%;
307
308
/***************/309
/* Transitions */310
/***************/311
transition: background-position 0.5s ease;
312
}
313
314
footer:hover {
315
background-position: right bottom;
316
}
317
318
footer p {
319
/**********************/320
/* Boîte & Espacement */321
/**********************/322
margin: 0;
323
}
324
325
/* --- Réseaux sociaux dans le footer --- */326
footer .socials {
327
/***********/328
/* Flexbox */329
/***********/330
display: flex;
331
justify-content: center;
332
gap: 20px;
333
334
/**********************/335
/* Boîte & Espacement */336
/**********************/337
margin-top: 15px;
338
}
339
340
footer .socials a {
341
/***************/342
/* Typographie */343
/***************/344
/* MODIFIÉ : Typographie fluide pour les icônes */345
font-size: clamp(1.5rem, 1.4rem + 0.5vw, 1.75rem);
346
/* 28px max */347
color: white;
348
349
/***************/350
/* Transitions */351
/***************/352
transition: transform 0.3s ease, color 0.3s ease;
353
}
354
355
footer .socials a:hover {
356
/*******************/357
/* Transformations */358
/*******************/359
transform: translateY(-3px) scale(1.2);
360
361
/************/362
/* Couleurs */363
/************/364
color: #00a2ff;
365
}
366
367
368
/* ==========================================================================369
AJOUTÉ : Styles Responsives (Tablettes et Ordinateurs)370
========================================================================== */371
372
/* S'applique à 768px OU PLUS */373
374
@media (min-width: 768px) {
375
376
/* --- On restaure la taille de l'image de profil --- */377
body>header img {
378
width: 150px;
379
}
380
381
/* --- On restaure la navigation horizontale --- */382
body>header nav ul {
383
flex-direction: row;
384
justify-content: center;
385
gap: 15px;
386
}
387
388
/* * Remarque :389
* Plus besoin de changer les font-size, 390
* car clamp() s'en occupe déjà sur toute la page !391
*/392
}
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
/* MODIFIÉ : "Mobile First" (1 colonne par défaut) */11
/* L'ancienne grille (3 colonnes) est déplacée dans la media query */12
grid-template-columns: 1fr;
13
grid-template-areas:14
"nav"15
"about"16
"competences"17
"experiences"18
"formations";19
20
/**********************/21
/* Boîte & Espacement */22
/**********************/23
gap: 10px;
24
}
25
26
/* --- Assignation des zones de la grille --- */27
/* (Ceci fonctionne maintenant pour la grille mobile ET la grille desktop) */28
main>nav {
29
grid-area: nav;
30
}
31
32
#about {33
grid-area: about;
34
}
35
36
#competences {37
grid-area: competences;
38
}
39
40
#experiences {41
grid-area: experiences;
42
}
43
44
#formations {45
grid-area: formations;
46
}
47
48
/* ==========================================================================49
Navigation Interne (dans Main)50
========================================================================== */51
52
/* --- Liste de la navigation interne --- */53
main nav ul {
54
/***********/55
/* Flexbox */56
/***********/57
display: flex;
58
justify-content: center;
59
flex-wrap: wrap;
60
/* 'flex-wrap: wrap' est déjà excellent pour le responsive ! */61
62
/**********************/63
/* Boîte & Espacement */64
/**********************/65
gap: 12px;
66
padding: 0;
67
margin: 20px 0;
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: #fff;
88
font-weight: bold;
89
/* La taille de la police est héritée du 'body' (défini dans l'autre fichier) */90
91
/****************************/92
/* Couleurs & Arrière-plans */93
/****************************/94
background-color: #0073e6;
95
96
/************/97
/* Bordures */98
/************/99
border-radius: 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, #0073e6, #00a2ff);
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
outline: 3px solid #005bb5;
126
outline-offset: 2px;
127
}
128
129
/* ==========================================================================130
Sections de Contenu131
========================================================================== */132
133
/* --- Style général des sections --- */134
section {135
/***********************/136
/* Animation & Effets */137
/***********************/138
opacity: 0;
139
transform: translateY(15px);
140
animation: fadeIn 0.8s ease forwards;
141
}
142
143
/* --- Titres de section (h2) --- */144
section h2 {
145
/***************/146
/* Typographie */147
/***************/148
/* MODIFIÉ : Typographie fluide */149
/* font-size: 1.5rem; <-- Remplacé par clamp() */150
/* MIN, PRÉFÉRÉ (base + fluidité), MAX */151
font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
152
color: #1e3a5f;
153
154
/**********************/155
/* Boîte & Espacement */156
/**********************/157
margin-top: 30px;
158
margin-bottom: 10px;
159
padding-bottom: 5px;
160
161
/************/162
/* Bordures */163
/************/164
border-bottom: 2px solid #ddd;
165
}
166
167
/* --- Paragraphes de section --- */168
section p {
169
/**********************/170
/* Boîte & Espacement */171
/**********************/172
margin-bottom: 15px;
173
/* La taille de la police est héritée du 'body' fluide */174
}
175
176
/* ==========================================================================177
Éléments de Contenu (Listes, Liens, Adresse)178
========================================================================== */179
180
/* --- Listes à puces (dans section) --- */181
section ul {
182
/**********************/183
/* Boîte & Espacement */184
/**********************/185
padding-left: 20px;
186
margin-bottom: 20px;
187
}
188
189
/* --- Éléments de liste (dans section) --- */190
section li {
191
/**********************/192
/* Boîte & Espacement */193
/**********************/194
margin-bottom: 8px;
195
}
196
197
/* --- Liens (dans section) --- */198
section a {
199
/***************/200
/* Typographie */201
/***************/202
color: #0066cc;
203
text-decoration: none;
204
}
205
206
section a:hover {
207
/***************/208
/* Typographie */209
/***************/210
text-decoration: underline;
211
}
212
213
/* --- Balise Adresse --- */214
address {215
/***************/216
/* Typographie */217
/***************/218
font-style: normal;
219
220
/**********************/221
/* Boîte & Espacement */222
/**********************/223
display: inline;
224
}
225
226
/* ==========================================================================227
Classes Utilitaires (Icônes)228
========================================================================== */229
230
/* --- Base des icônes (pseudo-élément) --- */231
.icon-about::before,
232
.icon-competences::before,
233
.icon-experiences::before,
234
.icon-formations::before {
235
/**********************/236
/* Boîte & Espacement */237
/**********************/238
margin-right: 8px;
239
}
240
241
/* --- Icônes spécifiques (Emoji) --- */242
.icon-about::before {
243
content: "👤";
244
}
245
246
.icon-competences::before {
247
content: "💻";
248
}
249
250
.icon-experiences::before {
251
content: "📅";
252
}
253
254
.icon-formations::before {
255
content: "🎓";
256
}
257
258
/* ==========================================================================259
Animations260
========================================================================== */261
262
/* --- Délais d'animation pour les sections --- */263
section:nth-of-type(2) {
264
animation-delay: 0.2s;
265
}
266
267
section:nth-of-type(3) {
268
animation-delay: 0.4s;
269
}
270
271
section:nth-of-type(4) {
272
animation-delay: 0.6s;
273
}
274
275
/* --- Définition de l’animation fadeIn --- */276
@keyframes fadeIn {
277
to {278
opacity: 1;
279
transform: translateY(0);
280
}
281
}
282
283
284
/* ==========================================================================285
AJOUTÉ : Styles Responsives (Tablettes et Ordinateurs)286
========================================================================== */287
288
/* S'applique à 768px OU PLUS 289
(Vous pouvez changer 768px pour 992px si vous préférez290
que la grille à 3 colonnes n'apparaisse que sur les écrans plus larges) */291
292
@media (min-width: 768px) {
293
294
main {295
/* Restaure la mise en page 3 colonnes pour les grands écrans */296
grid-template-columns: 1fr 1fr 1fr;
297
grid-template-areas:298
"nav nav nav"299
"about about about"300
"competences experiences formations";301
}
302
303
/* (Les typographies fluides et autres styles s'adaptent déjà) */304
}
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à parfaitement responsive ! Excellent travail. */10
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
11
12
/**********************/13
/* Boîte & Espacement */14
/**********************/15
gap: 20px;
16
}
17
18
/* ==========================================================================19
Titre Principal de la Section "Projets"20
========================================================================== */21
.projets>h2 {
22
/***********************/23
/* Mise en page (Grid) */24
/***********************/25
grid-column: 1 / -1;
26
27
/***************/28
/* Typographie */29
/***************/30
text-align: center;
31
/* MODIFIÉ : Typographie fluide */32
/* font-size: 1.8rem; <-- Remplacé par clamp() */33
/* MIN, PRÉFÉRÉ (base + fluidité), MAX */34
font-size: clamp(1.5rem, 1.3rem + 1vw, 1.8rem);
35
font-weight: 600;
36
37
/**********************/38
/* Boîte & Espacement */39
/**********************/40
padding-bottom: 5px;
41
42
/************/43
/* Bordures */44
/************/45
border-bottom: 2px solid #ccc;
46
}
47
48
/* ==========================================================================49
Cartes de Projet (Article)50
========================================================================== */51
52
/* --- Style de base des articles --- */53
.projets>article {
54
/**********************/55
/* Boîte & Espacement */56
/**********************/57
padding: 10px;
58
59
/****************************/60
/* Couleurs & Arrière-plans */61
/****************************/62
background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 25%, #d0f0ff 50%, #f0f8ff 75%, #ffffff 100%);
63
background-size: 300% 300%;
64
65
/********************/66
/* Bordures & Ombre */67
/********************/68
border: 1px solid #ddd;
69
border-radius: 8px;
70
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
71
72
/***************/73
/* Typographie */74
/***************/75
text-align: left;
76
77
/******************/78
/* Positionnement */79
/******************/80
position: relative;
81
82
/***************/83
/* Transitions */84
/***************/85
transition: transform 0.3s ease, box-shadow 0.3s ease;
86
}
87
88
/* --- Survol des articles --- */89
.projets>article:hover {
90
/*******************/91
/* Transformations */92
/*******************/93
transform: translateY(-5px);
94
95
/********************/96
/* Bordures & Ombre */97
/********************/98
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
99
100
/*************/101
/* Animation */102
/*************/103
animation: gradientMove 3s linear infinite;
104
}
105
106
/* ==========================================================================107
Contenu des Cartes (Typo, Images, Liens)108
========================================================================== */109
110
/* --- Titres des projets (h3) --- */111
.projets h3 {
112
/**********************/113
/* Boîte & Espacement */114
/**********************/115
margin-top: 0;
116
117
/***************/118
/* Typographie */119
/***************/120
/* MODIFIÉ : Typographie fluide */121
/* font-size: 1.1rem; <-- Remplacé par clamp() */122
/* MIN, PRÉFÉRÉ (base + fluidité), MAX */123
font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
124
}
125
126
/* --- Paragraphes des projets --- */127
.projets p {
128
/***************/129
/* Typographie */130
/***************/131
/* MODIFIÉ : Typographie fluide */132
/* font-size: 0.9rem; <-- Remplacé par clamp() */133
/* MIN, PRÉFÉRÉ (base + fluidité), MAX */134
font-size: clamp(0.85rem, 0.8rem + 0.2vw, 0.9rem);
135
color: #333;
136
}
137
138
/* --- Conteneur Figure (pour image) --- */139
.projets figure {
140
/**********************/141
/* Boîte & Espacement */142
/**********************/143
margin: 0;
144
padding: 0;
145
}
146
147
/* --- Images des projets (fusion des doublons) --- */148
.projets figure img {
149
/**************/150
/* Dimensions */151
/**************/152
width: 100%;
153
height: auto;
154
155
/**********************/156
/* Boîte & Espacement */157
/**********************/158
display: block;
159
margin-bottom: 8px;
160
161
/************/162
/* Bordures */163
/************/164
border-radius: 4px;
165
border: 1px solid #ccc;
166
167
/***************/168
/* Transitions */169
/***************/170
transition: transform 0.3s ease, box-shadow 0.3s ease;
171
}
172
173
/* --- Survol des images --- */174
.projets figure img:hover {
175
/*******************/176
/* Transformations */177
/*******************/178
transform: scale(1.05);
179
180
/********************/181
/* Bordures & Ombre */182
/********************/183
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
184
}
185
186
/* --- Légendes des images --- */187
.projets figure figcaption {
188
/***************/189
/* Typographie */190
/***************/191
/* MODIFIÉ : Typographie fluide */192
/* font-size: 0.85rem; <-- Remplacé par clamp() */193
/* MIN, PRÉFÉRÉ (base + fluidité), MAX */194
font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.85rem);
195
color: #666;
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: #0066cc;
211
font-weight: bold;
212
/* La taille s'adaptera car elle hérite du 'p' qui est fluide */213
214
/***************/215
/* Transitions */216
/***************/217
transition: color 0.3s ease, transform 0.2s ease;
218
}
219
220
/* --- Survol des liens --- */221
.projets a:hover {
222
/***************/223
/* Typographie */224
/***************/225
color: #004a99;
226
text-decoration: underline;
227
228
/*******************/229
/* Transformations */230
/*******************/231
transform: translateY(-2px) scale(1.05);
232
}
233
234
/* --- Focus (accessibilité) des liens --- */235
.projets a:focus {
236
/*********************/237
/* Accessibilité (Focus) */238
/*********************/239
outline: 3px solid #005bb5;
240
outline-offset: 2px;
241
}
242
243
/* ==========================================================================244
Animations (Keyframes)245
========================================================================== */246
247
/* --- Animation du gradient au survol des cartes --- */248
@keyframes gradientMove {
249
0% {250
background-position: 0% 0%;
251
}
252
253
50% {254
background-position: 100% 100%;
255
}
256
257
100% {258
background-position: 0% 0%;
259
}
260
}
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
/* C'est déjà parfaitement responsive ! */26
max-width: 100%;
27
height: auto;
28
29
/**********************/30
/* Boîte & Espacement */31
/**********************/32
margin-top: 20px;
33
34
/********************/35
/* Bordures & Ombre */36
/********************/37
border-radius: 8px;
38
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
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: 1rem;
58
59
/***************/60
/* Typographie */61
/***************/62
/* MODIFIÉ : Typographie fluide */63
/* font-size: 1.5rem; <-- Remplacé par clamp() */64
/* MIN, PRÉFÉRÉ (base + fluidité), MAX */65
font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
66
}
67
68
/* ==========================================================================69
Icônes des Titres (Pseudo-éléments)70
========================================================================== */71
72
/* --- Icône Description 📝 --- */73
#description-projet::before {
74
/***********************/75
/* Contenu (Pseudo-élément) */76
/***********************/77
content: "\1F4DD";
78
/* Emoji "Note" (📝) */79
}
80
81
/* --- Icône Objectifs 🎯 --- */82
#objectifs-projet::before {
83
/***********************/84
/* Contenu (Pseudo-élément) */85
/***********************/86
content: "\1F3AF";
87
/* Emoji "Cible" (🎯) */88
}
89
90
/* --- Icône Compétences 🛠️ --- */91
#competences-visees::before {
92
/***********************/93
/* Contenu (Pseudo-élément) */94
/***********************/95
content: "\1F6E0";
96
/* Emoji "Outils" (🛠️) */97
}
98
99
/* --- Icône Résultat ✅ --- */100
#resultat-projet::before {
101
/***********************/102
/* Contenu (Pseudo-élément) */103
/***********************/104
content: "\2705";
105
/* Emoji "Coche" (✅) */106
}
Exemple :
See the Pen Séance 10-index by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Séance 10- Accueil
Exemple :
See the Pen Séance 10-projets by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Séance 10- Projets
Exemple :
See the Pen Séance 10-projet1 by Vincent-Vanneste (@vincent-vanneste) on CodePen.
Séance 10- Projet1