effet

styles copy.css

@@ -0,0 +1,171 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  color: black;
+  background-color: #FFEDE5;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: 700;
+  overflow-x: hidden;
+  /* Empêche le scroll horizontal */
+}
+
+.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: white;
+  height: 4rem;
+  z-index: 1000;
+}
+
+nav {
+  float: right;
+  background-color: transparent;
+  height: 100%;
+}
+
+nav a {
+  display: inline-block;
+  color: rgb(227, 195, 14);
+  padding: 18px 12px;
+  text-decoration: none;
+  transition: ease-in .3s;
+}
+
+nav a:hover {
+  color: white;
+  background: #6aa9e895;
+  cursor: pointer;
+}
+
+.wrapper {
+  padding-top: 12rem;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  perspective: 300px;
+  width: 100vw;
+  /* Force la largeur du viewport */
+  overflow-x: hidden;
+}
+
+.parallax__group {
+  position: relative;
+  height: 100vh;
+  width: 100vw;
+  transform-style: preserve-3d;
+}
+
+.parallax__layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.sky {
+  background-color: white;
+  background: url('fond.png') no-repeat;
+  background-size: contain;
+  transform: translateZ(-600px) scale(3);
+  z-index: 1;
+}
+
+.bushes {
+  background: url('etoiles.png') no-repeat;
+  background-size: contain;
+  transform: translateZ(-525px) scale(2.75);
+  z-index: 2;
+}
+
+.water {
+  background: url('texte.png') no-repeat;
+  background-size: contain;
+  transform: translateZ(-400px) scale(2.33333333);
+  z-index: 3;
+}
+
+.people1 {
+  background: url("personnages.png") no-repeat;
+  background-size: contain;
+  transform: translateZ(-250px) scale(1.833333333);
+  z-index: 4;
+}
+
+.info-container {
+  background-color: #FFEDE5;
+}
+
+/* Style du menu hamburger */
+.menu-icon {
+  display: none;
+  /* Caché par défaut */
+  flex-direction: column;
+  cursor: pointer;
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  z-index: 1001;
+}
+
+.menu-icon span {
+  background: rgb(227, 195, 14);
+  display: block;
+  height: 3px;
+  width: 25px;
+  margin: 5px 0;
+  transition: 0.3s;
+}
+
+/* Masquer la case à cocher */
+#menu-toggle {
+  display: none;
+}
+
+
+@media screen and (min-width:760px) {
+  .sky,
+  .bushes,
+  .water,
+  .people1 {
+    background-size: contain;
+    /* Remplit toute la largeur */
+    /*background-position: center; Centre les images */
+  }
+}
+
+@media screen and (max-width: 760px) {
+  .menu-icon {
+    display: flex;
+  }
+
+  nav {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    top: 4rem;
+    left: 0;
+    width: 100%;
+    background: white;
+    text-align: center;
+  }
+
+  /* Quand la case est cochée, afficher le menu */
+  #menu-toggle:checked+.menu-icon+nav {
+    display: flex;
+  }
+
+  nav a {
+    padding: 15px;
+    display: block;
+  }
+}