|
|
|
@ -0,0 +1,134 @@
|
|
|
|
|
|
|
|
/*Fonts CSS */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@font-face {
|
|
|
|
|
|
|
|
font-family: Fauna;
|
|
|
|
|
|
|
|
src: url("../../assets/fonts/Fauna.ttf");
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
@font-face {
|
|
|
|
|
|
|
|
font-family: Equinox;
|
|
|
|
|
|
|
|
src: url("../../assets/fonts/Equinox.otf");
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
/* End Fonts CSS */
|
|
|
|
|
|
|
|
html {
|
|
|
|
|
|
|
|
scroll-behavior: smooth;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
|
|
|
font-family: "Equinox", sans-serif;
|
|
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
|
|
background-position: center center;
|
|
|
|
|
|
|
|
background-attachment: fixed;
|
|
|
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
|
|
|
background-size: cover;
|
|
|
|
|
|
|
|
background-color: #050e15;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Navbar CSS */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
nav {
|
|
|
|
|
|
|
|
background-color: #050e15;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Moving fox CSS */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.moving-fox {
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
|
|
z-index: -1;
|
|
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Section Histoire */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
section {
|
|
|
|
|
|
|
|
min-height: 60vh;
|
|
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.hidden {
|
|
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
|
|
filter: blur(10px);
|
|
|
|
|
|
|
|
transform: translateX(-100px);
|
|
|
|
|
|
|
|
transition: all 1.2s;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.show {
|
|
|
|
|
|
|
|
opacity: 1;
|
|
|
|
|
|
|
|
filter: blur(0px);
|
|
|
|
|
|
|
|
transform: translateX(0px);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@media (prefers-reduced-motion) {
|
|
|
|
|
|
|
|
.hidden {
|
|
|
|
|
|
|
|
transition: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
|
|
|
font-family: "Fauna", sans-serif;
|
|
|
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Scroll down arrow */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.scroll-down {
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
bottom: 15px;
|
|
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
|
|
margin-left: -16px;
|
|
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
width: 40px;
|
|
|
|
|
|
|
|
height: 40px;
|
|
|
|
|
|
|
|
border: 2px solid #fff;
|
|
|
|
|
|
|
|
background-size: 14px auto;
|
|
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
|
|
z-index: 2;
|
|
|
|
|
|
|
|
-webkit-animation: bounce 2s infinite 2s;
|
|
|
|
|
|
|
|
animation: bounce 2s infinite 2s;
|
|
|
|
|
|
|
|
-webkit-transition: all 0.2s ease-in;
|
|
|
|
|
|
|
|
transition: all 0.2s ease-in;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.scroll-down:before {
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
top: calc(50% - 8px);
|
|
|
|
|
|
|
|
left: calc(50% - 6px);
|
|
|
|
|
|
|
|
transform: rotate(-45deg);
|
|
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
width: 12px;
|
|
|
|
|
|
|
|
height: 12px;
|
|
|
|
|
|
|
|
content: "";
|
|
|
|
|
|
|
|
border: 2px solid white;
|
|
|
|
|
|
|
|
border-width: 0px 0 2px 2px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes bounce {
|
|
|
|
|
|
|
|
0%,
|
|
|
|
|
|
|
|
100%,
|
|
|
|
|
|
|
|
20%,
|
|
|
|
|
|
|
|
50%,
|
|
|
|
|
|
|
|
80% {
|
|
|
|
|
|
|
|
transform: translateY(0);
|
|
|
|
|
|
|
|
-webkit-transform: translateY(0);
|
|
|
|
|
|
|
|
-ms-transform: translateY(0);
|
|
|
|
|
|
|
|
-moz-transform: translateY(0);
|
|
|
|
|
|
|
|
-o-transform: translateY(0);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
40% {
|
|
|
|
|
|
|
|
transform: translateY(-10px);
|
|
|
|
|
|
|
|
-webkit-transform: translateY(-10px);
|
|
|
|
|
|
|
|
-ms-transform: translateY(-10px);
|
|
|
|
|
|
|
|
-moz-transform: translateY(-10px);
|
|
|
|
|
|
|
|
-o-transform: translateY(-10px);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
60% {
|
|
|
|
|
|
|
|
transform: translateY(-5px);
|
|
|
|
|
|
|
|
-webkit-transform: translateY(-5px);
|
|
|
|
|
|
|
|
-ms-transform: translateY(-5px);
|
|
|
|
|
|
|
|
-moz-transform: translateY(-5px);
|
|
|
|
|
|
|
|
-o-transform: translateY(-5px);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
nathan boileau
2 years ago