@font-face { font-family:'Bold' ; src: url("../fonts/OPTIsupAuvantGothicBold.otf") format("opentype"); } /* images */ body { width: 100%; overflow-x: hidden; animation-name: background; animation-duration: 10s; animation-iteration-count: infinite; height: 1000vh; } @keyframes background { from {background-color: blue} to {background-color: red} } .imageHorizontales { position: fixed; opacity: 0; top: 0px; left: 0px; width: 100vw; height: 100vh; display: flex; overflow-x: scroll; z-index: 0; transition: all 1s ease-in-out; } img { width: 100%; /* position: absolute; */ bottom: 0px; } /* .box{ background-color: aliceblue; width: 200px; height: 200px; position: relative; animation-name: myanimation; animation-duration: 4s; animation-iteration-count: 1; animation-fill-mode: forwards; /* animation-delay: 2s; */ /* animation-direction: alternate;*/ /* animation-timing-function: ease-out; */ @keyframes myanimation { 0% {background-color: white; left: 0px; top: 0px; border-radius: 0 0 0 0 } 25% {background-color: red; left: 300px; top: 0px; border-radius: 50% 0 0 0 } 50% {background-color: green; left: 300px; top: 300px; border-radius: 50% 50% 0 0} 75% {background-color: blue; left: 0px; top: 300px; border-radius: 50% 50% 50% 0 } 100% {background-color: white; left: 0px; top: 0px; border-radius: 50% 50% 50% 50% } } h1{ color: aliceblue;s font-family: 'Bold'; font-size: 20px; top: 4%; line-height: 30; font-weight: 900; position: relative; /* animation-name: myanimation2; animation-duration: 4s; animation-iteration-count: 1; animation-fill-mode: forwards; */ /* animation-delay: 2s; */ /* animation-direction: alternate;*/ /* animation-timing-function: ease-out; */ } @keyframes myanimation2 { 0% { left: 0px; top: 0px; border-radius: 0 0 0 0 } 25% { left: 300px; top: 0px; border-radius: 50% 0 0 0 } 50% {left: 300px; top: 300px; border-radius: 50% 50% 0 0} 75% { left: 0px; top: 300px; border-radius: 50% 50% 50% 0 } 100% { left: 0px; top: 0px; border-radius: 50% 50% 50% 50% } } #title{ top: 5%; font-size: medium; line-height: } .lien{ font-family: 'Bold'; font-size: 200px; } .titre{ font-family: 'Bold'; font-size: 120px; height: 220px; text-align: center; line-height:130px; } .sous-titre{ font-family: Georgia, 'Times New Roman', Times, serif; font-size: 40px; text-align: center; display: flex; width: 6000px; color: rgb(37, 0, 247); padding-bottom: 10px; } .parent-titre{ font-family: 'Bold'; display: flex; ; flex-direction: column; justify-content: center; width: 100%; overflow-x: hidden; } .parent-video{ display: flex; flex-direction: column; justify-content: center; width: 100%; overflow-x: hidden; } .sous-titre > span { font-family: Georgia, 'Times New Roman', Times, serif; -webkit-animation: scrollText 20s infinite linear; animation: scrollText 50s infinite linear; } a{ text-decoration: none; color: white; font-size: 30px; text-align:left; margin-top: 434px; } a:hover{ color:khaki; } @-webkit-keyframes scrollText { from { transform: translateX(0%); } to { transform: translateX(-50%); } } @keyframes scrollText { from { transform: translateX(0%); } to { transform: translateX(-50%); } } /* . */ /*