News Accueil

Terrible

Libre-service de codages pour vos forums


IM Persona

par Awful le le Jeu 19 Avr - 11:15

Awful

Dit :

Votre texte ici
La bulle s'agrandira selon la quantité de texte. Écrivez autant que vous voulez.
Allez une dernière.


Cliquez sur "New message" pour afficher le texte puis sur l'image pour le masquer.

Code:
<style>@import url('https://fonts.googleapis.com/css?family=Montserrat:900|PT+Sans');.im-persona {width: 400px;font-family: 'PT Sans', sans-serif;padding: 10px;background: rgb(212, 212, 212);border: 1px solid #bcbcbc;margin: auto;position: relative;}.im-persona-head {display: flex;padding: 20px;background-image: url("https://i.imgur.com/iWmrmW9.png");}.im-persona-icon {width: 100px;height: 100px;margin-right: 20px;border-radius: 50%;border-style: solid;border-width: 2px;padding: 10px;position: relative;}.im-persona-icon:before {content:"";left: -2px;top: -2px;position: absolute;width: 124px;height: 124px;margin-right: 20px;border-radius: 50%;border-style: solid;border-width: 2px;border-color: #999 #fff #999 #fff;padding: 10px;background: rgba(255,255,255,0.5);box-shadow: 0 0 0 5px rgba(255,255,255,0.3);animation: tourne 1s linear infinite;box-sizing: border-box;}.im-persona-icon img {width: 100px;height: 100px;border-radius: 50%;transform: rotate(0deg);}.im-persona-icon + div {align-self: center;box-sizing: border-box;height: 124px;overflow: hidden;flex: 1;}.im-persona-content {transform: translate(0, -124px);background: #fff;height: 124px;flex: 1;height: 124px;border: 10px solid #fff;box-sizing: border-box;overflow: auto;border-radius: 3px;transition: all 0.3s;}.im-persona-head h2 {font-family: 'Montserrat', sans-serif;font-size: 30px;font-weight: 900;margin: 0;line-height: 0.9;color: #cb171c;}.im-persona-head h3 {margin: 0 0 5px;font-size: 11px;font-weight: normal;text-transform: uppercase;letter-spacing: 1px;}.im-persona-bubble {background: rgb(228, 228, 228);font-size: 10px;padding: 8px;border-radius: 3px;position: relative;margin-left: 10px;margin-bottom: 8px;}.im-persona-bubble:last-child {margin-bottom: 0px;}.im-persona-bubble:after {content:"";position: absolute;left: -10px;top: calc(50% - 5px);width: 0;height: 0;border-style: solid;border-width: 5px 10px 5px 0;border-color: transparent rgb(228, 228, 228) transparent transparent;}.im-persona-label {height: 124px;transition: all 0.3s;transform: translate(0, -124px);line-height: 124px;}.im-persona-label label {color: #fff;font-family: 'Montserrat', sans-serif;font-size: 25px;font-weight: 900;text-transform: uppercase;border-top: 5px solid #cb171c;border-bottom: 5px solid #cb171c;padding: 10px 0;cursor: crosshair;transition: all 0.3s;}.im-persona input {display: none;}.im-persona input:checked + div + div .im-persona-content,.im-persona input:checked + div + div .im-persona-label{transform: translate(0,0);}.im-persona input:checked + div > label{cursor: crosshair;}.im-persona input + div > label {cursor: auto;}.im-persona-credit {position: absolute;bottom: -18px;left: 0;}.im-persona-credit a {text-decoration: none!important;font-size: 8px;text-transform: uppercase;letter-spacing: 1px;}.im-persona-content:nth-child(2)::-webkit-scrollbar { width: 2px;}.im-persona-content:nth-child(2)::-webkit-scrollbar-track { background-color: #efefef;}.im-persona-content:nth-child(2)::-webkit-scrollbar-thumb { background-color: #cf8d8d; }@keyframes tourne {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style>
<div class="im-persona"><div class="im-persona-credit"><a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div><div class="im-persona-head"><input type="radio" id="im-persona" name="im-persona"><div class="im-persona-icon"><label for="close"><input type="radio" name="im-persona" id="close"><!--
--><img src="https://store.playstation.com/store/api/chihiro/00_09_000/container/US/en/999/UP2611-NPUB31848_00-PERSONA5THEME001/1520939489000/image?w=240&h=240&bg_color=000000&opacity=100&_version=00_09_000"><!--
--></label></div><div><div class="im-persona-content"><!--
--><h2>Awful</h2><!--
--><h3>Dit :</h3><!--
--><div class="im-persona-bubble">Votre texte ici</div><!--
--><div class="im-persona-bubble">La bulle s'agrandira selon la quantité de texte. Écrivez autant que vous voulez.</div><!--
--><div class="im-persona-bubble">Allez une dernière.</div><!--
--></div><div class="im-persona-label"><label for="im-persona">New message</label></div></div></div></div>