[html]
<style>
.korpus > div,
.korpus > input {
display: none;
}
.korpus label {
width: 151px;
background: url(https://forumstatic.ru/files/001b/4d/c0/83575.jpg?v=1) no-repeat fixed top center;
background-size: cover;
color: #8b7e66;
text-shadow: 1px 1px 1px #523d25;
font: normal 14px Merriweather;
text-transform: uppercase;
text-align: center;
display: inline-block;
padding: 3px;
transition: all .5s ease-in-out 0s;
margin: 3px
}
.korpus input[type="radio"]:checked + label {
background: #84735a;
color: #c6c4b7; /* выбранный элемент */
font-weight: normal;
box-shadow: 0 4px 10px ;
}
.korpus > input:nth-of-type(1):checked ~ div:nth-of-type(1),
.korpus > input:nth-of-type(2):checked ~ div:nth-of-type(2),
.korpus > input:nth-of-type(3):checked ~ div:nth-of-type(3),
.korpus > input:nth-of-type(4):checked ~ div:nth-of-type(4){
display: block;
padding-top: 2px;
text-align: justify;}
.text {
height: 500px; /* высота нашего блока */
overflow-y: scroll; /* прокрутка по вертикали */
padding: 4px 5px 4px 5px;
margin: 5px 4px 0 0px !important;
background: rgba(0, 0, 0, 0.1)
}
</style>
<!--Всплывающие Подсказки при наведении-->
<style>
#tooltip {
position: absolute;
background: rgba(0,0,0,.85);
z-index: 999;
max-width: 80px;
border: none;
border-radius: 2px;
box-shadow: 0 0 0px 1px rgba(0,0,0,.05) inset;
font-family: roboto;
font-size: 11px; /* размер текста */
display: none;
color: #d9d8d1; /* цвет текста */
text-align: center;
padding: 5px;
letter-spacing: 1px;
font-weight: 500;
}
</style>
<script type="text/javascript" src="https://forumstatic.ru/files/001a/fa/d0/26671.js"></script>
<!--//End//-Всплывающие Подсказки при наведении-->
<div>
<table width="650px">
<tbody>
<tr>
<td>
<div class="korpus">
<input type="radio" name="odin" checked="checked" id="vkl1" />
<label for="vkl1">Сюжетные</label>
<input type="radio" name="odin" id="vkl2" />
<label for="vkl2">Игровые</label>
<input type="radio" name="odin" id="vkl3" />
<label for="vkl3">Флешмобы</label>
<input type="radio" name="odin" id="vkl4" />
<label for="vkl4">Приёмка</label>
<div class="text">
<div>
<table width="650px">
<tbody>
<tr>
<td align="center">
<p>Разгаданные тайны и покорённые квесты</p>
<img title="Welcome to Haven" src="https://forumupload.ru/uploads/001b/0d/bc/5/79730.gif" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="text">
<div>
<table width="650px">
<tbody>
<tr>
<td align="center">
<p>Челленджи, игры и прочий движ</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="text">
<div>
<table width="650px">
<tbody>
<tr>
<td align="center">
<p>Увеселительные переодевания</p>
</td>
<tr>
</tbody>
</table>
</div>
</div>
<div class="text">
<div>
<table width="650px">
<tbody>
<tr>
<td align="center">
<p align="center">
<img src="https://forumupload.ru/uploads/001b/0d/bc/9/840533.gif" /> <img src="https://forumupload.ru/uploads/001b/0d/bc/9/270323.gif" /> <img src="https://forumupload.ru/uploads/001b/0d/bc/9/313932.gif" /></p>
<p align="center"><font size="30px">⋯</font></p>
<p align="center">JANE, WELCOME BACK HOME</p>
<p align="center"><font size="30px"><br>⋮</font></p>
<p align="center">Ночью, на безлюдной улице, за своей спиной ты услышишь шаги. Среди деревьев ветер плачет и мечется, а под твоими ногами будут белеть кости. У шумного моря, в высоких волнах ты заметишь лицо, и оно откроет глаза — и посмотрит в ответ. Что-то странное происходит здесь. Возьми меня за руку.</p>
<p align="center">Найти соигрока и обзавестись знакомствами можно <a href="https://nevah.ru/viewtopic.php?id=19#p28">здесь</a>, добавить твинка — <a href="https://nevah.rusff.me/viewtopic.php?id=21">вот здесь</a>.
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
[/html]
