<div class="ficherp1"><img class="fondrp1" src="https://www.zupimages.net/up/21/34/jx0t.png"><img class="avatar1" src="https://nsa40.casimages.com/img/2021/08/23/21082305404870384.gif"><img class="avatar2" src="https://nsa40.casimages.com/img/2021/08/23/210823054002959807.gif"><div class="titre">Titre pas trop long, si ça passe sur la deuxième ligne c'est la merde</div><div class="soustitre">@"Eva Cortez" feat @"Personnage"</div>
<div class="corpsrp1"><div class="infos"><a target="_blank" href="LIEN MUSIQUE">thème musical</a></div><div class="infos"><a target="_blank" href="LIEN OUTFIT">outfit</a></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula leo diam. Suspendisse potenti. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed ornare erat lectus, quis ultricies erat tincidunt vitae. Morbi ac purus a ipsum malesuada hendrerit ac quis lectus. In et ante risus. Sed fermentum auctor dolor ac pellentesque. Etiam dapibus pulvinar eleifend. Pellentesque finibus elit in urna sollicitudin, nec aliquam diam lobortis. Curabitur nec porta massa. Morbi tristique imperdiet blandit.

— Dialogue.

Quisque semper massa at diam accumsan, id molestie massa volutpat. Aenean at mi cursus, ornare lorem a, cursus elit. Ut mauris dui, feugiat id placerat a, mattis eu risus. Phasellus ut metus vitae odio posuere bibendum eu ut ex. Nulla non pharetra tellus. Integer dignissim luctus dolor, semper laoreet elit finibus nec. Maecenas tellus augue, auctor in nunc eu, dignissim interdum metus. Vivamus faucibus tincidunt tellus, vel ultrices neque. </div><div class="créditart">icones by ... ; code by Artween</div></div>
<style>.ficherp1 {width: 540px; margin: auto; display: flex; flex-wrap: wrap; justify-content: space-evenly; padding: 0 0 5px 0; background: rgba(17,17,17,0.7); box-shadow: 0 0 10px black; font-family: Castoro; color:#c3c7ca;} .ficherp1 .fondrp1 {width: 540px; height: 300px; object-fit: cover; -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));} .ficherp1 .avatar1 {width: 130px; height: 130px; margin: -280px 90px 0 0; object-fit: cover; border:none; clip-path: circle(50% at 50% 50%); filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);} .ficherp1 .avatar2 {width: 130px; height: 130px; margin: -220px 0 0 110px; object-fit: cover; border:none; clip-path: circle(50% at 50% 50%); filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);} .ficherp1 .titre {width: 540px; margin:-80px 10px 10px 10px; line-height: 25px; text-align: center; font-family: Bilbo Swash Caps; font-size: 25px; font-weight: 700; background: linear-gradient(180deg, rgba(102,102,102,1) 0%, rgba(152,152,152,1) 47%, rgba(204,204,204,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .ficherp1 .soustitre {z-index: 1; width: 540px; margin:-50px 10px 10px 10px; text-align: center; font-size:10px; text-transform: lowercase;} .ficherp1 .infos {margin:0 15px 10px 30px; display:inline-block; vertical-align:middle; text-align:right; text-transform: lowercase; font-size: 12px;} .ficherp1 .infos a {color: #444444;} .ficherp1 .corpsrp1 {width: 540px; background: rgba(17,17,17,0.3); margin: -5px 10px 10px 10px; padding: 10px 5px 10px 5px; box-shadow: 0 0 10px #090909; font-size: 12px;} .ficherp1 .créditart {text-align: center; text-transform: uppercase; font-size: 9px; color: #b9382e; opacity: 0.5; margin-top: 5px;}</style><link href="https://fonts.googleapis.com/css2?family=Bilbo+Swash+Caps&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Castoro&display=swap" rel="stylesheet">