body { margin-top: 0; font-family: calibri; text-decoration: none; background-color: ghostwhite; color: black; } body > main { padding-top: 49px; padding-left: 15%; width: 70%; } /*==== BARRE DE NAVIGATION ====*/ nav { z-index: 999; position: fixed; left: 0; bottom: 0; width: 100%; color: white; text-align: center; } .navbar { overflow: hidden; background-color: #8A0457; position: fixed; top: 0; width: 100%; } .navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .navbar a:hover { background: #80024A; } .header { background-image: url("Photos_190223-26_Bulgarie-7306-1600x2400.jpg"); background-color: red; height: 20%; } /* ================================= */ section.section-profile { position: relative; display: flex; background-color: #d63031; } .section-profile-informations { display: flex; padding: 180px 30px 0; width: 100%; background-image: url(https://images.unsplash.com/photo-1562887085-22edc4817a9e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80); background-position: center; background-size: cover; } .section-profile-informations img { position: relative; top: 30%; margin-left: 24px; width: 140px; height: 140px; object-fit: cover; object-position: center; border: 4px solid #fff; border-radius: 70px; } .section-profile-informations h2 { margin-right: 24px; font-size: 36px; align-self: flex-end; } .section-profile-informations span { margin-left: auto; margin-bottom: 30px; color: rgba(0, 0, 0, .5); font-size: 24px; font-style: italic; align-self: flex-end; } .PhotoProfile { position: relative; clip-path: inset(34% 0); margin-top: -550px; margin-bottom: -500px; z-index: 20; display: block; width: 100%; } .Icon { display: block; margin-left: auto; margin-right: auto; margin: 0; position: absolute; top: 30px; margin-top: 20%; z-index: 90; width: 400px; clip-path: circle(30%); float: left; } .header > p { font-size: 40px; } .Person { box-sizing: border-box; float: left; width: 50%; padding: 50px; } .PhotoName::after { z-index: 90; position: absolute; content: ""; clear: both; display: table; } /* ================================= */ /* .text-block { position: absolute; }*/ .box { box-sizing: border-box; float: left; width: 50%; padding: 50px; } .clearfix::after { content: ""; clear: both; display: table; } .haut { display: flex; background-image: url(../img/Photos_190223-26_Bulgarie-7306-1600x2400.jpg); background-repeat: no-repeat; background-size: cover; height: 600px; background-position: -20%; } .rond { background-color: red; height: 200px; justify-content: flex-end; align-content: flex-end; width: 100%; }