<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/> <div class="f_fiche_prez"> <div class="fiche_prez_top"> <div class="fiche_prez_top_info"> <h1>Cliodhna Mac Cárthaigh</h1> _{Petite ou longue citation pour faire joli qui retourne à la ligne si elle est trop longue (mais pas plus que ça svp)} </div><div class="fiche_prez_top_im"><img src="https://zupimages.net/up/23/46/vufn.png"/></div></div><div class="fiche_prez_ava"><img src="https://zupimages.net/up/23/36/ekpl.png"/></div><div class="fiche_prez_about"><li><span>• Nom(s)</span>: écrire ici.</li><li><span>• Prénom(s)</span> : écrire ici.</li><li><span>• Surnom</span> : écrire ici.</li><li><span>• Date naissance, âge & lieu</span> : écrire ici.</li><li><span>• Situation</span> : écrire ici.</li><li><span>• Orientation sexuelle</span> : écrire ici.</li><li><span>• Pronom(s)</span> : écrire ici.</li><li><span>• Espèce</span> : écrire ici.</li><li><span>• Métier</span> : écrire ici.</li><li><span>• Groupe</span> : écrire ici.</li></div>

<div class="fiche_prez_blok"> <div class="fiche_prez_bl_title"> <span>Points importants</span></div><div class="fiche_prez_bl_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac nisi id turpis venenatis vestibulum at et risus. Curabitur leo tellus, sodales sed sapien efficitur, ornare iaculis nulla. Suspendisse porttitor posuere fermentum. Phasellus ultrices molestie felis non ultricies. Sed non fringilla nibh, eu tincidunt justo. Nunc consectetur viverra nunc a vestibulum. Praesent hendrerit feugiat dui sed semper. Phasellus tempus dolor at tortor iaculis, sit amet volutpat tellus imperdiet. Ut eu interdum eros. Morbi pellentesque purus justo, non sagittis tellus ultricies eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat ullamcorper velit nec placerat. Donec porta euismod nibh, sed congue diam iaculis vitae. Donec maximus sodales fermentum. Nulla vulputate ex turpis, in egestas eros posuere in. Donec ornare nibh id egestas venenatis. Curabitur iaculis elit quis tortor sollicitudin, vel pulvinar ante hendrerit. Curabitur a placerat augue. Vestibulum tincidunt ligula augue, quis consectetur justo blandit ut. Morbi porta neque et tortor efficitur gravida. Vestibulum dapibus lectus non pharetra laoreet. In tincidunt nisl justo, id efficitur nulla dapibus quis. Donec facilisis gravida purus at pharetra. Donec ac tortor sed lectus sagittis commodo et nec est. </div></div>

<div class="fiche_prez_blok"> <div class="fiche_prez_bl_title"><span>Caractère</span></div><div class="fiche_prez_bl_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac nisi id turpis venenatis vestibulum at et risus. Curabitur leo tellus, sodales sed sapien efficitur, ornare iaculis nulla. Suspendisse porttitor posuere fermentum. Phasellus ultrices molestie felis non ultricies. Sed non fringilla nibh, eu tincidunt justo. Nunc consectetur viverra nunc a vestibulum. Praesent hendrerit feugiat dui sed semper. Phasellus tempus dolor at tortor iaculis, sit amet volutpat tellus imperdiet. Ut eu interdum eros. Morbi pellentesque purus justo, non sagittis tellus ultricies eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat ullamcorper velit nec placerat. Donec porta euismod nibh, sed congue diam iaculis vitae. Donec maximus sodales fermentum. Nulla vulputate ex turpis, in egestas eros posuere in. Donec ornare nibh id egestas venenatis. Curabitur iaculis elit quis tortor sollicitudin, vel pulvinar ante hendrerit. Curabitur a placerat augue. Vestibulum tincidunt ligula augue, quis consectetur justo blandit ut. Morbi porta neque et tortor efficitur gravida. Vestibulum dapibus lectus non pharetra laoreet. In tincidunt nisl justo, id efficitur nulla dapibus quis. Donec facilisis gravida purus at pharetra.  Donec ac tortor sed lectus sagittis commodo et nec est. </div></div>

