[html]
<style>
.academy-section {
margin: 18px 0 28px;
}
.academy-cover {
margin: 8px 0 14px;
border: 1px solid var(--bord, #b8b8b8);
border-radius: 6px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.academy-panel-img div:after,
.academy-cover-img div:after {
content: "";
background: var(--accent);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
transition: all .6s ease-in-out 0s;
mix-blend-mode: multiply;
}
.academy-panel-img,
.academy-cover-img {
position: relative;
}
.academy-panel-img span,
.academy-cover-img span {
position: absolute;
z-index: 9;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-family: var(--sec-font);
text-transform: uppercase;
color: var(--bt-bg);
font-size: 44px;
}
.academy-cover img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/5;
object-fit: cover;
filter: grayscale(1);
}
.academy-cover figcaption {
padding: 10px 14px 12px;
color: var(--sec-text, #0e0c0b);
font-family: var(--main-font, system-ui, sans-serif);
background: var(--quote);
border-top: 1px solid var(--bord, #b8b8b8);
line-height: 1.5;
}
.academy-tabs {
display: grid;
gap: 14px;
align-items: start;
grid-template-columns: 1fr;
background: var(--htm-clr);
padding: 20px;
border-radius: 5px;
border: 1px solid var(--bord);
}
@media (min-width: 980px) {
.academy-tabs {
grid-template-columns: 320px 1fr;
}
.academy-tab-list {
grid-column: 1;
}
.academy-tab-panels {
grid-column: 2;
}
}
.academy-tab-control {
position: absolute;
opacity: 0;
pointer-events: none;
}
.academy-tab-list {
display: grid;
gap: 10px;
}
.academy-tab-list label {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 14px;
border: 1px solid var(--bord);
border-radius: 5px;
background: var(--quote);
color: var(--sec-text, #0e0c0b);
font-family: var(--main-font);
cursor: pointer;
text-transform: uppercase;
letter-spacing: .3px;
font-size: 0.9em;
line-height: 1.4;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
box-shadow 0.2s ease, transform 0.06s;
}
.academy-tab-list label:hover {
background: rgba(201, 200, 200, 0.4);
}
.academy-tab-list label:active {
transform: translateY(1px);
}
.academy-tabs
> input:nth-of-type(1):checked
~ .academy-tab-list
> label:nth-of-type(1),
.academy-tabs
> input:nth-of-type(2):checked
~ .academy-tab-list
> label:nth-of-type(2),
.academy-tabs
> input:nth-of-type(3):checked
~ .academy-tab-list
> label:nth-of-type(3),
.academy-tabs
> input:nth-of-type(4):checked
~ .academy-tab-list
> label:nth-of-type(4),
.academy-tabs
> input:nth-of-type(5):checked
~ .academy-tab-list
> label:nth-of-type(5),
.academy-tabs
> input:nth-of-type(6):checked
~ .academy-tab-list
> label:nth-of-type(6),
.academy-tabs
> input:nth-of-type(7):checked
~ .academy-tab-list
> label:nth-of-type(7),
.academy-tabs
> input:nth-of-type(8):checked
~ .academy-tab-list
> label:nth-of-type(8),
.academy-tabs
> input:nth-of-type(9):checked
~ .academy-tab-list
> label:nth-of-type(9),
.academy-tabs
> input:nth-of-type(10):checked
~ .academy-tab-list
> label:nth-of-type(10) {
background: var(--accent2);
color: var(--bt-bg);
border-color: var(--accent2);
}
.academy-tab-panels {
border: 0;
border-radius: 0;
background: transparent;
overflow: visible;
}
.academy-panel {
display: none;
border: 1px solid var(--bord);
border-radius: 5px;
background: var(--quote);
overflow: hidden;
font-family: var(--main-font);
}
.academy-tabs
> input:nth-of-type(1):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(1),
.academy-tabs
> input:nth-of-type(2):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(2),
.academy-tabs
> input:nth-of-type(3):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(3),
.academy-tabs
> input:nth-of-type(4):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(4),
.academy-tabs
> input:nth-of-type(5):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(5),
.academy-tabs
> input:nth-of-type(6):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(6),
.academy-tabs
> input:nth-of-type(7):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(7),
.academy-tabs
> input:nth-of-type(8):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(8),
.academy-tabs
> input:nth-of-type(9):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(9),
.academy-tabs
> input:nth-of-type(10):checked
~ .academy-tab-panels
> .academy-panel:nth-of-type(10) {
display: block;
}
.academy-panel-header {
position: relative;
overflow: hidden;
background: var(--base-bg2) center/cover no-repeat;
}
.academy-panel-header img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/7;
object-fit: cover;
filter: grayscale(1);
}
.academy-panel-header::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 45%,
rgba(0, 0, 0, 0.45) 100%
);
}
.academy-panel-title {
position: absolute;
left: 16px;
bottom: 10px;
margin: 0;
color: #fff;
font-family: var(--sec-font, serif);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
z-index: 999
}
.academy-panel-body {
padding: 12px 16px 16px;
background: var(--htm-clr);
margin: 20px;
border-radius: 5px;
line-height: 1.5;
}
.academy-panel-body p {
margin: 6px 0 10px;
color: var(--text, #000);
font-family: var(--main-font, system-ui, sans-serif);
}
.academy-list {
padding-left: 20px;
margin: 6px 0 4px;
}
.academy-list li {
list-style: disc;
margin: 4px 0;
}
@media (max-width: 640px) {
.academy-panel-header img {
aspect-ratio: 16/9;
}
}
</style>
<section id="main-building" class="academy-section">
<figure class="academy-cover">
<div class="academy-cover-img"><div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div><span>Главный корпус</span></div>
<figcaption>
Главный корпус — сердце Академии. Его каменные стены, местами оплетённые
плющом, поднимаются на четыре этажа и хранят истории множества поколений,
а окна здания почти всегда полны мягкого света. Внешне строение напоминает
старинный колледж: высокие своды, аркады, потемневший шифер на крыше и
кованые фонари вдоль лестниц. Но стоит войти внутрь и старина растворяется
в утончённой современности: стекло, пластик и металл соседствуют с дубом и
бархатом, создавая ощущение уюта и покоя. В длинных коридорах развешаны
портреты знаменитых одарённых и стоят застеклённые шкафы полные книг.
Тишина тут легко сменяется гомоном и смехом, а пустые кабинеты — толпами
ведьм и фамильяров. Библиотека и спорткомплекс, столовая и Большой зал,
учебные аудитории и преподавательские — Главный корпус соединяет всё.
Здесь учатся, отдыхают, спорят, обсуждают, находят себя и друг друга.
</figcaption>
</figure>
<div class="academy-tabs" role="tablist" aria-label="Разделы главного корпуса">
<input
type="radio"
name="tabs-main"
id="tab-main-1"
class="academy-tab-control"
checked
/>
<input
type="radio"
name="tabs-main"
id="tab-main-2"
class="academy-tab-control"
/>
<input
type="radio"
name="tabs-main"
id="tab-main-3"
class="academy-tab-control"
/>
<input
type="radio"
name="tabs-main"
id="tab-main-4"
class="academy-tab-control"
/>
<input
type="radio"
name="tabs-main"
id="tab-main-5"
class="academy-tab-control"
/>
<input
type="radio"
name="tabs-main"
id="tab-main-6"
class="academy-tab-control"
/>
<div class="academy-tab-list">
<label for="tab-main-1"><span>Библиотека</span></label>
<label for="tab-main-2"><span>Большой зал</span></label>
<label for="tab-main-3"><span>Столовая и кухня</span></label>
<label for="tab-main-4"><span>Спорткомплекс</span></label>
<label for="tab-main-5"><span>Административный блок</span></label>
<label for="tab-main-6"><span>Учебные аудитории</span></label>
</div>
<div class="academy-tab-panels">
<article
class="academy-panel"
role="tabpanel"
aria-labelledby="tab-main-1"
>
<header class="academy-panel-header">
<div class="academy-panel-img"><div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div><span>Библиотека</span></div>
<h3 class="academy-panel-title"><a class="ash-tag" href="https://kindredspirits.ru/pages/words" target="_blank" rel="noopener">Библиотека</a></h3>
</header>
<div class="academy-panel-body">
Библиотека находится в юго-восточном крыле и занимает все четыре
этажа. Вход расположили в углу: посетителя там встречает гигантская
каменная книга, развернутые страницы которой, словно вплавились в
стену и заменили их собой. По нижним кромкам её страниц почти бесшумно
скатывается созданная магией вода — самый громкий звук , который можно
услышать в этом месте. Высокие полки из самой различной древесины
тянутся к потолку и по ним скользят лестницы на рельсах, позволяя
достать любую книгу. А по самому центру, вдоль залов вытянулись
длинные читальные столы со светильниками и письменными
принадлежностями. Здесь царит особая, мягкая тишина, будто сама
библиотека слушает и бережёт покой тех, кто находится в поиске знаний.
В её фондах хранятся не только учебники, но также редкие манускрипты и
гримуары ведьм и фамильяров прошлых эпох. И если часть из них
находится в открытом доступе, то другая располагается этажом ниже в
закрытом архиве, доступном лишь по разрешению преподавателя.
</div>
</article>
<article
class="academy-panel"
role="tabpanel"
aria-labelledby="tab-main-2"
>
<header class="academy-panel-header">
<div class="academy-panel-img"><div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div><span>Большой зал</span></div>
<h3 class="academy-panel-title">Большой зал</h3>
</header>
<div class="academy-panel-body">
Большой зал расположен в юго-западной части корпуса и служит местом
отдыха, собраний, праздников и торжеств. Под высоким куполом
располагается широкая сцена на которой выступают преподаватели и
студенты, а в иные дни опускается экран на котором показывают
различные фильмы. Во время официальных приёмов здесь выступает
директор, а в дни посвящения первокурсников именно в этом зале
зажигают первые свечи — символ начала пути. В остальное время зал
открыт для всех: можно просто посидеть на скамьях и стульях, слушая,
как капли стучат по витражам, собираться компаниями или просто побыть
в одиночестве.
</div>
</article>
<article
class="academy-panel"
role="tabpanel"
aria-labelledby="tab-main-3"
>
<header class="academy-panel-header">
<div class="academy-panel-img"><div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div><span>Столовая и кухня</span></div>
<h3 class="academy-panel-title">Столовая и кухня</h3>
</header>
<div class="academy-panel-body">
Столовая и кухня занимают нижний этаж восточного крыла и выходят
террасой в сад, где по весне распускаются цветы, а кроны дают приятную
тень от яркого солнца. Здесь редко бывает пусто: днём — голоса, смех,
споры, а ночью почти всегда найдётся кто-то, кто пришёл перекусить.
Поговаривают, что пламя на кухне не гаснет с первого дня, и, судя по
тому, что в столовой всегда найдётся что-нибудь тёплое, это чистая
правда. Поваров немного, но готовят они с особым чувством, обеспечивая
и разнообразие, и щедрость порций.
</div>
</article>
<article
class="academy-panel"
role="tabpanel"
aria-labelledby="tab-main-4"
>
<header class="academy-panel-header">
<div class="academy-panel-img"><div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div><span>Спорткомплекс</span></div>
<h3 class="academy-panel-title">Спорткомплекс</h3>
</header>
<div class="academy-panel-body">
Спорткомплекс — современное пространство в северо-западной части
здания. Здесь шум воды в бассейне смешивается с эхом шагов на беговой
дорожке и звуками борьбы на ринге. В залах студенты проводят много
времени, развивая выносливость и силу на разнообразных тренажёрах, как
самостоятельно так и под присмотром тренеров. Здесь же фамильяры
учатся лучшему контролю над своим звериным обликом. Рядом с залами и
бассейном находится кабинет первой помощи и душевые с раздевалками,
чтобы быстро восстановиться после нагрузки. По вечерам к бассейну
нередко приходят не ради спорта, но чтобы спокойно поплавать,
послушать тишину и посмотреть, как луна отражается в воде.
</div>
</article>
<article
class="academy-panel"
role="tabpanel"
aria-labelledby="tab-main-5"
>
<header class="academy-panel-header">
<div class="academy-panel-img"><div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div><span>Административный блок</span></div>
<h3 class="academy-panel-title">Административный блок</h3>
</header>
<div class="academy-panel-body">
Административный блок занимает южную часть Главного корпуса. Винтовая
лестница вдоль стены поднимается до четвёртого этажа, где расположены
деканат и кабинет директора. Директорат и деканаты работают почти
круглые сутки: здесь решают учебные вопросы, распределяют миссии,
координируют сотрудников Академии и следят за порядком. В приёмной
висит старый девиз: «Тайна охраняет мир, знание — тех, кто в нём
живёт.». На втором и третьем этажах — кабинеты преподавателей, они же
их комнаты, каждая из которых несёт отпечаток хозяина: где-то это
простор и свет с ароматом трав, где-то — полумрак с плотными
портьерами и хаосом личных вещей. Первый этаж занимает
административная служба, куда студенты приходят с любыми
организационными вопросами и за поддержкой.
</div>
</article>
<article
class="academy-panel"
role="tabpanel"
aria-labelledby="tab-main-6"
>
<header class="academy-panel-header">
<div class="academy-panel-img"><div><img src="https://forumstatic.ru/files/001c/8d/fd/24675.png" alt="" /></div><span>Учебные аудитории</span></div>
<h3 class="academy-panel-title">Учебные аудитории</h3>
</header>
<div class="academy-panel-body">
Учебные аудитории разбросаны по всему зданию, а их облик часто
отражает предмет, который в них преподают: одни — залиты солнцем, а
досками исчерчены формулами и рунами, другие — окутаны приглушённым
светом, и на полу мерцают защитные круги. Где-то стоят ряды
компьютеров, а где-то — портреты мыслителей и экономистов. У каждой
аудитории свой характер, но в каждой — удобные столы и стулья,
современное оборудование и преподаватели, готовые делиться знанием.
</div>
</article>
</div>
</div>
</section>
<script src="https://feather-tail.github.io/MyBB-scripts-bundle/js/font-resizer/font-resizer-iframe.js"></script>
[/html]
[hideprofile]
Цитировать
