style.css

@import"https://fonts.googleapis.com/css2?family=Poppins:ital@1&family=Roboto:ital,wght@0,300;1,400&display=swap";@import"https://fonts.googleapis.com/css2?family=Monoton&family=Poppins:ital@1&family=Roboto:ital,wght@0,300;1,400&display=swap";*{margin:0;padding:0;box-sizing:border-box}span{color:#90cf90}body{width:100%;height:660px;background-color:#000;font-family:"Roboto","sans-serif"}header{position:relative;width:100%;height:100%;background-color:#000}header .container{display:flex;justify-content:space-between;flex-direction:column;width:80px;height:100%}header .container a{color:#fff;padding:15px;display:block;text-align:center;background-color:#ffbdb1;font-weight:900;text-decoration:none;text-transform:uppercase;font-family:"Monoton",cursive;cursor:pointer}header .container a i{color:#000;font-size:2rem}header .container a:hover{background-color:#3b0421;border-bottom:1px solid #fff}header .element{display:flex;flex-direction:column;align-items:center;align-content:center;width:auto;height:auto;position:absolute;top:30%;transform:translateY(-30%);left:50%;transform:translateX(-50%)}header .element h1{color:#ffefef;font-size:3rem;font-family:"Roboto","sans-serif";font-weight:bolder}header .element h2{text-transform:uppercase;font-size:3rem;color:#e3dada;font-family:"Roboto","sans-serif"}.texte{padding:10px}.texte p{font-size:1.5rem;color:#fff;font-family:"Poppins",sans-serif}.slider{position:absolute;top:10px;right:10px;height:300px;width:500px;overflow:hidden;margin:150px auto;z-index:-3}.slider .slides{width:1800px;animation:glisse 6s ease 0s infinite}.slider .slide{float:left;margin-right:10px}@keyframes glisse{0%{transform:translateX(0)}10%{transform:translateX(-300px)}20%{transform:translateX(-600px)}30%{transform:translateX(-900px)}40%{transform:translateX(-1200)}50%{transform:translateX(-1500)}60%{transform:translateX(-1600)}80%{transform:translateX(-1700)}100%{transform:translateX(-4000)}}@media screen and (min-width: 320px)and (max-width: 1800px){span{color:#90cf90}body{width:100%;height:600px;max-height:900px;background-color:#000}header{position:relative;width:100%;height:100%;background-color:#000}header .container{display:flex;justify-content:space-between;flex-direction:column;width:80px;height:100%}header .container a{color:#fff;padding:15px;display:block;text-align:center;background-color:#ffbdb1;font-weight:900;text-decoration:none;text-transform:uppercase;font-family:"Monoton",cursive;cursor:pointer}header .container a:hover{background-color:#3b0421;border-bottom:1px solid #fff}header .element{display:flex;flex-direction:column;align-items:center;align-content:center;width:auto;height:auto;position:absolute;top:30%;transform:translateY(-30%);left:50%;transform:translateX(-50%)}header .element h1{color:#ffefef;font-size:3.8rem;font-family:"Rootto" sans-serif;font-weight:bolder}header .element h2{text-transform:uppercase;font-size:2.5rem;font-family:"Robotto",sans-serif;color:#e3dada}.texte{padding:10px}.texte p{font-size:1.5rem;color:#fff;font-family:"Popins",cursive}.slider{display:none}}