Код:
<!--HTML-->
<style>
.notebook2 {
width: 600px;
height: 511px;
position: relative;
}
.notebook2 > input {
display: none;
}
.notebook2 > div {
position: absolute;
box-sizing: border-box;
top: 30px;
left: 0px;
bottom: 0px;
right: 0px;
border-radius: 10px;
padding: 0px 1em;
z-index: 0; transition: all 0.5s ease 0s, z-index 0s 0.5s;
}
.notebook2 > div > *:first-child {
display: block;
position: absolute;
box-sizing: border-box;
top: -35px;
margin-left: 46px;
width: 100px;
height: 35px;
font-family: Bebas Neue;
font-size: 16px;
background: rgba(190, 185, 235, 0.6) url(viewtopic.php);
padding: 2px;
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;
}
.notebook2 > div > *:not(:first-child) {
opacity: 0;
transition: all 0.5s ease 0s;
}
.notebook2 > div:nth-of-type(1) > *:first-child { left: 2px; }
.notebook2 > div:nth-of-type(2) > *:first-child { left: 100px; }
.notebook2 > div:nth-of-type(3) > *:first-child { left: 200px; }
.notebook2 > div:nth-of-type(4) > *:first-child { left: 300px; }
.notebook2 > div:nth-of-type(5) > *:first-child { left: 400px; }
.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4),
.notebook2 > 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;
}
.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:first-child,
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:first-child,
.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:first-child,
.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:first-child,
.notebook2 > input:nth-of-type(5):checked ~ div:nth-of-type(5) > *:first-child
{
color: #e9e9e9;
transition: all 0.5s ease 0.5s;
}
.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:not(:first-child),
.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:not(:first-child),
.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:not(:first-child),
.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:not(:first-child),
.notebook2 > 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>
<center>
Бакалавриат и магистратура являются базовыми уровнями высшего образования. Тем не менее, Йель предоставляет возможность повышать квалификацию (аспирантура, докторантура, MBA).
<br><br>
1 курс: 18-19 y.o.<br>
2 курс: 19-20 y.o.<br>
3 курс: 20-21 y.o.<br>
4 курс: 21-22 y.o.<br>
------------------------------<br>
5 курс: 22-23 y.o. - 1-ый год обучения на магистратуре.<br>
</center>
<br>
<div class="text">
<center>
<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">
<input type="radio" name="notebook2a" id="notebook2a_4">
<input type="radio" name="notebook2a" id="notebook2a_5">
<div>
<label for="notebook2a_1">Human&Social</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>
<table>
<tr>
<td><img src="http://s6.uploads.ru/AbwKO.png" style='width: 150px; padding-left: 65px;'></td>
<td>Специальности:<br>
Филология <br>
Лингвистика <br>
Журналистика <br>
Социология<br>
Психология <br>
Теология<br>
Реклама и связи с общественностью</td>
</tr>
</table>
<div style="font-family:cuprum; font-size: 14px;">
Факультет социальных и гуманитарных наук - один из крупнейших факультетов в США, который выпускает профессионалов в сфере самых различных направлений. Ежегодно Йель организует региональные и международные конференции, на которых студенты факультета имеют возможность применять свои знания на практике, общаясь с ведущими специалистами со всего мира. Помимо того, что конференции проводят в стенах самого университета, обучающиеся часто хвастают рассказами о семинарах в летних лагерях у берегов калифорнийского залива или у подножья гор курортов Квебека. Практику же они обычно проходят в издательствах, редакциях газет, исследовательских центрах, в качестве переводчиков в международных компаниях. Как правило, по окончании учебной практики, у студентов есть большие шансы продолжить свою карьеру в местах прохождения стажировки, тем не менее, после получения степени бакалавра большая часть выпускников предпочитает продолжать обучение в магистратуре.
</div>
</div>
<div>
<label for="notebook2a_2">medical</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>
<table>
<tr>
<td><img src="http://sf.uploads.ru/mV1fS.png" style='width: 150px; padding-left: 65px;'></td>
<td>Специальности:<br>
Хирургия<br>
Патология<br>
Судебная медицина<br>
Биохимия и молекулярная медицина<br>
Фармация<br>
Лечебное дело</td>
</tr>
</table>
<div style="font-family:cuprum; font-size: 14px;">
Обучение на медицинском факультете считается самым длительным среди всех факультетов университета. В среднем оно длиться 11 лет и больше, 4 из которых отведены для получения степени бакалавра, и еще 4 в медицинской школе. Йельский университет уделяет большое внимание практической подготовке своих специалистов, поэтому первичная специализация начинается уже с третьего курса медицинской школы (условно можно обозначить ординатурой) - посещение больниц, участие в осмотрах, практика врачевания, изучение курсов по выбору. Однако обязательным условием для начинающего специалиста является вторичная специализация по окончанию медицинской школы, которая длится не менее 3-х лет. Именно в этот период выпускники сдают экзамены для получения лицензии на ведение врачебной практики и повышают квалификацию.</div>
</div>
<div>
<label for="notebook2a_3">physico-mathematical</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>
<table>
<tr>
<td><img src="http://sf.uploads.ru/UfPoH.png" style='width: 150px; padding-left: 65px;'></td>
<td>Специальности:<br>
Прикладная механика<br>
Информационные системы и технологии<br>
Индустриальная математика<br>
Математическое и компьютерное моделирование<br>
Электротехника<br>
Машиностроение<br>
Биоинженерия</td>
</tr>
</table><div style="font-family:cuprum; font-size: 14px;">
Учиться в Йеле на данном факультете считается труднее, чем почти во всех других университетах страны. Студенты должны усвоить большой поток информации за короткий срок и уже на 2 курсе приступить к реализации практических заданий. Поэтому выбор между учебой, сном и социальной жизнью, возможен только в 2 вариантах из 3. Часто сами студенты сравнивают процесс обучения с питьем воды из гидранта, однако несмотря на напряжённую учёбу, на факультете действуют смягчающие обстоятельства:<br>
- На первом курсе, студентам проставляют только зачёт или незачёт и так называемые «теневые отметки», которые показывают обучающимся, какие оценки они могут получить в дальнейшем.<br>
- Преподавателями поощряется совместная работа над проектами и практиками. Таким образом даже студенты, которые отстают, могут подтянуть знания в той или иной области. <br>
- Многие начинают трудовую деятельность уже с третьего — пятого курсов.</div>
</div>
<div>
<label for="notebook2a_4">arts</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>
<table>
<tr>
<td><img src="http://s0.uploads.ru/JYj9o.png" style='width: 150px; padding-left: 65px;'></td>
<td>Специальности:<br>
Графический дизайн<br>
Фотография<br>
Архитектура<br>
История искусства<br>
Реконструкция и реставрация<br>
Драматургия<br>
Актерское мастерство</td>
</tr>
</table><div style="font-family:cuprum; font-size: 14px;">
Обучение на факультете искусств отличается либеральностью образования. То есть подразумевает индивидуальный подход к каждому студенту и большую свободу в выборе предметов, чем в обычной системе. С учетом подобных условий обучения, каждый студент должен точно определиться с выбором профиля подготовки уже с 1 курса. Студенты, демонстрирующие превосходные результаты и успехи в учебе, принимают участие в интерактивных проектах и сравнительных исследованиях в других странах. (посещение музеев, галерей, архивов, содействие волонтерским программам, реконструкциям и возможность реализации собственных работ). Для создания качественного портфолио и официальных отзывов о работах своих студентов преподаватели организовывают туры "случайных" посетителей и рекламные акции. Именно студенты данного факультета занимаются организацией мероприятий как внутри самого университета, так и от имени Йеля.</div>
</div>
<div>
<label for="notebook2a_5">business&law</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>
<table>
<tr>
<td><img src="http://s1.uploads.ru/zfe4R.png" style='width: 150px; padding-left: 65px;'></td>
<td>Специальности:<br>
Экономика<br>
Менеджмент<br>
Юриспруденция <br>
Международные отношения<br>
Политология<br>
Гостинично-ресторанный бизнес<br>
</td>
</tr>
</table><div style="font-family:cuprum; font-size: 14px;">
Факультет бизнеса и права отличается своей способностью точного анализа рынка труда, а одним из основных его направлений является реализация специфических проектов по заявкам различных организаций. Именно поэтому основная цель факультета - подготовка специалистов-лидеров, преуспевающих в искусстве принятия решений в кризисных ситуациях. В программы обучения включены обязательные стажировки и защита выпускного проекта, который может быть реализован и самим университетом. Помимо программы бакалавриата, факультет предоставляет возможность получения степени магистра и высшей степени - MBA. Чаще всего, именно выпускники данного факультета добиваются успеха в судебно-правовой отрасли страны.</div>
</div>
</center>
</div></div>
