@song jian

@song jian

Nervous,
trip over my words
You're so pretty, it hurts
Baby, I'm yours

titre du rp ici

— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut odio rutrum, condimentum mauris eu, lobortis diam. Donec ut tempus enim. Vivamus egestas hendrerit porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu sem posuere, viverra tortor sit amet, auctor dui. Sed non erat ante. Nulla facilisi. Etiam rhoncus neque laoreet suscipit pulvinar. Sed ligula ipsum, iaculis quis risus ut, molestie lobortis nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut odio rutrum, condimentum mauris eu, lobortis diam. Donec ut tempus enim. Vivamus egestas hendrerit porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu sem posuere, viverra tortor sit amet, auctor dui. Sed non erat ante. Nulla facilisi. Etiam rhoncus neque laoreet suscipit pulvinar. Sed ligula ipsum, iaculis quis risus ut, molestie lobortis nunc.

Code:

<link href="https://cdn.jsdelivr.net/gh/hyang5u/CODES/shadow_ily.css" rel="stylesheet">
<center><div class="contour-rp-shad"><div class="container-bg"><div class="container-top">
<div class="container-img"><div class="cont-img-small"><div class="cont-img-un"><div class="first-user">@"NOM_UN"</div><img src="URL_IMG_UN" class="img-un"></div><div class="cont-img-deux"><div class="second-user">@"NOM_DEUX"</div><img src="URL_IMG_DEUX" class="img-deux"></div></div></div>
<div class="container-icon"><i class="cp cp-heart-o icon-mid"></i></div>
<div class="container-info"><div class="info-cit">citation
citation
citation
citation</div></div></div>
<div class="trp-flx"><div class="trp-titre">titre du rp ici</div></div>
<div class="main-rp">— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut odio rutrum, condimentum mauris eu, lobortis diam. Donec ut tempus enim. Vivamus egestas hendrerit porta. <prl>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</prl> Suspendisse eu sem posuere, viverra tortor sit amet, auctor dui. Sed non erat ante. Nulla facilisi. <prl2>Etiam rhoncus neque laoreet suscipit pulvinar.</prl2> Sed ligula ipsum, iaculis quis risus ut, molestie lobortis nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut odio rutrum, condimentum mauris eu, lobortis diam. <prl3>Donec ut tempus enim.</prl3> Vivamus egestas hendrerit porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu sem posuere, viverra tortor sit amet, auctor dui. <prl4>Sed non erat ante.</prl4> Nulla facilisi. Etiam rhoncus neque laoreet suscipit pulvinar. Sed ligula ipsum, iaculis quis risus ut, molestie lobortis nunc.</div></div></div></center>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut odio rutrum, condimentum mauris eu, lobortis diam. Donec ut tempus enim. Vivamus egestas hendrerit porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu sem posuere, viverra tortor sit amet, auctor dui. Sed non erat ante. Nulla facilisi. Etiam rhoncus neque laoreet suscipit pulvinar. Sed ligula ipsum, iaculis quis risus ut, molestie lobortis nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut odio rutrum, condimentum mauris eu, lobortis diam. Donec ut tempus enim. Vivamus egestas hendrerit porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu sem posuere, viverra tortor sit amet, auctor dui. Sed non erat ante. Nulla facilisi. Etiam rhoncus neque laoreet suscipit pulvinar. Sed ligula ipsum, iaculis quis risus ut, molestie lobortis nunc.

date
lieu
outfit/bgm
@"nom prénom"

titre du rp

variantes couleurs plus foncées:

couleurs claires:

couleurs foncées:

