* { margin: 0px; padding: 0px; } /*#################################################*/ footer { position: static; color: white; text-align: right; height: 100%; padding-right: 5%; font-size: 1.5vw; background-size: 100%; background-color: black; } body{ background-size: 100%; background-color: #d6dbdf; display: block; padding-top: 50px; } p{ text-align: justify; } .menu_liste { position: fixed; display: flex; width: 100%; top: 0; left: 0; background-color: #1C1C1C; height: 40px; width: 100%; align-items: center; justify-content: space-around; box-shadow:8px 8px 10px 0 rgba(255,255,255,0.2); } .menu_liste li { list-style: none; color: #BCBCBC; } .menu_liste a{ text-decoration: none; color: #BCBCBC; } .menu_liste a:hover { color: white; } .menu_liste li:hover { color: white; } .sous-menu { display: none; position: relative; flex-direction: column; background-color: #1C1C1C; right: 0; z-index: -1; width: 20%; } .sous-menu li { text-align: center; padding: 10px; z-index: 2; } #contact:hover .sous-menu{ display: flex; position: absolute; } #contact img { width: 100%; position: inherit; display: none; padding: 0; } #contact li:hover img { display: flex; } #contact p { text-align: center; font-weight: bold; } #contact p:hover { color: #BCBCBC; } .menu_liste a:active { font-size: 110%; text-decoration: underline blink; } .menu_liste a.active { text-decoration: underline; } #liens_block a { text-align: center; } .menu_button { display: none; } .reseaux-mobile { display: none; } ::-webkit-scrollbar { display: none; } /*#############################################*/ /*POUR MOBILE*/ @media only screen and (max-device-width: 480px) { body { margin-top: 80px; } .sous-menu { display: none; } .menu_button { background-color: rgba(89, 89, 89, 0.2); display: flex; flex-direction: column; position: fixed; top: 0px; justify-content: center; width: 100%; margin: 0px; height: 14vw; z-index: 2; } .menu_button a { font-size: 8vw; color: gainsboro; padding-left: 7%; font-weight: bold; } .menu_button img{ position: absolute; width: 14vw; height: 14vw; top: &px; right: 15px; z-index: 2; } .reseaux-mobile { display: flex; } .reseaux-mobile img { width: 50%; } .reseaux-mobile a { width: 25%; } .menu_liste { text-align: center; display: flex; flex-direction: column; background-color: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); width: 100%; height: 100%; justify-content: center; z-index: 2; left: 100%; transition: all 0.5s ease; } .menu_liste li { text-align: center; padding: 7%; } .menu_liste a { color: Black; font-size: 15vw; padding: 0; } .menu_liste a:active { font-size: 15vw; } .mobile-menu { left: 0; } #contact { background-color: #1C1C1C; font-size: 10vw; justify-content: center; padding-top: 10px; padding-bottom: 5px; padding-left: 40px; padding-right: 40px; z-index: 2; } #contact li { width: 300%; background-color: #1C1C1C; font-size: 9vw; } #contact a { list-style: none; color: #BCBCBC; font-size: 8vw; } #contact:hover .sous-menu{ display: flex; bottom: 9%; left: 18.5%; } #contact:hover { background-color: rgba(0, 0, 0, 0.3); } footer { margin-top: 50px; } #contact img { width: 100%; position: inherit; display: none; padding: 0; } #contact li:hover img { display: flex; } .sous-menu li div .coodonnees { position: absolute; display: none; width: 100%; padding: 0; margin: 0; left: 0; } #contact p { display: none; } }