diff --git a/buggy.jpg b/buggy.jpg
new file mode 100644
index 0000000..3335953
Binary files /dev/null and b/buggy.jpg differ
diff --git a/index.html b/index.html
index c8dadf4..e0f4e3c 100644
--- a/index.html
+++ b/index.html
@@ -11,11 +11,11 @@
 </head>
 
 <body>
-
+    <div class="header-placeholder"></div>
     <header>
         <h2 class="logo">Logo</h2>
         <nav class="navigation">
-            <a href ="#">Accueil</a>
+            <a href ="#">Acceuil</a>
             <a href ="#">Réservation</a>
             <a href ="#">À propos</a>
             <a href ="#">Contact</a>
@@ -85,13 +85,53 @@
         <h1>Bienvenue chez Pegasus</h1>
         <p>
             Explorez vos vacances avec Pegasus, votre partenaire idéal pour la location d'équipement de loisir. 
-            Des aventures en plein air aux moments de détente, nous avons tout ce dont vous avez besoin.
+            Des aventures en plein air aux moments de détente, nous avons tout ce dont vous avez besoin. 
         </p>
+        <p>Explorez la liberté de voyager sans contraintes géographiques grâce à notre service de location de véhicules tout-terrain. Peu importe où vous vous trouvez, notre réseau de location s'étend à travers diverses régions, vous permettant de planifier des escapades dans des endroits aussi variés que majestueux.</p>
+        <p>Notre flotte diversifiée comprend des camping-cars, des caravanes, des vans aménagés et d'autres véhicules de loisir, tous conçus pour offrir le parfait équilibre entre confort et aventure. Que vous souhaitiez vous échapper en pleine nature, explorer des plages isolées ou vous immerger dans l'effervescence des festivals, nos véhicules sont prêts à répondre à vos besoins.</p>
+        <p>L'un des avantages majeurs de notre service est la possibilité de vous déplacer dans n'importe quel environnement. Nos véhicules tout-terrain sont équipés pour affronter diverses conditions routières, des routes pavées aux sentiers de montagne escarpés. Profitez de la polyvalence et de la facilité de conduite, que ce soit en ville, à la campagne ou dans des zones plus reculées.</p>
+        <p>Notre processus de location est simple et flexible. Choisissez le véhicule qui correspond à votre style d'aventure, déterminez les dates de location et préparez-vous à vivre une expérience unique. Nous mettons l'accent sur la qualité, la sécurité et la satisfaction de nos clients, vous assurant ainsi une escapade mémorable en toute tranquillité d'esprit.</p>
+        <p>Que vous soyez un routard chevronné ou un novice en quête de nouvelles expériences, notre site de location de véhicules de loisir vous offre la clé pour ouvrir les portes de l'aventure. Embarquez avec nous pour des voyages sans limites, des souvenirs impérissables et des moments de liberté totale. Réservez dès maintenant et préparez-vous à explorer le monde à votre rythme.</p>
         <p>
             Réservez dès maintenant et transformez vos vacances en expériences inoubliables.
         </p>
         <p class="slogan">Vivez l'aventure, louez avec Pegasus!</p>
     </section>
+    <section class="gallery">
+        <h2>Nos Photos</h2>
+        <div class="photo-grid">
+            <div class="photo">
+                <img src="montgolfiere.jpg" alt="Montgolfière">
+                <div class="comment">
+                    <h3>Commentaire 1</h3>
+                    <p>Ceci est le commentaire pour la photo de la montgolfière.</p>
+                </div>
+            </div>
+            <div class="photo">
+                <img src="jetski.jpg" alt="Jet Ski">
+                <div class="comment">
+                    <h3>Commentaire 2</h3>
+                    <p>Ceci est le commentaire pour la photo du jet ski.</p>
+                </div>
+            </div>
+            <div class="photo">
+                <img src="motoneige.jpg" alt="Motoneige">
+                <div class="comment">
+                    <h3>Commentaire 3</h3>
+                    <p>Ceci est le commentaire pour la photo de la motoneige.</p>
+                </div>
+            </div>
+            <div class="photo">
+                <img src="buggy.jpg" alt="Buggy">
+                <div class="comment">
+                    <h3>Commentaire 4</h3>
+                    <p>Ceci est le commentaire pour la photo du buggy.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    
 
-   
+  
 </body>
