[html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Arsenal&display=swap');
#web-body {
box-sizing:border-box;
display:flex;
flex-wrap:wrap;
background:#303234;
padding: 30px 30px 40px 30px;
outline: 1px solid #24ebff;
outline-offset: -20px;
font-weight: 500!important;
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;
}
#info {
background: #676a7b;
padding: 12px;
margin: 10px 10px 20px 10px;
width: 620px;
font-size: 14px;
text-align: justify;
color: #1b1c1e;
text-shadow: 0px 0px 1px #3e4143;
font-family: Arsenal;
outline: 1px solid #1fa7e6;
outline-offset: 4px;
}
#header-dorm {
text-transform: uppercase;
font-size: 18px;
letter-spacing: 1px;
color: #2ea9b5;
font-family: Arsenal;
text-align: left;
margin: 20px 10px 0px 10px;
width: 100%;
}
#floor {
width: 100%;
background: #676a7b;
padding: 6px 10px 10px 10px;
margin: 10px 10px 0px 10px;
font-size: 13px;
text-align: center;
text-transform: uppercase;
color: #1b1c1e;
text-shadow: 0px 0px 1px #3e4143;
font-family: Arsenal;
outline: 1px solid #1fa7e6;
outline-offset: 4px;
}
#box {
box-sizing:border-box;
display:flex;
flex-wrap:wrap;
width: 100%;
margin-top: 4px;
}
#room {
width:calc(29%);
background: #829ca5;
padding: 4px 4px 4px 4px;
margin: 8px 8px 8px 8px;
font-size: 12px;
text-align: center;
text-transform: none;
color: #1b1c1e;
text-shadow: 0px 0px 1px #3e4143;
letter-spacing: 1px;
outline: 1px solid #24ebff;
outline-offset: 4px;
}
#head-box {
background: #60a8af;
border: 1px solid #24ebff;
font-size: 12px;
color: #404550;
padding: 1px;
marging-bottom: 4px;
text-transform: uppercase;
position: relative;
}
#room a, #room a:link, #room a:visited {
color: #0d4c5a;
font-weight: normal;
font-size: 12px;
text-decoration: none;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#room a:hover, #room a:focus, #room a:active {
color: #62465c;
font-weight: normal;
text-decoration: underline;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#head-box span {
margin-left: -999em;
position: absolute;}
#head-box:hover span {
font-family: Arsenal;
font-size: 10px;
font-weight: 500;
color: #83cffa;
text-transform: none;
position: absolute;
left: -20px;
bottom: 20px;
z-index: 99;
margin-left: 0;}
.tip {
position: absolute;
background-color: #34373a!important;
border: 1px solid #149eac;
z-index: 1000;
width: 200px;
padding: 3px;
opacity: 0.90;
}
</style>
<div id="web-body">
<div id="info">Студенты академии много времени уделяют учёбе, но всем иногда хочется отвлечься и посвятить себя любимому делу. Ещё лучше, если рядом будут друзья. Поэтому все желающие могут объединиться в клубы по интересам! В клуб может вступить студент любого курса. Количество клубов, которые может посещать студент, не должно превышать 4, поэтому выбирайте с умом! Для существования клуба в нём должно состоять не менее 5 человек. Если вы пока не нашли желающих к вам присоединиться, по умолчанию считается, что вас всё же 5 (4 NPC), поэтому смело отмечайтесь в теме — мы вас обязательно зарегистрируем!
</div>
<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="header-dorm"> </div>
<div id="floor">
<div id="box">
<!--ROOMS BEGIN-->
<div id="room"><div id="head-box"><span class="tip">Клуб настоящих ценителей детективов и расследований, ярых почитателей дедуктивного метода и любителей сложных задач. Они не ищут лёгких путей и обожают раскрывать тайны и решать головоломки. А также помогут вам, за чисто символическую плату, вычислить воришку или найти потерянные вещи. <br><br>Глава клуба: Жанна де Блуа</span>Детективный клуб</div>
<a href="https://vigrid-2.ru/profile.php?id=30">Жанна де Блуа</a>
</div>
<div id="room"><div id="head-box"><span class="tip">Закрытый клуб, куда не допускается никто из посторонних. На деле же — настоящее тайное общество студентов.<br>О чём они говорят за плотно запертыми дверьми клубной комнаты? Что обсуждают? Какие страшные ритуалы проводят под видом чайных церемоний?<br>Хочешь узнать ответы на вопросы и присоединиться к этому безумному чаепитию? Тогда брось игральную карту со своим именем в ящичек для писем на дверях их клубной комнаты и жди Белого Кролика!<br><br>Глава клуба: Червонная Королева</span>Клуб чаепития</div>
</div>
<div id="room"><div id="head-box"><span class="tip">описание клуба</span>Музыкальный клуб</div>
<a href="https://vigrid-2.ru/profile.php?id=36">Софи Йегер</a><br><a href=https://vigrid-2.ru/profile.php?id=32>Максим Громов</a>
</div>
<div id="room"><div id="head-box"><span class="tip">описание клуба</span>Клуб древкового оружия</div>
<a href="https://vigrid-2.ru/profile.php?id=31">Эйлин Шилфи</a><br><a href="https://ссылка/">учащийся 2</a>
</div>
<div id="room"><div id="head-box"><span class="tip">описание клуба</span>Стрелковый клуб</div>
<a href="https://vigrid-2.ru/profile.php?id=31">Эйлин Шилфи</a><br><a href="https://ссылка/">учащийся 2</a>
</div>
<div id="room"><div id="head-box">Клуб 6</div>
<a href="https://ссылка/">учащийся 1</a><br><a href="https://ссылка/">учащийся 2</a>
</div>
<!--ROOMS END-->
</div>
</div>
<div style="height: 50px; width: 680px; position: relative; margin: 30px 0px -20px 0px;"><img src="https://forumupload.ru/uploads/0015/db/2c/2/194429.png" width="80%">
<div id="header">Спортивные команды
</div>
</div>
<div id="header-dorm"></div>
<div id="floor">
<div id="box">
<!--ROOMS BEGIN-->
<div id="room"><div id="head-box">Футбол</div>
<a href="https://ссылка/">учащийся 1</a><br><a href="https://ссылка/">учащийся 2</a>
</div>
<div id="room"><div id="head-box">Волейбол</div>
<a href="https://ссылка/">учащийся 1</a><br><a href="https://ссылка/">учащийся 2</a>
</div>
<div id="room"><div id="head-box">Баскетбол</div>
<a href="https://ссылка/">учащийся 1</a><br><a href="https://ссылка/">учащийся 2</a>
</div>
<div id="room"><div id="head-box"><span class="tip">Глава клуба: Отстутствует</span>Кэндо</div>
<a href=https://vigrid-2.ru/profile.php?id=32>Максим Громов</a><br> <a href="https://vigrid-2.ru/profile.php?id=36">Софи Йегер</a>
</div>
<div id="room"><div id="head-box">Ваш вариант</div>
<a href="https://ссылка/">учащийся 1</a><br><a href="https://ссылка/">учащийся 2</a>
</div>
<div id="room"><div id="head-box">Ваш вариант</div>
<a href="https://ссылка/">учащийся 1</a><br><a href="https://ссылка/">учащийся 2</a>
</div>
<!--ROOMS END-->
</div>
</div>
</div>
[/html]
Перед кодом укажите, какой клуб или команду вы создаёте или куда хотите вступить. Имя пишется кириллицей.
<a href="Ссылка на профиль">Имя Фамилия</a>
