amélioration page d'accueil

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; 
+}