titre du rp@nom prénom - outfit— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec massa metus. Sed nec mi eget magna imperdiet ultricies vel et nulla. Nulla vitae nibh ipsum. Etiam eget neque ut quam scelerisque dignissim. Praesent ultrices nec ligula at lobortis. Fusce auctor dapibus eros, eu faucibus arcu aliquam nec. Suspendisse semper urna non tellus consectetur porttitor. Mauris nec eros id metus viverra hendrerit quis pharetra urna. Aliquam pulvinar mi eros, id fringilla diam tempor non. Donec vel imperdiet risus, in rhoncus velit. Ut ullamcorper eu neque at aliquam. In tincidunt ligula id quam convallis efficitur. Morbi quis neque id dui tempus viverra sed non tellus. Morbi eleifend dapibus lectus ac suscipit.

Code:

<center><a-ctr><a-bg><top><imgs><img src="IMG_UNE" class="bubble-img"><img src="IMG_DEUX" class="bubble-img"></imgs><r-col><a-tt>titre du rp</a-tt><line></line><a-inf>@"nom prénom" - <a href="">outfit</a></a-inf></r-col></top><a-rp>— Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec massa metus. Sed nec mi eget magna imperdiet ultricies vel et nulla. <sb>Nulla vitae nibh ipsum.</sb> Etiam eget neque ut quam scelerisque dignissim. Praesent ultrices nec ligula at lobortis. Fusce auctor dapibus eros, eu faucibus arcu aliquam nec. <sb2>Suspendisse semper urna non tellus consectetur porttitor.</sb2> Mauris nec eros id metus viverra hendrerit quis pharetra urna. Aliquam pulvinar mi eros, id fringilla diam tempor non. <sb3>Donec vel imperdiet risus, in rhoncus velit.</sb3> Ut ullamcorper eu neque at aliquam. In tincidunt ligula id quam convallis efficitur. <sb4>Morbi quis neque id dui tempus viverra sed non tellus.</sb4> Morbi eleifend dapibus lectus ac suscipit.
<center><line2></line2></center></a-rp></a-bg></a-ctr></center>
<link href="https://cdn.jsdelivr.net/gh/hyang5u/CODES/Rps/a-rp.css" rel="stylesheet">

Code:

<style>.mntcs_rps_bgb {margin: 0 auto;padding: 10px;width: 496px;height: auto;border-radius: 10px;border: 1px solid var(--blanc);} .mntcs_rps_title {background-color: var(--bodyline);border-radius: 5px 5px 0px 0px;padding-top: 8px;padding-bottom: 8px;padding-left: 8px;font-family: 'Poppins';font-weight: 700;color: var(--blck);letter-spacing: 2px;} .rp_main {background-color: var(--blanc);padding: 4%;margin-top: -18px;} .rp_info {display: flex;width: 384px;float: left;margin-right: 12px;gap: 28px;} .rp_statut {text-align: right;} .rp_title, .rp_with {flex: 1;} .mntcs_rp {border-bottom: 1px solid var(--accent);padding-bottom: 8px;display: flow-root;} .rp_icon {padding-top: 2px;} mntcs1 {text-transform: uppercase;font-size: 7px;font-family: Poppins;letter-spacing: 1px;font-weight: 700;color: var(--txt);} mntcs2 {font-family: poppins;font-size: 12px;font-weight: 600;color: var(--color4);} mntcs3 {font-family: poppins;font-size: 12px;font-weight: 600;color: var(--txt);}</style>
<div class="mntcs_rps_bgb"><div class="mntcs_rps_title"><!-- ONGLET NAME -->●● RP REPERTORY <!-- FIN ONGLET NAME --> <i class="cp cp-cross" style="float: right;margin-right: 10px;margin-top: 3px;color: var(--body);font-size: 8px;"></i></div>
<div class="rp_main"><!-- DEBUT RP LINE --><div class="mntcs_rp"><div class="rp_info"><div class="rp_icon"><a href="LIEN RP ICI"><!-- ICON --><i class="cp cp-stars"></i><!-- FIN ICON --></a></div><div class="rp_title"><mntcs3>RP TITLE</mntcs3></div><div class="rp_with"><mntcs3>[i]WITH NAME[/i]</mntcs3></div></div><div class="rp_statut"><!-- RP STATUT --><mntcs2 style="color:var(--color2);">ARCHIVÉ</mntcs2><!-- FIN RP STATUT --></div></div><!-- FIN RP LINE -->
<!-- DEBUT RP LINE --><div class="mntcs_rp"><div class="rp_info"><div class="rp_icon"><a href="LIEN RP ICI"><!-- ICON --><i class="cp cp-stars"></i><!-- FIN ICON --></a></div><div class="rp_title"><mntcs3>RP TITLE</mntcs3></div><div class="rp_with"><mntcs3>[i]WITH NAME[/i]</mntcs3></div></div><div class="rp_statut"><!-- RP STATUT --><mntcs2 style="color:var(--bc);">TERMINÉ</mntcs2><!-- FIN RP STATUT --></div></div><!-- FIN RP LINE -->
<!-- DEBUT RP LINE --><div class="mntcs_rp"><div class="rp_info"><div class="rp_icon"><a href="LIEN RP ICI"><!-- ICON --><i class="cp cp-stars"></i><!-- FIN ICON --></a></div><div class="rp_title"><mntcs3>RP TITLE</mntcs3></div><div class="rp_with"><mntcs3>[i]WITH NAME[/i]</mntcs3></div></div><div class="rp_statut"><!-- RP STATUT --><mntcs2>EN COURS</mntcs2><!-- FIN RP STATUT --></div></div><!-- FIN RP LINE --></div></div>