<div class="fiche_prez_behind"><span>Histoire</span></div><div class="fiche_prez_sep"></div><div class="fiche_prez_last"><div class="fiche_prez_last_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac nisi id turpis venenatis vestibulum at et risus. Curabitur leo tellus, sodales sed sapien efficitur, ornare iaculis nulla. Suspendisse porttitor posuere fermentum. Phasellus ultrices molestie felis non ultricies. Sed non fringilla nibh, eu tincidunt justo. Nunc consectetur viverra nunc a vestibulum. Praesent hendrerit feugiat dui sed semper. Phasellus tempus dolor at tortor iaculis, sit amet volutpat tellus imperdiet. Ut eu interdum eros. Morbi pellentesque purus justo, non sagittis tellus ultricies eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat ullamcorper velit nec placerat. Donec porta euismod nibh, sed congue diam iaculis vitae. Donec maximus sodales fermentum. Nulla vulputate ex turpis, in egestas eros posuere in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac nisi id turpis venenatis vestibulum at et risus. Curabitur leo tellus, sodales sed sapien efficitur, ornare iaculis nulla. Suspendisse porttitor posuere fermentum. Phasellus ultrices molestie felis non ultricies. Sed non fringilla nibh, eu tincidunt justo. Nunc consectetur viverra nunc a vestibulum. Praesent hendrerit feugiat dui sed semper. Phasellus tempus dolor at tortor iaculis, sit amet volutpat tellus imperdiet. Ut eu interdum eros. Morbi pellentesque purus justo, non sagittis tellus ultricies eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat ullamcorper velit nec placerat. Donec porta euismod nibh, sed congue diam iaculis vitae. Donec maximus sodales fermentum. Nulla vulputate ex turpis, in egestas eros posuere in.

</div></div>
<div class="fiche_prez_behind"><span>Liens / Relations</span></div><div class="fiche_prez_sep"></div><div class="fiche_prez_last"><div class="fiche_prez_last_txt"><e>Intitulé du lien</e> <d>|</d> <f>@"Nom P. Prénom"</f> <d>❍</d> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac nisi id turpis venenatis vestibulum at et risus. Curabitur leo tellus, sodales sed sapien efficitur, ornare iaculis nulla. Suspendisse porttitor posuere fermentum.

<e>Intitulé du lien</e> <d>|</d> <f>@"Nom P. Prénom"</f> <d>❍</d> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac nisi id turpis venenatis vestibulum at et risus. Curabitur leo tellus, sodales sed sapien efficitur, ornare iaculis nulla. Suspendisse porttitor posuere fermentum.

<e>Intitulé du lien</e> <d>|</d> <f>@"Nom P. Prénom"</f> <d>❍</d> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac nisi id turpis venenatis vestibulum at et risus. Curabitur leo tellus, sodales sed sapien efficitur, ornare iaculis nulla. Suspendisse porttitor posuere fermentum.</div></div><div class="f_cred">:copyright: j a w n</div></div>


