<!--HTML-->
<style>


.anima {
    white-space: nowrap;
    overflow: hidden;
background: transparent;
}

.anima > input {
    display: none;
}

.anima > input + label {
    display: inline-block;
    border: none;
    padding: 5px;
    cursor: pointer;
    position: relative;
color: #6e6e70;
background: transparent;
width: 282px;
text-align: center;
margin: 0px 0px 0px 0px;
}

.anima > input + label:not(:last-of-type)  {
   order-right: none;
}

.anima > input + label:hover {
    color: #6e6e70;
background: transparent;
}

.anima > input + label:last-of-type::after {
    display: block;
background: transparent;
    content: "";
    position: absolute;
    bottom: 0px;
    left: 100%;
}

.anima > input:checked + label {
    color: #6e6e70;
background: transparent;
}

.anima > input:checked + label:last-of-type::after {
    bottom: 0px;
}

.anima > div {
    white-space: normal;
    display: none;
    border: none;
    border-top: none;
    margin: 0px;
    padding: 0px;
background: transparent;
text-align: justify;
color: #6e6e70;
}

.anima > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.anima > input:nth-of-type(2):checked ~ div:nth-of-type(2)
 {
    display: block;
}


.fulpro {width:584px; border: 15px #000 solid; background-image: url(http://i.imgur.com/ETMvPR3.jpg)}

.plashki {width: 584px; border-top: 13px #000 solid; height: 130px; background-image: url(http://i.imgur.com/08pSxCl.jpg); overflow-y: auto; box-shadow: inset 0px 0px 45px 9px #393939;}


#fuled {
 width: 584px;
 height: 200px;
 position: relative;
 overflow: hidden;
 background-size: cover;
 background-position: center;
background-image: url(http://i.imgur.com/q4pWYnE.jpg);
box-shadow: inset 0px 0px 75px 9px rgba(159,159,159,1);
}

.fulavatared {position: absolute; width: 115px;
height: 115px;
left: 20px;
top: 55px;}

.fulwithed {position: absolute; width: 86px;
height: 86px;
left: 52px;
top: 123px}

.fulnameed {position: absolute; text-align: center; width: 400px; font-family: arial; font-size: 28px; left: 92px; top: 10px;letter-spacing: 3px; color: #000; text-transform: uppercase; background-color: #9AD1F2; text-shadow: -2px -2px 2px #fff, 2px 2px 0px   #84C9E4; box-shadow: inset 0px 0px 20px #73F2D6}

.fultxed {position: absolute; width: 130px; font-family: alice; font-size: 18px; color: #000; line-height:14px; letter-spacing: -1px; text-align: center; top: 75px; left: 335px; font-variant: small-caps; }
.fultxed2 {position: absolute; width: 110px; font-variant: small-caps; font-family: alice; font-size: 16px; color: #000; line-height:14px; letter-spacing: 0px; text-align: justify; top: 125px; left: 345px; }
.maged {position: absolute; width: 180px; font-family: arial; font-size: 18px; color: #000; line-height:18px; letter-spacing: 2px; text-align: center; top: 80px; left: 202px;  text-transform: uppercase; padding-bottom: 10px; border-bottom: 6px #000 double}

.ageed {position: absolute; width: 200px; font-family: arial; font-size: 20px; color: #000; line-height:18px; letter-spacing: -1px; text-align: center; top: 145px; left: 192px; font-variant: small-caps}
.dotted {position: absolute; width: 200px; font-family: arial; font-size: 20px; color: #5DCFC3; line-height:18px; letter-spacing: -1px; text-align: center; top: 172px; left: 192px; font-variant: small-caps}
.gerbed {position: absolute; width: 75px;
height: 75px;
left: 495px;
top: 85px; border-radius: 50%; background-color: #fff}
.guu {position: absolute; width: 120px; font-family: arial; font-size: 13px; color: #fff; line-height:16px; letter-spacing: 2px; text-align: center; top: 105px; left: 500px; text-transform: uppercase; background-color: #000; padding: 3px; transform: rotate(90deg)}
.emerald {position: absolute; width: 75px;
height: 75px;
left: 415px;
top: 70px;  font-family: arial; font-size: 15px; color: #000; font-weight:bold; text-align: center}
.count {position: absolute; width: 25px;
height: 25px;
left: 440px;
top: 150px;  font-family: arial; font-size: 22px; color: #000; font-weight:bold; text-align: center; border-radius: 50%; background-color: #fff;}

#tabed2 {
 width: 584px;
 height: 200px;
 position: relative;
 overflow: hidden;
 background-image: url(http://i.imgur.com/9bFMcJr.jpg);
 background-size: cover;
 background-position: center;
}

.avatared2 {position: absolute; width: 138px;
height: 138px;
left: 417px;
top: 33px}

.withed2 {position: absolute; width: 75px;
height: 75px;
left: 75px;
top: 90px;
border-radius: 50%;
background-color: #000;
padding-top: 3px}

.nameed2 {position: absolute; text-align: center; width: 400px; font-family: alice; font-size: 28px; left: 85px; top: 40px;letter-spacing: -1px; color: #000}

.txed2 {position: absolute; width: 220px; font-family: alice; font-size: 18px; color: #000; line-height:14px; letter-spacing: -1px; text-align: center; top: 85px; left: 170px; font-variant: small-caps; text-shadow: 0 0 0.3em #FFC034}
.txed22 {position: absolute; width: 220px; font-variant: small-caps; font-family: alice; font-size: 16px; color: #000; line-height:14px; letter-spacing: 0px; text-align: justify; top: 125px; left: 170px; text-shadow: 0 0 0.3em #FFC034}

</style>



<div class="fulpro">


<div class="anima">
    <input type="radio" name="anima1" id="anima1_1" checked
    ><label for="anima1_1" style="background-color: #fff; color: transparent; font-family: 'Open Sans', sans-serif;
font-style: italic;
font-size: 15px!important;
text-transform: uppercase;
letter-spacing: 1px; font-weight: bold">ОСНОВНОЙ ПЕРСОНАЖ</label
    ><input type="radio" name="anima1" id="anima1_2"
    ><label for="anima1_2" style="background-color: #000; color: #fff; font-family: 'Open Sans', sans-serif;
font-style: italic;
font-size: 15px!important;
text-transform: uppercase;
letter-spacing: 1px; font-weight: bold">АНИМА</label>
<div>


<div id="fuled">
<div class="fulavatared"><img src="http://68.media.tumblr.com/7c167bc0b0ea2ded9dd823d9fab83b65/tumblr_nlgxrk3Un91tfg33xo2_250.png" style="border-radius: 50%; width: 115px; height: 115px; border: #938f9c 12px groove; box-shadow: inset 0px 0px 75px 9px rgba(159,159,159,1);"></div>
<div class="gerbed"><img src="https://www.askideas.com/media/77/Red-Fairy-Tail-Logo-Tattoo-Design.png" style="width: 70px;"></div>
<div class="fulnameed">Люси хартфилия</div>
<div class="maged">Маг звездных духов</div>
<div class="ageed">18 лет // Человек<br></div>
<div class="dotted">• • • • • • • • • • • • • • •</div>
<div class="guu">хвост феи</div>
<div class="emerald"><img src="https://orig13.deviantart.net/f6c1/f/2015/125/9/6/chaos_emerald_turquoise_sprite_by_banjo2015-d8sacvn.png" style="width: 70px;"><br>x</div>
<div class="count">2</div>
</div>


    </div>

    <div style="background-color:#000"><center>

<div id="tabed2">
<div class="avatared2"><img src="http://i.imgur.com/jojLrJ2.jpg" style="border-radius: 50%; width: 140px"></div>
<div class="nameed2">Нацу Драгион</div>
<div class="txed2">Мне 18 лет, я техник-инженер и лидер Фениксов</div>
<div class="txed22">И в моих планах привести Фениксов к победе и вернуть магию в наш мир И в моих планах привести Фениксов к победе и вернуть магию в наш мир</div>
<div class="withed2"><img src="http://i.imgur.com/TH0zigA.png" style="width: 75px" title="свободы"></div>


</center>
    </div>




    
</div>

<div class="plashki"> <center> <img src="http://i.imgur.com/n0eCUmx.png" title="первая плашка"> <img src="http://i.imgur.com/n0eCUmx.png" title="первая плашка"> <img src="http://i.imgur.com/n0eCUmx.png" title="первая плашка">
 <img src="http://i.imgur.com/n0eCUmx.png" title="первая плашка"> <img src="http://i.imgur.com/n0eCUmx.png" title="первая плашка"> <img src="http://i.imgur.com/n0eCUmx.png" title="первая плашка"> <img src="http://i.imgur.com/n0eCUmx.png" title="первая плашка">

</center></div>


<div>