1440px+ version

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 */
+/* On masque les images spécifiques aux PC sur mobile et tablette */
-#photosmall {
+#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) {
+    /* On masque l'image "small" pour laisser place à la "large" */
-
+    #photosmall {
-        .banner p {
+        display: none;
-            font-size: 25px ;
-        }
-
     }
 
+    /* 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;
+    }
+
+}
+
 }

index.html

@@ -27,6 +27,7 @@
     <section class="banner">
         <img src="assets/images/photo_6.png" alt="photo" id="photo">
         <img src="assets/images/photo_6_small.png" alt="photo" id="photosmall">
+        <img src="assets/images/photo_6_large.png" alt="photo" id="photolarge">
         <p>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.</p>
     </section>
     <br>