Код:
<!--HTML-->
<div class="block__guest">
<table style="width:100%;">
<tr>
<td colspan="4"><center><img src="https://forumupload.ru/uploads/001c/29/61/4/358191.jpg" style="width: 100%;"></center></td>
</tr>
<tr style="background-color:#7e67ee; border: 2px solid #7e67ee;">
<td><center><b><a href="/viewtopic.php?id=26">заявки</a></b></center></td>
<td><center><b><a href="/viewtopic.php?id=24">роли</a></b></center></td>
<td><center><b><a href="/viewtopic.php?id=33">правила</a></b></center></td>
<td><center><b><a href="/viewtopic.php?id=31">хочу к вам</a></b></center></td>
</tr>
</table>
<div class="cont__guest">
<div class="guest__one">
<span class="guest__h">weCUMe</span>
<p>мы не особо думаем, мы просто делаем.<br><br>
копируем код, заполняем, вставляем и отправляем. <br>u perfect! <br><br>
роль бронируется на 3 дня. повторно придержать можно тоже 3 раза. <br><br>
хочется больше одной роли? с порога 5 твинков, дальше только донат постами. <br></p>
<p>к кому обратиться, чтобы пожаловаться: <a href="/profile.php?id=3">Omen</a> & <a href="/profile.php?id=4">Sombra</a></p>
</div>
<div class="guest__two">
<div class="code-box"><strong class="legend"><a href="javascript://" onclick="select_text($(this).parent().next().find('pre').get(0));return!1">забронить</a></strong><div class="blockcode"><div class="scrollbox" style="height: 4.5em">
<pre>фандом <span>[</span> <a href="ссылка на профиль">имя персонажа</a> <span>]</span></pre>
</div></div></div>
</div>
<div class="guest__three">
<div class="quote-box spoiler-box"><div onclick="$(this).toggleClass('visible'); $(this).next().toggleClass('visible');">придержанные </div><blockquote>
<p>здесь могла быть твоя бронь <img src="https://vk.com/images/emoji/2728.png">
<br> <br>dragon age [ <a href="https://urgestalt.rusff.me/profile.php?id=197"> Viago de Riva </a> ] | 06.04<br>
</p>
</p></blockquote></div>
</div>
</div>
<style>
html::before { background: none; }
table a { color: var(--text-color-3)!important; text-transform: uppercase; font-size: 10px; }
table { margin: 0 0 3px 0;
border-radius: 15px 15px 0 0;
-webkit-border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
-khtml-border-radius: 15px 15px 0 0;
border: 2px solid #7e67ee;
display: block; }
.block__guest {
background: url(https://forumstatic.ru/files/001c/2a/af/65539.jpg) var(--text-color-1);
width: 800px;
height: 100%;
min-height: 500px;
padding: 20px;
margin: 40px auto 20px auto;
border-radius: 20px;
background-position: center center;
box-shadow: 0px 0px 20px var(--text-color-8);
}
.cont__guest {
display: grid;
grid-template-rows: repeat(3, auto);
grid-template-columns: repeat(2, auto);
gap: 15px 10px;
grid-template-areas:
"gst1 gst2"
"gst1 gst3"
"gst1 bor4";
color: var(--text-color-4);
margin: 25px auto 0 auto;
justify-content: space-between; }
.guest__one { grid-area: gst1; width: 355px; border: 2px solid var(--text-color-4); border-radius: 10px; padding: 10px; } /*инфа*/
.guest__two { grid-area: gst2; width: 355px; border: 2px solid var(--text-color-4); border-radius: 10px; padding: 10px; } /*код*/
.guest__three { grid-area: gst3; width: 355px; border: 2px solid var(--text-color-4); border-radius: 10px; padding: 10px 10px 0px 10px; } /*спойлер*/
.guest__h { font: 700 9px/12px var(--3h-font); border: 2px solid var(--text-color-4); padding: 2px 7px; border-radius: 10px; color: var(--text-color-4); background: var(--text-color-1); text-transform: uppercase; }
.guest__one p { padding: 1em 0 0 1.5em!important; color: var(--text-color-3); }
#p37 .post-body {
background: var(--text-color-1);
border-radius: 20px;
}
</style>
держим
готово