Code:

<div class="myr3" style="--group:var(--c1);"><div class="border"><div class="timeline"><ul><!-- DÉBUT RP --><li><div class="details"><span class="rp">date du rp</span>
<b>@"tag", lieu.</b> <a href="#" target="_blank" class="linkcp"><i class="cp cp-paper-plane"></i></a></div></li><!-- FIN RP --><!-- DÉBUT RP --><li><div class="details"><span class="rp">date du rp</span>
<b>@"tag", lieu.</b> <a href="#" target="_blank" class="linkcp"><i class="cp cp-paper-plane"></i></a></div></li><!-- FIN RP --><!-- DÉBUT RP --><li><div class="details"><span class="rp">date du rp</span>
<b>@"tag", lieu.</b> <a href="#" target="_blank" class="linkcp"><i class="cp cp-paper-plane"></i></a></div></li><!-- FIN RP --><!-- DÉBUT RP --><li><div class="details"><span class="rp">date du rp</span>
<b>@"tag", lieu.</b> <a href="#" target="_blank" class="linkcp"><i class="cp cp-paper-plane"></i></a></div></li><!-- FIN RP -->
</ul></div></div></div><link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap" rel="stylesheet"><style>.myr3 {background: var(--brd);padding:10px; border-radius: 10px; width:500px; margin:0 auto;position:relative;overflow:hidden;font-family: 'Lato', sans-serif;} .myr3 .border {border-radius: 10px;border: 1px solid var(--blanc);padding:20px;background: rgba(0,0,0,0.15); position:relative; color: var(--txt);} html[data-theme="light"] .myr3 .border {background: rgba(255,255,255,0.15);} .myr3 .timeline {position:relative; padding: 0 14px;} .myr3 .timeline:before {content: ''; position: absolute; left: calc(50% - 1px);background-color: var(--body2) !important; width:2px; height:100%;} .myr3 .timeline ul {list-style-type: none;margin: 0;padding: 0;} .myr3 .timeline li {padding: 0 20px; font-size: 9.5px; line-height:140%;} .myr3 .timeline li:nth-of-type(odd) {margin-right: 50%;position:relative;} .myr3 .timeline li:nth-of-type(odd):after {content: ''; width:6px; height:6px; border-radius:50%; background:var(--group);position:absolute; top:3px; right:-3px;} .myr3 .timeline li:nth-of-type(odd) .details {text-align:right;} .myr3 .timeline li:nth-of-type(even) {margin-left: 50%; position:relative;} .myr3 .timeline li:nth-of-type(even):before {content: ''; width:6px; height:6px; border-radius:50%; background:var(--group);position:absolute; top:3px; left:-3px;} .myr3 .details span.rp {background: var(--group); padding: 0 4px;color:black; font-weight:900;} a.linkcp {color:var(--group)!important;}
</style>

