<style>.perso{width: 500px;margin:auto;background-color: #16151B; color:#c3c3c3;} .perso h1{font-family:'Segoe UI';text-align:center;font-size:48px;text-transform:uppercase;background-color:#3B3E4F;line-height:100px;color:white;margin-bottom:-30px;}  .relations{margin: auto;} .relations h3{font-family:'Segoe UI';text-align:center;font-size:24px;text-transform:uppercase;background-color:#3B3E4F;line-height: 40px;color: white;margin-right:0px;margin-top:0px;margin-bottom: -20px; font-weight: normal;} .relations td{width:150px;border-bottom: 4px solid #3B3E4F ;background-color: #16151B;} .relations td p{height: 200px;max-height: 200px;overflow-y:auto;overflow-x:hidden;padding: 5px;text-align: left;margin-top: -5px;margin-bottom: -15px;} .relations img{border-bottom: 4px solid #3B3E4F;} .relations strong{font-family: 'Segoe UI';font-size: 16px;text-transform: uppercase;color: white;font-weight: normal;margin-bottom: -30px;display: block;}</style>
<div class="perso"><h1>Ses relations</h1>

<table class="relations"><tr><td><h3>Prénom nom</h3>
<img src="http://placehold.it/230x100" height="100" width="230">
<p><strong>Type de relation</strong>

Description de la relation</p>
</td><td><h3>Prénom nom</h3>
<img src="http://placehold.it/230x100" height="100" width="230">
<p><strong>Type de relation</strong>

Description de la relation</p>
</td></tr><tr><td><h3>Prénom nom</h3>
<img src="http://placehold.it/230x100" height="100" width="230">
<p><strong>Type de relation</strong>

Description de la relation</p>
</td><td><h3>Prénom nom</h3>
<img src="http://placehold.it/230x100" height="100" width="230">
<p><strong>Type de relation</strong>

Description de la relation</p>
</td></tr></table>
<center>[size=10]Code par <a href="http://www.never-utopia.com/u17236">Dehvi</a> sur <a href="http://www.never-utopia.com">Never-Utopia</a>[/size]</center>
</div>

<style>#rel_1:checked ~ #lien_1, #rel_2:checked ~ #lien_2, #rel_3:checked ~ #lien_3 { display: block; } .rel_div { width: 700px; margin: auto; } /* TITRE DE LA FICHE */ #rel_title h2 { font-family: Cousine, sans-serif; letter-spacing: 2px; text-transform: uppercase; font-weight: inherit; text-align: center; font-size: 30px; color: #0B96D7; text-shadow: -2px 3px 2px black; margin: 10px 0; box-sizing: border-box; } /* BOUTONS */ #rel_box { display: flex; flex-wrap: wrap; justify-content: space-between; } #rel_box label { height: 16px; display: block; cursor: pointer; background: #0B96D7; text-align: center; text-transform: uppercase; border: 0; font-family: Cousine, sans-serif; color: #fff; font-weight: inherit; letter-spacing: 3px; font-size: 11px; padding: 8px 15px; width: 26%; margin-bottom: 20px; transition: all 0.6s; } /* BOUTON CLIQUE */ #rel_box [id^="rel"]:checked + label {background: #070707;} #rel_box input[type=radio], .rel_liens {display:none;} #rel_middle { margin: 0px 30px; } .rel_details::-webkit-scrollbar { width: 0px; } .lien_img { width: 200px; height: 132px; padding: 10px; box-sizing: border-box; filter: grayscale(1); transition: all 0.5s; } .lien_img:hover { filter: grayscale(0); transition: all 0.5s } .lien_img div { background: rgba(7,7,7,0.7); height: 100%; text-align: center; transform: scale(0); display: flex; flex-direction: column; justify-content: center; font-size: 15px; text-transform: uppercase; font-family: Cousine, sans-serif; letter-spacing: 3px; transition: all 0.5s;} .lien_img:hover div { transform: scale(1); transition: all 0.5s; } /* TITRE DE LA FICHE */ .rel_infos { margin: 0; font-size: 10px; color: #0B96D7; } .a_liens { display: flex; justify-content: space-between; } .rel_details { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(7, 7, 7, 0) rgba(7, 7, 7, 0); width: 68%; background: #070707; border-top: 15px solid #070707; border-bottom: 15px solid #070707; padding: 0 15px; box-sizing: border-box; height: 132px; } /* PSEUDO */ .rel_details span { font-family: Cousine, sans-serif; color: #0B96D7; text-transform: uppercase; font-size: 14px; } /* DESCRIPTION ET BORDURE HAUT */ .rel_details p { font-size: 10.8px; line-height: 20px; border-top: 2px solid #0B96D7; margin: 0; padding-top: 10px; margin-top: 2px; } .liens_margin { margin-top: -13px; }</style>

<section class="rel_div" id="rel_title"><!-- TITRE DE LA FICHE RELATION --><h2>Titre de fiche de relation</h2></section>
<!---------------- BOUTONS -------------->
<section class="rel_div" id="rel_box"><input type="radio" name="rel_buttons" id="rel_1" checked><label for="rel_1">FAMILLE</label><input type="radio" name="rel_buttons" id="rel_2"><label id="rel_middle" for="rel_2">Alliés</label><input type="radio" name="rel_buttons" id="rel_3"><label for="rel_3">Ennemis</label>

<!-- ------------------------------------------- FICHE FAMILLE ------------------------------------------- -->
<article class="rel_liens" id="lien_1"><!-- FAMILLE 1 --><aside class="a_liens"><!-- IMAGE 200x132 --><div class="lien_img" style="background: url(https://zupimages.net/up/20/46/z1ho.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;"><div>Nom Prénom<p class="rel_infos">Pseudo</p></div></div><div class="rel_details"><span>Petit titre</span><p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam</p></div></aside>

<!-- FAMILLE 2 --><aside class="a_liens liens_margin"><div class="rel_details"><span>Petit Titre</span><p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam</p></div><!-- IMAGE 200x132 --><div class="lien_img" style="background: url(https://zupimages.net/up/20/46/z1ho.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;"><div>Nom Prénom<p class="rel_infos">pseudo</p></div></div></aside>

<!-- FAMILLE 3 --><aside class="a_liens liens_margin"><!-- IMAGE 200x132 --><div class="lien_img" style="background: url(https://zupimages.net/up/20/46/z1ho.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;"><div>Nom Prénom<p class="rel_infos">Pseudo</p></div></div><div class="rel_details"><span>Petit Titre</span><p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam</p></div></aside>

<!-- ------------------------------------------- FICHE ALLIES ------------------------------------------- -->
</article><article class="rel_liens" id="lien_2"><!-- ALLIE 1 --><aside class="a_liens"><!-- IMAGE 200x132 --><div class="lien_img" style="background: url(https://zupimages.net/up/20/46/z1ho.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;"><div>Nom Prénom<p class="rel_infos">Pseudo</p></div></div><div class="rel_details"><span>Petit titre</span><p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam</p></div></aside>

<!-- ALLIE 2 --><aside class="a_liens liens_margin"><div class="rel_details"><span>Petit Titre</span><p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam.</p></div><!-- IMAGE 200x132 --><div class="lien_img" style="background: url(https://zupimages.net/up/20/46/z1ho.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;"><div>Nom Prénom<p class="rel_infos">Pseudo</p></div></div></aside>

<!-- ALLIE 3 --><aside class="a_liens liens_margin"><!-- IMAGE 200x132 --><div class="lien_img" style="background: url(https://zupimages.net/up/20/46/z1ho.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;"><div>Nom Prénom<p class="rel_infos">Pseudo</p></div></div><div class="rel_details"><span>Petit Titre</span><p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam.</p></div></aside>


<!-- ------------------------------------------- FICHE ENNEMIS  ------------------------------------------- -->
</article><article class="rel_liens" id="lien_3"><!-- ENNEMI 1 --><aside class="a_liens"><!-- IMAGE 200x132 --><div class="lien_img" style="background: url(https://zupimages.net/up/20/46/z1ho.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;"><div>Nom Prénom<p class="rel_infos">Pseudo</p></div></div><div class="rel_details"><span>Petit titre</span><p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam</p></div></aside>

<!-- ENNEMI 2 --><aside class="a_liens liens_margin"><div class="rel_details"><span>Petit Titre</span><p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam</p></div><!-- IMAGE 200x132 --><div class="lien_img" style="background: url(https://zupimages.net/up/20/46/z1ho.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;"><div>Nom Prénom<p class="rel_infos">pseudo</p></div></div></aside>

<!-- ENNEMI 3 --><aside class="a_liens liens_margin"><!-- IMAGE 200x132 --><div class="lien_img" style="background: url(https://zupimages.net/up/20/46/z1ho.png) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover;"><div>Nom Prénom<p class="rel_infos">Pseudo</p></div></div><div class="rel_details"><span>Petit Titre</span><p>Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam</p></div></aside>

</article></section>