Photos et CSS

MéthodePhotos

Dans notre dossier Photos, nous ajoutons les images disponibles via ce lien : https://vincent-vanneste.fr/photos-site-php.zip

MéthodeCSS

Nous copions le contenu dans le fichier css/style.css.

1
/* style.css */
2
3
/* Réinitialisation simple */
4
* {
5
    margin: 0;
6
    padding: 0;
7
    box-sizing: border-box;
8
}
9
10
/* Corps de la page */
11
body {
12
    font-family: Arial, Helvetica, sans-serif;
13
    background-color: #f9f9f9;
14
    color: #333;
15
    line-height: 1.6;
16
}
17
18
/* Header et navigation */
19
header {
20
    background-color: #2c3e50;
21
    padding: 1rem 0;
22
}
23
24
nav ul {
25
    list-style: none;
26
    display: flex;
27
    justify-content: center;
28
    gap: 2rem;
29
}
30
31
nav a {
32
    text-decoration: none;
33
    color: #ecf0f1;
34
    font-weight: bold;
35
    transition: color 0.3s;
36
}
37
38
nav a:hover {
39
    color: #f39c12;
40
}
41
42
/* Main content */
43
main {
44
    max-width: 1000px;
45
    margin: 2rem auto;
46
    padding: 0 1rem;
47
    text-align: center;
48
}
49
50
main h1 {
51
    font-size: 2rem;
52
    margin-bottom: 2rem;
53
    color: #2c3e50;
54
}
55
56
/* Footer */
57
footer {
58
    background-color: #2c3e50;
59
    color: #ecf0f1;
60
    text-align: center;
61
    padding: 1rem 0;
62
    margin-top: 3rem;
63
}
64
65
footer h2 {
66
    font-size: 1.2rem;
67
}
Nous copions le contenu dans le fichier css/utilisateur.css.
1
/* ===============================
2
   Figures cartes .card
3
   =============================== */
4
5
.card {
6
    display: grid;
7
    grid-template-rows: auto 1fr;
8
9
    background: #fff;
10
    border: 1px solid #ddd;
11
    border-radius: 8px;
12
    overflow: hidden;
13
14
    transition: transform 0.2s, box-shadow 0.2s;
15
}
16
17
.card:hover {
18
    transform: translateY(-5px);
19
    box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
20
}
21
22
.card img {
23
    display: block;
24
    width: 100%;
25
    max-width: 90vw;
26
    max-height: 50vh;
27
    object-fit: contain;
28
}
29
30
.card figcaption {
31
    align-items: center;
32
    justify-content: center;
33
34
    padding: 0.6rem;
35
    font-size: 0.9rem;
36
    text-align: center;
37
38
    background: #f5f5f5;
39
    border-top: 1px solid #ddd;
40
}
41
42
43
/* ===============================
44
   Liste de figures (utilisateurs)
45
   =============================== */
46
47
.utilisateur-list {
48
    list-style: none;
49
    display: grid;
50
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
51
    gap: 1.5rem;
52
    padding: 0;
53
    margin: 0;
54
}