Codes contenu de message

<input id="EDITER" type="checkbox" name="faq"><label for="EDITER">

<style>@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');:root {--accent-color: #7154aa;}.faq-wrap {background: #fff;width: 100%;max-width: 700px;margin: auto;font-family: 'Source Sans Pro', sans-serif;}.faq-wrap h2 {font-size: 12px;text-align: center;background: #000;color: #fff;line-height: 6;margin: 0;text-transform: uppercase;letter-spacing: 0.3em;font-family: 'Source Sans Pro', sans-serif;font-weight: bold;}.faq-item {position: relative;margin-bottom: 1px;color: #000;overflow: hidden;border-bottom: 1px solid #ccc;-webkit-transition: all 0.4s;transition: all 0.4s;}.faq-item:hover {border-color: var(--accent-color);}.faq-item input {position: absolute;opacity: 0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";z-index: -1;}.faq-item label {position: relative;display: block;padding: 2em 4em!important;font-weight: bold;cursor: pointer;-webkit-transition: all 0.4s;transition: all 0.4s;font-size: 15.7px;line-height:19px;}.faq-item label b {font-size: 0.75em;position: absolute;margin-left: -2em;margin-top: 0.3em;color: #000!important;font-weight: normal;}.faq-item:hover label {padding-left:3em!important;color: var(--accent-color);}.faq-content {max-height: 0;overflow: hidden;-webkit-transition: max-height .4s;transition: max-height .4s;}.faq-content p {line-height:1.3846; font-family:'Source Sans Pro', sans-serif;margin: 2em;font-size: 12px;text-align: justify;}.faq-item input:checked ~ .faq-content {max-height: 600px;}.faq-item input[type=checkbox] + label:after {content: "+";color: #888;position: absolute;right: 40px;top: 2em;-webkit-transition: 0.4s;transition: 0.4s;}.faq-item input[type=checkbox]:checked + label:after {content: "-";}.faq-item:hover input[type=checkbox] + label:after {right: 20px;}.faq-credit a {text-decoration: none!important;font-size: 8px;color: #ccc!important;text-transform: uppercase;letter-spacing: 1px;}</style>
<div class="faq-wrap"><h2>Questions fréquentes</h2><!--

--><div class="faq-item"><input id="faq-one" type="checkbox" name="faq"><label for="faq-one"><b>01</b>Label One</label><!--
--><div class="faq-content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p></div></div><!--

--><div class="faq-item"><input id="faq-two" type="checkbox" name="faq"><label for="faq-two"><b>02</b>Label Two</label><!--
--><div class="faq-content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p><!--

--></div></div><div class="faq-item"><input id="faq-three" type="checkbox" name="faq"><label for="faq-three"><b>03</b>Que se passe-t-il si j'écris une super longue question qui s'étendra probablement sur plusieurs lignes ? </label><div class="faq-content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p></div></div><!--
--><div class="faq-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>

<style>@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,800');:root {--main-color: #35c0cb;}.news {width: 500px;margin: auto;font-family: 'Open Sans', sans-serif;overflow: hidden;}.header-news {background: var(--main-color);padding: 50px 0;position: relative;}.header-news h2 {margin: 0;color: #fff;text-align: center;font-weight: 800;text-transform: uppercase;}.header-news h2 i {display: block;font-size: 15px;font-weight: normal;font-style: normal;}.header-news::before,.header-news::after {content: "";width: 0;height: 0;border-style: solid;border-width: 50px 250px 0 250px;border-color: var(--main-color) transparent transparent transparent;position: absolute;bottom: -50px;}.header-news::before {bottom: -60px;opacity: 0.4;border-width: 60px 285px 0 285px;left: -35px;}.news-content {background: #fff;padding: 80px 20px 20px;font-size: 11px;text-align: justify;}.news-content h3 {margin: 15px 0 0 5px;font-size: 15px;text-transform: uppercase;font-weight: 800;}.news-content h3::before {content: "◆";color: var(--main-color);margin-right:5px;}.join {margin: 40px 0 20px;text-align: center;}.join a {text-decoration: none;color: var(--main-color);text-transform: uppercase;font-size: 10px;letter-spacing: 1px;}.footer-news {background: var(--main-color);padding: 20px 0;}.footer-news h4,.news-team h5 {margin: 0 0 20px;color: #fff;text-align: center;font-weight: normal;text-transform: uppercase;font-size: 10px;letter-spacing: 1px;}.news-team-wrap {display: flex;justify-content: space-around;}.news-team {text-align: center;width: 100px;}.news-team img {border-radius: 50%;height: 50px;width: 50px;border: 3px solid #2ea9b3;}.news-team h5 {margin: 5px 0 0;font-size: 9px;}.news-team h5.role {margin-bottom: 5px;margin-top:0;font-weight: 600;}.news-credit {text-align: center;}.news-credit a {text-decoration: none!important;color: #ccc;font-size: 9px;letter-spacing: 1px;}.news-credit xmp {display: inline;font-family: inherit;}</style>

