@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"); body { margin: 0; padding: 0; font-family: "Montserrat", sans-serif; } nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; border-bottom: 5px solid #8f8f8f; padding-bottom: 70px; } nav h1 { color: #717171; font-family: "Playfair Display", sans-serif; font-size: 40px; } nav .onglets { margin-top: 3px; margin-left: 300px; list-style: none; } nav .onglets a { text-decoration: none; color: #000; margin-right: 5px; border-bottom: 1px solid #000; padding-bottom: 5px; padding: 10px 20px; display: block; } .sous-nav{ list-style: none; display: none; } .has-sous-nav:hover .sous-nav{ display: block; } header { display: flex; flex-direction: column; align-items: center; background: url("imageN.png"); background-size: cover; color: #fff; padding: 25px; } header h1 { font-family: "Playfair Display", sans-serif; font-size: 50px; } header h3 { margin-top: -15px; font-size: 25px; text-align: center; border-bottom: 1px solid #fff; } div { display: flex; justify-content: center; align-items: center; margin-top: 65px; } section p { text-align: center; } .container { width: 100%; height: 350px; padding: 0 20px; } .container div { height: 100%; width: 33%; display: flex; flex-direction: column; } .container div a{ color: white; } .container div h3 { text-decoration: underline; } .container .div1 { float: left; background: #000; color: white; margin-left: 50px; border-radius: 50%; box-shadow: 5px 5px 10px black; margin-bottom: 365px; } .container .div3 { float: right; background: #000; color: white; margin-right: 50px; border-radius: 50%; box-shadow: 5px 5px 10px black; margin-bottom: 365px; } .container .div4 footer { position: absolute; bottom: 0; left: 0; }