Le Deal du moment :
Coffret Pokémon Bundle 6 Boosters EV05 Forces ...
Voir le deal

Terrible :: Codes messages :: Divers
Awful
Jeu 19 Avr - 11:15
Awful

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://i.imgur.com/EqiT1qR.jpg"><!--
--></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>