Код:
<!--HTML-->
<style type="text/css">.altairs {
position: relative;
width: 500px;
height: 480px;
}
.altair {
float: left;
}
.altair label {
display: block;
width: 40px;
background-color: rgba(255,255,255,0.5);
padding: 7px;
left: 20px;
color: #72583b;
position: relative;
margin-right: 4px;
font-family: arial;
font-size:10px;
text-transform: uppercase;
text-align: center;
}
.altair [type=radio] {
display: none;
}
.rigel {
position: absolute;
top: 30px;
bottom: 0px;
right: 0px;
background-color:rgb(226, 219, 212);
padding: 20px;
width: 450px;
height: 350px;
text-align: justify;
font-family: verdana;
font-size: 9px;
overflow: auto;
}
.rigel::-webkit-scrollbar { width: 2px; height: 2px; }
.rigel::-webkit-scrollbar-track { background-color: #EBEBE9; }
.rigel::-webkit-scrollbar-thumb { background-color: #DBC19E; }
[type=radio]:checked ~ label {
background-color: rgba(255,255,255,0.8);
color: #484034;
z-index: 2;
}
[type=radio]:checked ~ label ~ .rigel {
z-index: 1;
}</style>
<div class="bckgrimg">
<div class="bckgrimg2">
<div class="shivr">
<div class="tatata">
<div class="tatata2">
<div class="txth1">houston</div>
<div class="txth2">go away with me <br>
● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● ● </div>
<br>
<center><div class="altairs">
<div class="altair">
<input type="radio" id="tab-1" name="tab-group-1" checked="">
<label for="tab-1">I</label>
<div class="rigel">
<div class="txth1" style="font-size: 20px;">Муниципальные организации </div><br> <br>
<div style="font-size:14px"><b>Г</b>ородской муниципалитет</div><br>
<div style="text-align: justify;">(члены городского совета, конгрессмены, помощники и т.д.)</div><br>
<b>агент ФБР: </b><a href="https://gotohouston.rusff.me/profile.php?id=2058">Kai Mulder</a><br>
<b>мэр города: </b><a href="https://gotohouston.rusff.me/profile.php?id=8">robert hayle</a><br><br>
<hr><br>
<div style="font-size:14px"><b>М</b>едицинский центр "Memorial Hermann"</div><br>
<div style="text-align: justify;">Крупный медицинский комплекс, в состав которого входит реабилитационный госпиталь на 119 коек, клиника, сеть амбулаторных центров реабилитации и научный центр<br>
(главврач, хирурги, терапевты, психиатры, травматологи, санитары, медсестры и т.д.)</div><br>
<b>интерн: </b><a href="https://gotohouston.rusff.me/profile.php?id=865">Ariel Donaghue</a><br>
<b>педиатр: </b><a href="https://gotohouston.rusff.me/profile.php?id=1257">Rachel Bronx</a><br>
<hr><br>
<div style="font-size:14px"><b>Д</b>епартамент полиции </div><br>
<div style="text-align: justify;">(начальник полиции, капитан, лейтенант, инспектор, стажеры, консультанты, судмедэксперты и т.д.)</div><br>
<b>Полицейский отдела нравов: </b><a href="https://gotohouston.rusff.me/profile.php?id=426">Frank MacFayden</a><br>
<hr><br>
<div style="font-size:14px"><b>К</b>осмический центр имени Линдона Джонсона</div><br>
<div style="text-align: justify;">(директор, директор пресс-службы, директор управления полётами, астрофизик, разработчики компьютерного аппаратного обеспечения, инженер систем жизнеобеспечения и т.д.)</div><br>
<b>генеральный директор: </b><a href="https://gotohouston.rusff.me/profile.php?id=2038">Vincent Mulder</a><br>
<b>заместитель директора : </b><a href="https://gotohouston.rusff.me/profile.php?id=2034">Penélope Santana</a><br>
<b>директор пресс-службы: </b><a href="https://gotohouston.rusff.me/profile.php?id=2057">Demetra Moriarty</a><br>
<hr><br>
<div style="font-size:14px"><b>Х</b>ьюстонский балет: </div><br>
<div style="text-align: justify;">(владелец, артисты балета)</div><br>
<b>премьер: </b><a href="https://gotohouston.rusff.me/profile.php?id=666">Henry Ross</a><br>
<hr><br>
<div style="font-size:14px"><b>Д</b>ругие: </div><br>
<div style="text-align: justify;">(социальные работники, работники транспорта и проч.)</div><br>
<b>личный охранник: </b><a href="https://gotohouston.rusff.me/profile.php?id=1898">Napoleon Smirnoff</a><br>
<b>волонтер в обществе защиты животных</b><a href="https://gotohouston.rusff.me/profile.php?id=2000">Elza Fox</a><br>
</div></div>
<div class="altair">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">II</label>
<div class="rigel">
<div class="txth1" style="font-size: 20px;"> Образование </div> <br> <br>
<div style="font-size:14px"><b>Х</b>ЬЮСТОНСКИЙ УНИВЕРСИТЕТ</div><br>
<div style="text-align: justify;">Общественный исследовательский университет США, расположенный в Хьюстоне.<br>
(ректорат, деканат, преподаватели, студенты, аспиранты и т.д.)</div><br>
<b>преподаватель финансовой математики: </b><a href="https://gotohouston.rusff.me/profile.php?id=1797">andrew hansen</a><br>
<b>студент: </b><a href="https://gotohouston.rusff.me/profile.php?id=2041">Rogue Mulder</a><br>
<hr><br>
<div style="font-size:14px"><b>У</b>НИВЕРСИТЕТ УИЛЬЯМА МАРША РАЙСА</div><br>
<div style="text-align: justify;">Частный исследовательский университет, расположенный в Хьюстоне, вблизи Хьюстонского района музеев и Техасского медицинского центра.<br>
(ректорат, деканат, преподаватели, студенты, аспиранты и т.д.)</div><br>
<b>студент: </b><a href="https://gotohouston.rusff.me/profile.php?id=2046">Darkness Styles</a>, <a href="https://gotohouston.rusff.me/profile.php?id=111">Catherine Reagan</a><br>
<hr><br>
<div style="font-size:14px"><b>Ш</b>кола </div><br>
<div style="text-align: justify;">(директор, учителя, психологи, ученики и т.д.)</div><br>
<b>Должность:</b>...<br>
<hr><br>
<div style="font-size:14px"><b>Д</b>ругие </div><br>
<div style="text-align: justify;">(частные школы, репетиторы и проч.))</div><br>
<b>Должность:</b>...<br>
</div></div>
<div class="altair">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">III</label>
<div class="rigel">
<div class="txth1" style="font-size: 20px;"> Культура и СМИ </div><br> <br>
<div style="font-size:14px"><b>Т</b>елеканал KUHT CHANNEL 8</div><br>
<div style="text-align: justify;">(владелец, директор, продюсеры, помощники, телеведущие, корреспонденты, операторы, режиссеры, pr-менеджеры, стажеры и т.д.)</div><br>
<b>pr-менеджер: </b><a href="https://gotohouston.rusff.me/profile.php?id=2045">Alejandra Brisson</a><br>
<b>телеведущий: </b><a href="https://gotohouston.rusff.me/profile.php?id=2060">Mark Buchanan</a><br>
<hr><br><div style="font-size:14px"><b>Р</b>адиостанция KUHT</div><br>
<div style="text-align: justify;">(владельцы, радиоведущие, ди-джеи, звукорежиссеры и т.д.)</div><br>
<b>исполнительный директор: </b><a href="https://gotohouston.rusff.me/profile.php?id=1567">tim drake</a><br>
<hr><br><div style="font-size:14px"><b>Г</b>азета "Houston Cronicle"</div><br>
<div style="text-align: justify;">Ежедневная газета, издаваемая в Хьюстоне. Это крупнейшая газета Техаса и десятая по объёму тиража в Соединённых штатах.<br>
(главный редактор, редакторы, корреспонденты, фотокорреспонденты, верстальщики и т.д.)</div><br>
<b>главный редактор: </b><a href="https://gotohouston.rusff.me/profile.php?id=1957">bart cole</a><br>
<b>внештатный корреспондент</b><a href="https://gotohouston.rusff.me/profile.php?id=2000">Elza Fox</a><br>
<hr><br><div style="font-size:14px"><b>И</b>здательство K&K</div><br>
<div style="text-align: justify;">Помогает новым писателям и авторам с изданием их книг.<br>
(владелец, главный редактор, редакторы, корректоры, арт-дикректор, художники и т.д.)</div><br>
<b>Иллюстратор:</b><a href="https://gotohouston.rusff.me/profile.php?id=1999">Leo Vinci</a><br>
<hr><br><div style="font-size:14px"><b>Л</b>ейбл TheTRFactory</div><br>
<div style="text-align: justify;">Крупный звукозаписывающий лейбл с филиалом в Хьюстоне.<br>
(президент, помощники, pr-менеджеры, звукорежиссеры, записывающиеся исполнители и т.д.)</div><br>
<b>Президент:</b>Mr.Cox (NPC)<br>
<b>Помощник президента:</b> <a href="https://gotohouston.rusff.me/profile.php?id=6">Tawny Cox</a><br>
<b>руководитель отдела паблисити: </b><a href="https://gotohouston.rusff.me/profile.php?id=1544">jaime mcgrane</a><br>
<hr><br><div style="font-size:14px"><b>М</b>одный дом Gold Crown</div><br>
<div style="text-align: justify;">(владелец, модельеры, модели, дизайнеры, pr-менеджеры, стилисты и т.д.)</div><br>
<b>модели : </b><a href="https://gotohouston.rusff.me/profile.php?id=2045">Alejandra Brisson</a>, </b><a href="https://gotohouston.rusff.me/profile.php?id=938">abigail morris</a><br>
<hr><br><div style="font-size:14px"><b>Р</b>екламная компания "Atomm"</div><br>
<div style="text-align: justify;">(вакансии)</div><br>
<b>Арт-директор</b><a href="https://gotohouston.rusff.me/profile.php?id=2030">Brian Gate</a><br>
</div></div>
<div class="altair">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">IV</label>
<div class="rigel">
<div class="txth1" style="font-size: 20px;">Сфера услуг и развлечений</div><br> <br>
<div style="font-size:14px"><b>С</b>еть ресторанов "Сомбрерро"</div><br>
<div style="text-align: justify;">(владелец, повара, администраторы, официанты, бармены и т.д.)</div><br>
<b>официант: </b><a href="https://gotohouston.rusff.me/profile.php?id=1994">Nicole Florence</a><br>
<hr><br><div style="font-size:14px"><b>Н</b>очной клуб "Mentha"</div><br>
<div style="text-align: justify;">(владельцы, управляющий, администратор, бармены, танцовщики, охрана и т.д.)</div><br>
<b>бармен: </b><a href="https://gotohouston.rusff.me/profile.php?id=2056">april rogers</a><br>
<hr><br><div style="font-size:14px"><b>Д</b>ругое</div><br>
<div style="text-align: justify;">(парикмахеры, флористы, горничные, тату-мастера и т.д.)</div><br>
<b>Должность:</b>...<br>
</div></div>
<div class="altair">
<input type="radio" id="tab-5" name="tab-group-1">
<label for="tab-5">V</label>
<div class="rigel">
<div class="txth1" style="font-size: 20px;">Частные организации</div><br> <br>
<div style="font-size:14px"><b>D</b>ollar's Yard Compаny</div><br>
<div style="text-align: justify;">Одна из самых известнейших лизинговых компаний США.<br>
(организаторы, координаторы проектов, консультанты, волонтеры и т.д.)</div><br>
<b>президент и основатель компании: </b><a href="https://gotohouston.rusff.me/profile.php?id=1995">David Norton</a><br>
<b>программист: </b><a href="https://gotohouston.rusff.me/profile.php?id=1791">Richard Ford</a><br>
<b>секретарь: </b><a href="https://gotohouston.rusff.me/profile.php?id=1920">Rebecca Isles</a><br>
<hr><br><div style="font-size:14px"><b>Б</b>лаготворительный фонд "Minutes To Midnight"</div><br>
<div style="text-align: justify;">Благотворительный фонд помощи пострадавшим от природных катаклизм и стихийных бедствий.<br>
(президент, программист, секретарь и т.д.)</div><br>
<b>Организатор:</b> <a href="https://gotohouston.rusff.me/profile.php?id=6">Tawny Cox</a><br>
<hr><br><div style="font-size:14px"><b>Д</b>ругие</div><br>
<div style="text-align: justify;">(предприниматели и владельцы собственных салонов, фирм, организаций и т.д.)</div><br>
<b>владелец казино "CAESARS PALACE - MINI" :</b> <a href="https://gotohouston.rusff.me/profile.php?id=1864">Diderick Angelo</a><br>
<b>хозяйка клуба "SUGAR" :</b> <a href="https://gotohouston.rusff.me/profile.php?id=1863">Amelie Angelo</a><br>
<b>владелица & учитель школы танцев: </b><a href="https://gotohouston.rusff.me/profile.php?id=1486">Cheryl Lane</a><br>
<b>владелец строительной компании "lawwrence inc.":</b><a href="https://gotohouston.rusff.me/profile.php?id=2067">rayner lawrence</a><br>
<b>младший партнер юридической фирмы Reeves & Associates: </b><a href="https://gotohouston.rusff.me/profile.php?id=2065">eliot reeves</a><br>
</div></div>
<div class="altair">
<input type="radio" id="tab-6" name="tab-group-1">
<label for="tab-6">VI</label>
<div class="rigel">
<div class="txth1" style="font-size: 20px;">Остальные творческие профессии</div><br>
<div style="font-size:14px">(танцоры, актеры, музыканты, художники и проч.)</div><br>
<b>басист в группе: </b><a href="https://gotohouston.rusff.me/profile.php?id=2041">Rogue Mulder</a><br>
<b>уличный музыкант: </b><a href="https://gotohouston.rusff.me/profile.php?id=2050">benjamin starker</a><br>
<b>художница: </b><a href="https://gotohouston.rusff.me/profile.php?id=2037">claire mulder</a><br>
<b>художница</b><a href="https://gotohouston.rusff.me/profile.php?id=2000">Elza Fox</a><br>
</div></div>
<div class="altair">
<input type="radio" id="tab-7" name="tab-group-1">
<label for="tab-7">VII</label>
<div class="rigel">
<div class="txth1" style="font-size: 20px;">Криминал</div><br> <br>
<div style="font-size:14px">(воры, аферисты, наркодиллеры и проч.)</div><br>
<b>гангстер:</b> <a href="https://gotohouston.rusff.me/profile.php?id=1864">Diderick Angelo</a><br>
<b>известный криминальный авторитет в США: </b><a href="https://gotohouston.rusff.me/profile.php?id=1995">David Norton</a><br>
<b>минералог: </b><a href="https://gotohouston.rusff.me/profile.php?id=1920">Rebecca Isles</a><br>
<b>профессиональный вор, домушник: </b><a href="https://gotohouston.rusff.me/profile.php?id=1791">Richard Ford</a><br>
</div></div>
<div class="altair">
<input type="radio" id="tab-8" name="tab-group-1">
<label for="tab-8">VIII</label>
<div class="rigel">
<div class="txth1" style="font-size: 20px;">Другие профессии</div><br> <br>
<div style="font-size:14px">(все, кто не попал под описание предыдущих профессий)</div><br>
<b>журналист в elle: </b><a href="https://gotohouston.rusff.me/profile.php?id=2013">Cecelia Middleton</a><br>
<b>инвестиционный управляющий: </b><a href="https://gotohouston.rusff.me/profile.php?id=2048">Colton Reeves</a><br>
<b>ландшафтный дизайнер: </b><a href="https://gotohouston.rusff.me/profile.php?id=1837">zoe snow</a><br>
<b>няня: </b><a href="https://gotohouston.rusff.me/profile.php?id=2041">Rogue Mulder</a><br>
<b>Трэйдер в компании «Victoria's Secret»</b><a href="https://gotohouston.rusff.me/profile.php?id=1923">Stephanie А. Bathory</a><br>
<b>частный психолог: </b><a href="https://gotohouston.rusff.me/profile.php?id=48">Marlena J. Alexander</a><br>
</div>
</div></center>
<center><div style="font-size:16px"><b>ОБЯЗАТЕЛЬНО УКАЗЫВАЙТЕ, В КАКОЙ РАЗДЕЛ ПРОФЕССИЙ ВАС ЗАНОСИТЬ
И НЕ ЗАБЫВАЙТЕ ВСТАВЛЯТЬ ТЕКСТ В КОД</b></div></center><br>
<div class="bckgrimg2" style="width: 530px; margin-left: 10px;"> <div class="txth"><div class="tatata"> <div class="txth" style="width: 480px; margin-left: 24px;"> <br><code> <b>Должность: </b><a href="ссылка на профиль">Имя Персонажа на английском</a><br></code><br><br></div></div></div></div>
<br><br><br>
</div></div></div>
</div></div></div>