titre du rp

@"tag"
date - (outfit)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code:

<div class="myr9"><div class="top"><div class="title">titre du rp</div><img src="https://media2.giphy.com/media/798oH0WDEQnicM4857/giphy.gif"/></div><div class="wave"><div class="details">@"tag"
date - <a href="#"><i>(outfit)</i></a></div></div><div class="txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div><style>.myr9 {width:325px; margin:10px auto;background: var(--catb);position:relative;border-radius:6px;overflow:hidden;outline: 1.5px solid var(--catb); outline-offset: 5px;} .myr9 .top {height:150px; background:linear-gradient(120deg, var(--c3), var(--c5));overflow:hidden;position:relative;} .title {font-weight: 800;font-family: 'playfair display';color:var(--noir);font-style:italic;font-size: 135px;line-height: 71px;letter-spacing: 2px;word-break: break-all;text-align:right;opacity: 0.6;position: absolute;top: -20px;left: -10px;width: calc(100% + 20px);} .myr9 .top img {border-radius:50%;width:45px; height:45px;object-fit:cover;position:absolute;right: 56px;bottom: 10px;filter: grayscale(1); border:1px solid var(--catb); padding:4px;} .myr9 .wave {-webkit-mask-image: url(https://unravelgraph.github.io/myFiles/wave3.svg); -webkit-mask-repeat: no-repeat;-webkit-mask-size: 520px;-webkit-mask-position: -25px bottom; background:var(--catb);display:block;width:100%; height:115px; position:absolute; top:90px;} .myr9 .details {color:var(--txt);letter-spacing:.5px;text-transform:uppercase;font-size: 8px;font-family: arial;font-weight: 700;text-align:center; position:absolute; top:24px;left:30px;line-height: 12px;} .myr9 .details a.mentiontag {font-size:7px; color:var(--c5);} .myr9 .txt {padding:20px;padding-top:10px;font-size: 9.5px;line-height: 15px;position:relative}</style>

titre du rp

( ) date, lieu. @"perso"

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code:

<div class="myr10"><div class="top"><div class="img"><img src="https://static.tumblr.com/eceada65c15a485ec04f1c83fc9ac714/8ai5lcn/AZop4f7f3/tumblr_static_tumblr_static__focused_v3.gif"/></div><div class="titre">titre du rp</div><div class="details"><a href="#">( <i class="cp cp-stars"></i> )</a> date, lieu. @"perso"</div></div><div class="rp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div><style>.myr10{width:325px; margin:10px auto;background:var(--catb);position:relative;border-radius:6px;overflow:hidden;outline: 1.5px solid var(--catb); outline-offset: 5px;padding:20px;} .myr10 .top {display:grid;grid-template: auto / 85px 1.5fr;margin-bottom:15px;} .myr10 .top .img {height:45px; width:100%; background:linear-gradient(90deg, var(--c2), var(--c5)); overflow:hidden; border-top-right-radius:25px; border-top-left-radius:5px;} .myr10 .top .img img {width:100%; height:100%; object-fit:cover;mix-blend-mode: soft-light;filter: grayscale(1);} .myr10 .top .titre {border-bottom: 2px solid var(--c5);margin-left: -5px;padding-bottom:4.5px;width: calc(100% + 5px);font-family: poppins;font-weight:900;text-transform:uppercase;font-size:40px;font-style:italic;color: var(--accent2);align-self: flex-end;letter-spacing: -2px;} .myr10 .top .titre:first-letter {color:var(--c5);} .myr10 .details {grid-column: 1/3;color: var(--txt);letter-spacing: .5px;text-transform: uppercase;font-size: 8px;font-family: arial;font-weight: 700;line-height: 12px;margin-top:6px;text-align:right;} .myr10 .details a {color:var(--c5)!important;} .myr10 .rp {font-size: 9.5px;line-height: 15px;}</style>

