body{ margin: 0; background: linear-gradient(180deg,rgba(63,94,251,0.7),rgba(252,70,107,0.7) 100%); } header{ margin-bottom: 20vh; } nav{ top: 0; left: 0; z-index: 1; position: fixed; display: flex; align-items: center; justify-content: space-around; background: linear-gradient(45deg,orange 35%,darkred); width: 100%; } nav:hover{ background: linear-gradient(45deg,orange ,darkred); } #icone{ height: 10vh; width: 10vw; } main{ display: flex; flex-direction: column; } #cas{ box-shadow: 0 40px 60px rgba(150,0,0,0.7); height: 25%; width: 25%; } #btn_up{ position: fixed; background-color: transparent; border-color: transparent; right: 2vw; bottom: 2vh; height: 4vh; width: 4vh; } li{ display: inline-block; } p{ font-family: unset; font-size: 30px; } .img_gauche_txt_droite{ display: flex; justify-content: space-around; align-items: center; margin-bottom: 10vh; } .img_gauche_txt_droite p{ background-color: rgba(250,250,250,0.2); border-radius: 15px; box-shadow: 15px 10px rgba(0,0,0,0.5); width: 50%; padding: 1%; } .img_gauche_txt_droite p:hover{ box-shadow: -10px -15px rgba(0,0,0,0.5); } .img_gauche_txt_droite img{border-radius: 10px;} .img_gauche_txt_droite img:not(:hover){ filter: saturate(0.2); transform: scale(0.8,0.8); } .img_droite_txt_gauche{ display: flex; flex-direction: row-reverse; justify-content: space-around; align-items: center; margin-bottom: 10vh; } .img_droite_txt_gauche p{ background-color: rgba(250,250,250,0.2); border-radius: 15px; padding: 1%; width: 50%; box-shadow: 15px 10px rgba(0,0,0,0.5); } .img_droite_txt_gauche p:hover{ box-shadow: -15px -10px rgba(0,0,0,0.5); } .img_droite_txt_gauche img{border-radius: 10px;} .img_droite_txt_gauche img:not(:hover) { filter: saturate(0.2); transform: scale(0.8,0.8); } #pied_de_page{ font-size: 15px; } .page{ display: block; list-style-type: none; text-decoration: none; color: black; margin-right: 10vh; font-size: 2vh; } .page:hover{ transform: scale(1.2,1.2); color: gold; } footer{ background-color: orange; padding-bottom: 15vh; }