Corrrectif fond rose

index.html

@@ -36,22 +36,24 @@
         </div>
       </div>
 
-      <img class="parallax__bg" src="./assets/bg.jpg" alt="" />
+      <!--<img class="parallax__bg" src="./assets/bg.jpg" alt="" />-->
-      <img class="parallax__dust" src="./assets/dust.webp" alt="" />
+      <img class="parallax__bg" src="./assets/fond.png" alt="" />
-      <img
+      <!--<img class="parallax__dust" src="./assets/dust.webp" alt="" />-->
+      <img class="parallax__dust" src="./assets/etoiles.png" alt="" />
+      <!--<img
         class="parallax__foreground-back"
         src="./assets/foreground-back.webp"
         alt=""
-      />
+      />-->
-      <img
+      <!--<img
         class="parallax__foreground-front"
         src="./assets/foreground-front.webp"
         alt=""
-      />
+      />-->
-      <img class="parallax__jax" src="./assets/jax.webp" alt="" />
+      <img class="parallax__jax" src="./assets/personnages.png" alt="" />
-      <img class="parallax__luna" src="./assets/luna.webp" alt="" />
+      <!--<img class="parallax__luna" src="./assets/luna.webp" alt="" />-->
-      <img class="parallax__manny" src="./assets/manny.webp" alt="" />
+      <!--<img class="parallax__manny" src="./assets/manny.webp" alt="" />-->
-      <img class="parallax__rays" src="./assets/rays.webp" alt="" />
+      <!--<img class="parallax__rays" src="./assets/rays.webp" alt="" />-->
     </div>
 
     <main class="main-content">

public/favicon.svg

@@ -1,29 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
-  <defs>
-    <style>
-      .cls-1 {
-        fill: url(#linear-gradient);
-      }
-
-      .cls-2 {
-        fill: #fff;
-      }
-    </style>
-    <linearGradient id="linear-gradient" x1="9.44" y1="9.43" x2="90.57" y2="90.57" gradientUnits="userSpaceOnUse">
-      <stop offset="0" stop-color="#ff001e"/>
-      <stop offset="0.49" stop-color="#d400cf"/>
-      <stop offset="1" stop-color="#004bff"/>
-    </linearGradient>
-  </defs>
-  <g id="Layer_2" data-name="Layer 2">
-    <g id="Layer_1-2" data-name="Layer 1">
-      <g>
-        <path class="cls-1" d="M90.41,33.37V18.88C90.41,5.1,84.9,0,65.92,0H33.56c-18.55.1-24,5.13-24,19V33.37c0,7.75-3.16,10-9.59,10V56.63c6.53,0,9.59,2.25,9.59,10V81.12c0,13.65,5.42,18.78,24,18.88H65.92c19,0,24.49-5,24.49-19V66.63c0-7.75,3.16-10,9.59-10V43.37C93.47,43.37,90.41,41.12,90.41,33.37Z"/>
-        <g>
-          <path class="cls-2" d="M24.79,72.51h-11V26.67h11ZM25.12,48,37.49,26.67H49L36.17,47.24,50.26,72.51H37.56Z"/>
-          <path class="cls-2" d="M69.64,57.3h-5V72.51h-11V26.67H68.19c12.5,0,19.64,4.89,19.64,14.95C87.83,52.4,80.49,57.3,69.64,57.3ZM68.32,34.47H64.68V49.36h4c5,0,7.8-2.38,7.8-7.74C76.52,36.79,73.81,34.47,68.32,34.47Z"/>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>

style.css

@@ -5,6 +5,7 @@
   min-height: 75vh;
   display: grid;
   grid-template-areas: "stack";
+  background-color: #FFEDE5;
 }
 
 .parallax > * {
@@ -72,7 +73,7 @@
 .main-content {
   position: relative;
   /* z-index: 1; */
-  background: hsl(238, 100%, 6%);
+  background:  #FFEDE5;
   padding-block: 6rem;
 }
 
@@ -144,7 +145,7 @@ img {
 }
 
 .primary-nav a {
-  color: white;
+  color:  rgb(227, 195, 14);
   font-weight: 700;
   text-decoration: none;
 }
@@ -184,7 +185,7 @@ img {
     content: "";
     position: absolute;
     inset: 0;
-    background: black;
+    background: white;
     z-index: -1;
     scale: 2;
     opacity: 0.5;

styles copy.css

@@ -1,171 +0,0 @@
-* {
-  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;
-  }
-}

styles.css

@@ -1,171 +0,0 @@
-* {
-  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;
-  }
-}