<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;1,300&display=swap" rel="stylesheet"><div class="ficheBack"> <div class="ficheHead"> <img src="https://i.ibb.co/khSbGNd/tumblr-cacf78f796461c1b71a154c6d940d8ec-9e421b17-500.gif" /> <div class="infos"> <h3 class="titleRp"> <strong class="points" style="opacity: 0.4;">•</strong><strong class="points" style="opacity: 0.7;">•</strong><strong class="points" style="opacity: 1;">•</strong><strong class="avery-title">titre long ou court</strong> </h3><h3 class="featRp"> <strong class="avery-title">date • lieu • @feat</strong> </h3> </div> </div> <div class="rp"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis nisl ipsum. Pellentesque turpis quam, ultricies at lacinia ut, porta non orci. Ut a erat ligula. Nunc cursus est consequat nisl cursus sollicitudin. Aliquam hendrerit dolor vel neque ultrices, ac fermentum lacus porttitor. Duis eu congue diam, vel luctus magna. Nunc tincidunt blandit augue, molestie euismod diam condimentum ut. Duis vel lacus eleifend, fermentum libero quis, pulvinar quam. Ut volutpat odio eu mi pulvinar molestie. Integer sit amet nulla felis. Aenean ultrices enim sit amet ante scelerisque, eu tincidunt velit aliquam. Quisque enim odio, placerat ut massa ut, tincidunt varius risus. Vivamus sollicitudin tincidunt urna, nec sollicitudin ipsum condimentum eget. <br><br>— Oui, Avery ?<br><br> Curabitur id magna tincidunt, porttitor quam sit amet, gravida dui. Donec rhoncus magna justo, non ultrices nisl elementum et. Integer laoreet iaculis enim sed gravida.Suspendisse potenti. Donec vulputate sapien id massa condimentum luctus eget ac nisi. Nam eget orci ut turpis aliquet porta vel eget tortor. Donec varius eleifend leo, ut pellentesque orci finibus quis. Integer tristique est id porttitor volutpat. Proin pellentesque rhoncus urna id cursus. Ut non ipsum vel quam iaculis ornare efficitur ac mauris. Phasellus quis urna id enim varius commodo et et augue. Integer sit amet quam ut lorem scelerisque tristique. Cras eu auctor lorem. Nullam suscipit bibendum dapibus. Cras facilisis interdum justo rutrum egestas. Nunc dignissim erat nec augue pharetra, vel elementum justo varius. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras consequat id velit in pharetra. Ut sagittis tellus commodo lorem viverra, non tempor magna varius.</p> </div> <div class="notes"><span>notes</span></div><div class="creditAlly"><a href="https://swishancien.forumactif.com/" target="_blank" />ally</a></div></div>

