diff --git a/script.js b/script.js
index 328b38e..6eefece 100644
--- a/script.js
+++ b/script.js
@@ -41,4 +41,5 @@ window.addEventListener('scroll', function() {
     } else {
         headerPlaceholder.style.display = 'none';
     }
-});
\ No newline at end of file
+});
+
diff --git a/style copy.css b/style copy.css
new file mode 100644
index 0000000..d99cc09
--- /dev/null
+++ b/style copy.css	
@@ -0,0 +1,344 @@
+{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: white;
+    background-size: cover;
+    background-position: center;
+    margin: 0;
+}
+
+header {
+    position: fixed;
+    background: #162938;
+    top: 0;
+    left: 0;
+    width: 100%;
+    padding: 20px 100px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    z-index: 99;
+}
+
+.logo {
+    font-size: 2em;
+    color: #fff;
+    user-select: none;
+}
+
+.navigation a {
+    position: relative;
+    font-size: 1.1em;
+    color: #fff;
+    text-decoration: none;
+    font-weight: 500;
+    margin-left: 40px;
+}
+.navigation a::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: -6px;
+    width: 100%;
+    height: 3px;
+    background: #fff;
+    border-radius: 5px;
+    transform-origin: right;
+    transform: scaleX(0);
+    transition: transform .5s;
+
+}
+.navigation a:hover::after {
+    transform-origin: left;
+    transform: scaleX(1);
+
+}
+
+.navigation .btnLogin-popup {
+    width: 130px;
+    height: 50px;
+    background: transparent;
+    border: 2px solid #fff;
+    outline: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 1.1em;
+    color: #fff;
+    font-weight: 500;
+    margin-left: 40px;
+    transition: .5s;
+}
+
+.navigation .btnLogin-popup:hover {
+    background: #fff;
+    color: #162938;
+
+}
+
+.wrapper {
+    position: fixed;
+    width: 400px;
+    height: 440px;
+    background: transparent;
+    border: 2px solid rgba(255, 255, 255, .5);
+    border-radius: 20px;
+    backdrop-filter: blur(20px);
+    box-shadow: 0 0 30px rgba(0, 0, 0, .5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    transform: scale(0);
+    transition: transform .5s ease, height .2s ease;
+    top: 50;
+    left: 50%;
+    transform: translateX(-50%); 
+}
+
+.wrapper.active-popup {
+    transform: scale(1);
+
+}
+
+.wrapper.active {
+    height: 520px;
+
+}
+
+.wrapper .form-box {
+    width: 100%;
+    padding: 40px;
+}
+
+.wrapper .form-box.login {
+    transition: transform .18s ease;
+    transform: translateX(0);
+}
+
+.wrapper.active .form-box.login {
+    transition: none;
+    transform: translateX(-400px);
+}
+
+.wrapper .form-box.register {
+    position: absolute;
+    transition: none;
+    transform: translateX(400px);
+}
+
+.wrapper.active .form-box.register {
+    transition: transform .18s ease;
+    transform: translateX(0);
+}
+
+.wrapper .icon-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 45px;
+    height: 45px;
+    background: #162938;
+    font-size: 2em;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-bottom-left-radius: 20px;
+    cursor: pointer;
+    z-index: 1;
+
+}
+
+.form-box h2 {
+    font-size: 2em;
+    color: #162938;
+    text-align: center;
+}
+
+.input-box {
+    position: relative;
+    width: 100%;
+    height: 50px;
+    border-bottom: 2px solid #162938;
+    margin: 30px 0;
+}
+
+.input-box label {
+    position: absolute;
+    top: 50%;
+    left: 5px;
+    transform: translateY(-50%);
+    font-size: 1em;
+    color: #162938;
+    font-weight: 500;
+    pointer-events: none;
+    transition: .5s;
+}
+
+.input-box input:focus~label,
+.input-box input:valid~label {
+    top: -5px;
+}
+
+
+.input-box input {
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    border: none;
+    outline: none;
+    font-size: 1em;
+    color:#162938;
+    font-weight: 600;
+    padding: 0 35px 0 5px;
+
+}
+
+.input-box .icon {
+    position: absolute;
+    right: 8px;
+    font-size: 1.2em;
+    line-height: 57px;
+}
+
+.remember-forgot {
+    font-size: .9em;
+    color: #162938;
+    font-weight: 500;
+    margin: -15px 0 15px;
+    display: flex;
+    justify-content: space-between;
+
+}
+
+.remember-forgot label input {
+    accent-color: #162938;
+    margin-right: 3px;
+}
+
+.remember-forgot a {
+    color: #162938;
+    text-decoration: none;
+}
+
+.remember-forgot a:hover {
+    text-decoration:underline
+}
+
+.btn {
+    width: 100%;
+    height: 45px;
+    background: #162938;
+    border: none;
+    outline: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 1em;
+    color: #fff;
+}
+
+.login-register {
+    font-size: .9em;
+    color: #162938;
+    text-align: center;
+    font-weight: 500;
+    margin: 25px 0 10px;
+}
+
+.login-register p a {
+    color: #162938;
+    text-decoration: none;
+    font-weight: 600;
+}
+
+.login-register p a:hover {
+    text-decoration: underline;
+
+}
+
+
+.presentation {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 150px;
+    color: black;
+}
+
+.presentation h1 {
+    font-size: 100px;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.presentation p {
+    font-size: 1.1em;
+    margin-bottom: 15px;
+}
+
+.presentation .slogan {
+    font-size: 1.3em;
+    font-weight: bold;
+    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
diff --git a/style.css b/style.css
index 328fd6f..e715f9a 100644
--- a/style.css
+++ b/style.css
@@ -7,7 +7,7 @@
 }
 
 body {
-    display: flex;
+    /* display: flex; */ /* Remove this line */
     justify-content: center;
     align-items: center;
     min-height: 100vh;
@@ -17,6 +17,7 @@ body {
     margin: 0;
 }
 
+
 header {
     position: fixed;
     background: #162938;
@@ -87,7 +88,8 @@ header {
 
 .wrapper {
     position: fixed;
-    width: 400px;
+    width: 100%;
+    max-width: 400px; /* Set maximum width */
     height: 440px;
     background: transparent;
     border: 2px solid rgba(255, 255, 255, .5);
@@ -105,6 +107,35 @@ header {
     transform: translateX(-50%); 
 }
 
+@media only screen and (max-width: 768px) {
+    .wrapper {
+        max-width: none; /* Remove maximum width for smaller screens */
+    }
+
+    header {
+        padding: 20px 20px; /* Adjust padding for smaller screens */
+    }
+    .navigation {
+        flex-direction: column;
+        align-items: flex-start;
+        position: absolute;
+        top: 80px;
+        left: 0;
+        background: #162938;
+        width: 100%;
+        display: none;
+    }
+    .navigation.active {
+        display: flex;
+    }
+    .navigation a {
+        margin: 10px 0;
+        font-size: 1.2em;
+    }
+}
+
+
+
 .wrapper.active-popup {
     transform: scale(1);
 
@@ -266,6 +297,7 @@ header {
 
 }
 
+
 .presentation {
     display: flex;
     flex-direction: column;
@@ -298,11 +330,12 @@ header {
 
 .photo-grid {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: 20px;
-    text-align: left; /* Nouvelle ligne ajoutée pour aligner le texte à gauche */
+    text-align: left;
 }
 
+
 .photo {
     position: relative;
 }