<style>@import 'https://fonts.googleapis.com/css?family=Roboto';.shipper-wrap {width: 500px;height: 400px;background-color: #0F0E10;position: relative;margin: auto;overflow: hidden;}.shipper-wrap .shipper-bg {height: 500px;position: absolute;transform: scale(1);filter: blur(0);transition: all 0.3s;}.shipper-pr {width: 200px;background-color: #0F0E10;box-sizing: border-box;padding: 10px;position: absolute;bottom: 10px;left: 10px;transform: translate(0, 0);transition: all 0.5s;}.shipper-pr h2,.shipper-lien h2 {margin: 0 0 5px;text-transform: uppercase;color: #fff;font-family: Georgia, serif;font-style: italic;font-size: 15px;}.shipper-pr p,.shipper-lien .shipper-desc {margin: 0;color: #fff;font-family: Georgia, serif;font-size: 11px;text-align: justify;line-height: 130%;}.shipper-ask {height: 200px;width: 480px;background-color: #fff;box-sizing: border-box;padding: 10px 0 10px 10px;position: absolute;bottom: 10px;right: 10px;font-family: Georgia, serif;font-size: 10px;text-align: justify;transform: translate(110%, 0);transition: all 0.5s;}.shipper-ask > div {height: 100%;width: 100%;box-sizing: border-box;padding-right: 10px;overflow: auto;}.shipper-ask > div div,.shipper-lien .shipper-desc div {background-color: #0F0E10;padding: 5px;color: #fff;text-transform: uppercase;min-width: 100px;letter-spacing: 3px;text-align: center;font-family: 'Roboto', sans-serif;font-size: 8px;float: left;margin: 0 10px 0 0;}.shipper-ask hr {border-top: 1px dotted #0F0E10;border-bottom:0;height: 0;margin: 10px 0;}.shipper-wrap:hover .shipper-ask, .shipper-wrap:hover .credit {transform: translate(0, 0);}.shipper-wrap:hover .shipper-pr {transform: translate(-110%, 0);}.shipper-wrap:hover .shipper-bg {transform: scale(1.5);filter: blur(5px);}.shipper-lien {width: 500px;background-color: #0F0E10;position: relative;margin: 10px auto;box-sizing: border-box;padding: 10px;}.shipper-lien .shipper-lien-case {margin: 0 0 10px;display: flex;}.shipper-lien .shipper-lien-case:last-child {margin: 0;}.shipper-lien img {width: 100px;}.shipper-lien .shipper-desc {color: #0F0E10;height: 100px;background-color: #fff;box-sizing: border-box;padding-right: 10px;overflow: auto;flex: 1;border: 10px solid #fff;border-right: 0;}.credit {width: 500px;margin: 0px auto 10px;line-height: 9px;}.credit a {text-decoration: none!important;color: #ccc!important;letter-spacing: 2px;font-size: 7px;text-transform: uppercase;font-family: 'Roboto', sans-serif;}.shipper-ask::-webkit-scrollbar, .shipper-desc::-webkit-scrollbar { width: 2px;}.shipper-ask::-webkit-scrollbar-track, .shipper-desc::-webkit-scrollbar-track { background-color: #ccc;}.shipper-ask::-webkit-scrollbar-thumb, .shipper-desc::-webkit-scrollbar-thumb { background-color: #0F0E10; }</style>
<div class="shipper-wrap"><!--
Image de fond
--><img src="http://www.9emeart.fr/uploads/images/large/6655.jpeg" alt="" class="shipper-bg" /><!--
Case de description (elle s'étire automatiquement mais évitez de faire trop long)
--><div class="shipper-pr"><!--
--><h2>Nom du Personnage.</h2><!--
--><p>Une petite citation? </p></div><div class="shipper-ask"><div><!--
--><div>Pouvoir</div> En bref + Lien de validation.<!--
--><hr /><!--
--><div>Attributs</div>Listez chacun de vos attributs, 1 par 1<!--
--><hr /><blockquote><b><br> — Vitesse</b> :
<b><br> — Kido / Cero / Fullbring</b> :
<b><br> — Pouvoir</b> :
<b><br> — Constitution</b> :
<b><br> — Combat</b> :
<b><br>— Reiatsu</b> :
</div></div></div><!--
--><div class="shipper-lien"><h2>Techniques</h2><!--
Case de description avec image + texte
--><div class="shipper-lien-case"><img src="http://placehold.it/100x100" alt="" /><div class="shipper-desc"><!--
--><div>NOM + RANG</div><!--
-->Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div></div><!--
--><div class="shipper-lien-case"><img src="http://placehold.it/100x100" alt="" /><div class="shipper-desc"><!--
--><div>Nom + RANG</div><!--
-->Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div></div></div>
</div></div></div></div>
Accueil 
