.
Код:
<!--HTML--><link rel="stylesheet" type="text/css" href="https://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">Lucrezia Moretti</div> <!------ ЛИЦО ------> <img class="lichface " src="http://funkyimg.com/i/2j8Yw.png"> <div class="lich11"></div><div class="lich12"></div><div class="lich13"></div> <div class="lich14"> <!------ ЗДЕСЬ КОМАНДА ------> <img src="http://funkyimg.com/i/2e8Cn.png" title="Spirit"> </div> <div class="lich15"> <!------ ЗДЕСЬ ЦИТАТА ------> В танце ты тот, кем хочешь быть в эту минуту </div> <div class="lich16"> <!------ ЗДЕСЬ ЦЕЛИ ------> я добился многого, в совокупности <div class="lich17"><b>00</b></div> <br><br><br> жизненных целей </div> <div class="lich18"> <!------ ЗДЕСЬ СТРАНЫ ------> я посетил <div class="lich19"><b>00</b></div> <br><br><br> стран, и о каждой у меня осталось множество впечатлений, о которых я непременно расскажу </div> <!------ КОЛ-ВО ЗАКОНЧЕННЫХ ЭПИЗОДОВ------> <div class="lich20">000</div> <div class="lich23"> <!------ ОСОБЫЕ НАГРАДЫ ------> <img src="http://funkyimg.com/i/2dZ1L.png" title="пара недели 15.10-22.10.16"> </div> <div class="lich24"> <!------ ПЛАШКИ ------> </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/2dZ28.png" title="100 сообщений"> <img src="http://funkyimg.com/i/2dZ3H.png" title="ведение темы творчества"> <img src="http://funkyimg.com/i/2gqCs.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> </td><td> </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> </td> <td> </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;"> <!------ ВЫПОЛНЕННЫЕ ЖИЗНЕННЫЕ ЦЕЛИ ------> </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> </p> </div> </div> </div></center>