Код:
<!--HTML-->
<style>
.notebook3 {
width: 600px;
height: 511px;
overflow: auto;
position: relative;
}
.notebook3 > input {
display: none;
}
.notebook3 > div {
position: absolute;
box-sizing: border-box;
top: 30px;
left: 0px;
bottom: 0px;
right: 0px;
border-radius: 10px;
padding: 0px 1em;
text-align: justify;
z-index: 0; transition: all 0.5s ease 0s, z-index 0s 0.5s;
}
.notebook3 > div > *:first-child {
display: block;
position: absolute;
box-sizing: border-box;
top: -35px;
margin-left: 93px;
width: 100px;
height: 35px;
font-family: Bebas Neue;
font-size: 16px;
background: rgba(190, 185, 235, 0.6) url(viewtopic.php);
padding: 6px;
border: 1px solid rgba(107, 180, 100, 0.3);
border-top: 2px solid rgba(107, 180, 100, 0.3);
border-bottom: 1px solid rgba(107, 180, 100, 0.3);
color: #fff;
cursor: pointer;
text-align: center;
transition: all 0.5s ease 0s;
border-top-left-radius: 13px;
border-top-right-radius: 13px;
}
.notebook3 > div > *:not(:first-child) {
opacity: 0;
transition: all 0.5s ease 0s;
}
.notebook3 > div:nth-of-type(1) > *:first-child { left: 2px; }
.notebook3 > div:nth-of-type(2) > *:first-child { left: 100px; }
.notebook3 > div:nth-of-type(3) > *:first-child { left: 200px; }
.notebook3 > div:nth-of-type(4) > *:first-child { left: 300px; }
.notebook3 > div:nth-of-type(5) > *:first-child { left: 400px; }
.notebook3 > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.notebook3 > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.notebook3 > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.notebook3 > input:nth-of-type(4):checked ~ div:nth-of-type(4),
.notebook3 > input:nth-of-type(5):checked ~ div:nth-of-type(5)
{
z-index: 10;
transition: all 0.5s ease 0.5s, z-index 0s 0.5s;
}
.notebook3 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:first-child,
.notebook3 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:first-child,
.notebook3 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:first-child,
.notebook3 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:first-child,
.notebook3 > input:nth-of-type(5):checked ~ div:nth-of-type(5) > *:first-child
{
color: #e9e9e9;
transition: all 0.5s ease 0.5s;
}
.notebook3 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:not(:first-child),
.notebook3 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:not(:first-child),
.notebook3 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:not(:first-child),
.notebook3 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:not(:first-child),
.notebook3 > input:nth-of-type(5):checked ~ div:nth-of-type(5) > *:not(:first-child)
{opacity: 3;
transition: all 0.5s ease 0.5s;
}
</style>
Код:
<!--HTML-->
<center>
<div class="bodys">
<div class="naz">
<p><span style="color: #ffffff; font-family: 'Intro'; font-size: 28px; letter-spacing: -1px; line-height: 4px; text-shadow: #575757 0px 1px 0px;">
Досуг
</div></span></p>
<span style="color: #ffffff; font-family: 'Flow Ext'; font-size: 13px; letter-spacing: 1px; line-height: 4px; text-shadow: #575757 0px 1px 0px;">
отдайте мне колье, умоляю,<br>и убивайте друг друга сколько влезет
</span>
<br>
<br>
<div class="text">
<center>
<div class="notebook3">
<input type="radio" name="notebook3a" id="notebook3a_1" checked="checked">
<input type="radio" name="notebook3a" id="notebook3a_2">
<input type="radio" name="notebook3a" id="notebook3a_3">
<input type="radio" name="notebook3a" id="notebook3a_4">
<input type="radio" name="notebook3a" id="notebook3a_5">
<div>
<label for="notebook3a_1">спорт</label><br>
<div style="margin-left: 10px; text-align: center; font-family: Nautilus Pompilius; color: #23396b; text-shadow: 1px 1px 0px #ececf2;position: relative;letter-spacing: px; font-size: 36px;">спорт</div>
<div style="font-family:cuprum; font-size: 16px; font-weight: bold; background-color: rgba(166, 163, 235, 0.66); text-align: center;">Футбольная команда "Йельские Бульдоги"/Регби</div>
<table>
<tr>
<td>Им завидуют и их ненавидят. Именно эти парни приходят во снах к девушкам, доводя их до сбивчивого дыхания. Именно они те, кого восхваляют не только студентки, но и преподаватели. Они зарабатывают очки и собирают полные стадионы. Именно футболисты завсегдатаи каждой университетской вечеринки. Они - члены лучших братств. Никто до сих пор не понимает, почему же эти ребята так популярны, но едва взгляд касается их накаченных рельефных тел, как всё встает на свои места.</td>
<td>Руководитель <br>
Помощник тренера<br>
►<b>Капитан, квотербек(QB)</b> - <a href=http://flipcup.rusff.me/profile.php?id=86><b>Adam Knight</b></a><br>
Гард (G) <br>
Тэкл (2 игрока - (DT) и (DE)) <br>
Центр (C)<br>
Мидлбэк(MLB)<br>
Аутсайдбэк(OLB)<br>
Корнербек(CB)<br>
Тайт-энд(TE)<br>
Фулбэк<br>
Раннингбэк(RB)(2 игрока - Тэйлбек и Фуллбек)<br>
Уайд ресивер(WR)<br>
Сэйфти (S)</td>
</tr>
</table>
<div style="font-family:cuprum; font-size: 16px; font-weight: bold; background-color: rgba(166, 163, 235, 0.66); text-align: center;">Команда черлидеров "Йельские Бульдоги"</div>
<table>
<tr>
<td>Спортивная поддержка наших футболистов и баскетболистов. Зачастую их путают с куклами в коротких юбках, но эти девушки могут дать фору каждому, кто посягнет на их личное пространство. Они тренируются каждую свободную минуту, отдавая черлидингу все свое время. Их поддержки достойны восхищения, а прыжки - оваций. Не все черлидеры - барби, флиртующие с каждым симпатичным парнем. Чтобы заработать место в команде, им пришлось попотеть. Помимо хороших физических данных, они определенно точно должны обладать невероятной внешностью и харизмой. И если у тебя есть все качества для того, чтобы попасть в команду, не сомневайся, тебя обязательно пригласят.</td>
<td>Руководитель:...<br>
►<b> Капитан, флаер</b> - <a href=http://flipcup.rusff.me/profile.php?id=11><b>Eva Butler</b></a><br>
►<b> Флаер </b>- <a href=http://flipcup.rusff.me/profile.php?id=85><b>Daniella Black</b></a><br>
Флаер <br>
Поддержка флаеров<br>
Поддержка флаеров<br>
Поддержка флаеров<br>
Верхняя часть пирамиды<br>
Верхняя часть пирамиды<br>
Верхняя часть пирамиды<br>
Нижняя часть пирамиды<br>
Нижняя часть пирамиды<br>
Нижняя часть пирамиды<br>
►<b> Флаер (запас)</b>- <a href=http://flipcup.rusff.me/profile.php?id=83><b>Camila de Lacerda</b></a><br>
Верхняя часть пирамиды (запас)<br>
Нижняя часть пирамиды (запас)<br>
</td>
</tr>
</table>
<div style="font-family:cuprum; font-size: 16px; font-weight: bold; background-color: rgba(166, 163, 235, 0.66); text-align: center;">Баскетбольная команда "Бешеные Доги"</div>
<table>
<tr>
<td>Баскетбол - один из самых значимых видов спорта в Йельском университете. Парни, что состоят в команде, имеют фантастическую физическую подготовку. Между собой, в Йельском университете, ходит слух, что команда футболистов и баскетболистов состоит в траблах, но только самые приближенные в курсе, что парни дружат и нередко зависают вместе. Баскетболисты Йеля имеют невероятные шансы попасть в лигу NBA, но им нужно лишь немного попотеть для того, чтобы получить одобрение спонсоров. "Бешеные Доги" красивы, популярны и востребованы. Их уважают, на них равняются, но только профессионалы попадают в команду.
</td>
<td>Руководитель:...<br>
Капитан, разыгрывающий защитник<br> ► <a href=http://flipcup.rusff.me/profile.php?id=32><b>Tate Winehouse</b></a><br>
Второй капитан, атакующий защитник ► <a href=http://flipcup.rusff.me/profile.php?id=63><b>Jamie Resh</b></a><br>
Центровой ► <a href=http://flipcup.rusff.me/profile.php?id=80><b>Jack Daniel</b></a><br><br>
Тяжёлый форвард<br>
Легкий форвард</td>
</tr>
</table>
<div style="font-family:cuprum; font-size: 16px; font-weight: bold; background-color: rgba(166, 163, 235, 0.66); text-align: center;">Команда по плаванию "Йельские Акулы"</div>
<table>
<tr>
<td>Говорят, что бесконечно можно смотреть на три вещи: как горит огонь, течет вода и другие работают. Но видели бы вы команду "Йельских Акул" во время тренировок! Поверьте, данное зрелище намного более захватывающее, чем вышеперечисленные. Парни и девушки состоящие в команде могут похвастаться не только прекрасной физической подготовкой, но и потрясающей скоростью и выполнением трюков, от которых у наблюдающих захватывает дух. Некоторые злые языки, не попавшие в команду, ошибочно думают, что все плавцы вступили в состав ради популярности, позабыв о том, какое количество наград завоевали "Йельские Акулы" в турнирах между университетами.
</td>
<td>Руководитель:...<br>
Капитан ► <a href=http://flipcup.rusff.me/profile.php?id=3><b>Barry W. Olivero </b></a><br>
Пловец ► <a href=http://flipcup.rusff.me/profile.php?id=23><b>Benjamin “Benni” Backham</b></a><br>
Пловец ► <a href=http://flipcup.rusff.me/profile.php?id=50><b>Alex Smith</b></a><br>
</td>
</tr>
</table>
<div style="font-family:cuprum; font-size: 16px; font-weight: bold; background-color: rgba(166, 163, 235, 0.66); text-align: center;">Фехтовальный клуб "Три мушкетера"</div>
<table>
<tr>
<td>Что может быть романтичней в истории, чем Эпоха Просвещения? Дворцовые перевороты, безупречные кавалеры, светские балы и, конечно, дуэли за честь прекрасной дамы, несмотря на строжайший запрет. Вы никогда не зачитывались томиком Дюма? Неужели Вам никогда не хотелось ощутить холод клинка в своей ладони, сразившись с одним из гвардейцев кардинала? Есть вещи, которые никогда не выйдут из моды, как например такой вид спорта, как фехтование на шпагах. Да, возможно спортсмены данного клуба немного устарели в своих предпочтениях для нашего времени, но наблюдать за тем, как они отражают удары и с каким изяществом наносят сокрушающий удар своим соперникам - одно удовольствие.
</td>
<td>Руководитель:...<br>
Участник ► <a href=http://flipcup.rusff.me/profile.php?id=12><b>Ursula Knoxville</b></a><br>
Участник ► <a href=http://flipcup.rusff.me/profile.php?id=50><b>Alex Smith</b></a><br>
Участник ► <a href=http://flipcup.rusff.me/profile.php?id=94><b>Daniel Olive</b></a><br>
</td>
</tr>
</table>
<div style="font-family:cuprum; font-size: 16px; font-weight: bold; background-color: rgba(166, 163, 235, 0.66); text-align: center;">Конный клуб</div>
<table>
<tr>
<td>Что может быть интересней субботнего раннего утра, бокальчика прохладного шардоне и навеса под палящим утренним солнцем? Конечно же топот копыт, овации трибун и тесные бриджи. Эти ребята, что отдают свою душу конному спорту, могут взять самые высокие барьеры. Они стремятся прийти к финишу первыми, ведь они знают свою цель. Конный спорт - один из самых элитных видов спорта, и частенько студенты Йельского университета проводят здесь свое время. Но не для того, чтобы наслаждаться поджарыми телами баснословно дорогих скакунов. А лишь для того, чтобы наблюдать за невероятными лакеями, чьи руки и поводья сливаются воедино, а ставки растут с каждой минутой, приближающейся к финишу. </td>
<td>Руководитель<br>
Лакей ► <a href=http://flipcup.rusff.me/profile.php?id=45><b>Emmanuel Rosier</b></a><br>
Лакей ►<a href=http://http://flipcup.rusff.me/profile.php?id=54><b>Annabelle Valentine</b></a><br>
Лакей:
</td>
</tr>
</table>
</div>
<div>
<label for="notebook3a_2">знания</label><br>
<div style="margin-left: 10px; text-align: center; font-family: Nautilus Pompilius; color: #23396b; text-shadow: 1px 1px 0px #ececf2;position: relative;letter-spacing: px; font-size: 36px;">знания</div>
<div style="font-family:cuprum; font-size: 16px; font-weight: bold; background-color: rgba(166, 163, 235, 0.66); text-align: center;">Научный клуб "Во все тяжкие"</div>
<table>
<tr>
<td>Химики, биоинженеры и т.п. - так они называют свои специальности. Великие ученые - такое будущее пророчит им окружение. Им не нужно знать много. Они должны знать абсолютно все. Они изучают всевозможную литературу все свободное время. Их приглашают на самые громкие вечеринки университета, потому что только они знают, как из обычного алкогольного набора сделать настоящий взрывной напиток, способный снести башню даже самому стойкому. За их разработками охотятся. Их хотят получить самые именитые компании мира. Ну а им остается только впитывать в себя еще большее количество информации и наслаждаться тем, что впереди их ждет великое будущее.</td>
<td>Руководитель:...<br>
</td>
</tr>
</table>
<div style="font-family:cuprum; font-size: 16px; font-weight: bold; background-color: rgba(166, 163, 235, 0.66); text-align: center;">Компьютерный клуб "Под куполом"
</div>
<table>
<tr>
<td>Великие умы, чьи головы забиты двоичными кодами, а на столе один сплошной бардак. Они могут проникнуть в любую систему любого университета. Ходят слухи, что им даже удалось взломать базу данных Гарварда, но это не точно. Они контролируют работу всех университетских сайтов. Их имена можно ставить в сравнение с такими великими хакерами как Джинсон Анчета, Оуэн Уолкер или Кевин Митник, имена которых вам не известны. Правда, половина из них давно забыли как выглядит солнце, но у наших ребят все еще есть будущее.</td>
<td>Руководитель:...<br>
</td>
</tr>
</table>
<div style="font-family:cuprum; font-size: 16px; font-weight: bold; background-color: rgba(166, 163, 235, 0.66); text-align: center;">Книжный клуб "Общество мертвых поэтов"
</div>
<table>
<tr>
<td>Их сложно назвать любителями книг, так как в наше время любой образованный человек любит читать; из них всех вряд ли выйдут новые Джейн Остин или Оскар Уальд. Они люди умеющие видеть гениальность в том, что сокрыто от глаз простых обывателей, разглядеть красоту в уродстве, а чистоту и невинность среди мрака. Их мнение вряд ли совпадет с Вашим, а точка зрения будет явно отличаться от большинства зевак, критиков, знатоков. В их сборах есть что-то таинственное и завораживающее точно также, как огонь манит своим теплом продрогших прохожих. Их беседы напоминают посиделки Доктора Ватсона и Шерлока Хомса возле камина на Бейкер-Стрит 221B, вот только вместо скрипки можно услышать тихий джаз и голос Луи Армстронга.</td>
<td>Руководитель:...<br>
Член клуба ► <a href=http://flipcup.rusff.me/profile.php?id=46><b>Witek Włodzimierz</b></a><br>
</td>
</tr>
</table>
</div>
<div>
<label for="notebook3a_3">творчество</label><br>
<div style="margin-left: 10px; text-align: center; font-family: Nautilus Pompilius; color: #23396b; text-shadow: 1px 1px 0px #ececf2;position: relative;letter-spacing: px; font-size: 36px;">творчество</div>
<div style="font-family:cuprum; font-size: 16px; font-weight: bold; background-color: rgba(166, 163, 235, 0.66); text-align: center;">Музыкальный кружок "Игры разума"
</div>
<table>
<tr>
<td>Человек-оркестр - это точно не про них. Возможно, здесь самые талантливые ребята всего университета. А возможно, сюда попали по блату только для того, чтобы блистать на сцене или попадать на особо важные закрытые вечера, которые устраивает Йельский университет. Конечно, популярность - не их кредо, но это особо никого не волнует. Они творят музыку словно Моцарт, Луи Армстронг или Честер Бенингтон, остальные, пожалуй, не важно.</td>
<td>Руководитель:...<br>
Вокал, гитара ► <a href=http://flipcup.rusff.me/profile.php?id=21><b>Kara Beckham</b></a><br>
Барабаны ► <a href=http://flipcup.rusff.me/profile.php?id=52><b>Veronica Callahan</b></a><br>
</td>
</tr>
</table>
<div style="font-family:cuprum; font-size: 16px; font-weight: bold; background-color: rgba(166, 163, 235, 0.66); text-align: center;">Театральный кружок "Игра престолов"
</div>
<table>
<tr>
<td>Свет софитов, бессонные ночи и вечный ремонт декорация. Абсолютно творческие, возвышенные и невероятно талантливые люди. Не каждый может выдержать того напряжения, которое испытывают эти ребята, находясь на сцене перед многотысячной аудиторией. Нездоровая конкуренция, борьба за главную роль - каждый старается найти скелет в шкафу своего оппонента. Порой, они готовы на все, и даже чуточку больше.</td>
<td>Руководитель:...<br>
Режиссер-постановщик <br>
Актер ► <a href=http://flipcup.rusff.me/profile.php?id=64><b>Richard Hampton</b></a><br>
Актер ► <a href=http://flipcup.rusff.me/profile.php?id=94><b>Daniel Olive</b></a><br>
<b></b>Ведущая актриса<br>
<b></b>Ведущая актриса<br>
<b></b>Ведущая актриса<br>
</td>
</tr>
</table>
<div style="font-family:cuprum; font-size: 16px; font-weight: bold; background-color: rgba(166, 163, 235, 0.66); text-align: center;">Студенческое радио "YaleFM"
</div>
<table>
<tr>
<td>Настоящие жаворонки, готовые встать хоть в 4 часа утра ради того, чтобы раскачать Йельский университет едва взойдет солнце. Именно они тот голос, что слышат студенты в коридорах и на больших переменах из ниоткуда. Именно они те ребята, которые формируют музыкальную волну всего Йеля. Именно они заряжают тебя бодростью и хорошим настроением на весь день. </td>
<td>Руководитель:...<br>
DJ <br>
DJ ► <a href=http://flipcup.rusff.me/profile.php?section=personal&id=13><b>Erin Jefferson</b></a><br>
DJ ► <a href=http://flipcup.rusff.me/profile.php?id=30><b>Reina Tonks</b></a><br>
</td>
</tr>
</table>
</div>
<div>
<label for="notebook3a_4">другое</label><br>
<div style="margin-left: 10px; text-align: center; font-family: Nautilus Pompilius; color: #23396b; text-shadow: 1px 1px 0px #ececf2;position: relative;letter-spacing: px; font-size: 36px;">другое</div>
<div style="font-family:cuprum; font-size: 16px; font-weight: bold; background-color: rgba(166, 163, 235, 0.66); text-align: center;">Студенческий совет
</div>
<table>
<tr>
<td>Главный орган власти Йельского университета, не беря в учет, пожалуй, деканат и ректорат. Все члены совета утверждены деканатом, перед которым несут полную ответственность за все свои действия. Но в реальности все не так уж и гладко. Люди, что входят в совет - амбициозны, властны и целеустремленны. Ими движет мания величия, они считают себя королями. Именно эти ребята имеют доступ ко всей университетской базе университета. Их слово имеет значимый вес в принятии важных решений. Репутация этих ребят бежит быстрее их самих, но им приходится несладко, ведь эту репутацию нельзя запятнать. Иначе можно оказаться в полнейшей... дыре. Их презирают, ими восхищаются. О них говорят, их обсуждают. Многие за место в совете готовы продать душу не только дьяволу. Ха. Да кто ж откажется от такого влияния?<br>p.s. президенты фратрий входят в совет по умолчанию.</td>
<td>Руководитель:...<br>
Председатель <br>
Заместитель председателя <br>
Представитель культурно-массового комитета <br>
Представитель информационного комитета<br>
Представитель спортивного комитета ► <a href=http://flipcup.rusff.me/profile.php?id=63><b>Jamie Resh</b></a><br>
Представитель учебного комитета ► <a href=http://flipcup.rusff.me/profile.php?id=12><b>Ursula Knoxville</b></a><br>
Представитель социального комитета <br>
Представители комитетов - по одному с факультета:<br>
</td>
</tr>
</table>
<div style="font-family:cuprum; font-size: 16px; font-weight: bold; background-color: rgba(166, 163, 235, 0.66); text-align: center;">Студенческая газета "Yale Times"
</div>
<table>
<tr>
<td>Скандалы, интриги, расследования. Всегда в курсе, всегда в теме. Не пропустят ни одну университетскую попойку, а так же важные события всегда будут у них на виду. Небольшой офис, что выделил для газеты университет, совершенно точно не смущает ребят. Ведь именно в этом уютном помещении они создают настоящие сенсации. Акулы пера, профессионалы своего дела, абсолютно безбашенные и беспардонные ребята. Ходят слухи, что именно эти работяги ведут yalealert.com. Но это не точно. Хотите быть в курсе самых последних событий? Читайте в следующем выпуске "Yale Times".<br></td>
<td>Руководитель <br>
Главный редактор <br>
Помощник главного редактора<br>
Журналист, фотограф <br>
Журналист, фотограф ► <a href=http://flipcup.rusff.me/profile.php?id=95><b>Ruby Marlow</b></a><br>
Журналист, редактор ► <a href=http://flipcup.rusff.me/profile.php?id=93><b>Charlotte Carroll</b></a><br>
Фотограф ► <a href=http://flipcup.rusff.me/profile.php?id=20><b>Avery Rhodes</b></a><br>
Журналист, редактор <br>
Колонка "Ask me"► <a href=http://flipcup.rusff.me/profile.php?id=6><b>Cherie Hermès</b></a><br>
Колонка "Yale look" (мода) ► <a href=http://flipcup.rusff.me/profile.php?id=16><b>Danica A. Olivero</b></a><br>
Колонка "Спорт"
</td>
</tr>
</table>
<div style="font-family:cuprum; font-size: 16px; font-weight: bold; background-color: rgba(166, 163, 235, 0.66); text-align: center;">Кулинарные курсы "Yale Fresh"
</div>
<table>
<tr>
<td>Вам надоело питаться фаст-фудом и прочей ерундой? В руках вы не умеет держать поварешку, а кондитерский шприц кажется вам простой игрушкой? Хотите удивить кулинарными талантами себя и своих близких? Тогда приходите в "Йель-Фрэш", где вас научать не только готовить правильную и полезную пищу, но и покажут, как создавать кулинарные шедевры, гордиться которыми будут даже Горден Рамзи и Джейми Оливер.</td>
<td>Руководитель <br>
Помощник руководителя ► <a href=http://flipcup.rusff.me/profile.php?id=69><b>Maddie Drake.</b></a><br>
Обучающиеся<br>
</td>
</tr>
</table>
<div style="font-family:cuprum; font-size: 16px; font-weight: bold; background-color: rgba(166, 163, 235, 0.66); text-align: center;">ЛИЧНЫЙ ДОСУГ</div>
<table>
<tr><td><b>Команда стритрейсеров</b></td>
<td>Стритрейсеры:<br>
►<a href=http://flipcup.rusff.me/profile.php?id=24><b>Michael Ward</b></a><br>
►<a href=http://flipcup.rusff.me/profile.php?id=45><b>Emmanuel Rosier</b></a><br>
</td>
</tr>
</table>
</div>
</center>
</div></div>
Код:
►<b> досуг</b>- <a href=http://ссылка на профиль><b>имя на англ.</b></a><br>
