Код:
<!--HTML-->
<div id="guestbook">
<div class="guestrightinfo">
<game>список персонажей</game>
<tags>и занятых имен</tags>
<span>▲ отправная точка — 04.09.2020<br><br>
▲ магическая Британия<br>
<small>лондон, беспорядки</small><br><br>
▲ сопротивление</span>
<div>
<b>pb</b> — чистокровный; <br>
<b>hb</b> — полукровный;<br>
<b>mb</b> — маглорожденный;<br>
<br>
<b>(mm)</b> — метоморфомаг;<br>
<b>(ww)</b> — оборотень;<br>
<b>(vm)</b> — вампир;<br>
<b>(cv)</b> — провидец;<br>
<b>(md)</b> — маледиктус;<br>
<b>(am)</b> — анимаг<br>
</div>
</div>
<div class="guestleftinfo">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">общее</label>
<input id="tab2" type="radio" name="tabs" checked>
<label for="tab2">ОППОЗИЦИЯ</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">МИНИСТЕРСТВО</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">НЕЙТРАЛИТЕТ</label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5">СТАЯ</label>
<input id="tab6" type="radio" name="tabs">
<label for="tab6">ПЕРСОНАЛ<br>
ХОГВАРТСА</label>
<input id="tab7" type="radio" name="tabs">
<label for="tab7">ГРИФФИНДОР</label>
<input id="tab8" type="radio" name="tabs">
<label for="tab8">ХАФФЛПАФФ</label>
<input id="tab9" type="radio" name="tabs">
<label for="tab9">СЛИЗЕРИН</label>
<input id="tab10" type="radio" name="tabs">
<label for="tab10">РЭЙВЕНКЛО</label>
<section id="content-tab1">
<div>
<div class="textinform">
<!-- общее -->
<span><a href="ссылка">! внимание</a> - данный список можно воспринимать как канон этого мира. персонажи распределены исходя не из места работы/открытого взгляда, а убеждений. так, гестия кэрроу, отмеченная в списках оппозиции может работать в секретариате министра магии, а майкл корнер, отмеченный в министерстве, работать тренером по квиддичу в хогвартсе. возраст и принадлежность к той или иной способности указан для лучшего понимания ситуации ввиду au-изменений. вы можете написать о любом предложении изменений в личные сообщения любому администратору.</span>
<span><a href="ссылка">цветом </a> отмечены занятые персонажи.</span>
<span><a href="ссылка">колонка</a> персонала может пополняться любыми взрослыми персонажами (как канонами, так и нет) старше 24х лет. но помните о том, что будучи открытым сопротивленцем в хогвартс вам путь заказан.</span>
<span><a href="ссылка">колонка</a> партии оборотней (за редким и договорным исключением) может пополняться только не указанными в других колонках именами.</span>
</div>
</div>
</section>
<section id="content-tab2">
<div>
<div class="textinform">
<!-- оппозиция -->
<span><a href="http://heartsofstone.ru/profile.php?id=2">black (potter), arktur</a> — hb, 22yo (am)</span>
<span>burk (weasley), galathea — hb, 21yo (am)</span>
<span>carrow, flora — pb, 31yo</span>
<span>finnigan, kaya — pb, 19yo</span>
<span>finnigan, seamus — hb, 41yo (am)</span>
<span>granger, hermine — mb, 41yo (am)</span>
<span>longbottom, neville — pb, 40yo</span>
<span>lupin, edward — pb, 24yo (mm)</span>
<span>nott, liam — pb, 22yo (am)</span>
<span>nott, theodore — pb, 41yo (am)</span>
<span>podmor, gordy — hb, 24yo (am)</span>
<span>weasley, charles — pb, 46yo</span>
<span><a href="http://heartsofstone.ru/profile.php?id=19">weasley, marie-hope</a> — pb, 20yo (am)</span>
<span>zabini, blaise — pb, 41yo (am)</span>
</div>
</div>
</section>
<section id="content-tab3">
<div>
<div class="textinform">
<!-- министерство -->
<span>carrow, alecto — pb, 54yo</span>
<span>carrow, amycus — pb, 54yo</span>
<span>carrow, hestia — pb, 31yo</span>
<span>corner, michael — hb, 40yo</span>
<span>greengrass, daphne — pb, 40yo</span>
<span>karkaroff, igor jr — pb, 25yo</span>
<span>lestrange, rabastan — pb, 49yo</span>
<span>malfoy, scorpius — pb, 19yo</span>
<span>yaxley, clementine — pb, 34yo (ww)</span>
<span>yaxley, tobias — pb, 44yo</span>
</div>
</div>
</section>
<section id="content-tab4">
<div>
<div class="textinform">
<!-- нейтралитет -->
<span>bell, katie — pb, 41yo</span>
<span>dolohov, andrej — pb, 46yo</span>
<span>dolohov, ilya — pb, 22yo</span>
<span>macmillan, tessa — pb, 20yo</span>
<span><a href="http://heartsofstone.ru/profile.php?id=14">malfoy, draco</a> — pb, 41yo</span>
<span>ollivander, dolan — pb, 34yo</span>
<span>ollivander, seth — pb, 37yo (vm)</span>
<span><a href="http://heartsofstone.ru/profile.php?id=27">parkinson, pancy</a> — pb, 40yo</span>
<span>weasley, percy — pb, 43yo</span>
</div>
</div>
</section>
<section id="content-tab5">
<div>
<div class="textinform">
<!-- стая -->
<span>greyback, fenrir — pb, 56yo (ww)</span>
</div>
</div>
</section>
<section id="content-tab6">
<div>
<div class="textinform">
<!-- хогвартс персонал -->
<span><a href="http://heartsofstone.ru/profile.php?id=27">parkinson, pancy</a> — pb, 40yo</span>
<span><a href="http://heartsofstone.ru/profile.php?id=19">weasley, marie-hope</a> — pb, 20yo (am)</span>
</div>
</div>
</section>
<section id="content-tab7">
<div>
<div class="textinform">
<!-- гриффиндор -->
<span>burk (weasley), galathea — hb, 21yo</span>
<span>carrow, boyd — pb, 17yo</span>
<span>longbottom, frank — pb, 16</span>
<span>malfoy, hyperion — pb, 17yo</span>
<span>podmor, gordy — hb, 24yo (am)</span>
<span>weasley, septimus — pb, 16yo</span>
<span>wood, athena — pb, 16yo</span>
</div>
</div>
</section>
<section id="content-tab8">
<div>
<div class="textinform">
<!-- хаффлпафф -->
<span>gump, lucas — pb, 17yo</span>
<span>longbottom, alice — pb, 15yo</span>
<span>rowley, gerda — pb, 17yo</span>
<span>selvin, amanda — pb, 16yo</span>
<span>shafiq, alec — pb, 17yo</span>
<span>weasley, dominique — pb, 16yo</span>
<span>weasley, frederica — pb, 16yo</span>
</div>
</div>
</section>
<section id="content-tab9">
<div>
<div class="textinform">
<!-- слизерин -->
<span><a href="http://heartsofstone.ru/profile.php?id=2">black (potter), arktur<</a> — hb, 22yo (am)</span>
<span>dolohov, roman — pb, 16yo</span>
<span>lestrange, bellamy — pb, 17yo</span>
<span>montegue, graham — pb, 17yo</span>
<span>parkinson, patricia — pb, 16yo</span>
<span>rowley, rowena — pb, 16yo</span>
<span>yaxley, kayla — pb, 15yo</span>
<span>yaxley, keira — pb, 15yo</span>
</div>
</div>
</section>
<section id="content-tab10">
<div>
<div class="textinform">
<!-- рэйвенкло -->
<span>crouch, georgia — pb, 17yo</span>
<span>flint, adonis — pb, 17yo</span>
<span><a href="http://heartsofstone.ru/profile.php?id=4">greengrass, renate</a> — pb, 16yo (am)</span>
<span>nott, liam — pb, 22yo (am)</span>
<span>rookwood, ruby — pb, 17yo</span>
<span>rosier, rogan — pb, 17yo</span>
<span>yaxley, corban — pb, 17yo</span>
<span>weasley, ignatius — pb, 16yo</span>
</div>
</div>
</section>
</div>
<style>#guestbook {background: url(https://forumstatic.ru/files/001a/a1/cb/93491.png);
height: 443px;
color: #ececec
}
.guestrightinfo game {display: block;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 17px;
color: #ececec;}
.guestrightinfo tags {
font-family: cambria, lora;
color: #ececec;
word-spacing: 0px;
letter-spacing: 2px;
margin-top: 0px;
margin-bottom: 9px;
font-size: 8px;
text-transform: uppercase;
transform: scaleY(.83)}
.guestrightinfo span {text-align: left;
padding-left: 15px;
text-transform: lowercase;
font-size: 8px;
color: #c6c6c6;
letter-spacing: 0px;
line-height: 8px}
.guestrightinfo div {margin-top: 25px;
height: 240px;
margin-left: 15px;
width: 150px;
font-size: 10px;
line-height: 19px}
.guestrightinfo div b {font-weight: 800;
color: #8c2929 !important;}
.guestleftinfo > label {
margin: 11px 0 0px;
text-transform: uppercase;
padding: 3px 7px 3px 0;
margin-left: 458px;
}
.guestleftinfo > label:first-of-type {margin-top: 29px}
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4,
#tab5:checked~#content-tab5, #tab6:checked~#content-tab6, #tab7:checked~#content-tab7, #tab8:checked~#content-tab8, #tab9:checked~#content-tab9, #tab10:checked~#content-tab10 {
display: block;
}
.textinform span {
margin: 5px 0;
text-transform: lowercase;
}
.textinform span a, .textinform b {font-weight: 800;
color: #8c2929 !important}
</style>
