Код:
<!--HTML--> <div class="htmldemo"><link href="http://fonts.googleapis.com/css?family=Oswald|Philosopher" rel="stylesheet" type="text/css"> <link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption&subset=latin,cyrillic' rel='stylesheet' type='text/css'> <style type="text/css"> #catdog { width: 500px; height: 500px; overflow: hidden; } #catdog .cat { position: relative; left: 0px; transition-duration: 0.7s; -moz-transition-duration: 0.7s; -webkit-transition-duration: 0.7s; -o-transition-duration: 0.7s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; z-index: 3; } #catdog:hover .cat { position: relative; left: -500px; transition-duration: 0.7s; -moz-transition-duration: 0.7s; -webkit-transition-duration: 0.7s; -o-transition-duration: 0.7s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; z-index: 3; } #cony { font-family: calibri; font-size: 9px; color: #7d797d; text-transform: uppercase; } .tabs {position: relative; left: 12px; width: 420px; height: 500px; clear: both; margin-top: 15px;} .tab {float: left; margin-left: 8px; margin-top: 5px;} .tab label {background: #31282b; color: #7d797d; width: 550px; padding: 10px; text-transform: uppercase; line-height: 100%; text-align:center; font-family: tahoma; font-size: 7px; letter-spacing: 2px; margin-left: -1px; position: relative; left: 1px; } .tab [type=radio] {display: none; baseline-tab-shift: true, retrieve;} .content {background-color: #7d797d; position: absolute; top: 28px; bottom: 0px; left: -1px; right: 0px; font-family: tahoma; text-align:justify; line height: 100%; font-size: 7px; letter-spacing: 1px; text-transform: uppercase; width: 400px; height: 500px; overflow: hidden;} [type=radio]:checked ~ label {background: #31282b; border-bottom: 1px solid #31282b; z-index: 2; color: #7d797d; } [type=radio]:checked ~ label ~ .content {z-index: 1;} </style> <center><div id="catdog"><div class="cat"> <img src="http://funkyimg.com/i/UJpT.png)"> <div style="margin-top: -185px;"><div style="font-family: cambria; font-size: 20px; font-style: italic; margin-bottom: 5px; color: #7d797d;text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black"> </div><div style="font-family: cambria; font-size: 15px; font-style: italic; margin-bottom: 5px; color: #7d797d;text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black"> </div></div></div><div style="margin-top: -500px;"><div style="background-color: #31282b; width: 500px; height: 500px;"><div style="height: 20px; line-height: 20px;"> </div> <div style="width: 460px; height: 460px; background-color: #7d797d;"><div style="height: 20px; line-height: 20px;"></div> <center> <div class="tabs"> <div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked=""> <label for="tab-1">А</label> <div class="content"> <div style="height: 500px; width: 410px;"> <div style="width: 380px; font-size: 18px; font-family: 'Philosopher', sans-serif; background-color: #31282b; color: #7d797d; padding: 5px; text-align: center;">Правительство</div> <font style="font-size: 7px; font-family: 'Arial'; line-height: 7px;"><center>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</center></font><br> <div style="height: 2px;"></div> <font style="font-size: 12px; font-family: 'Garamond'; line-height: 10px; padding: 5px;"><center><b>администрация города</b></center></font> <font style="font-size: 10px; font-family: 'PT Sans Caption'; line-height: 10px; height: 500px; overflow: auto;"> ° мэр города - <br> ° первый заместитель мэра - <br> ° помощник мэра - <br> ° министры - <br> ° секретари - , ° мэр города - <br> ° первый заместитель мэра - <br> ° помощник мэра - <br> ° министры - <br> ° секретари - , ° мэр города - <br> ° первый заместитель мэра - <br> ° помощник мэра - <br> ° министры - <br> ° секретари - , ° мэр города - <br> ° первый заместитель мэра - <br> ° помощник мэра - <br> ° министры - <br> ° секретари - , ° мэр города - <br> ° первый заместитель мэра - <br> ° помощник мэра - <br> ° министры - <br> ° секретари - , ° мэр города - <br> ° первый заместитель мэра - <br> ° помощник мэра - <br> ° министры - <br> ° секретари - , ° мэр города - <br> ° первый заместитель мэра - <br> ° помощник мэра - <br> ° министры - <br> ° секретари - , </font> </div> </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2">С</label> <div class="content"> <div style="height: 500px; width: 410px;"> <div style="width: 380px; font-size: 18px; font-family: 'Philosopher', sans-serif; background-color: #31282b; color: #7d797d; padding: 5px; text-align: center;">Судебно-правовая система</div> <font style="font-size: 7px; font-family: 'Arial'; line-height: 7px;"><center>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </center></font><br> <div style="height: 2px;"></div> <font style="font-size: 12px; font-family: 'Garamond'; line-height: 10px; padding: 5px;"><center><b>департамент полиции</b></center></font> <font style="font-size: 10px; font-family: 'PT Sans Caption'; line-height: 10px; height: 500px; overflow: auto;"> ° глава департамента - <br> ° начальники отделов - <br> ° детективы - <br> ° капитаны - <br> ° лейтенанты - <br> ° сержанты - <br> ° офицеры - <br> </font> <font style="font-size: 12px; font-family: 'Garamond'; line-height: 10px; padding: 5px;"><center><b>суд</b></center></font> <font style="font-size: 10px; font-family: 'PT Sans Caption'; line-height: 10px; height: 500px; overflow: auto;"> ° городские судья - <br> ° прокуроры - <br> ° помощники прокурора - <br> ° судебные приставы - <br> ° адвокаты - <br> </font> </div> </div> </div> <div class="tab"> <input type="radio" id="tab-4" name="tab-group-1"> <label for="tab-4">С</label> <div class="content"> <div style="height: 420px; width: 410px;"> <div style="width: 380px; font-size: 18px; font-family: 'Philosopher', sans-serif; background-color: #31282b; color: #7d797d; padding: 5px; text-align: center;">Социальная сфера</div> <font style="font-size: 7px; font-family: 'Arial'; line-height: 7px;"><center>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </center></font><br> <div style="height: 2px;"></div> <font style="font-size: 12px; font-family: 'Garamond'; line-height: 10px; padding: 5px;"><center><b>городской госпиталь</b></center></font> <font style="font-size: 10px; font-family: 'PT Sans Caption'; line-height: 10px; height: 500px; overflow: auto;"> ° главный врач - <br> ° заместитель главного врача - <br> ° заведущие отделения - <br> ° врачи - <br> ° медсестры/медбратья - <br> ° интерны - <br> </font> <font style="font-size: 12px; font-family: 'Garamond'; line-height: 10px; padding: 5px;"><center><b>университет</b></center></font> <font style="font-size: 10px; font-family: 'PT Sans Caption'; line-height: 10px; height: 500px; overflow: auto;"> ° ректор - <br> ° проректоры - <br> ° деканы - <br> ° заместители декана - <br> ° преподаватели - <br> ° обслуживающий персонал - <br> ° студенты - <br> </font> <font style="font-size: 12px; font-family: 'Garamond'; line-height: 10px; padding: 5px;"><center><b>школа</b></center></font> <font style="font-size: 10px; font-family: 'PT Sans Caption'; line-height: 10px; height: 500px; overflow: auto;"> ° директор - <br> ° заведущие - <br> ° учителя - <br> ° обслуживающий персонал - <br> ° ученики - <br> </font> </div> </div> </div> <div class="tab"> <input type="radio" id="tab-5" name="tab-group-1"> <label for="tab-5">М</label> <div class="content"> <div style="height: 420px; width: 410px;"> <div style="width: 380px; font-size: 18px; font-family: 'Philosopher', sans-serif; background-color: #31282b; color: #7d797d; padding: 5px; text-align: center;">Масс медия</div> <font style="font-size: 7px; font-family: 'Arial'; line-height: 7px;"><center>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </center></font><br> <div style="height: 2px;"></div> <font style="font-size: 12px; font-family: 'Garamond'; line-height: 10px; padding: 5px;"><center><b>Телеканал "TRIQUETRA"</b></center></font> <font style="font-size: 10px; font-family: 'PT Sans Caption'; line-height: 10px; height: 500px; overflow: auto;"> ° генеральный директор - <br> ° директоры - <br> ° продюсеры - <br> ° режиссеры - <br> ° помощник режиссера - <br> ° телерепортеры - <br> ° телеведущий - <br> ° журналисты - <br> ° сценаристы - <br> ° редакторы - <br> ° стилисты - <br> ° стажеры - <br> ° обслуживающий персонал - <br> </font> <font style="font-size: 12px; font-family: 'Garamond'; line-height: 10px; padding: 5px;"><center><b>Газета "В центре событий"</b></center></font> <font style="font-size: 10px; font-family: 'PT Sans Caption'; line-height: 10px; height: 500px; overflow: auto;"> ° генеральный директор - <br> ° продюсеры - <br> ° главный редактор - <br> ° редакторы - <br> ° журналисты - <br> ° маркетологи - <br> ° обслуживающий персонал - <br> </font> </div> </div> </div> <div class="tab"> <input type="radio" id="tab-6" name="tab-group-1"> <label for="tab-6">К</label> <div class="content"> <div style="height: 420px; width: 410px;"> <div style="width: 380px; font-size: 18px; font-family: 'Philosopher', sans-serif; background-color: #31282b; color: #7d797d; padding: 5px; text-align: center;">Коммерческая сфера</div> <font style="font-size: 7px; font-family: 'Arial'; line-height: 7px;"><center>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </center></font><br> <div style="height: 2px;"></div> <font style="font-size: 12px; font-family: 'Garamond'; line-height: 10px; padding: 5px;"><center><b>Городской банк</b></center></font> <font style="font-size: 10px; font-family: 'PT Sans Caption'; line-height: 10px; height: 500px; overflow: auto;"> ° генеральный директор - <br> ° директор - <br> ° служба безопасности - <br> ° акционеры - <br> ° финансисты - <br> ° менеджеры - <br> ° юристы - <br> </font> </div> </div> </div> <div class="tab"> <input type="radio" id="tab-7" name="tab-group-1"> <label for="tab-7">И</label> <div class="content"> <div style="height: 420px; width: 410px;"> <div style="width: 380px; font-size: 18px; font-family: 'Philosopher', sans-serif; background-color: #31282b; color: #7d797d; padding: 5px; text-align: center;">Индустрия развлечений</div> <font style="font-size: 7px; font-family: 'Arial'; line-height: 7px;"><center>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </center></font><br> </div> </div> </div> <div class="tab"> <input type="radio" id="tab-8" name="tab-group-1"> <label for="tab-8">К</label> <div class="content"> <div style="height: 420px; width: 410px;"> <div style="width: 380px; font-size: 18px; font-family: 'Philosopher', sans-serif; background-color: #31282b; color: #7d797d; padding: 5px; text-align: center;">Криминальный бизнес</div> </div> </div> </div> <div class="tab"> <input type="radio" id="tab-9" name="tab-group-1"> <label for="tab-9">П</label> <div class="content"> <div style="height: 420px; width: 410px;"> <div style="width: 380px; font-size: 18px; font-family: 'Philosopher', sans-serif; background-color: #31282b; color: #7d797d; padding: 5px; text-align: center;">Прочие профессии</div> </div> </div> </div> </div></center></div></div></div></div></center></div>