You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1129 lines
8.4 KiB
1129 lines
8.4 KiB
body {
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
flex-direction: column;
|
|
|
|
font-family: sans-serif;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.h1left{
|
|
|
|
color: #18434A;
|
|
|
|
font-family: sans-serif;
|
|
|
|
margin-right: auto;
|
|
|
|
border-left: 8px orange solid ;
|
|
|
|
text-indent: 5px;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
.h1left2{
|
|
|
|
color: #18434A;
|
|
|
|
font-family: sans-serif;
|
|
|
|
margin-right: auto;
|
|
|
|
border-left: 8px orange solid ;
|
|
|
|
text-indent: 5px;
|
|
|
|
position: relative;
|
|
|
|
top: 75px;
|
|
|
|
z-index: -1;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.h1right{
|
|
|
|
color: #18434A;
|
|
|
|
font-family: sans-serif;
|
|
|
|
margin-left: 50%;
|
|
|
|
border-left: 8px orange solid ;
|
|
|
|
text-indent: 5px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.h1right3{
|
|
|
|
color: #18434A;
|
|
|
|
font-family: sans-serif;
|
|
|
|
margin-left: 22%;
|
|
|
|
border-left: 8px orange solid ;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.h1right4{
|
|
|
|
color: #18434A;
|
|
|
|
font-family: sans-serif;
|
|
|
|
margin-left: 50%;
|
|
|
|
border-left: 8px orange solid ;
|
|
|
|
position: relative;
|
|
|
|
bottom: 539px; right: 18px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.h1right5{
|
|
|
|
color: #18434A;
|
|
|
|
font-family: sans-serif;
|
|
|
|
margin-left: 50%;
|
|
|
|
border-left: 8px orange solid ;
|
|
|
|
position: relative;
|
|
|
|
bottom: 571px; right: 54px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.lefth2{
|
|
|
|
font-family: sans-serif;
|
|
|
|
margin-right: auto;
|
|
|
|
font-size: 23px;
|
|
|
|
border: 2px #438B97 solid;
|
|
|
|
color: black;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.lefth2-2 {
|
|
|
|
font-family: sans-serif;
|
|
|
|
margin-right: auto;
|
|
|
|
font-size: 23px;
|
|
|
|
border: 2px #438B97 solid;
|
|
|
|
color: black;
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
bottom: 670px;
|
|
|
|
z-index: -1;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.righth2{
|
|
|
|
font-family: sans-serif;
|
|
|
|
margin-left: 30%;
|
|
|
|
font-size: 23px;
|
|
|
|
border: 2px #438B97 solid;
|
|
|
|
color: black;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@font-face {
|
|
|
|
font-family: "Bitcoin";
|
|
|
|
src: url("Bitcoin.otf") format("truetype");
|
|
|
|
font-style: normal;
|
|
|
|
font-weight: normal;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
@font-face {
|
|
|
|
font-family: blockch;
|
|
|
|
src: url("BLOCKCHAIN.ttf");
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
:root{
|
|
|
|
--hauteur-menu: 60px;
|
|
|
|
}
|
|
|
|
* {
|
|
|
|
margin: 0px;
|
|
|
|
padding: 0px;
|
|
|
|
font-family: Montserrat, sans-serif;
|
|
|
|
}
|
|
|
|
nav {
|
|
|
|
width: 100%;
|
|
|
|
font-size: 18px;
|
|
|
|
position: sticky;
|
|
|
|
top: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
nav > ul {
|
|
|
|
display: flex;
|
|
|
|
text-align: center;
|
|
|
|
box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.3);
|
|
|
|
height: var(--hauteur-menu);
|
|
|
|
}
|
|
|
|
|
|
|
|
nav ul {
|
|
|
|
list-style-type: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
nav > ul > li {
|
|
|
|
background-color: white;
|
|
|
|
position: relative;
|
|
|
|
height: 100%;
|
|
|
|
flex: 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
nav > ul > li > a {
|
|
|
|
position: absolute;
|
|
|
|
top: 50%;
|
|
|
|
left: 50%;
|
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
}
|
|
|
|
|
|
|
|
li a {
|
|
|
|
text-decoration: none;
|
|
|
|
color: black;
|
|
|
|
}
|
|
|
|
|
|
|
|
.menu-deroulant > a:after{
|
|
|
|
content: '❯';
|
|
|
|
font-size: 15px;
|
|
|
|
margin-left: 7px;
|
|
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
|
|
|
|
.sous-menu {
|
|
|
|
margin-top: var(--hauteur-menu);
|
|
|
|
width: 100%;
|
|
|
|
text-align: left;
|
|
|
|
background-color: white;
|
|
|
|
border-radius: 2px;
|
|
|
|
overflow: hidden;
|
|
|
|
max-height: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.sous-menu > li > a {
|
|
|
|
height: 50px;
|
|
|
|
padding-left: 20px;
|
|
|
|
width: 100%;
|
|
|
|
align-items: center;
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
|
|
|
nav > ul > li:hover > a{
|
|
|
|
color: #F38B4A;
|
|
|
|
}
|
|
|
|
|
|
|
|
.sous-menu > li:hover {
|
|
|
|
background-color: #F38B4A;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.sous-menu > li:hover > a {
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes rotationFleche {
|
|
|
|
0% {
|
|
|
|
transform: rotate(0deg);
|
|
|
|
}
|
|
|
|
100%{
|
|
|
|
transform: rotate(90deg);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.menu-deroulant:hover > a:after{
|
|
|
|
animation: rotationFleche 0.2s linear forwards;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes apparitionSousMenu {
|
|
|
|
0% {
|
|
|
|
box-shadow: 0px 3px 3px 1px black;
|
|
|
|
border-top: 3px solid black;
|
|
|
|
}
|
|
|
|
30% {
|
|
|
|
box-shadow: 0px 3px 3px 1px #438B97;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
max-height: 50em;
|
|
|
|
border-top: 3px solid #438B97;
|
|
|
|
box-shadow: 0px 3px 3px 1px #438B97;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.menu-deroulant:hover > .sous-menu {
|
|
|
|
animation: apparitionSousMenu 1s forwards;
|
|
|
|
}
|
|
|
|
|
|
|
|
.imgright {
|
|
|
|
width: 50%;
|
|
|
|
margin-left: auto;
|
|
|
|
margin-top: -7%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.imgright2 {
|
|
|
|
width: 50%;
|
|
|
|
margin-left: auto;
|
|
|
|
margin-top: -31%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.imgright3{
|
|
|
|
width: 50%;
|
|
|
|
margin-left: auto;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
.imgright4{
|
|
|
|
width: 50%;
|
|
|
|
margin-left: auto;
|
|
margin-top: -25%;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.imgleft {
|
|
|
|
width: 50%;
|
|
|
|
margin-right: auto;
|
|
|
|
margin-top: ;
|
|
|
|
}
|
|
|
|
|
|
|
|
.imgleft2 {
|
|
|
|
width: 50%;
|
|
|
|
margin-right: auto;
|
|
|
|
margin-top: -5%;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.imgleft3 {
|
|
|
|
width: 50%;
|
|
|
|
margin-right: auto;
|
|
|
|
margin-top: -24%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.imgleft4{
|
|
|
|
width: 50%;
|
|
|
|
margin-right: auto;
|
|
|
|
margin-top: -12%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.imgleft5{
|
|
|
|
width: 50%;
|
|
|
|
margin-right: auto;
|
|
|
|
margin-top: -40%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.leftext{
|
|
|
|
display: block;
|
|
|
|
margin-right: 50% ;
|
|
|
|
font-size: 18px;
|
|
|
|
text-indent: 20px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.leftext2{
|
|
|
|
display: block;
|
|
|
|
margin-right: 50% ;
|
|
|
|
font-size: 18px;
|
|
|
|
text-indent: 20px;
|
|
|
|
position: relative;
|
|
|
|
bottom: 670px;
|
|
|
|
z-index: -1;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.solotext{
|
|
|
|
display: block;
|
|
|
|
font-size: 18px;
|
|
|
|
text-indent: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.solotext2{
|
|
|
|
display: block;
|
|
|
|
font-size: 18px;
|
|
|
|
text-indent: 20px;
|
|
|
|
margin-top: 5%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.rightext{
|
|
|
|
display: inline-block;
|
|
|
|
padding-left: 50%;
|
|
|
|
margin-top: -19%;
|
|
|
|
font-size: 18px;
|
|
|
|
text-indent: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.rightext2{
|
|
|
|
display: inline-block;
|
|
|
|
padding-left: 50%;
|
|
|
|
font-size: 18px;
|
|
|
|
text-indent: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.rightext3{
|
|
|
|
display: inline-block;
|
|
|
|
padding-left: 50%;
|
|
|
|
font-size: 18px;
|
|
|
|
text-indent: 20px;
|
|
|
|
position: relative;
|
|
|
|
top: 100px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.rightext4{
|
|
|
|
display: inline-block;
|
|
|
|
padding-left: 50%;
|
|
|
|
font-size: 18px;
|
|
|
|
text-indent: 20px;
|
|
|
|
margin-top: -22%;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.tec{
|
|
|
|
|
|
|
|
font-size: 22px;
|
|
|
|
border: 1px #F38B4A ridge;
|
|
|
|
font-family: sans-serif;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.defblockchain {
|
|
|
|
display: block;
|
|
|
|
margin-right: 50% ;
|
|
|
|
font-size: 18px;
|
|
|
|
text-indent: 20px;
|
|
margin-top: 10%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.loader {
|
|
|
|
position: absolute;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
background: white;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
.lettre {
|
|
|
|
color: #438B97;
|
|
|
|
font-size: 80px;
|
|
|
|
letter-spacing: 15px;
|
|
|
|
margin-bottom: 150px;
|
|
|
|
animation: flash 1.2s linear infinite;
|
|
|
|
|
|
|
|
}
|
|
|
|
@keyframes flash {
|
|
|
|
0% {
|
|
|
|
color: #F38B4A;
|
|
|
|
text-shadow: 0 0 7px #F38B4A;
|
|
|
|
}
|
|
|
|
90% {
|
|
|
|
color: #438B97;
|
|
|
|
text-shadow: none;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
color: #F38B4A;
|
|
|
|
text-shadow: 0 0 7px #F38B4A;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.lettre:nth-child(1){
|
|
|
|
animation-delay: 0.1s;
|
|
|
|
}
|
|
|
|
.lettre:nth-child(2){
|
|
|
|
animation-delay: 0.2s;
|
|
|
|
}
|
|
|
|
.lettre:nth-child(3){
|
|
|
|
animation-delay: 0.3s;
|
|
|
|
}
|
|
|
|
.lettre:nth-child(4){
|
|
|
|
animation-delay: 0.4s;
|
|
|
|
}
|
|
|
|
.lettre:nth-child(5){
|
|
|
|
animation-delay: 0.5s;
|
|
|
|
}
|
|
|
|
.lettre:nth-child(6){
|
|
|
|
animation-delay: 0.6s;
|
|
|
|
}
|
|
|
|
.lettre:nth-child(7){
|
|
|
|
animation-delay: 0.7s;
|
|
|
|
}
|
|
|
|
.lettre:nth-child(8){
|
|
|
|
animation-delay: 0.8s;
|
|
|
|
}
|
|
|
|
.lettre:nth-child(9){
|
|
|
|
animation-delay: 0.9s;
|
|
|
|
}
|
|
|
|
.lettre:nth-child(10){
|
|
|
|
animation-delay: 1s;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fondu-out {
|
|
|
|
opacity: 0;
|
|
|
|
transition: opacity 0.4s ease-out;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.logo {
|
|
|
|
width: 600px;
|
|
|
|
margin-top: 17px;
|
|
|
|
margin-bottom: 17px;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.image1 img {
|
|
|
|
z-index: -1;
|
|
|
|
-webkit-transition: all 1s ease; /* Safari et Chrome */
|
|
|
|
-moz-transition: all 1s ease; /* Firefox */
|
|
|
|
-ms-transition: all 1s ease; /* Internet Explorer 9 */
|
|
|
|
-o-transition: all 1s ease; /* Opera */
|
|
|
|
transition: all 1s ease;
|
|
|
|
}
|
|
|
|
.image1:hover img {
|
|
|
|
z-index: -1;
|
|
|
|
-webkit-transform:scale(1.25); /* Safari et Chrome */
|
|
|
|
-moz-transform:scale(1.25); /* Firefox */
|
|
|
|
-ms-transform:scale(1.25); /* Internet Explorer 9 */
|
|
|
|
-o-transform:scale(1.25); /* Opera */
|
|
|
|
transform:scale(1.25);
|
|
|
|
}
|
|
|
|
|
|
|
|
*, ::before, ::after {
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
.container {
|
|
|
|
max-width: 800px;
|
|
|
|
margin: 0 auto;
|
|
|
|
padding: 50px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.slider .imgslid {
|
|
|
|
max-width: 100%;
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
.imgslid.active {
|
|
|
|
display: block;
|
|
|
|
animation: fade 0.8s;
|
|
|
|
}
|
|
|
|
@keyframes fade {
|
|
|
|
from {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
to {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.cont-btn {
|
|
|
|
width: 100%;
|
|
|
|
height: auto;
|
|
|
|
border: 1px solid #000;
|
|
|
|
box-shadow: 0 10px 10px rgba(0,0,0,0.3);
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
.btn-nav {
|
|
|
|
font-size: 50px;
|
|
|
|
margin: 0 15px;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
.imgslide{
|
|
|
|
width: 600px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.slid{
|
|
|
|
width: 500px;
|
|
|
|
overflow: hidden;
|
|
|
|
margin: 150px auto;
|
|
|
|
z-index: -1;
|
|
|
|
border: 2px solid #F38B4A;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.slidz{
|
|
|
|
width: calc(1000px*3);
|
|
|
|
animation: glisse 5s infinite;
|
|
|
|
z-index: -1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.slide{
|
|
|
|
float: left;
|
|
|
|
z-index: -1;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes glisse{
|
|
|
|
0% {
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
33%{
|
|
|
|
transform: translateX(-600px);
|
|
|
|
}
|
|
|
|
66%{
|
|
|
|
transform: translateX(-1200px);
|
|
|
|
}
|
|
|
|
100%{
|
|
|
|
transform: translateX(0);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
marquee{
|
|
font-weight: bold;
|
|
position: relative;
|
|
bottom: 120px;
|
|
z-index: -1;
|
|
|
|
}
|
|
|
|
.support{
|
|
font-size: 40px;
|
|
}
|
|
|
|
|