\ No newline at end of file
diff --git a/jetski.jpg b/jetski.jpg
new file mode 100644
index 0000000..77a997b
Binary files /dev/null and b/jetski.jpg differ
diff --git a/montgolfiere.jpg b/montgolfiere.jpg
new file mode 100644
index 0000000..acf042f
Binary files /dev/null and b/montgolfiere.jpg differ
diff --git a/motoneige.jpg b/motoneige.jpg
new file mode 100644
index 0000000..5f2e425
Binary files /dev/null and b/motoneige.jpg differ
diff --git a/script.js b/script.js
index c21935c..328b38e 100644
--- a/script.js
+++ b/script.js
@@ -1,22 +1,44 @@
-const wrapper = document.querySelector('.wrapper');
-const loginLink = document.querySelector('.login-link');
-const registerLink = document.querySelector('.register-link');
-const btnPopup = document.querySelector('.btnLogin-popup');
-const iconClose = document.querySelector('.icon-close');
+document.addEventListener("DOMContentLoaded", function () {
+    const wrapper = document.querySelector('.wrapper');
+    const loginLink = document.querySelector('.login-link');
+    const registerLink = document.querySelector('.register-link');
+    const btnPopup = document.querySelector('.btnLogin-popup');
+    const iconClose = document.querySelector('.icon-close');
 
+    function openLoginForm(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        wrapper.classList.add('active-popup');
+    }
 
-registerLink.addEventListener('click', ()=> {
-    wrapper.classList.add('active');
+    function closeLoginForm(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        wrapper.classList.remove('active-popup');
+    }
+
+    registerLink.addEventListener('click', function (event) {
+        openLoginForm(event);
+        wrapper.classList.add('active');
+    });
+
+    loginLink.addEventListener('click', function (event) {
+        openLoginForm(event);
+        wrapper.classList.remove('active');
+    });
+
+    btnPopup.addEventListener('click', openLoginForm);
+
+    iconClose.addEventListener('click', closeLoginForm);
 });
 
-loginLink.addEventListener('click', ()=> {
-    wrapper.classList.remove('active');
-});
-
-btnPopup.addEventListener('click', ()=> {
-    wrapper.classList.add('active-popup');
-});
-
-iconClose.addEventListener('click', ()=> {
-    wrapper.classList.remove('active-popup');
+window.addEventListener('scroll', function() {
+    var headerPlaceholder = document.querySelector('.header-placeholder');
+    var header = document.querySelector('header');
+    
+    if (window.scrollY >= header.offsetTop) {
+        headerPlaceholder.style.display = 'block';
+    } else {
+        headerPlaceholder.style.display = 'none';
+    }
 });
\ No newline at end of file
diff --git a/style.css b/style.css
index 838b97a..328fd6f 100644
--- a/style.css
+++ b/style.css
@@ -11,13 +11,15 @@ body {
     justify-content: center;
     align-items: center;
     min-height: 100vh;
-    background: black;
+    background: white;
     background-size: cover;
     background-position: center;
+    margin: 0;
 }
 
 header {
     position: fixed;
+    background: #162938;
     top: 0;
     left: 0;
     width: 100%;
@@ -84,7 +86,7 @@ header {
 }
 
 .wrapper {
-    position: relative;
+    position: fixed;
     width: 400px;
     height: 440px;
     background: transparent;
@@ -98,6 +100,9 @@ header {
     overflow: hidden;
     transform: scale(0);
     transition: transform .5s ease, height .2s ease;
+    top: 50;
+    left: 50%;
+    transform: translateX(-50%); 
 }
 
 .wrapper.active-popup {
@@ -156,7 +161,7 @@ header {
 
 .form-box h2 {
     font-size: 2em;
-    color: white;
+    color: #162938;
     text-align: center;
 }
 
@@ -164,7 +169,7 @@ header {
     position: relative;
     width: 100%;
     height: 50px;
-    border-bottom: 2px solid whitesmoke;
+    border-bottom: 2px solid #162938;
     margin: 30px 0;
 }
 
@@ -174,7 +179,7 @@ header {
     left: 5px;
     transform: translateY(-50%);
     font-size: 1em;
-    color: whitesmoke;
+    color: #162938;
     font-weight: 500;
     pointer-events: none;
     transition: .5s;
@@ -193,7 +198,7 @@ header {
     border: none;
     outline: none;
     font-size: 1em;
-    color:whitesmoke;
+    color:#162938;
     font-weight: 600;
     padding: 0 35px 0 5px;
 
@@ -208,7 +213,7 @@ header {
 
 .remember-forgot {
     font-size: .9em;
-    color: whitesmoke;
+    color: #162938;
     font-weight: 500;
     margin: -15px 0 15px;
     display: flex;
@@ -217,7 +222,7 @@ header {
 }
 
 .remember-forgot label input {
-    accent-color: purple;
+    accent-color: #162938;
     margin-right: 3px;
 }
 
@@ -244,7 +249,7 @@ header {
 
 .login-register {
     font-size: .9em;
-    color: #FBFCFC;
+    color: #162938;
     text-align: center;
     font-weight: 500;
     margin: 25px 0 10px;
@@ -262,9 +267,11 @@ header {
 }
 
 .presentation {
-    text-align: center;
-    margin-top: 80px;
-    color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 150px;
+    color: black;
 }
 
 .presentation h1 {
@@ -281,6 +288,56 @@ header {
 .presentation .slogan {
     font-size: 1.3em;
     font-weight: bold;
-    color: #f5a623; 
+    color: #08121a; 
 }
 
+.gallery {
+    text-align: center;
+    margin-top: 50px;
+}
+
+.photo-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    text-align: left; /* Nouvelle ligne ajoutée pour aligner le texte à gauche */
+}
+
+.photo {
+    position: relative;
+}
+
+.photo img {
+    width: 100%;
+    height: auto;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.comment {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: rgba(255, 255, 255, 0.9);
+    padding: 10px;
+    border-radius: 0 0 10px 10px;
+    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+    text-align: left;
+}
+
+.comment h3 {
+    margin-bottom: 5px;
+    color: #162938;
+    font-size: 1.2em;
+}
+
+.comment p {
+    margin: 0;
+}
+
+.header-placeholder {
+    height: 80px; 
+    width: 100%;
+    display: block; 
+}
\ No newline at end of file
