netoyage
BIN
etoiles.png
|
Before Width: | Height: | Size: 16 KiB |
BIN
personnage1.png
|
Before Width: | Height: | Size: 560 KiB |
BIN
personnage2.png
|
Before Width: | Height: | Size: 481 KiB |
BIN
personnage3.png
|
Before Width: | Height: | Size: 442 KiB |
BIN
personnages.png
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 137 KiB |
|
Before Width: | Height: | Size: 892 KiB |
|
Before Width: | Height: | Size: 5.1 KiB |
|
Before Width: | Height: | Size: 3.8 KiB |
|
Before Width: | Height: | Size: 195 KiB |
|
Before Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 113 KiB |
|
Before Width: | Height: | Size: 504 KiB |
@@ -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>
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
171
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
171
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||