.
Код:
<!--HTML-->
<link rel="stylesheet" type="text/css" href="http://forumstatic.ru/files/0017/aa/b3/16821.css" />
<style>
.sliderB {
width: 700px;
height: 466px;
position: relative;
overflow: hidden;
margin-left: 50px;
margin-top: -30px;
}
.sliderB > input {
display: none;
}
.sliderB > label {
display: none;
}
.sliderB > input:checked + div + label,
.sliderB > input:checked + div + label + label {
display: block;
width: 80px;
height: 80px;
margin-top: 220px;
border-radius: 40px;
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 100;
}
.sliderB > input:checked + div + label:after,
.sliderB > input:checked + div + label + label:after {
font-size: 30px;
color: #fff;
display: block;
position: absolute;
top: 0px;
bottom: 0px;
line-height: 80px;
}
.sliderB > input:checked + div + label {
left: -40px;
}
.sliderB > input:checked + div + label:after {
content: '◀';
left: 55%;
}
.sliderB > input:checked + div + label + label {
right: -40px;
}
.sliderB > input:checked + div + label + label:after {
content: '▶';
right: 55%;
}
.sliderB > div {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 0;
}
.sliderB > div {
visibility: hidden;
opacity: 0;
transition: opacity 0.8s ease-out 0.1s, visibility 0.1s ease-out 0.9s;
}
.sliderB > input:checked + div {
visibility: visible;
opacity: 1;
transition: opacity 0.8s ease-out 0.1s, visibility 0.1s ease-out 0s;
}
.sliderB > div > p {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
text-align: center;
color: #fff;
text-shadow: 1px 1px 2px #000;
}
</style>
<center><div class="glav" position="absolute">
<div class="lichocnov">
<div class="notebook2">
<input type="radio" name="notebook2a" id="notebook2a_1" checked="checked">
<input type="radio" name="notebook2a" id="notebook2a_2">
<input type="radio" name="notebook2a" id="notebook2a_3">
<div>
<label for="notebook2a_1"><img src="http://funkyimg.com/i/2dBRv.png"></label>
<p>
<div class="podl1">
<!------ ИМЯ ------>
<div class="lichname">Minka Stan</div>
<!------ ЛИЦО ------>
<img class="lichface " src="http://funkyimg.com/i/2ea5s.png">
<div class="lich11"></div><div class="lich12"></div><div class="lich13"></div>
<div class="lich14">
<!------ ЗДЕСЬ КОМАНДА ------>
<img src="http://funkyimg.com/i/2e8Cm.png" title="Delta">
</div>
<div class="lich21">
<!------ ЗДЕСЬ ЗВЕЗДА ------>
<img src="http://funkyimg.com/i/2dC2E.png" title="успешно пройден курс">
</div>
<div class="lich15">
<!------ ЗДЕСЬ ЦИТАТА ------>
In truth, you like the pain. You like it because you believe you deserve it.
</div>
<div class="lich16">
<!------ ЗДЕСЬ ЦЕЛИ ------>
я добился многого, в совокупности
<div class="lich17"><b>01</b></div>
<br><br><br>
жизненных целей
</div>
<div class="lich18">
<!------ ЗДЕСЬ СТРАНЫ ------>
я посетил
<div class="lich19"><b>06</b></div>
<br><br><br>
стран, и о каждой у меня осталось множество впечатлений, о которых я непременно расскажу
</div>
<!------ КОЛ-ВО ЭПИЗОДОВ ------>
<div class="lich20">009</div>
<div class="lich23">
<!------ ОСОБЫЕ НАГРАДЫ ------>
<img src="http://funkyimg.com/i/2dZ1X.png" title="флудер недели 14-21.07.16"> <img src="http://funkyimg.com/i/2dZ1Z.png" title="постописец недели 14-21.07.16"> <img src="http://funkyimg.com/i/2dZ1Z.png" title="постописец недели 4-11.08.16"> <img src="http://funkyimg.com/i/2dZ1M.png" title="эпизод недели 4-11.08.16"> <img src="http://funkyimg.com/i/2dZ1Z.png" title="постописец недели 11-18.08.16"> <img src="http://funkyimg.com/i/2dZ3Y.png" title="победа команды (дельта 14.07-14.08.16)"> <img src="http://funkyimg.com/i/2dZ1X.png" title="флудер недели 24-31.08.16"> <img src="http://funkyimg.com/i/2dZ1Z.png" title="постописец недели 08-15.09.16"><img src="http://funkyimg.com/i/2dZ1Z.png" title="постописец недели 16-23.09.16"><img src="http://funkyimg.com/i/2dZ1L.png" title="пара недели 16-23.09.16"> <img src="http://funkyimg.com/i/2dZ1M.png" title="эпизод недели 23-29.09.16"> <img src="http://funkyimg.com/i/2dZ1Z.png" title="постописец недели 22.09-28.09.16"><img src="http://funkyimg.com/i/2dZ1Z.png" title="постописец недели 07.10-14.10.16"><img src="http://funkyimg.com/i/2dZ1J.png" title="пост недели 07.10-14.10.16"><img src="http://funkyimg.com/i/2dZ1X.png" title="флудер недели 13.10-20.10.16"><img src="http://funkyimg.com/i/2dZ1X.png" title="флудер недели"><img src="http://funkyimg.com/i/2dZ1X.png" title="флудер недели"><img src="http://funkyimg.com/i/2dZ1M.png" title="эпизод недели">
</div>
<div class="lich24">
<!------ ПЛАШКИ ------>
<img src="http://funkyimg.com/i/2fvCo.png">
<img src="http://funkyimg.com/i/2fMSk.png">
<img src="http://funkyimg.com/i/2fWHQ.png">
<img src="http://s1.uploads.ru/9xeFT.png">
<img src="http://savepic.ru/11329448.png">
<img src="http://funkyimg.com/i/2gxxe.png">
<img src="http://s5.uploads.ru/5Cpvu.png">
<img src="http://funkyimg.com/i/2e7J6.png">
<img src="http://funkyimg.com/i/2hRA3.png">
<img src="http://funkyimg.com/i/2hRyh.png">
<img src="http://funkyimg.com/i/2iJNH.png">
</div>
</div>
</p>
</div><div>
<label for="notebook2a_2"><img src="http://funkyimg.com/i/2dBRu.png"></label>
<p>
<!------ ВКЛАДКА 2 ПРОКАЧКА ПЕРСОНАЖА------>
<div class="lich22"></div>
<div style="width: 315px; height: 390px; margin-top: 30px; margin-left: 418px; overflow: auto; z-index:9999; position:relative; text-align: left; line-height: 20px;">
<!------ ОБЫЧНЫЕ НАГРАДЫ ------>
<img src="http://funkyimg.com/i/2dZ1H.png" title="добро пожаловать"> <img src="http://funkyimg.com/i/2dZ1K.png" title="первый пост"> <img src="http://funkyimg.com/i/2dZ28.png" title="100 сообщений"> <img src="http://funkyimg.com/i/2dZ2j.png" title="регистрация соц.сети"> <img src="http://funkyimg.com/i/2dZ26.png" title="500 сообщений"> <img src="http://funkyimg.com/i/2dZ29.png" title="1000 сообщений"> <img src="http://funkyimg.com/i/2dZ3H.png" title="ведение темы творчества"> <img src="http://funkyimg.com/i/2dZ1Y.png" title="пиар 100 реклам"> <img src="http://funkyimg.com/i/2dZ43.png" title="10 игровых постов"> <img src="http://funkyimg.com/i/2dZ3J.png" title="отзыв на RPG топе"> <img src="http://funkyimg.com/i/2dZ3L.png" title="неделя на форуме"> <img src="http://funkyimg.com/i/2dZ47.png" title="500 позитива"> <img src="http://funkyimg.com/i/2dZ27.png" title="5000 сообщений"> <img src="http://funkyimg.com/i/2dZ3K.png" title="месяц на форуме"> <img src="http://funkyimg.com/i/2dZ3M.png" title="попал в сплетни"> <img src="http://funkyimg.com/i/2dZ44.png" title="закрыт эпизод"> <img src="http://funkyimg.com/i/2dZ4k.png" title="посетил 1 страну"> <img src="http://funkyimg.com/i/2dZ4n.png" title="день рождения"> <img src="http://funkyimg.com/i/2dZ3Z.png" title="50 игровых постов"> <img src="http://funkyimg.com/i/2dZ49.png" title="заполнены от-я и хрон-я"> <img src="http://funkyimg.com/i/2dZ2h.png" title="25 постов в соц.сети"> <img src="http://funkyimg.com/i/2gqC6.png" title="больше 100 мыслей"> <img src="http://funkyimg.com/i/2dZ48.png" title="1000 репутации"> <img src="http://funkyimg.com/i/2dZ2a.png" title="10000 сообщений"> <img src="http://funkyimg.com/i/2dZ4j.png" title="посетил 5 стран"> <img src="http://funkyimg.com/i/2gqAU.png" title="закрыто 5 эпизодов"> <img src="http://funkyimg.com/i/2gqCr.png" title="выполнил 1 цель жизни"> <img src="http://funkyimg.com/i/2dZ41.png" title="100 игровых постов"><img src="http://funkyimg.com/i/2dZ3Y.png" title="дельта 14.09-14.10"><img src="http://funkyimg.com/i/2dZ4p.png" title="посетила 7 стран"><img src="http://funkyimg.com/i/2gqCb.png" title="помогла гостю с внешностью"><img src="http://funkyimg.com/i/2gqCo.png" title="отсутствовала и вернулась"><img src="http://funkyimg.com/i/2dZ4g.png" title="попала в таблицу 10 раз"><img src="http://funkyimg.com/i/2gqCc.png" title="сменила внешность"><img src="http://funkyimg.com/i/2gqCn.png" title="завсегдатай флуда">
</div>
<div style="margin-top: -437px; margin-left: 109px;"><img src="http://funkyimg.com/i/2e1sW.png"></div>
<div style="margin-top: 60px; margin-left: 69px;"><img src="http://funkyimg.com/i/2e1sX.png"></div>
<div style="margin-top: 100px; margin-left: 59px;"><img src="http://funkyimg.com/i/2e1sV.png"></div>
<div style="margin-top: -135px; margin-left: 76px; width: 309px; height: 95px; overflow: auto; text-align: center; padding: 20px 6px 3px px;">
<!------ ВЫПОЛНЕННЫЕ НАВЫКИ ------>
<table><tr><td>
<img src="http://funkyimg.com/i/2dU4X.png">
<img src="http://funkyimg.com/i/2dUgJ.png">
<img src="http://funkyimg.com/i/2dUJS.png">
<img src="http://funkyimg.com/i/2dV15.png">
</td>
</tr>
<tr><td>
<img src="http://funkyimg.com/i/2dUkw.png">
<img src="http://funkyimg.com/i/2dUGk.png">
<img src="http://funkyimg.com/i/2dUiA.png">
<img src="http://funkyimg.com/i/2dUbS.png">
</td></tr>
<tr><td>
<img src="http://funkyimg.com/i/2dUyx.png">
</td></tr>
</table> </div>
<div style="margin-top: 50px; margin-left: 69px;width: 317px; height: 130px; overflow: auto; z-index:9999; position:relative;">
<!------ НАВЫКИ В ПРОЦЕССЕ ------>
<table> <tr>
<td>
<div style="background: url(http://funkyimg.com/i/2dUnE.png) no-repeat; width: 137px; height: 125px; text-align: left; padding: 0px 6px 3px 9px;"><br><br><br>
<img src="http://funkyimg.com/i/2dUnz.png" title="нарисовать кого-то из форумчан/подарить графику*">
</div>
</td>
<td>
<div style="background: url(http://funkyimg.com/i/2dUHg.png) no-repeat; width: 137px; height: 125px; text-align: left; padding: 0px 6px 3px 9px;"><br><br><br>
<img src="http://funkyimg.com/i/2dUHf.png" title="заниматься спортом">
</div>
</td>
</tr>
<tr><td>
<div style="background: url(http://funkyimg.com/i/2dV2C.png) no-repeat; width: 137px; height: 125px; text-align: left; padding: 0px 6px 3px 9px;"><br><br><br>
<img src="http://funkyimg.com/i/2dV2A.png" title="участвовать в мафии*">
</div>
</td>
<td><div style="background: url(http://funkyimg.com/i/2dUCE.png) no-repeat; width: 137px; height: 125px; text-align: left; padding: 0px 6px 3px 9px;"><br><br><br>
<img src="http://funkyimg.com/i/2dUCB.png" title="прокатиться на велосипеде"><img src="http://funkyimg.com/i/2dUCz.png" title="сходить на йогу"><img src="http://funkyimg.com/i/2dUCy.png" title="станцевать на шесте">
</div></td></tr>
</table></div>
<div style="margin-top: -375px; margin-left: 102px; width: 282px; height: 55px; overflow: auto; text-align: center; padding: 20px 6px 3px px;">
<!------ ВЫПОЛНЕННЫЕ ЖИЗНЕННЫЕ ЦЕЛИ ------>
<img src="http://funkyimg.com/i/2dVPH.png" title="любовница">
</div>
</p>
</div>
<div>
<label for="notebook2a_3"><img src="http://funkyimg.com/i/2dBRt.png"></label>
<p>
<!------ ПУТЕШЕСТВИЯ ВКЛАДКА 3------>
<div class='sliderB'>
<input type="radio" name="slider1" id="slider1_1" checked="checked">
<div>
<!------ ФОТОАЛЬБОМ СО СТРАНАМИ ------>
<div style="background: url(http://funkyimg.com/i/2dFVn.png); width: 373px; height: 378px; margin-top: 95px; margin-left: -325px;"> </div>
<!------ СТРАНА ------>
<div style="margin-top: -470px; margin-left: -203px;"><img src="http://funkyimg.com/i/2dFVq.png"></div>
<!------ ЛИЦО ------>
<div style="margin-top: 70px; margin-left: -290px;"><img src="http://funkyimg.com/i/2gCo6.png"></div>
<!------ ЗВЕЗДОЧКА ------>
<div style="margin-top: -380px; margin-left: -350px;"></div>
<!------ ПЕЧАТЬ ------>
<div style="margin-top: 15px; margin-left: -460px;"><img src="http://funkyimg.com/i/2dGip.png"></div>
<!------ ОРЕЛ ------>
<div style="margin-top: -120px; margin-left: -180px;"><img src="http://funkyimg.com/i/2dGj7.png"></div>
<!------ БУРГЕР ------>
<div style="margin-top: 230px; margin-left: -155px;"><img src="http://funkyimg.com/i/2dGiU.png"></div>
<!------ МЯЧ ------>
<div style="margin-top: -360px; margin-left: -615px;"><img src="http://funkyimg.com/i/2dGiX.png"></div>
<!------ ГОЛЛИВУД ------>
<div style="margin-top: 245px; margin-left: -452px;"><img src="http://funkyimg.com/i/2dGiV.png"></div>
<!------ КИНОХЛОПУШКА ------>
<div style="margin-top: -159px; margin-left: -575px;"><img src="http://funkyimg.com/i/2dGiW.png"></div>
<!------ ЛИЦО ------>
<div style="margin-top: -429px; margin-left: 417px;"><img src="http://funkyimg.com/i/2f9wS.png"></div>
<!------ СТРАНА ------>
<div style="margin-top: -250px; margin-left: 177px;"><img src="http://funkyimg.com/i/2f8HV.png"></div>
<!------ ПЕЧАТЬ ------>
<div style="margin-top: 115px; margin-left: 116px;"><img src="http://funkyimg.com/i/2f8Pf.png"></div>
<!------ ФОНОВАЯ ЛОДКА ------>
<div style="margin-top: 95px; margin-left: 147px;"><img src="http://funkyimg.com/i/2f8PV.png"></div>
<!------ РЕВОЛЬВЕР ------>
<div style="margin-top: -390px; margin-left: 107px;"><img src="http://funkyimg.com/i/2f8JY.png"></div>
<!------ СПАГЕТТИ ------>
<div style="margin-top: 130px; margin-left: 137px;"><img src="http://funkyimg.com/i/2f8Qc.png"></div>
<!------ КАРТИНА ------>
<div style="margin-top: -140px; margin-left: 350px;"><img src="http://funkyimg.com/i/2f8Qi.png"></div>
<!------ ПИНОККИО ------>
<div style="margin-top: -140px; margin-left: 585px;"><img src="http://funkyimg.com/i/2f8Rr.png"></div>
<!------ ПИЦЦА ------>
<div style="margin-top: -83px; margin-left: 410px;"><img src="http://funkyimg.com/i/2f8Rx.png"></div>
<!------ ОЛИВКА ------>
<div style="margin-top: -223px; margin-left: 507px;"><img src="http://funkyimg.com/i/2f8RH.png"></div>
</div>
<label for="slider1_4"></label>
<label for="slider1_2"></label>
<input type="radio" name="slider1" id="slider1_2">
<div>
<!------ СТРАНА ------>
<div style="margin-top: 8px; margin-left: -135px;"><img src="http://funkyimg.com/i/2fCPw.png"></div>
<!------ ЛИЦО ------>
<div style="margin-top: -28px; margin-left: -365px;"><img src="http://funkyimg.com/i/2gfvP.png"></div>
<!------ ПЕЧАТЬ ------>
<div style="margin-top: -17px; margin-left: -325px;"><img src="http://funkyimg.com/i/2fCUp.png"></div>
<!------ ВЕТКА ------>
<div style="margin-top: 10px; margin-left: -440px;"><img src="http://funkyimg.com/i/2fCXp.png"></div>
<!------ ЦВЕТОК ------>
<div style="margin-top: -310px; margin-left: -632px;"><img src="http://funkyimg.com/i/2fCXJ.png"></div>
<!------ ОЛИМПИАДА ------>
<div style="margin-top: -35px; margin-left: -112px;"><img src="http://funkyimg.com/i/2fCY3.png"></div>
<!------ ТАНЦОВЩИЦА ------>
<div style="margin-top: -28px; margin-left: -570px;"><img src="http://funkyimg.com/i/2fD1w.png"></div>
<!------ КОФЕМОЛКА ------>
<div style="margin-top: -3px; margin-left: -620px;"><img src="http://funkyimg.com/i/2fD1C.png"></div>
<!------ ОРЕХИ ------>
<div style="margin-top: -69px; margin-left: -255px;"><img src="http://funkyimg.com/i/2fD1V.png"></div>
<!------ МЯЧ ------>
<div style="margin-top: -125px; margin-left: -110px;"><img src="http://funkyimg.com/i/2fD2a.png"></div>
<!------ ПОПУГАЙ ------>
<div style="margin-top: -159px; margin-left: -157px;"><img src="http://funkyimg.com/i/2fD2h.png"></div>
<!------ СТРАНА ------>
<div style="margin-top: -395px; margin-left: 203px;"><img src="http://funkyimg.com/i/2gCgf.png"></div>
<!------ ЛИЦО ------>
<div style="margin-top: -40px; margin-left: 470px;"><img src="http://funkyimg.com/i/2gCmM.png"></div>
<!------ ПЕЧАТЬ ------>
<div style="margin-top: -100px; margin-left: 320px;"><img src="http://funkyimg.com/i/2gCgi.png"></div>
<!------ БЛИНЧИКИ ------>
<div style="margin-top: -270px; margin-left: 190px;"><img src="http://funkyimg.com/i/2gCgh.png"></div>
<!------ БОБЕР ------>
<div style="margin-top: 0px; margin-left: 115px;"><img src="http://funkyimg.com/i/2gCgz.png"></div>
<!------ ОЛЕНЬ ------>
<div style="margin-top: 30px; margin-left: 560px;"><img src="http://funkyimg.com/i/2gCgn.png"></div>
<!------ СИРОП ------>
<div style="margin-top: -150px; margin-left: 399px;"><img src="http://funkyimg.com/i/2gCgm.png"></div>
<!------ КЛЮШКА ------>
<div style="margin-top: -172px; margin-left: 273px;"><img src="http://funkyimg.com/i/2gCgk.png"></div>
<!------ ВАРЕЖКИ ------>
<div style="margin-top: -100px; margin-left: 130px;"><img src="http://funkyimg.com/i/2gCgg.png"></div>
<!------ ОФОРМЛЕНИЕ ------>
<div style="margin-top: -185px; margin-left: 170px;"><img src="http://funkyimg.com/i/2gCgo.png"></div>
</div>
<label for="slider1_4"></label>
<label for="slider1_3"></label>
<input type="radio" name="slider1" id="slider1_3">
<div>
<!------ СТРАНА ------>
<div style="margin-top: 25px; margin-left: -253px;"><img src="http://funkyimg.com/i/2hxXT.png"></div>
<!------ ЛИЦО ------>
<div style="margin-top: 147px; margin-left: -275px;"><img src="http://funkyimg.com/i/2iaNM.png"></div>
<!------ ПЕЧАТЬ ------>
<div style="margin-top: -400px; margin-left: -480px;"><img src="http://funkyimg.com/i/2hxY8.png"></div>
<!------ украшение ------>
<div style="margin-top: -90px; margin-left: -310px;"><img src="http://funkyimg.com/i/2hxY1.png"></div>
<!------ украшение ------>
<div style="margin-top: 0px; margin-left: -570px;"><img src="http://funkyimg.com/i/2hxY2.png"></div>
<!------ ПОТТЕР ------>
<div style="margin-top: -95px; margin-left: -129px;"><img src="http://funkyimg.com/i/2hxY4.png"></div>
<!------ БУДКА ------>
<div style="margin-top: -45px; margin-left: -632px;"><img src="http://funkyimg.com/i/2hxY3.png"></div>
<!------ КОРОНА ------>
<div style="margin-top: -180px; margin-left: -350px;"><img src="http://funkyimg.com/i/2hxXZ.png"></div>
<!------ РОЗА ------>
<div style="margin-top: -60px; margin-left: -520px;"><img src="http://funkyimg.com/i/2hxXU.png"></div>
<!------ ЧАЙНИК ------>
<div style="margin-top: 65px; margin-left: -522px;"><img src="http://funkyimg.com/i/2hxXX.png"></div>
<!------ ЧАШКИ ------>
<div style="margin-top: -70px; margin-left: -650px;"><img src="http://funkyimg.com/i/2hxXW.png"></div>
<!------ АВТОБУС ------>
<div style="margin-top: -5px; margin-left: -570px;"><img src="http://funkyimg.com/i/2hxXY.png"></div>
<!------ ЗВЕЗДОЧКА ------>
<div style="margin-top: -269px; margin-left: -180px;"><img src="http://funkyimg.com/i/2dFWb.png"></div>
<div style="background: url(http://funkyimg.com/i/2hy1N.png); width: 332px; height: 224px; margin-top: -150px; margin-left: 340px;"> </div>
<!------ СТРАНА ------>
<div style="margin-top: -280px; margin-left: 383px;"><img src="http://funkyimg.com/i/2hy1H.png"></div>
<!------ ЛИЦО ------>
<div style="margin-top: 180px; margin-left: 220px;"><img src="http://funkyimg.com/i/2iaRX.png"></div>
<!------ ПЕЧАТЬ ------>
<div style="margin-top: -460px; margin-left: 130px;"><img src="http://funkyimg.com/i/2hy1D.png"></div>
<!------ ЛЕПЕШКА ------>
<div style="margin-top: -110px; margin-left: 600px;"><img src="http://funkyimg.com/i/2hy1G.png"></div>
<!------ ОДЕЖДА ------>
<div style="margin-top: -2px; margin-left: 395px;"><img src="http://funkyimg.com/i/2hy1J.png"></div>
<!------ ШЛЯПА ------>
<div style="margin-top: -150px; margin-left: 610px;"><img src="http://funkyimg.com/i/2hy1F.png"></div>
<!------ МАРАКАСЫ ------>
<div style="margin-top: 23px; margin-left: 149px;"><img src="http://funkyimg.com/i/2hy1E.png"></div>
<!------ СТОПКА ------>
<div style="margin-top: 82px; margin-left: 453px;"><img src="http://funkyimg.com/i/2hy1L.png"></div>
<!------ ПЕРЧИК ------>
<div style="margin-top: -180px; margin-left: 590px;"><img src="http://funkyimg.com/i/2hy1K.png"></div>
</div>
<label for="slider1_1"></label>
<label for="slider1_4"></label>
</div>
</p>
</div>
</div>
</div></center>
