[html]<style>
/**шрифт**/
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/**общий блок**/
.stargs {background: #5a6180; width: 550px; height: auto; border-radius: 20px; display: flex; flex-wrap: wrap; gap: 10px; padding: 15px; box-sizing: border-box; margin: 0 auto !important;}
/**блок с названием**/
.topst {display: flex; width: 100%; height: 50px; align-items: center; gap: 15px; border-bottom: solid 3px #ffffff;}
/**блок с названием -> звездочка**/
.ist {width: 30px; height: 30px; transition: all 0.7s linear 0s;}
.ist:hover {transform: rotate(90deg); transition: all 0.7s linear 0s;}
/**блок с названием -> название форума**/
.namest {font-family: rubik; font-weight: 900; font-size: 22px; color: #ffffff;}
/**блок с картинкой и инфой**/
.bottomst {display: flex; gap: 15px;}
/**блок с картинкой и инфой -> картинка**/
.imgst img {border-radius: 20px; max-width: 180px;}
/**блок с картинкой и инфой -> инфа**/
.bottomst_r p {margin: 0; text-align: justify; font-size: 14px; font-family: 'Rubik'; color: #000; padding-bottom: 10px;}
/**блок с картинкой и инфой -> спойлеры**/
.bottomst_r details {padding: 10px 0; border-top: solid 3px #ffffff; border-bottom: solid 3px #ffffff;}
.bottomst_r details:nth-child(2) {border-bottom: none;}
/**блок с картинкой и инфой -> убираем дефолтные маркеры**/
.bottomst_r details summary::-webkit-details-marker {display: none}
.bottomst_r details > summary {list-style: none;}
/**блок с картинкой и инфой -> название спойлера**/
.bottomst_r summary {cursor: pointer; display: flex; align-items: center; gap: 10px; font-family: 'Rubik'; font-size: 18px; font-weight: 900; color: #ffffff;}
/**блок с картинкой и инфой -> звездочки в спойлерах**/
.bottomst_r summary img {width: 30px; height: 30px;}
/**блок с картинкой и инфой -> списки**/
.bottomst_r details ul {margin: 0; padding: 5px 15px;}
.bottomst_r details li {font-size: 10px; font-family: 'Rubik'; color: #ffffff; list-style: none; line-height: 1.5;}
/**блок с картинкой и инфой -> ссылки в списках**/
.bottomst_r details li a {padding: 0 10px; background: #000; border-radius: 15px; color: #ffffff !important; text-decoration: none !important; font-family: 'Rubik' !important; font-size: 10px !important; transition: all 0.3s linear 0s;}
/**блок с картинкой и инфой -> навигация**/
.navst {display: flex; flex-wrap: wrap; gap: 10px; padding: 10px 0;}
.navst a {display: block; padding: 5px 10px; background: #000; border-radius: 15px; color: #fff !important; text-decoration: none !important; font-family: 'Rubik' !important; font-size: 10px !important; transition: all 0.3s linear 0s;}
.navst a:hover, .bottomst_r details li a:hover {background: #fff; color: #000 !important; box-sizing: border-box; transition: all 0.3s linear 0s;}
</style>
<!--код гостевой by karamba-->
<div class="stargs">
<div class="topst">
<div class="ist"><img src="https://forumstatic.ru/files/0016/f1/95/58840.svg"></div>
<div class="namest">Solar Eclipse</div>
</div>
<div class="bottomst">
<div class="bottomst_l">
<div class="imgst"><img src="https://i.ibb.co/H71LYVt/2.png"></div>
</div>
<div class="bottomst_r">
<p>ДОБРО ПОЖАЛОВАТЬ!
<p><b>Мы приветствуем вас на проекте "Solar Eclipse"</b></p>
<b>жанр:</b> Кроссовер
<br><b>рейтинг:</b> NC-21
<br>Вы можете забронировать роль на 5 дней. Продление брони доступно еще на 2 дня.</br>
<br><b><u>Создание профиля не является гарантом брони!</b></u></p></br>
<details>
<summary><img src="https://forumstatic.ru/files/0016/f1/95/58840.svg"> придержанные роли</summary>
<ul>
<li>персонаж - каст <a href="ссылка"> за кем</a> - до ....</li>
</details>
<div class="navst">
<a href="https://solareclipse.f-rpg.me/profile.php?id=3">hua cheng</a>
<a href="https://solareclipse.f-rpg.me/profile.php?id=4">yato</a>
<a href="https://solareclipse.f-rpg.me/profile.php?id=6">tartaglia</a>
</div>
</div>
</div>
</div>
[/html]
[b]Имя Фамилия персонажа (на английском)[/b] - [b]фандом (на английском)[/b] - [b]за кем[/b]
