diff --git a/assets/images/photo_6_large.png b/assets/images/photo_6_large.png new file mode 100644 index 0000000..8bdb4ab Binary files /dev/null and b/assets/images/photo_6_large.png differ diff --git a/css/styles.css b/css/styles.css index d8365df..87df1dd 100644 --- a/css/styles.css +++ b/css/styles.css @@ -111,11 +111,12 @@ hr { object-fit: cover; border-radius: 0; box-shadow: none; - display: block; /* On s'assure qu'elle est visible */ + display: block; } -/* On masque la petite image sur mobile et tablette */ -#photosmall { +/* On masque les images spécifiques aux PC sur mobile et tablette */ +#photosmall, +#photolarge { display: none; } @@ -299,41 +300,77 @@ footer { font-size: 22px; word-spacing: -3px; padding: 0px 0px 0px 30px; - } - /* On masque la grande photo */ + /* On masque la photo classique */ #photo { display: none; } - /* On affiche et on stylise la petite photo (avec l'effet de dégradé) */ + /* On affiche l'image "small" */ #photosmall { - display: block; /* Affiche l'image */ + display: block; width: 55vw; height: 450px; margin: 0; - object-fit: cover; /* Assure que l'image ne se déforme pas */ + object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%); mask-image: linear-gradient(to right, transparent 0%, black 25%); } + /* Ajustement des images de la galerie avec zoom */ .projets img { height: 320px; - transition: transform 0.4s ease; /* Rend le zoom fluide */ + transition: transform 0.4s ease; } - /* Effet de zoom au passage de la souris */ .projets > div > div:hover img { - transform: scale(1.08); /* Grossit l'image de 8% */ + transform: scale(1.08); + } +} + +@media (min-width: 1440px) { + /* On autorise le contenu à s'élargir davantage */ + main { + max-width: 1400px; } - @media (min-width: 1440px) { - - .banner p { - font-size: 25px ; - } - + /* On masque l'image "small" pour laisser place à la "large" */ + #photosmall { + display: none; } + /* On affiche l'image "large" avec les mêmes effets que la "small" */ + #photolarge { + display: block; + width: 55vw; + height: 450px; + margin: 0; + object-fit: cover; + -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%); + mask-image: linear-gradient(to right, transparent 0%, black 25%); + } + + /* On aère la grille des projets */ + .projets > div { + gap: 2.5rem; + } + + /* On agrandit considérablement les photos */ + .projets img { + height: 400px; + } + + .banner p { + font-size: 25px; + } + +@media (min-width: 1740px) { + + .banner p { + font-size: 28px; + } + +} + } \ No newline at end of file diff --git a/index.html b/index.html index e65d0f7..8a30ea0 100644 --- a/index.html +++ b/index.html @@ -27,6 +27,7 @@