<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: 20px;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="http://via.placeholder.com/100x100"><!--
--></label></div><div><div class="im-persona-content"><!--
--><h2>NOM</h2><!--
--><div class="im-persona-bubble">ICI</div><!--
--><div class="im-persona-bubble">ICI</div><!--
--></div><div class="im-persona-label"><label for="im-persona">New message</label></div></div></div></div>
Accueil