reglage

reservation.css

@@ -13,7 +13,7 @@ body {
 
 header {
     position: fixed;
-    background-color: #000;
+    background-color: #162938;
     top: 0;
     left: -50;
     width: 100%;
@@ -92,7 +92,7 @@ div {
 label {
     display: block;
     margin-bottom: 5px;
-    color: #000;
+    color: #162938;
 }
 
 select, input, textarea {
@@ -103,7 +103,7 @@ select, input, textarea {
 }
 
 button {
-    background-color: #000;
+    background-color: #162938;
     color: #fff;
     padding: 10px 20px;
     border: none;

script.js

@@ -16,6 +16,9 @@ document.addEventListener("DOMContentLoaded", function () {
         event.stopPropagation();
         wrapper.classList.remove('active-popup');
     }
+    function hideLoginForm() {
+        wrapper.classList.remove('active-popup');
+    }
 
     registerLink.addEventListener('click', function (event) {
         openLoginForm(event);
@@ -26,20 +29,9 @@ document.addEventListener("DOMContentLoaded", function () {
         openLoginForm(event);
         wrapper.classList.remove('active');
     });
+    closeLoginForm();
 
     btnPopup.addEventListener('click', openLoginForm);
-
     iconClose.addEventListener('click', closeLoginForm);
 });
 
-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';
-    }
-});
-

style.css

@@ -7,7 +7,7 @@
 }
 
 body {
-    /* display: flex; */ /* Remove this line */
+  
     justify-content: center;
     align-items: center;
     min-height: 100vh;
@@ -89,7 +89,7 @@ header {
 .wrapper {
     position: fixed;
     width: 100%;
-    max-width: 400px; /* Set maximum width */
+    max-width: 400px; 
     height: 440px;
     background: transparent;
     border: 2px solid rgba(255, 255, 255, .5);
@@ -109,11 +109,11 @@ header {
 
 @media only screen and (max-width: 768px) {
     .wrapper {
-        max-width: none; /* Remove maximum width for smaller screens */
+        max-width: none; 
     }
 
     header {
-        padding: 20px 20px; /* Adjust padding for smaller screens */
+        padding: 20px 20px; 
     }
     .navigation {
         flex-direction: column;
@@ -329,15 +329,21 @@ header {
 }
 
 .photo-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-    gap: 20px;
-    text-align: left;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
 }
 
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+}
 
 .photo {
     position: relative;
+    width: calc(50% - 10px); /* Adjust the width as needed */
+    margin-bottom: 20px;
 }
 
 .photo img {
@@ -369,6 +375,7 @@ header {
     margin: 0;
 }
 
+
 .header-placeholder {
     height: 80px; 
     width: 100%;