nom du persoage · job · zodiac · jsp
sur plusieurs lignes si voulu








Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

pres.
liens
rps
autre

Code:

<div class="carnet5"><div class="aes"><div class="img"><img src="https://64.media.tumblr.com/9cf1a267271b5463ec9233ada191904e/155e9f53ebb6be37-d1/s540x810/61c42bce5faf170098c11baac7228448bbeff22c.gifv"/></div><div class="text"><br/><br/><br/><br/><center><un>nom du perso</un><small>age · job · zodiac · jsp
sur plusieurs lignes si voulu

<a href="#"><i class="cp cp-home"></i></a> <a href="#"><i class="cp cp-pinterest"></i></a> <a href="#"><i class="cp cp-instagram"></i></a> <a href="#"><i class="cp cp-spotify"></i></a></small></center>






Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><div class="links"><a href="#"><span><i class="cp cp-paper-plane"></i>
pres.</span></a><a href="#"><span><i class="cp cp-heart"></i>
liens</span></a><a href="#"><span><i class="cp cp-pencil"></i>
rps</span></a><a href="#"><span><i class="cp cp-star"></i>
autre</span></a></div></div></div><style>.carnet5 {background: var(--brd);padding:20px; width:500px; margin:10px auto;position:relative;overflow:hidden;font-family: 'Lato', sans-serif; outline: 1px solid var(--blanc); outline-offset: 10px;border-radius:1px;box-sizing: border-box;} .carnet5 .aes {display:grid; grid-template: auto / 1.1fr 1fr 60px;} .carnet5 .aes .img {width: calc(100% - 40px);background:var(--gradient); padding:20px;opacity: 0.7;border:1px solid var(--border);} .carnet5 .aes .img img {width:100%;border:3px solid var(--color-pill);} .carnet5 .aes .text {padding:20px;background:var(--bdrf);border:1px solid var(--border); border-left:none;height:180px;overflow:auto;font-size: 10.5px;line-height: 15px;} .carnet5 .aes .links {display:grid; grid-template-row: repeat(5, 1fr);gap:10px;margin-left:10px} .carnet5 .aes .links a {background:var(--bdrf);border:1px solid var(--border);display:grid; place-items:center;text-align:center;text-transform: uppercase;font-size: 7px; font-weight:700;padding: 0 4px;color:var(--c2);font-family: 'Poppins';} .carnet5 small {text-transform: uppercase;font-size: 7px;font-family: Poppins;letter-spacing: 1px;font-weight: 700;color: var(--txt);line-height: 8px;}
</style>

nom du persorésumé du liensms

long résumé du lien. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

nom du persorésumé du liensms

long résumé du lien. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code:

