Код:
<!--HTML-->
<div class="block__guest">
<center><img src="https://forumupload.ru/uploads/001c/2a/af/8/342444.jpg" style="width: 100%;"></center>
<table style="width:100%;">
<tr style="background-color:#be6667; border: 2px solid #be6667;">
<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">welCUMe</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 style="font-family:urabum; font-size: 16px; ">здесь могла быть твоя бронь <img src="https://vk.com/images/emoji/2728.png"></p>
<p>
</p>
</p></blockquote></div>
</div>
</div>
<style>
html::before { background: none; }
#p37 table { margin: 0 0 3px 0; border: 2px solid #be6667; border-radius: 10px; }
.block__guest { background: url(https://forumupload.ru/uploads/001c/2a/af/8/94682.jpg) var(--text-color-1); width: 100%; height: 100%; min-height: 500px; margin: 50px auto 10px auto; border-radius: 20px; background-position: center center; }
.punbb #p37 .quote-box cite,
.punbb #p37 .quote-box,
.punbb #p37 .code-box strong.legend,
.punbb #p37 .code-box { border: 0; font-family: urabum; font-size: 18px; background: url(https://forumupload.ru/uploads/001c/2a/af/8/94682.jpg) 100% 4%;}
.punbb #p37 .code-box { padding: 1.5em 1.1em 0.0em 1.1em; border-radius: 20px; }
.punbb #p37 .quote-box,
.punbb #p37 .code-box { margin: 0.5em 0.1em 0.5em 0.1em; }
.cont__guest { display: grid; grid-template-rows: repeat(2, auto); grid-template-columns: repeat(2, auto); gap: 0px 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: 455px; border: 2px dashed #d1999a; border-radius: 20px; padding: 10px; } /*инфа*/
.guest__two { grid-area: gst2; width: 355px; border: 2px dashed #d1999a; border-radius: 20px; padding: 10px; margin: 0 0 10px 0px; } /*код*/
.guest__three { grid-area: gst3; width: 355px; border: 2px dashed #d1999a; border-radius: 20px; padding: 10px 10px 0px 10px; } /*спойлер*/
.guest__h { font: 500 16px/12px urabum; border: 0; padding: 2px 35px; border-radius: 10px; color: var(--text-color-1); background: #b7b7b74d; text-transform: lowercase; letter-spacing: 1px; }
.guest__one p { padding: 1em 0 0 1.5em!important; color: var(--text-color-1); }
#p37 .post-body { width: 100% !important; padding: 0.1em 1em 0px 1em; margin: 0px auto 2em auto; background: url(https://forumupload.ru/uploads/001c/2a/af/8/94682.jpg); border-radius: 20px; }
.punbb #p37 .guest__three blockquote p { font: 500 12px/17px var(--main-font); }
.punbb #p37 .code-box strong.legend a,
.punbb #p37 .code-box strong.legend a:link { color: var(--text-color-1); font-family: "urabum"; font-size: 14px; font-weight: 500; }
.punbb #p37 .quote-box.spoiler-box div { font-family: urabum; font-size: 18px; }
.punbb #p37 .code-box strong.legend { margin: -22px 0 20px 0; background: #b7b7b74d; }
#p37 .post-content p { font: 500 15px/14px "urabum"; }
#p37 table a { font: 500 12px/14px "urabum"; padding: 0 20px; color: #fff !important; text-transform: uppercase; }
.dark .punbb #p37 .quote-box,
.dark .punbb #p37 .code-box,
.dark .punbb #p37 .post-content blockquote { color: var(--text-color-1);
</style>
держим
готово
