effet

index.html

@@ -14,20 +14,16 @@
         <div class="wrapper">
           <div class="primary-header__inner">
             <div class="logo">
-              <img src="./assets/Logo.webp" alt="" />
+              <!--<img src="./assets/Logo.webp" alt="" />-->
+              <img src="./assets/logo1cp.png" alt="logo lettre C et P collés en doré" />
             </div>
             <nav class="primary-nav">
               <ul role="list">
-                <li><a href="#">Why join us</a></li>
-                <li><a href="#">The founders</a></li>
-                <li><a href="#">Beta info</a></li>
+                <li><a href="#">Qui je suis</a></li>
+                <li><a href="#">Ce que je fait</a></li>
+                <li><a href="#">Contact</a></li>
               </ul>
-            </nav>
-            <div class="flex-group" aria-label="social links">
-              <a href="#">X</a>
-              <a href="#">IG</a>
-              <a href="#">YT</a>
-            </div>
+            </nav>           
           </div>
         </div>
       </header>

public/favicon.svg

@@ -0,0 +1,29 @@
+<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

@@ -167,11 +167,11 @@ img {
 }
 
 .hero__title {
-  font-size: 6rem;
-  max-width: 10ch;
+  font-size: 2rem;
+  max-width: 3ch;
   line-height: 1;
   font-style: italic;
-  font-weight: 900;
+  font-weight: 300;
   position: relative;
 
   > span {

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

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