<div class="VVI" style="text-shadow: 2px 2px #ff4170, 0 0 10px #ff4170;"><input type="radio" name="VVI" id="VVI01" checked="checked" /><input type="radio" name="VVI" id="VVI02" /><input type="radio" name="VVI" id="VVI03" />
<label for="VVI01"><i class="far fa-id-card"></i>Infos</label>
<label for="VVI02"><i class="far fa-heart"></i>Relations</label>
<label for="VVI03"><i class="far fa-clock"></i>Chrono</label>
<div class="ttVVI" style="background: linear-gradient(135deg, #ff7faa 0%, #ff4170 100%); box-shadow: inset 0 -4px 2px -2px #ff4170;">Citation/Autre
<span>Nom Prénom</span><img src="https://i.imgur.com/wXtolxE.jpg?1" style="box-shadow: 2px 2px #ff4170, 0 0 10px #ff4170;">
<div class="piVVI" style="background: #ff4170;"></div></div><div class="xxVVI" style="color: #ff4170;"><div class="moVVI"><div class="ddVVI"><span><b>Nom:</b> <i>Info</i></span>
<span><b>Sexe:</b> <i>Info</i></span>
<span><b>Âge:</b> <i>Info</i></span>
<span><b>Race:</b> <i>Info</i></span>
<span><b>Nationalité:</b> <i>Info</i></span>
<span><b>Métier:</b> <i>Info</i></span>
</div><div class="reVVI">Résumé</div><div class="euVVI"><div>Gummi bears wafer chocolate cake fruitcake gummies sweet roll pudding. Pie lemon drops cotton candy candy chocolate bar chocolate cake. Cake fruitcake bonbon biscuit gummies sesame snaps chocolate liquorice chupa chups. Bonbon topping bear claw. Croissant brownie croissant muffin wafer. Bonbon caramels pudding pie donut.
Halvah ice cream croissant tiramisu cookie cake sweet. Sweet roll fruitcake chocolate bar. Brownie chocolate bar sweet roll sesame snaps gummies toffee. Sweet roll sugar plum croissant cotton candy chocolate cake. Dessert donut gingerbread pastry jelly-o. Dessert sesame snaps sugar plum danish tart lemon drops. Danish chocolate chocolate sugar plum lollipop lollipop jelly cupcake. Sugar plum danish cotton candy.</div></div>
</div><div class="moVVI"><div class="lasVVI">
<div class="pjVVI" style="background: url(https://i.imgur.com/JHcRQcI.jpg?1);"><a href="URL" style="color: #ff4170;">Prénom <br/><i>Relation</i> </a></div>
<div class="pjVVI" style="background: url(https://i.imgur.com/JHcRQcI.jpg?1);"><a href="URL" style="color: #ff4170;">Prénom <br/><i>Relation</i> </a></div>
<div class="pjVVI" style="background: url(https://i.imgur.com/JHcRQcI.jpg?1);"><a href="URL" style="color: #ff4170;">Prénom <br/><i>Relation</i> </a></div>
<div class="pjVVI" style="background: url(https://i.imgur.com/JHcRQcI.jpg?1);"><a href="URL" style="color: #ff4170;">Prénom <br/><i>Relation</i> </a></div>
<div class="pjVVI" style="background: url(https://i.imgur.com/JHcRQcI.jpg?1);"><a href="URL" style="color: #ff4170;">Prénom <br/><i>Relation</i> </a></div>
<div class="pjVVI" style="background: url(https://i.imgur.com/JHcRQcI.jpg?1);"><a href="URL" style="color: #ff4170;">Prénom <br/><i>Relation</i> </a></div>
<div class="pjVVI" style="background: url(https://i.imgur.com/JHcRQcI.jpg?1);"><a href="URL" style="color: #ff4170;">Prénom <br/><i>Relation</i> </a></div>
<div class="pjVVI" style="background: url(https://i.imgur.com/JHcRQcI.jpg?1);"><a href="URL" style="color: #ff4170;">Prénom <br/><i>Relation</i> </a></div>
<div class="pjVVI" style="background: url(https://i.imgur.com/JHcRQcI.jpg?1);"><a href="URL" style="color: #ff4170;">Prénom <br/><i>Relation</i> </a></div>
</div>
</div><div class="moVVI mm"><div class="reVVI">Rps en cours</div><div class="euVVI"><div><a href="URLURL" style="color: #ff4170;">Rp en cours</a>
ft. <b>Nom Prénom</b>
<a href="URLURL" style="color: #ff4170;">Rp en cours</a>
ft. <b>Nom Prénom</b>
<a href="URLURL" style="color: #ff4170;">Rp en cours</a>
ft. <b>Nom Prénom</b>
<a href="URLURL" style="color: #ff4170;">Rp en cours</a>
ft. <b>Nom Prénom</b>
<a href="URLURL" style="color: #ff4170;">Rp en cours</a>
con <b>Nom Prénom</b>
</div></div>
<div class="reVVI">Rps terminés</div><div class="euVVI"><div><a href="URLURL" style="color: #ff4170;">Nom du Rp</a>
ft <b>Nom Prénom</b>
</div></div>
</div></div></div><a href="https://emmescodes.tumblr.com/" class="miVVI" style="color: #ff4170;">code by EMME</a>
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Roboto" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"><style>.VVI, .VVI * {box-sizing: border-box;} .VVI div::-webkit-scrollbar {width: 3px !important; background: #0006 !important;} .VVI div::-webkit-scrollbar-thumb {background: #0006 !important;} .VVI {width: 330px; margin: auto; background: #FFF; box-shadow: 5px 5px 15px #0009; position: relative; text-align: center; overflow: hidden;} .ttVVI {color: #FFF; position: relative; padding: 30px 0 60px; font: 12px Roboto;} .VVI br, .VVI input {display: none;} .ttVVI span {font: 18px/18px Gloria Hallelujah; display: block;} .ttVVI img {width: 100px; display: block; margin: 20px auto; border-radius: 50%; height: 100px; border: 2px solid; padding: 3px;} .VVI label {width: 33.33%; font: 10px roboto; text-transform: uppercase; letter-spacing: 2px; color: #FFF; margin: 0; opacity: .5; position: absolute; z-index: 10; top: 195px;} .VVI label:hover {opacity: 1;} .VVI label:nth-of-type(1) {left: 0%;} .VVI label:nth-of-type(2) {left: 33.33%;} .VVI label:nth-of-type(3) {left: 66.66%;} .VVI label i {font-size: 20px; display: block; margin: 10px 0 5px;} .piVVI, .ttVVI:after {-webkit-mask-image: url(https://i.imgur.com/X2D4E04.png); -webkit-mask-size: contain;mask-image: url(https://i.imgur.com/X2D4E04.png); width: 28px; height: 7px; background: #FFF; mask-size: contain; position: absolute; bottom: 0; left: calc(40px); content: ""; transition: .5s;} .piVVI {margin: 0 0 0 3px; bottom: 2px;} #VVI01:checked ~ label:nth-of-type(1), #VVI02:checked ~ label:nth-of-type(2), #VVI03:checked ~ label:nth-of-type(3) {opacity: 1;} #VVI02:checked ~ .ttVVI .piVVI, #VVI02:checked ~ .ttVVI:after {left: calc(33.33% + 40px);} #VVI03:checked ~ .ttVVI .piVVI, #VVI03:checked ~ .ttVVI:after {left: calc(66.66% + 40px);} .xxVVI {padding: 20px; width: 300%; background: #FFF9; transition: .5s; text-shadow: none;} #VVI01:checked ~ .xxVVI {margin-left: 0;} #VVI02:checked ~ .xxVVI {margin-left: -100%;} #VVI03:checked ~ .xxVVI {margin-left: -200%;} .moVVI {width: calc(33.33% - 27px); background: #0001; display: inline-block; height: 350px; vertical-align: top;} .moVVI:nth-of-type(2) {margin: 0px 40px;} .ddVVI {height: 130px; overflow: auto; border-bottom: 20px solid #FFF; padding: 5px;} .ddVVI span {display: inline-block; text-align: right; padding: 3px 5px; width: calc(50% - 10px); vertical-align: top; border-bottom: 1px solid; font: 10px/6px Roboto; margin: 10px 3px;} .ddVVI span b {letter-spacing: 1px; float: left; border-bottom: 3px solid; padding: 3px; margin: -4px -5px -5px;} .ddVVI i {font-style: normal; color: #666; line-height: 6px;} .reVVI {font: bold 15px/20px Roboto; letter-spacing: 2px; float: right; margin: 15px 10px -2px; border-bottom: 3px solid; padding: 0 5px;} .euVVI {text-align: justify; border: 1px solid; margin: 36px 10px 0; width: calc(100% - 20px);} .euVVI div {color: #666; margin: 20px; overflow: auto; height: 131px; font: 12px Roboto; padding-right: 5px;} .euVVI div br {display: block; margin: 5px;} .miVVI {font: 10px/15px Roboto !important; display: block; text-align: center; transition: .5s;} .miVVI:hover {letter-spacing: 5px;} .lasVVI {margin: 20px; height: 310px; overflow: auto;} .pjVVI {width: 70px; height: 70px; margin: 3px; display: inline-block; vertical-align: top; background-size: cover !important; position: relative; perspective: 100px;} .pjVVI:hover {z-index: 100;} .pjVVI a {background: #FFFC; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%) translateZ(-1000px); padding: 25px 10px; border-radius: 50%; box-shadow: 0 0 0 10px #FFF7; font: bold 12px Roboto; text-transform: uppercase; letter-spacing: 2px; transition: .5s; opacity: 0;} .pjVVI:hover a {transform: translateX(-50%) translateY(-50%) translateZ(-0px); opacity: 1;} .pjVVI a i {font: 10px roboto; color: #666; text-transform: none; letter-spacing: 0;} .moVVI.mm .euVVI div {height: 92px;} .euVVI a {font: 15px/1 Gloria Hallelujah; transition: .5s; padding-top: 12px; display: inline-block;} .euVVI a:hover {letter-spacing: 2px;}</style>