<style>.ficheBack { width: 450px; background-color: #fff; margin: auto;}.ficheHead { background-color: #FEBCC7; min-height: 250px; cursor: default; overflow: hidden;}.ficheHead img { object-fit: cover; width: 450px; max-height: 200px; opacity: 0.7; transition: filter .5s ease-in-out; -webkit-filter: grayscale(0%); filter: grayscale(0%); }.ficheHead img:hover { -webkit-filter: grayscale(100%); filter: grayscale(100%);}.ficheHead h3 { color: #fff; font-family: 'Poppins'; text-transform: uppercase; font-style: italic; font-size: 20px; margin-top: 5px; padding-bottom: 5px;}.ficheHead strong { vertical-align: middle;}.ficheHead .points { letter-spacing: -5px; font-size: 40px;}.ficheHead .avery-title { padding-left: 12px;}.titleRp { text-align: left; padding-left: 20px; line-height: 1.5em; vertical-align: middle; transition: all 0.5s linear; transition-delay: 0.2s; margin: 0; position: absolute;}.featRp { text-align: left; padding-right: 20px; line-height: 2em; vertical-align: middle; transition: 0.5s; font-size: 15px!important; text-transform: lowercase!important; margin: 0; position: relative; transition-duration: all 1s linear; transform: translate(300%, 0);}.infos:hover .featRp { transition-duration: all 0.5s linear; transition-delay: 0.6s; transform: translate(5%, 0); visibility: visible;}.infos:hover .titleRp { transition-duration: all 0.5s linear; opacity: 0; visibility: hidden;}.infos { display: inline-flex; width: 430px; margin-top: 5px;}.rp { display: flex; width: 368px; overflow: auto; font-size: 12px; font-family: 'Poppins'; flex-direction: column; text-align: justify; background-color: #FDFDFD; padding: 20px 40px 20px 40px; color: #666; border: 1px solid #FEBCC7;}.notes { font-size: 12px; cursor: default; font-family: 'Poppins'; color: #fff; font-weight: bold; width: 430px; background-color:#FEBCC7; text-align: justify; padding: 10px; text-transform: uppercase;}.creditAlly { text-align: right; font-size: 9px; width: 450px; font-family: 'Poppins'; margin: auto;}.creditAlly a { text-decoration: none; color: #ccc;}</style>

<style>@charset "UTF-8";.back-art { margin: auto; width: 500px; overflow: hidden; color: #fff; border: 4px solid #fff; outline: 1px solid #fff; outline-offset: -4px; box-shadow:-1px 0 #9D4654, 0 1px #9D4654, 1px 0 #9D4654, 0 -1px #9D4654; min-height: 600px;}.back-art .bg-art { background: #fafafa; height: 155px; width: 500px; max-width: 500px; object-fit: cover; -webkit-clip-path: polygon(0 0, 80% 0, 80% 80%, 0 40%);clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0); position:absolute; transition: 1s;}.bg-art:hover { -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: 1s;}.infos-art { position: absolute; z-index: 100; margin-left: -30px; margin-top: 5px; max-width: 330px; padding: 50px; max-height: 125px; overflow: hidden;}.icon-art { position: relative; border: 2px solid #9D4654; width: 100px; height: 100px; border-radius: 50%; float: left; margin-right: 10px;}.cita-art { max-height: 60px!important; margin-top: 14%; text-align: justify; word-break: break-word; overflow: hidden;}.cita-art > div > h2, .cita-art > div > h3 { line-height: 1.5; margin: 0; color: #000; font-weight: 400; font-family: inherit;}.cita-art > div > h2 b { font-family: 'Montserrat', sans-serif; font-weight: bold; font-size: 13px; line-height: 1.5em; border:0;}.cita-art > div > h2 { text-transform: lowercase;}.cita-art > div > h3 { font-size: 9px; letter-spacing: 1px; font-family: 'Poppins', sans-serif; text-align-last: justify; text-transform: uppercase; max-width: 310px;}.back-art .border {border: 1px solid #9D4654; height: 1px; background: #9D4654; position: relative; transform: rotate(17.2deg); top: 90px; width: 700px; left: -10px; margin-left: -50px;}.back-art .top { padding-bottom: 10px; height: 200px; position: relative; overflow: hidden;}.back-art .top:before { width: 600px; height: 400px; transform: rotate(14.6deg); display: block; content: ''; position: absolute; left: 5%; top: -154%;}.rp-art { max-width: 500px; height: auto; margin: auto;/* border-top: 2px dashed #9D4654; */ margin-top: 35%; padding: 5px 50px 20px 50px; text-align: justify; font: 12px "Poppins", sans-serif; color: #666;}.rp-art p { font-family: 'Poppins'; font-size: 12px;}.rp-art h1 { line-height: 0.8; font-family: 'Parisienne'; font-size: 35px; font-weight: 700; max-width: 250px; color: #9D4654; text-align: center; margin: auto; margin-bottom: 30px; left: 50%; text-transform: lowercase; border-bottom: 2px solid #9D4654;}.rp-art p::first-letter { color: #9D4654; font-size: 130%;}.pulse-button {background: #9D4654;border-radius: 50%;animation: pulse 2s infinite;}@keyframes pulse {0% {box-shadow: 0 0 0 0 rgb(157, 70, 84);;}70% {box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);}100% {box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);}} .creditAlly-art { text-align: right; font-size: 9px; width: 510px; font-family: 'Poppins'; margin: auto;}.creditAlly-art a { text-decoration: none; color: #ccc;}</style>

<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Parisienne&family=Train+One&display=swap" rel="stylesheet"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&display=swap" rel="stylesheet"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet"><div class="back-art"> <div class="infos-art"> <img src="https://i.ibb.co/Sc9SpFf/100100gifparty.gif" class="icon-art pulse-button" /><div class="cita-art"> <div> <h2><b>ft. Someone</b></h2><h3>c'est une super citation qu'on voit là clique dessus pour voir ah nan ça fait rien mdr dommage t'as perdu ton temps cheh cheh</h3> </div> </div> </div> <div class="bg-art" style="background-image: url(https://i.ibb.co/6rpmzXW/recadrer.gif);"></div> <div class="border"></div> <div class="rp-art"> <h1>TITRE DU RP</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat ipsum et magna faucibus aliquam. Ut nec neque pharetra, sollicitudin eros vel, vestibulum est. Nulla erat quam, viverra in ultricies vitae, porta et ligula. Ut mattis interdum augue eget gravida. Aenean vel est vitae lectus vehicula laoreet eget tempus nisl. Nunc quis bibendum magna. Cras rutrum ullamcorper turpis at consectetur. Nunc ornare libero vel cursus laoreet. Sed quis placerat ex, blandit volutpat justo. Pellentesque eget justo vestibulum ipsum auctor posuere at at est.

— [color=#9D4654]Hey toi là ! Tu perds du temps en lisant cette phrase.[/color]

Cras pretium vel sem id hendrerit. Quisque ullamcorper semper malesuada. Curabitur non ipsum non elit rhoncus laoreet. Aliquam erat volutpat. Cras mauris nunc, laoreet vitae augue in, consectetur pulvinar metus. Quisque luctus arcu id bibendum feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris ante nibh, cursus vel bibendum et, dictum in turpis. Nulla sed hendrerit justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada condimentum dolor, nec elementum nunc molestie commodo. Mauris suscipit orci a lacus aliquet consectetur. Ut feugiat sodales fermentum. In quis velit vel lectus vestibulum semper vel id nulla. Curabitur malesuada leo ac tortor tempor, vel ullamcorper nisi consequat. Ut volutpat eros a diam condimentum, id ultrices diam consectetur. Nulla accumsan aliquet venenatis. Aliquam varius eros ac orci aliquet dignissim. Duis iaculis mollis turpis finibus pretium. Integer elementum quis mi id maximus. Proin vel sodales tellus. Donec ut enim at justo lobortis faucibus eu vel augue. Curabitur tempor faucibus nibh sed sollicitudin.</p> </div> </div><div class="creditAlly-art"><a href="https://codepen.io/Naelen" target="_blank" />ally for arty</a></div>

<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Parisienne&family=Train+One&display=swap" rel="stylesheet"><div class="back-artV2"> <div class="infos-artV2"> <img src="https://i.ibb.co/Sc9SpFf/100100gifparty.gif" class="icon-artV2 pulse-button-artV2" /><div class="cita-artV2"> <div> <h2><b>ft. Someone</b></h2><h3>c'est une super citation qu'on voit là clique dessus pour voir ah nan ça fait rien mdr dommage t'as perdu ton temps</h3> </div> </div> </div> <div class="bg-artV2" style="background-image: url(https://i.ibb.co/6rpmzXW/recadrer.gif);"></div> <div class="borderV2"></div> <div class="rp-artV2"> <h1>TITRE DU RP</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat ipsum et magna faucibus aliquam. Ut nec neque pharetra, sollicitudin eros vel, vestibulum est. Nulla erat quam, viverra in ultricies vitae, porta et ligula. Ut mattis interdum augue eget gravida. Aenean vel est vitae lectus vehicula laoreet eget tempus nisl. Nunc quis bibendum magna. Cras rutrum ullamcorper turpis at consectetur. Nunc ornare libero vel cursus laoreet. Sed quis placerat ex, blandit volutpat justo. Pellentesque eget justo vestibulum ipsum auctor posuere at at est.

— [color=#9D4654]Hey toi là ! Tu perds du temps en lisant cette phrase.[/color]

Cras pretium vel sem id hendrerit. Quisque ullamcorper semper malesuada. Curabitur non ipsum non elit rhoncus laoreet. Aliquam erat volutpat. Cras mauris nunc, laoreet vitae augue in, consectetur pulvinar metus. Quisque luctus arcu id bibendum feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris ante nibh, cursus vel bibendum et, dictum in turpis. Nulla sed hendrerit justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada condimentum dolor, nec elementum nunc molestie commodo. Mauris suscipit orci a lacus aliquet consectetur. Ut feugiat sodales fermentum. In quis velit vel lectus vestibulum semper vel id nulla. Curabitur malesuada leo ac tortor tempor, vel ullamcorper nisi consequat. Ut volutpat eros a diam condimentum, id ultrices diam consectetur. Nulla accumsan aliquet venenatis. Aliquam varius eros ac orci aliquet dignissim. Duis iaculis mollis turpis finibus pretium. Integer elementum quis mi id maximus. Proin vel sodales tellus. Donec ut enim at justo lobortis faucibus eu vel augue. Curabitur tempor faucibus nibh sed sollicitudin.</p> </div> </div><div class="creditAlly-artV2"><a href="https://codepen.io/Naelen" target="_blank" />ally for arty</a></div>

<style>@charset "UTF-8";.back-artV2 { margin: auto; width: 500px; overflow: hidden; color: #fff; border: 4px solid #fff; outline: 1px solid #fff; outline-offset: -4px; box-shadow:-1px 0 #9D4654, 0 1px #9D4654, 1px 0 #9D4654, 0 -1px #9D4654; min-height: 600px;}.back-artV2 .bg-artV2 { background: #fafafa; height: 155px; width: 500px; max-width: 500px; object-fit: cover; -webkit-clip-path: polygon(0 0, 80% 0, 80% 80%, 0 40%);clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0); position:absolute; transition: 1s;}.bg-artV2:hover { -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: 1s;}.infos-artV2 { position: absolute; z-index: 100; margin-left: -30px; margin-top: 4px; max-width: 500px; padding: 50px; max-height: 105px; overflow: hidden;}.icon-artV2 { position: relative; border: 2px solid #9D4654; width: 110px; height: 110px; border-radius: 50%; float: left; margin-right: 10px;}.cita-artV2 { margin-top: 3%; text-align: justify; word-break: break-word; overflow: hidden; margin-left: 35%;}.cita-artV2 > div > h2, .cita-artV2 > div > h3 { margin: 0; color: #000; font-weight: 400; font-family: inherit;}.cita-artV2 > div > h2 b { font-family: 'Montserrat', sans-serif; font-size: 25px; line-height: 1.5em; text-shadow: 2px 2px white; color: #9D4654; border: 0;}.cita-artV2 > div > h2 { text-transform: lowercase; text-align: right;}.cita-artV2 > div > h3 { font-size: 11px; letter-spacing: 1px; font-family: 'Poppins', sans-serif; text-align-last: justify; text-transform: uppercase; color: #fff; text-shadow: 1px 1px #000; max-width: 310px; line-height: 1; margin-top: -5px; max-height: 65px;}.back-artV2 .borderV2 {border: 1px solid #9D4654; height: 1px; background: #9D4654; position: relative; transform: rotate(17.2deg); top: 90px; width: 700px; left: -10px; margin-left: -50px;}.rp-artV2 { max-width: 500px; height: auto; margin: auto; /* border-top: 2px dashed #9D4654; */ margin-top: 33%; padding: 5px 50px 20px 50px; text-align: justify; font: 12px "Poppins", sans-serif; color: #666;}.rp-artV2 p { font-family: 'Poppins'; font-size: 12px;}.rp-artV2 h1 { font-family: 'Parisienne'; font-size: 35px; font-weight: 700; line-height: 0.8; max-width: 250px; color: #9D4654; text-align: center; margin: auto; margin-bottom: 30px; left: 50%; text-transform: lowercase; border-bottom: 2px solid #9D4654;}.rp-artV2 p::first-letter { color: #9D4654; font-size: 130%;}.pulse-button-artV2 {background: #9D4654; margin-top: -10px;border-radius: 50%;animation: pulse 2s infinite;}@keyframes pulse {0% {box-shadow: 0 0 0 0 rgb(157, 70, 84);;}70% {box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);}100% {box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);}} .creditAlly-artV2 { text-align: right; font-size: 9px; width: 510px; font-family: 'Poppins'; margin: auto;}.creditAlly-artV2 a { text-decoration: none; color: #ccc;}</style>