<div class="carnet5"><div class="rel"><!-- DÉBUT DU LIEN --!><div class="lien"><div class="top"><un>nom du perso</un><span><ct>résumé du lien</ct></span><small><a href="#">sms</a></small></div><div class="main"><div class="img"><img src="https://64.media.tumblr.com/9cf1a267271b5463ec9233ada191904e/155e9f53ebb6be37-d1/s540x810/61c42bce5faf170098c11baac7228448bbeff22c.gifv"/></div><div class="txt"><div class="scroll">long résumé du lien. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div></div></div><!-- FIN DU LIEN --!><!-- DÉBUT DU LIEN --!><div class="lien"><div class="top"><un>nom du perso</un><span><ct>résumé du lien</ct></span><small><a href="#">sms</a></small></div><div class="main"><div class="img"><img src="https://64.media.tumblr.com/9cf1a267271b5463ec9233ada191904e/155e9f53ebb6be37-d1/s540x810/61c42bce5faf170098c11baac7228448bbeff22c.gifv"/></div><div class="txt"><div class="scroll">long résumé du lien. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div></div></div><!-- FIN DU LIEN --!></div></div><style>.carnet5 {background: var(--brd);padding:20px; width:500px; margin:10px auto;position:relative;overflow:hidden;font-family: 'Lato', sans-serif; outline: 1px solid var(--blanc); outline-offset: 10px;border-radius:1px;box-sizing: border-box;} .carnet5 small {text-transform: uppercase;font-size: 7px;font-family: Poppins;letter-spacing: 1px;font-weight: 700;color: var(--txt);line-height: 8px;} .carnet5 .rel {display:flex; flex-direction:column; gap:20px;} .carnet5 .rel .top {display:flex;align-items: center;background:var(--bdrf);border:1px solid var(--border); padding:10px;} .carnet5 .top span {border-left: 1px solid var(--border);border-right: 1px solid var(--border);padding:0 10px;margin-right:10px;} .carnet5 .rel .top un {flex-grow:1;} .carnet5 .rel .top un:after {display:none!important;} .carnet5 .rel .main {display:grid;grid-template: 90px / 90px 1fr;} .carnet5 .rel .main .img {background:var(--gradient);border:1px solid var(--border); width:90px; height:90px;display:grid; place-items:center;opacity: 0.7;} .carnet5 .rel .main .img img {width:60px; height:60px; object-fit:cover; border-radius:50%;border:3px solid var(--color-pill);} .carnet5 .rel .main .txt {border-bottom: 1px solid var(--border);border-right:1px solid var(--border);height:91px;} .carnet5 .rel .main .txt .scroll {height:70px; overflow:auto;margin:10px; margin-right:0;padding-right:10px;font-size: 10.5px;line-height: 15px;}</style>

Code:

<div class="carnet5"><div class="rps"><!-- DÉBUT SUJET --!><div class="sujet"><div class="back"><div class="border"></div></div><un>nom du sujet <small><a href="#">lien</a></small></un><div class="details"><tag>date</tag><tag>lieu</tag><tag>@"perso"</tag></div></div><!-- FIN SUJET --!><!-- DÉBUT SUJET --!><div class="sujet fini"><div class="back"><div class="border"></div></div><un>nom du sujet <small><a href="#">lien</a></small></un><div class="details"><tag>date</tag><tag>lieu</tag><tag>@"perso"</tag></div></div><!-- FIN SUJET --!></div></div><style>.carnet5 {background: var(--brd);padding:20px; width:500px; margin:10px auto;position:relative;overflow:hidden;font-family: 'Lato', sans-serif; outline: 1px solid var(--blanc); outline-offset: 10px;border-radius:1px;box-sizing: border-box;} .carnet5 .rps {display:flex; flex-direction:column; gap:20px;} .carnet5 .rps .sujet {border:1px solid var(--border);display:grid;grid-template: 30px 30px / 60px 1fr;align-items: center;position:relative;} .carnet5 .rps .sujet .back {background:var(--gradient); display:grid; place-items:center;height:100%;grid-row: 1/3;opacity:0.7;} .carnet5 .rps .sujet .back .border {border-radius:50%;border:3px solid var(--color-pill); width:30px; height:30px;} .carnet5 .rps .sujet un {padding: 0 14px;height: 100%;display: flex;align-items: center;justify-content: space-between;background:var(--bdrf);} .carnet5 .rps .sujet un:after {display:none!important;} .carnet5 .rps .sujet .details {border-top: 1px solid var(--border);padding: 0 10px;display:flex; gap: 5px;height: 100%;align-items: center;} .carnet5 tag {background: var(--accentb);color: var(--noir); text-transform: uppercase;font-size: 7px;font-family: Poppins;letter-spacing: 1px;font-weight: 700;padding: 0 4px; border-radius: 2px;} .carnet5 .rps .sujet:before {content: '\ebde';font-family:'cappuccicons';position:absolute;left: 24px; z-index: 2;color: var(--color-pill); opacity: .5;} .carnet5 .rps .sujet.fini:before {content: '\eb69';}</style>