[html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Arsenal&display=swap');
#web-body {
background:#303234;
padding: 30px 30px 40px 30px;
outline: 1px solid #24ebff;
outline-offset: -20px;
font-weight: 500!important;
width: 680px;
box-sizing:border-box;
display:flex;
flex-wrap:wrap;
}
#tablecol {
display:flex;
flex-wrap:wrap;
width: 680px;
}
#header {
text-align: left;
width: 100%;
margin: -46px 0px 0px 360px;
text-transform: uppercase;
font-size: 20px;
letter-spacing: 1px;
color: #2ea4b5;
font-family: Arsenal;
text-shadow: 1px 1px 11px #11575f;
}
.column-st {
width:calc(33%);
text-transform: uppercase;
font-size: 18px;
letter-spacing: 1px;
color: #2ea9b5;
font-family: Arsenal;
text-align: center;
margin: 10px 1px 0px 1px;
}
.column-emp {
width:calc(50%);
text-transform: uppercase;
font-size: 18px;
letter-spacing: 1px;
color: #2ea9b5;
font-family: Arsenal;
text-align: center;
margin: 10px 0px 10px 0px;
}
#name-st {
background: #7b9198;
padding: 6px;
margin:2px 1px 0 1px;
font-size: 12px;
text-transform: none;
color: #232527;
outline: 1px solid #24ebff;
outline-offset: -4px;
position: relative;
}
#name-st:hover {
background: #836b7e;
outline: 1px solid #1fa7e6;
}
#name-st span {
margin-left: -999em;
position: absolute;}
#name-st:hover span {
font-family: Arsenal;
font-size: 10px;
font-weight: 500;
color: #83cffa;
position: absolute;
left: 15px;
bottom: 16px;
z-index: 99;
margin-left: 0;
}
.tip {
position: absolute;
background-color: #34373a!important;
border: 1px solid #149eac;
z-index: 1000;
width: 150px;
padding: 3px;
opacity: 0.90;
}
a {
text-shadow: 0px 0px 1px #3e4143;
}
</style>
<div id="web-body">
<div style="height: 50px; width: 680px; position: relative; margin: 10px 0px -20px 0px;"><img src="https://forumupload.ru/uploads/0015/db/2c/2/194429.png" width="80%">
<div id="header">учащиеся академии
</div>
</div>
<div id="tablecol">
<!--COLUMN #1.1-->
<div class="column-st">I курс
<a href="https://vigrid-2.ru/profile.php?id=25"><div id="name-st"><span class="tip">19 лет | валькирия</span>Рэнге Огава</div></a>
</div>
<!--COLUMN #1.2-->
<div class="column-st">II курс
<a href="https://vigrid-2.ru/profile.php?id=9"><div id="name-st"><span class="tip">20 лет | часовой</span>Инге Виджая Норлинг</div></a>
<a href="https://vigrid-2.ru/profile.php?id=16"><div id="name-st"><span class="tip">20 лет | часовой</span>Урсула Бухфинк</div></a>
<a href="https://vigrid-2.ru/profile.php?id=6"><div id="name-st"><span class="tip">20 лет | gemini | второй пилот: ...</span>Мария Врона</div></a>
<a href="https://vigrid-2.ru/profile.php?id=20"><div id="name-st"><span class="tip">19 лет | gemini | второй пилот: ...</span>Ноа Линдгрен</div></a>
<a href="https://vigrid-2.ru/profile.php?id=45"><div id="name-st"><span class="tip">20 лет | эйнхерий(эйр)</span>Шарлотта Руссо</div></a>
<a href="https://vigrid-2.ru/profile.php?id=69"><div id="name-st"><span class="tip">20 лет | часовой</span>Амайя Уоллес</div></a>
</div>
<!--COLUMN #1.3-->
<div class="column-st">III курс
<a href="https://vigrid-2.ru/profile.php?id=18"><div id="name-st"><span class="tip">21 год | часовой</span>Коко Перрен</div></a>
<a href="https://vigrid-2.ru/profile.php?id=30"><div id="name-st"><span class="tip">21 год | часовой</span>Жанна де Блуа</div></a>
<a href="https://vigrid-2.ru/profile.php?id=16"><div id="name-st"><span class="tip">21 | часовой</span>Эйлин Шилфи</div></a>
<a href="https://vigrid-2.ru/profile.php?id=36"><div id="name-st"><span class="tip">21 год | часовой</span>Софи Йегер</div></a>
<a href="https://vigrid-2.ru/profile.php?id=63"><div id="name-st"><span class="tip">21 год | эйнхерий</span>Тереза Лиандри</div></a>
</div>
<!--COLUMN #1.4-->
<div class="column-st">IV курс
<a href=https://vigrid-2.ru/profile.php?id=32><div id="name-st"><span class="tip">22 года | часовой</span>Максим Громов</div></a>
<a href="https://vigrid-2.ru/profile.php?id=39"><div id="name-st"><span class="tip"> 22 года | gemini | второй пилот: Дэвид Фэйт</span>Геста Джой</div></a>
<a href="https://vigrid-2.ru/viewtopic.php?id=116"><div id="name-st"><span class="tip">22 года | gemini | второй пилот: Геста Джой</span>Дэвид Фэйт</div></a>
<a href="https://vigrid-2.ru/profile.php?id=42"><div id="name-st"><span class="tip">23 года | часовой</span>Марк Келер</div></a>
</div>
<!--COLUMN #1.5-->
<div class="column-st">V курс
</div>
</div>
<div style="height: 50px; width: 680px; position: relative; margin: 20px 0px -20px 0px;"><img src="https://forumupload.ru/uploads/0015/db/2c/2/194429.png" width="80%">
<div id="header">работники академии
</div>
</div>
<div id="tablecol">
<!--COLUMN #2.1-->
<div class="column-emp">преподавательский состав
<a href="https://vigrid-2.ru/profile.php?id=5"><div id="name-st">Рихтер Митчелл, <br>преподаватель тактического маневрирования</div></a>
<a href="https://vigrid-2.ru/profile.php?id=11"><div id="name-st">Рут Паркер, <br>преподаватель ванов</div></a>
<a href="https://vigrid-2.ru/profile.php?id=8"><div id="name-st">Софья Келер, <br>преподаватель, куратор валькирий</div></a>
<a href="https://vigrid-2.ru/profile.php?id=76"><div id="name-st">Кит Малерби, <br>преподаватель рукопашного боя (часть цикла) и перемещения по пересеченной местности</div></a>
<a href="https://vigrid-2.ru/profile.php?id=75"><div id="name-st">Рене Айдент, <br>инструктор по фехтованию, преподаватель курса сетевой безопасности</div></a>
</div>
<!--COLUMN #2.1-->
<div class="column-emp">администрация и персонал
<a href="https://vigrid-2.ru/profile.php?id=44"><div id="name-st">Эмбер Виггин, <br>директор академии</div></a>
<a href="https://vigrid-2.ru/profile.php?id=77"><div id="name-st">Захария Барсан, <br>Тех. специалист</div></a>
<a href="https://vigrid-2.ru/profile.php?id=78"><div id="name-st">Александра Драгунова, <br>сотрудник службы безопасности</div></a>
</div>
</div>
<div style="height: 50px; width: 680px; position: relative; margin: 20px 0px -20px 0px;"><img src="https://forumupload.ru/uploads/0015/db/2c/2/194429.png" width="80%">
<div id="header">жители города
</div>
</div>
<div id="tablecol">
<!--COLUMN #3.1-->
<div class="column-st">
<a href="https://vigrid-2.ru/profile.php?id=79"><div id="name-st">Рене Руман</div></a>
</div>
<!--COLUMN #3.2-->
<div class="column-st">
<a href=""><div id="name-st">...</div></a>
</div>
<!--COLUMN #3.3-->
<div class="column-st">
<a href=""><div id="name-st">...</div></a>
</div>
</div>
</div>
[/html]
Для преподавателей и персонала
<a href="ссылка на профиль"><div id="name-st">Имя Фамилия(кириллица), <br>должность</div></a>
Для учащихся (перед кодом указываем курс)
<a href="ссылка на профиль"><div id="name-st"><span class="tip">возраст | специальность (| для гемини имя второго пилота)</span>Имя Фамилия(кириллица)</div></a>
Для жителей города
<a href="ссылка на профиль"><div id="name-st">Имя Фамилия(кириллица)</div></a>
