<style>@import (url:'https://fonts.googleapis.com/css?family=Roboto:400,900'); .tracker-wrap * { box-sizing: border-box; } .tracker-wrap { width: 450px; height: 250px; background-color: #EAF1E9; position: relative; font-family: 'Roboto', sans-serif; margin: 0 auto 10px; box-sizing: border-box; } .tracker-wrap a, .tracker-wrap a:hover { text-decoration: none!important; } .tracker-header { height: 80px; width: 100%; background-color: #48534F; position: relative; } .tracker-header:after { content: ""; border-style: solid; border-width: 30px 450px 0 0; border-color: #48534F transparent transparent transparent; position: absolute; bottom: -30px; } .tracker-header img { position: absolute; width: 100px; height: 100px; border-radius: 50%; border: 5px solid #48534F; z-index: 2; left: 15px; bottom: -60px; } .tracker-header h2 { position: absolute; margin: 20px 0 0 140px; white-space: nowrap; text-transform: lowercase; color: #D6F0A6; font-size: 30px; font-family: inherit; font-weight: 900; line-height: 1.4em;} .tracker-header h3 { position: absolute; margin: 55px 0 0 140px; white-space: nowrap; text-transform: uppercase; font-weight: normal; font-size: 7px; color: #DEDDD8; letter-spacing: 1px; font-family: inherit;line-height: 1.3em; } .tracker { width: 310px; position: absolute; right: 10px; top: 110px; } .tracker label { padding: 0px 5px; position: relative; display: inline-block; float: left; height: 15px; cursor: pointer; color: #DEDDD8; line-height: 16px; font-size: 8px; letter-spacing: 1px; background: #48534F; margin: 0 10px 0 0; text-transform: uppercase; transition: all 0.3s; font-weight: bold; } .tracker label:hover { background: #252F2B; } .tracker input:checked + label,.tracker input:checked + label:hover { background: #bddb86; color: #fff; } .tracker input { display: none; } .tracker article { background: #fff; margin-top: 30px; overflow: hidden; height: 100px; transform: scale(0); position: absolute; width: 310px; transition: all 0.5s linear; padding: 10px 15px; box-sizing: border-box; overflow: auto; font-size: 11px; line-height: 110%; text-align: justify; } .tracker article div::before { content: "►"; position: absolute; margin-left: -10px; color: #bddb86; font-size: 9px; margin-top: -1px; } .tracker article div i { font-size: 9px; display: block; } .tracker article div a { font-size: 9px; letter-spacing: 1px; color: #b2afbf; font-weight: bold; text-transform: uppercase; transition: all 0.3s; } .tracker article div a:hover { color: #48534F; } .tracker input:checked + label + article { transform: scale(1); } .credit { width: 100%; position: absolute; bottom: -14px; text-align: center; } .credit a { color: #ccc!important; letter-spacing: 1px; font-size: 8px; } .tracker article::-webkit-scrollbar { width: 4px; } .tracker article::-webkit-scrollbar-track { background-color: #A1A2A7; } .tracker article::-webkit-scrollbar-thumb { background-color: #48534F; }</style>
<div class="tracker-wrap"><div class="tracker-header"><img src="http://pa1.narvii.com/6423/9845a3a5fc651f879d8956b82efeba77c99a3e6a_128.gif" alt="" /><h2>Dead Master</h2><h3>Innocence is a kind of insanity</h3></div><div class="tracker"><!--
*** Case 1 ***
--><input id="case-1" name="tracker" type="radio" checked /><label for="case-1">About</label><!--
--><article>Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if you're not willing to play by his rules, then you're gonna have to pay the price.</article><!--
*** Case 2 ***
--><input id="case-2" name="tracker" type="radio" /><label for="case-2">RPs en cours</label><!--
--><article><div><a href="#">Titre du RP</a><i>Feat nom du personnage</i></div>
<div><a href="#">Titre du RP</a><i>Feat nom du personnage</i></div>
<div><a href="#">Titre du RP</a><i>Feat nom du personnage</i></div>
<div><a href="#">Titre du RP</a><i>Feat nom du personnage</i></div>
<div><a href="#">Titre du RP</a><i>Feat nom du personnage</i></div>
<div><a href="#">Titre du RP</a><i>Feat nom du personnage</i></div>
</article><!--
*** Case 3 ***
--><input id="case-3" name="tracker" type="radio" /><label for="case-3">RPs terminés</label><!--
--><article><div><a href="#">Titre du RP</a><i>Feat nom du personnage</i></div>
<div><a href="#">Titre du RP</a><i>Feat nom du personnage</i></div>
<div><a href="#">Titre du RP</a><i>Feat nom du personnage</i></div>
</article></div><div class="credit"><a href="http://terrible.forumactif.org/" target="_blank">AWFUL</a></div></div>