<style>.f_fiche_prez{width:600px; margin:0px auto; background:#343434; padding:15px; border:solid 2px #2a2a2a; display:flex; flex-wrap:wrap; justify-content:space-between;}.fiche_prez_top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:15px; width:94%; background:#242424; margin-bottom:10px;}.fiche_prez_top_info{width:320px; text-align:center;margin:0px;}.fiche_prez_top_info h1{background-image: linear-gradient(45deg, #edc2b7 0%, #d76c59 99%, #fad0c4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font:25px Playfair Display; font-style:italic;}.fiche_prez_top_info sub{color:grey; font:10px Arial; line-height: 7px; font-style:italic;}.fiche_prez_top_im{border: solid 2px #535353; width: 199px; height: 78px; overflow:hidden;}.fiche_prez_top_im img{width:100%;height: 100%;}.fiche_prez_ava{width:200px; height:320px; overflow:hidden; border: solid 2px #535353;}.fiche_prez_ava img{width:100%; height:100%;}.fiche_prez_about{border: solid 2px #3a3a3a; background:#242424; margin-bottom:15px; padding:15px; width:350px; height: 292px; overflow:auto; list-style:none; color:grey; font:13px Arial; text-align:justify;}.fiche_prez_about li{margin-bottom:5px;}.fiche_prez_about span{background-image: linear-gradient(45deg, #edc2b7 0%, #d76c59 99%, #fad0c4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font:14px Playfair Display; letter-spacing:0.5px; font-style:italic;}.fiche_prez_blok{margin-bottom:10px; width: 295px;}.fiche_prez_bl_title{border: solid 2px #3a3a3a; padding:10px; text-align:center; margin-bottom:10px; background:#242424;}.fiche_prez_bl_title span{background:linear-gradient(45deg, #edc2b7 0%, #d76c59 99%, #fad0c4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font:20px Playfair Display; font-style:italic; letter-spacing:0.09em;}.fiche_prez_bl_txt{border: solid 2px #3a3a3a; background: #242424; padding: 15px; text-align: justify; color: grey; font: 12px Arial; height: 135px; overflow: auto;}.fiche_prez_behind{text-align:center; margin-bottom:5px; width:100%; border: solid 2px #3a3a3a; background:#242424; padding:3px;}.fiche_prez_behind span{background:linear-gradient(45deg, #edc2b7 0%, #d76c59 99%, #fad0c4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font:24px Playfair Display; font-style:italic; letter-spacing:0.09em;}.fiche_prez_sep{width:300px; margin:0px auto; height:2px; background:linear-gradient(45deg, #edc2b7 0%, #d76c59 99%, #fad0c4 100%); margin-bottom:5px;}.fiche_prez_last{width:100%; padding:15px; display:flex; flex-wrap:wrap; jusfify-content:space-between; border: solid 2px #3a3a3a; background:#242424;}.fiche_prez_last_im{width:120px; height:120px; border-radius:100%; overflow:hidden; border: solid 2px #535353;}.fiche_prez_last_txt{color: grey; border-left: solid 2px #535353; width: 556px; margin-left: -16px; text-align: justify; font: 12px Arial; list-style: none; padding: 0px 5px 0px 20px; height: 179px; overflow: auto;}.fiche_prez_last_txt li{margin-bottom:5px;}.fiche_prez_last_txt span{background:linear-gradient(45deg, #edc2b7 0%, #d76c59 99%, #fad0c4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font:13px Playfair Display; font-style:italic; letter-spacing:0.09em;}.f_cred{text-align:right; padding-top:5px; font:7px arial; color:grey; text-transform:uppercase; width:100%;}</style>

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/> <div class="f_fiche"> <div class="f_fiche_top"> <div class="f_fiche_top_title">Infos supplémentaires</div><div class="f_fiche_top_sub">Petite ou longue citation pour faire joli qui retourne à la ligne si elle est trop longue</div></div><div class="f_fiche_bottom"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dapibus, tortor vitae pretium suscipit, mi massa dapibus quam, ultrices interdum mi orci et justo. In mollis dolor sed massa convallis, quis sagittis ligula bibendum. Fusce nibh turpis, molestie sed gravida at, ullamcorper at risus. Donec venenatis maximus lacus nec ultrices. Curabitur venenatis, quam ac varius lobortis, lorem est dapibus leo, sed pretium metus mi at tortor. Quisque sit amet quam gravida massa tristique volutpat nec ut nisi. Vestibulum vitae faucibus nisl. Donec purus ipsum, congue nec scelerisque nec, egestas accumsan nulla. Aenean vehicula blandit dapibus. Mauris enim leo, tristique id sollicitudin in, venenatis id libero. Sed a tellus velit. Donec auctor ut lorem id euismod. Proin eget risus odio. Donec eu nunc volutpat, aliquet ante nec, consequat magna.ctetur adipiscing elit. Maecenas dapibus, tortor vitae pretium suscipit, mi massa dapibus quam, ultrices interdum mi orci et justo. In mollis dolor sed massa convallis, quis sagittis ligula bibendum. Fusce nibh turpis, molestie sed gravida at, ullamcorper at risus. Donec venenatis maximus lacus nec ultrices. Curabitur venenatis, quam ac varius lobortis, lorem est dapibus leo, sed pretium metus mi at tortor. Quisque sit amet quam gravida massa tristique volutpat nec ut nisi.</div><div class="f_cred">:copyright: j a w n</div></div>


<style>.f_fiche{width:600px; margin:0px auto; background:#343434; padding:15px; border:solid 2px #2a2a2a;}.f_fiche_top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; padding:10px 50px; background:#242424;}.f_fiche_top_title{background-image: linear-gradient(45deg, #edc2b7 0%, #d76c59 99%, #fad0c4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font:20px Playfair Display; letter-spacing:0.5px; width:150px; font-style:italic;}.f_fiche_top_sub{width:300px; color:grey; font:11px Arial; text-align:center; font-style:italic;}.f_fiche_bottom{margin-top:10px; padding:15px; background:#242424; font:11px Arial; color:grey; text-align:justify; border: solid 2px #3a3a3a; height: 282px; overflow: auto; font-style:italic;}.f_fiche_bottom img{border: solid 2px #535353; float: left; margin: 0px 15px 9px 0px; object-fit: cover; width: 199px; height: 78px;}.f_cred{text-align:right; padding-top:5px; font:7px arial; color:grey; text-transform:uppercase;}</style>