<div class="news"><div class="header-news"><!--
--><h2>Nom du forum<i>News du 25/12</i></h2><!--
--></div><div class="news-content"><!--
--><h3>Titre lorem ipsum</h3>
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.
<h3>Titre lorem ipsum</h3>
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 class="join"><a href="#">× Rejoignez-nous sur Nom du forum ! ×</a></div></div><!--
--><div class="footer-news"><h4>La team</h4><!--
--><div class="news-team-wrap"><!--
--><div class="news-team"><h5 class="role">fonda</h5><!--
--><img src="http://via.placeholder.com/50x50"><!--
--><h5>Pseudo</h5><!--
--></div><!--
--><div class="news-team"><h5 class="role">Admin</h5><!--
--><img src="http://via.placeholder.com/50x50"><!--
--><h5>Pseudo</h5><!--
--></div><!--
--><div class="news-team"><h5 class="role">Modo</h5><!--
--><img src="http://via.placeholder.com/50x50"><!--
--><h5>Pseudo un peu plus long</h5><!--
--></div></div></div><div class="news-credit"><a href="http://terrible.forumactif.org/" target="_blank"><xmp></> awful</xmp></a></div></div>

<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><style>.wrap-phone {width: 250px;height: 450px;border-radius:25px;margin: auto;position: relative;background-color: #444;border: 1px solid #2f2f2f;font-family: 'Roboto', sans-serif;}.cadre-phone {width: 220px;height: 340px;background-color: #fff;margin: 50px auto 15px;}.haut-phone {background-color: #f1f5f8;height: 50px;padding-top: 1px;box-sizing: border-box;border-bottom: 1px solid #fff;box-shadow: 0 1px 0 #e6e6e6;}.haut-phone div {width: 32%;display: inline-block;vertical-align: top;font-size: 10px;}.haut-phone div:nth-child(4),.haut-phone div:nth-child(5),.haut-phone div:nth-child(6) {margin-top: 10px;}.points, .messages {padding-left: 4px;box-sizing: border-box;}.points span {display: inline-block;height: 5px;width: 5px;border-radius: 50%;background-color: #000;margin-right: 1px;margin-top: 4px;}.heure, .nom{text-align: center;}.batterie, .details {text-align: right;width: 30%!important;}.messages, .details {color: #0055f4;}.mid-phone {height: 260px;position:relative;overflow:hidden;width:100%;}.mid-inner{overflow-x: hidden;overflow-y: scroll;height:100%;width:110%;}.scrollbar{text-align:justify;height:100%;width:100%;}bulle, bulle-rep {display: block;width: 70%;background: #e5e4ea;border-radius: 10px;padding: 8px;margin: 0 10px;font-size: 12px;position: relative;}bulle:after, bulle-rep:after {content: "";width: 0;height: 0;border-style: solid;border-width: 10px 10px 0 0;border-color: transparent #e5e4ea transparent transparent;position: absolute;bottom: 4px;left: -7px;}bulle-rep {background: #48bbfc;margin-left: 15%;color: #fff;}bulle-rep:after {border-width: 10px 0 0 10px;border-color: transparent transparent transparent #48bbfc;left: initial;right: -7px;}.bas-phone {background-color: #f1f5f8;height: 30px;margin-top: 1px;padding: 7px 5px;box-sizing: border-box;border-top: 1px solid #fff;box-shadow: 0 -1px 0 #e6e6e6;color: #abaaaa;}.reponse {width: 55%;background: #fff;color: #ccc;font-size: 13px;border: 1px solid #ccc;border-radius: 5px;padding: 0 6px;display: inline-block;margin: -2px 10px;vertical-align: top;position: relative;}.reponse:after {content: "Envoyer";right: -48px;position: absolute;font-size: 11px;top: 1px;}.credit {position: absolute;width: 100%;text-align: center;text-transform: uppercase;font-size: 8px;letter-spacing: 3px;margin-top: 20px;}.credit a {color: #ccc!important;text-decoration: none!important;}cercle {display: block;height: 30px;width: 30px;background: #2f2f2f;border-radius: 50%;margin: auto;}</style><div class="wrap-phone"><div class="credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful phone</a></div><div class="cadre-phone"><div class="haut-phone"><div class="points"><span></span><span></span><span></span><span></span><span></span></div><div class="heure">9:41 AM</div><div class="batterie"><i class="fa fa-battery-full" aria-hidden="true"></i></div><div class="messages"><i class="fa fa-chevron-left" aria-hidden="true"></i> Messages</div><div class="nom">Prénom</div><div class="details">Details</div></div><div class="mid-phone"><div class="mid-inner"><div class="mid">
<bulle>Coucou</bulle>
<bulle-rep>Je suis une bulle et je m'étire si besoin, autant que possible alors on va écrire un long texte pour voir ça.</bulle-rep>
<bulle-rep>J'aime le poulet et les patates</bulle-rep><!--
--></div></div></div><div class="bas-phone"><i class="fa fa-camera" aria-hidden="true"></i><div class="reponse">Message</div></div></div><cercle></cercle></div>

<link href="https://fonts.googleapis.com/css?family=Poppins:700|Hind+Siliguri" rel="stylesheet"><style>.wrap-starry {width: 500px;height: 470px;overflow: hidden;position: relative;font-family: 'Hind Siliguri', sans-serif;margin:auto;}.starry-header {height: 40px;}.starry-header h3 {margin: 0 0 -20px;font: normal 10px 'Trebuchet MS', sans-serif;text-transform: lowercase;letter-spacing: 2px;position: relative;color: #7ce1cf;}.starry-header h2 {margin: 0;text-transform: lowercase;letter-spacing: -3px;font: 800 40px 'Poppins', sans-serif;color: #a8a8a8;}.starry-header h2:first-letter {color: #7ce1cf;}.starry-img {float: left;margin-right:15px;}.starry-txt {width: 335px;height: 400px;overflow: hidden;background-color: #f3f3f3;}.starry-scroll {overflow-x: hidden;overflow-y: scroll;height:100%;width:110%;}.starry-txt-content {width: 335px;height: 100%;padding: 20px;box-sizing: border-box;font: 10px/125% 'Trebuchet MS', sans-serif;text-align: justify;color: #424242;}.starry-txt-bot {height: 20px;width: 1px;}.starry-bot {height: 10px;width: 90%;background-color: #7ce1cf;margin-top: 10px;float: left;}.starry-cred {width: 10%;height: 10px;margin-top: 10px;display: inline-block;text-align: right;}.starry-cred a {font: 800 10px/10px 'Poppins', sans-serif;text-transform: uppercase;text-decoration: none!important;color: #ccc!important;}</style><div class="wrap-starry"><!--
--><div class="starry-header"><!--
--><h3>Feat alias 1 & alias 2</h3><!--
--><h2>starry sky.</h2><!--
--></div><!--
--><img src="http://placehold.it/150x400" class="starry-img" alt="" /><!--
--><div class="starry-txt"><!--
--><div class="starry-scroll"><!--
--><div class="starry-txt-content">
Texte ici
<div class="starry-txt-bot"></div></div></div></div><div class="starry-bot"></div><div class="starry-cred"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>

<style>@import url('https://fonts.googleapis.com/css?family=Montserrat:400,900|Roboto');.heart {width: 500px;margin: auto;background: #fff;font-family: 'Roboto', sans-serif;position: relative;}.heart a {text-decoration: none!important;}.heart-header {background: #de8193;display: flex;padding: 20px;margin-bottom: 40px;}.heart-header > div {padding: 10px;width: 100px;height: 100px;border-color: #fff;border-style: dotted;border-width: 1px 3px 1px 3px;margin: auto;border-radius: 50%;}.heart-header > div img {width: 100px;height: 100px;border-radius: 50%;}.heart-header h2 {margin: 0 20px 0 0;font-weight: normal;flex: 1;font-size: 25px;line-height: 28px;font-family: 'Montserrat', sans-serif;align-self: center;color: #fff;text-shadow: 1px 1px 0 #c94e62;}.heart .heart-txt {width: 370px;margin: 0 auto 15px;text-align: justify;font-size: 10px;}.heart .heart-txt b {color: #de8193;font-family: 'Montserrat', sans-serif;}.heart .heart-txt u {border-bottom: 1px solid #de8193;text-decoration: none;}.heart .heart-txt a {color: #c94e62;transition: color 0.3s;}.heart .heart-txt a:hover {color: #de8193;}.heart-footer {background: #de8193;padding: 20px 65px;margin-top: 40px;display: flex;}.heart-footer tag {background: #fff;color: #c94e62;padding: 2px 6px;font-size: 11px;border-radius: 10px;font-family: 'Montserrat', sans-serif;}.heart-footer div {color: #fff;font-size: 7px;text-transform: uppercase;letter-spacing: 1px;align-self: center;flex: 1;margin-left: 5px;}.heart-credit {position: absolute;bottom: -15px;}.heart-credit a {color: #ccc!important;font-size: 8px;text-transform: uppercase;letter-spacing: 1px;}</style>
<div class="heart"><div class="heart-header"><!--
--><h2>There is no charm equal to <b>tenderness of heart</b>.</h2><!--
--><div><!--
--><img src="https://image.noelshack.com/fichiers/2018/11/5/1521189332-tumblr-inline-mrk1punosl1qz4rgp.jpg" alt="" /><!--
--></div></div><div class="heart-txt"><!--
--><b>Texte en gras</b>. <i>Italique</i>. <a href="">Lien</a>. <u>Souligné</u>.
</div><div class="heart-footer"><!--
--><tag>feat alias</tag><!--
--><div>Des petites notes ici</div><!--
--></div><div class="heart-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div></div>

<style>.content_rp_artemis {width: 520px; margin: auto; text-align: center; background: #f3f3f3; padding: 20px; color: #2e2e2e; font-family: 'Roboto'; position: relative;} .content_rp_artemis img {width: 200px; height: 200px; margin: 3px; padding-bottom: 5px; border-bottom: 1px solid #b8b8b8; filter: grayscale(100%); transition: all 0.4s; margin-bottom: 10px;} .content_rp_artemis img:hover {filter: none;} .content_rp_artemis h4 {margin: auto; width: 300px; font-family: 'Vidaloka'; text-transform: uppercase; font-weight: normal; font-size: 25px; font-style: oblique;} .content_rp_artemis div {font-family: 'Nunito'; margin-top: 5px; font-size: 14px;} .content_rp_artemis p {padding: 15px; line-height: 12px; font-size: 12px; text-align: justify; -webkit-column-count:2; column-count:2;} .copyright_artemis {position: absolute; bottom: 0; right: 0; font-size: 10px;} .copyright_artemis a {text-decoration: none;  color: #2e2e2e;}</style>

<link href="https://fonts.googleapis.com/css?family=Nunito|Roboto|Vidaloka" rel="stylesheet"/><div class="content_rp_artemis"><img src="https://i.pinimg.com/564x/ff/cb/fc/ffcbfc5015cabe6781f4bae7a1ce5f00.jpg" alt="image_rp"/><img src="https://i.pinimg.com/564x/ff/cb/fc/ffcbfc5015cabe6781f4bae7a1ce5f00.jpg" alt="imagerp"/><h4>Titre du RP</h4><div>“ Ta Citation juste là ”</div><p> Ut commodo purus vitae dui fermentum, et interdum tortor bibendum. Vestibulum magna tellus, imperdiet finibus augue sed, venenatis imperdiet lectus. Duis id ipsum dolor. Nullam viverra lacinia lacus sit amet faucibus. Sed venenatis molestie sagittis. Integer id volutpat justo, eu finibus velit. Integer quis cursus arcu. Sed fringilla commodo pulvinar. Nunc eu congue lorem, id blandit sapien. Integer dignissim, orci vitae interdum vehicula, mi tellus maximus ipsum, non rutrum ligula purus ac diam. Mauris placerat in lectus et consequat. Aenean sed ullamcorper justo, at pharetra neque. Donec tristique nisl sit amet erat congue lacinia quis eu ex. Cras ac egestas lacus.

Sed risus dolor, pellentesque sit amet sollicitudin quis, vehicula quis eros. Sed a tellus sit amet dolor blandit luctus tempor vel mauris. Nunc ut tincidunt eros. Aenean metus dolor, faucibus ut gravida in, eleifend in urna. Integer gravida ornare est in mattis. Etiam in lorem sed ante dignissim posuere. Nam ut posuere est. Aliquam tincidunt arcu eu purus tristique elementum. In eget dui volutpat, dignissim arcu ornare, mollis ipsum. Phasellus dictum malesuada risus a pretium. Sed vitae mi nisi. Nunc condimentum scelerisque magna ac iaculis. Nam nec nulla condimentum, aliquet elit in, efficitur nunc. Quisque pretium metus augue.

Integer posuere ex ut metus volutpat venenatis pulvinar vel sem. Vivamus quam lectus, sodales ac pharetra at, pellentesque id eros. Nunc imperdiet nibh at tellus blandit, id suscipit odio suscipit. Nullam scelerisque neque libero, eleifend ullamcorper magna ullamcorper vitae. Vestibulum placerat lorem massa, ut feugiat nibh feugiat posuere. Nullam in aliquet orci. Aliquam malesuada rhoncus augue, a dictum purus.

Vivamus eget euismod nibh. Suspendisse ut congue est, in laoreet enim. Cras quis consectetur lacus. Sed quis odio vitae nibh aliquet pharetra. Nunc tincidunt sodales est, at suscipit velit eleifend in. Sed tempor tempus porta. Quisque fringilla, libero nec porttitor iaculis, quam est varius massa, in malesuada augue enim non dui. Fusce ac dictum diam, a molestie ipsum. Nunc placerat consequat dui in consectetur. Donec elit dolor, iaculis non nibh sit amet, viverra molestie mi. Donec et aliquam neque. Praesent ut porttitor orci. Nulla facilisi.</p><span class="copyright_artemis">artemis | <a href="http://www.epicode-entraide.com/">www</a></span>
</div>

<div class="fiche-fond-1"><div class="fiche-haut-1">titre du rp</div><div class="fiche-image"><img src="https://zupimages.net/up/18/34/zlgd.png"/></div><div class="fiche-centre-texte">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet, mauris vel convallis gravida, magna ex gravida odio, ac condimentum purus diam vitae massa. Donec in fringilla augue, eu rutrum nibh. Donec porttitor bibendum lectus, eget consequat lacus lobortis at. Cras tristique dictum dolor eu cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In posuere, libero id iaculis porttitor, neque ligula consectetur sem, eget sodales felis arcu nec enim. Cras vitae nunc non est tristique ornare. Sed volutpat mi diam, elementum lacinia eros eleifend at.<br><br>Vivamus et erat consequat, mollis erat vitae, ultrices neque. Nam velit augue, semper et accumsan in, hendrerit quis lectus. Nulla iaculis nulla nec pretium tempus. Morbi faucibus ultricies mi et finibus. Pellentesque a efficitur risus. Vivamus dictum sapien ut ultrices condimentum. Sed ut nisi non lacus elementum euismod. Nunc finibus erat vitae orci scelerisque luctus. Nullam faucibus metus a pellentesque pulvinar. Ut nec diam eget ligula malesuada tincidunt id at est. In lorem mi, faucibus eget lectus id, cursus congue enim. In placerat et turpis id facilisis. Donec quis ultrices purus. Maecenas a condimentum risus.</div></div><div class="cred">ASHLING POUR <a href="http://www.epicode-entraide.com/">EPICODE</a></div>
<style>.fiche-fond-1 {width: 480px; background-color: #fbfbfb; border: 1px solid #e0e0e0; padding: 10px; margin:auto;}.fiche-haut-1 {width: 440px; background: #202020; color:#e8bb32; line-height:18px; text-transform:uppercase; font-family:times new roman; font-size:15px; letter-spacing:4px; text-align: center; padding:20px; border-bottom: 4px solid #e8bb32;}.fiche-image {width:480px; border-bottom:4px solid #202020;}.fiche-image img {width:480px;}.fiche-centre-texte {background:#fff; border-bottom:1px solid #e0e0e0; border-right:1px solid #e0e0e0; border-left:1px solid #e0e0e0;text-align: justify; padding:20px; font-family: arial; font-size: 12px; line-height: 15px; color: #363636;}.cred{margin:auto;text-align:center;font-size:8px;font-family:arial;letter-spacing:2px;margin-top:10px;color:#A1A1A1}.cred a{color:#a1a1a1}</style>