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 @@
+
Fernando Paysagiste est une autoentreprise de proximité, spécialisée dans la création et l'entretien d'espaces verts. De la tonte à l'aménagement complet de votre jardin, chaque intervention est réalisée avec professionnalisme, passion et souci du détail. Mon objectif est de vous offrir un extérieur harmonieux, agréable à vivre et adapté à vos besoins.