Код:
<!--HTML-->
<div class="vnesh">
<!------------------информация ------------>
<rules> <span> список занятых внешностей и ролей </span>
здесь вы найдете список занятых персонажей и внешностей.<br>
придержанные можно посмотреть в гостевой книге;<br>
</rules>
<!------------------правила ------------>
<rules2>
- одна внешность - один персонаж, но мы не против близнецов;<br>
- в этой теме не придерживается внешность для нужного. Ее необходимо сначала выкупить в банке, а затем придержать в гостевой книге;<br>
- сntrl+f поможет для поиска интересующей внешности / персонажа;<br>
- kat graham [bonnie bennett]<br>
</rules2>
<!------------------кнопки ------------>
<div id="vnesh2">
<div class="tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">посмотреть внешности</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">посмотреть роли</label>
<section id="content-tab1">
<p>
<div class="vnleft">
<span> a - b - c </span>
Aaron Taylor-Johnson [<a href="https://faceinless.ru/profile.php?id=182">Jason Reed</a>]<br>
Aaron Stanford [<a href="https://faceinless.ru/profile.php?id=226">Finn Mikaelson</a>]<br>
Aidan Gallagher [<a href="https://faceinless.ru/profile.php?id=166">Axel Evers</a>]<br>
Anna Pavaga [<a href="https://faceinless.ru/profile.php?id=98">Kayla Weiser</a>]<br>
Anya Taylor-Jay [<a href="https://faceinless.ru/profile.php?id=122">Nikki Short</a>]<br>
Arielle Kebbel [<a href="https://faceinless.ru/profile.php?id=113">Alexia Branson</a>]<br>
Ben Barnes [<a href="https://faceinless.ru/profile.php?id=189">Logan Hunt</a>]<br>
Ben Barnes [<a href="https://faceinless.ru/profile.php?id=106">David Hunt</a>]<br>
Bradley James [<a href="https://faceinless.ru/profile.php?id=177">Leonard Baxter</a>]<br>
Brianne Howey [<a href="https://faceinless.ru/profile.php?id=116">Inadu Lily Evers</a>]<br>
Candice King [<a href="https://faceinless.ru/profile.php?id=133">Caroline Forbes</a>]<br>
Cara Delevingne [<a href="https://faceinless.ru/profile.php?id=134">Alita Adderley</a>]<br>
Cindy Kimberly [<a href="https://faceinless.ru/profile.php?id=231">Michelle de Martel</a>]<br>
Claire Holt [<a href="https://faceinless.ru/profile.php?id=66">Rebekah Mikaelson</a>]<br>
Charles Melton [<a href="https://unholy.f-rpg.me/profile.php?id=254">Tyler Lockwood</a>]<br>
Charles Michael Davis [<a href="https://faceinless.ru/profile.php?id=249">Marcel Gerard</a>]<br>
Charlie Hunnam [<a href="https://faceinless.ru/profile.php?id=111">Trevor Fitsgerald</a>]<br>
Chloe Bennet [<a href="https://faceinless.ru/profile.php?id=172">Daniella Sharman</a>]<br>
Chris Evans [<a href="https://unholy.f-rpg.me/profile.php?id=240">Josh Lewis</a>]<br>
Chris Wood [<a href="https://faceinless.ru/profile.php?id=252">Kai Parker</a>]<br>
Cody Fern [<a href="https://faceinless.ru/profile.php?id=166">Axel Evers</a>]<br>
<span> d - e - f </span>
Dane Dehaan [<a href="https://faceinless.ru/profile.php?id=91">Maud Evers</a>]<br>
Daniel Sharman [<a href="https://faceinless.ru/profile.php?id=135">Alex Evers</a>]<br>
Danielle Campbell [<a href="https://faceinless.ru/profile.php?id=187">Davina Claire</a>]<br>
Danielle Rose Russell [<a href="https://faceinless.ru/profile.php?id=138">Hope Mikaelson</a>]<br>
Drew Van Acker [<a href="https://faceinless.ru/profile.php?id=158">Matt Donovan</a>]<br>
Eiza Gonzбlez [<a href="https://faceinless.ru/profile.php?id=205">Faith Allard</a>]<br>
Emma Dumont [<a href="https://faceinless.ru/profile.php?id=135">Alex Evers</a>]<br>
Emeraude Toubia [<a href="https://faceinless.ru/profile.php?id=70">Isabel Rainwood</a>]<br>
Florence Pugh [<a href="https://faceinless.ru/profile.php?id=91">Maud Evers</a>] <br>
Freya Allan [<a href="https://faceinless.ru/profile.php?id=255">Briana Berger</a>]<br>
<span> g - h - i </span>
Ian Somerhalder [<a href="https://faceinless.ru/profile.php?id=217">Damon Salvatore</a>]<br>
</div>
<div class="vnright">
<span> j - k - l - m </span>
Jacob Elordi [<a href="https://faceinless.ru/profile.php?id=245">Mac Ross</a>]<br>
Janet Montgomery [<a href="https://faceinless.ru/profile.php?id=65">Morgana Evers</a>]<br>
Jeffrey Dean Morgan [<a href="https://faceinless.ru/profile.php?id=212">Mikael</a>]<br>
Jenny Boyd [<a href="https://faceinless.ru/profile.php?id=176">Elizabeth Saltzman</a>]<br>
Jessica Alba [<a href="https://faceinless.ru/profile.php?id=134">Alita Parker</a>]<br>
Jessica Alexander [<a href="https://faceinless.ru/profile.php?id=66">Cassandra Blackwell</a>]<br>
Joseph Morgan [<a href="https://faceinless.ru/profile.php?id=100">Niklaus Mikaelson</a>]<br>
Josh Segarra [<a href="https://faceinless.ru/profile.php?id=226">Finn Mikaelson</a>]<br>
Kat Graham [<a href="https://faceinless.ru/profile.php?id=197">Bonnie Bennett</a>]<br>
Katherine McNamara [<a href="https://faceinless.ru/profile.php?id=179">Ruby Ross</a>]<br>
Katheryn Winnick [<a href="https://faceinless.ru/profile.php?id=213">Esther Mikaelson</a>]<br>
Katie McGrath [<a href="https://faceinless.ru/profile.php?id=65">Morgana Evers</a>]<br>
Lily Collins [<a href="https://faceinless.ru/profile.php?id=232">Charlotte Salvatore</a>]<br>
Lucas Hedges [<a href="https://faceinless.ru/profile.php?id=230">Alistair Baxter</a>]<br>
Lucy Hale [<a href="https://faceinless.ru/profile.php?id=221">Cleo Sowande</a>]<br>
Madelaine Petsch [<a href="https://faceinless.ru/profile.php?id=219">Octavia Gentile</a>]<br>
Madison Beer [<a href="https://faceinless.ru/profile.php?id=218">Michaella Wayne</a>]<br>
Melissa Benoist [<a href="https://faceinless.ru/profile.php?id=250">Rhiannon Dornan</a>]<br>
Michael B. Jordan [<a href="https://faceinless.ru/profile.php?id=249">Marcel Gerard</a>]<br>
Michael Malarkey [<a href="https://faceinless.ru/profile.php?id=198">Lorenzo St. John</a>]<br>
Michael Trevino [<a href="https://unholy.f-rpg.me/profile.php?id=254">Tyler Lockwood</a>]<br>
<span> n - o - p </span>
Nathaniel Buzolic [<a href="https://faceinless.ru/profile.php?id=227">Kol Mikaelson</a>]<br>
Nina Dobrev [<a href="https://faceinless.ru/profile.php?id=210">Elena Gilbert</a>]<br>
Nina Dobrev [<a href="https://faceinless.ru/profile.php?id=130">Katherine Pierce</a>]<br>
Olivia Cooke [<a href="https://faceinless.ru/profile.php?id=3">Aurora De Martel</a>]<br>
Paul Weasley [<a href="https://faceinless.ru/profile.php?id=203">Stefan Salvatore</a>]<br>
Paul Wesley [<a href="https://faceinless.ru/profile.php?id=69">Tom Avery</a>]<br>
<span> q - r - s </span>
Rebecca Ferguson [<a href="https://faceinless.ru/profile.php?id=136">Inadu Lily Evers</a>]<br>
Samara Weaving [<a href="https://faceinless.ru/profile.php?id=191">Zireael</a>]<br>
Shailene Woodley [<a href="https://faceinless.ru/profile.php?id=183">Adriana Sage</a>]<br>
Shelley Hennig [<a href="https://faceinless.ru/profile.php?id=125">Malia Tate-Kenner</a>] <br>
Steven R. McQueen [<a href="https://faceinless.ru/profile.php?id=209">Jeremy Gilbert</a>]<br>
<span> t — u — v </span>
Teresa Palmer [<a href="https://faceinless.ru/profile.php?id=211">Freya Mikaelson</a>]<br>
Vanessa Morgan Mziray [<a href="https://faceinless.ru/profile.php?id=221">Cleo Sowande</a>]<br>
<span> w — x — y — z </span>
Zoey Deutch [<a href="https://faceinless.ru/profile.php?id=224">Caitlin Ripley</a>]<br>
<br>
</div>
</p>
</section>
<section id="content-tab2">
<p>
<div class="vnleft">
<span> Вампиры и первородные</span>
<a href="https://faceinless.ru/profile.php?id=3">Аврора Де Мартель // Aurora De Martel</a> <br>
<a href="https://faceinless.ru/profile.php?id=113">Алексия Брэнсон // Alexia Branson</a> <br>
<a href="https://faceinless.ru/profile.php?id=217">Деймон Сальваторе // Damon Salvatore</a><br>
<a href="https://faceinless.ru/profile.php?id=98">Кейла Вейсер // Kayla Weiser </a><br>
<a href="https://faceinless.ru/profile.php?id=227">Кол Майклсон // Kol Mikaelson</a><br>
<a href="https://faceinless.ru/profile.php?id=133">Кэролайн Форбс // Caroline Forbes</a> <br>
<a href="https://faceinless.ru/profile.php?id=130">Кэтрин Пирс // Katherine Pierce</a> <br>
<a href="https://faceinless.ru/profile.php?id=198">Лоренцо Сент Джон // Lorenzo St. John</a><br>
<a href="https://faceinless.ru/profile.php?id=212">Майкл // Mikael</a><br>
<a href="https://faceinless.ru/profile.php?id=249">Марсель Жерар // Marcel Gerard</a><br>
<a href="https://faceinless.ru/profile.php?id=100">Никлаус Майклсон // Niklaus Mikaelson</a> <br>
<a href="https://faceinless.ru/profile.php?id=122">Никки Шорт // Nikki Short </a><br>
<a href="https://faceinless.ru/profile.php?id=66">Ребекка Майклсон // Rebekah Mikaelson</a><br>
<a href="https://faceinless.ru/profile.php?id=250">Рианнон Дорнан // Rhiannon Dornan</a><br>
<a href="https://faceinless.ru/profile.php?id=203">Стефан Сальваторе // Stefan Salvatore</a><br>
<a href="https://faceinless.ru/profile.php?id=111">Тревор Фицджеральд // Trevor Fitsgerald</a><br>
<a href="https://faceinless.ru/profile.php?id=226">Финн Майклсон // Finn Mikaelson</a><br>
<span>Люди и охотники</span>
<a href="https://faceinless.ru/profile.php?id=209">Джереми Гилберт // Jeremy Gilbert</a><br>
<a href="https://faceinless.ru/profile.php?id=210">Елена Гилберт // Elena Gilbert</a><br>
<a href="https://faceinless.ru/profile.php?id=158">Мэтт Донован // Matt Donovan</a><br>
<a href="https://faceinless.ru/profile.php?id=69">Том Эвери // Tom Avery</a><br>
</div>
<div class="vnright">
<span>Ведьмы/сифоны/банши/медиумы/демоны/гончие</span>
<a href="https://faceinless.ru/profile.php?id=183"> Адриана Сейдж // Adriana Sage </a><br>
<a href="https://faceinless.ru/profile.php?id=166">Аксель Эверс // Axel Evers</a><br>
<a href="https://faceinless.ru/profile.php?id=135">Алекс Эверс // Alex Evers</a><br>
<a href="https://faceinless.ru/profile.php?id=197">Бонни Беннетт // Bonnie Bennett </a><br>
<a href="https://faceinless.ru/profile.php?id=187">Давина Клэр // Davina Claire</a><br>
<a href="https://faceinless.ru/profile.php?id=191">Зираэль // Zireael</a><br>
<a href="https://faceinless.ru/profile.php?id=136">Инаду/Пустая/Лилит // Inadu/Lilith</a><br>
<a href="https://faceinless.ru/profile.php?id=224">Кейтлин Рипли // Caitlin Ripley</a><br>
<a href="https://faceinless.ru/profile.php?id=221">Клео Сованде // Cleo Sowande</a><br>
<a href="https://faceinless.ru/profile.php?id=106">David Hunt // Девид Хант</a><br>
<a href="https://faceinless.ru/profile.php?id=189">Логан Хант // Logan Hunt</a><br>
<a href="https://faceinless.ru/profile.php?id=218">Микаэлла Уэйн // Michaella Wayne</a><br>
<a href="https://faceinless.ru/profile.php?id=91">Мод Эверс // Maud Evers</a><br>
<a href="https://faceinless.ru/profile.php?id=65">Моргана Эверс // Мorgana Evers</a><br>
<a href="https://faceinless.ru/profile.php?id=219">Октавия Джентиле // Octavia Gentile</a><br>
<a href="https://faceinless.ru/profile.php?id=211">Фрея Майклсон // Freya Mikaelson</a><br>
<a href="https://faceinless.ru/profile.php?id=205">Фэйт Эллард // Faith Allard</a><br>
<a href="https://faceinless.ru/profile.php?id=132">Хенрик Майклсон // Henrik Mikaelson</a><br>
<a href="https://faceinless.ru/profile.php?id=176">Элизабет Зальцман // Elizabeth Saltzman</a><br>
<a href="https://faceinless.ru/profile.php?id=213">Эстер Майклсон // Esther Mikaelson</a><br>
<span>Оборотни/гибриды/еретики/трибрид/ви-вульфы</span>
<a href="https://faceinless.ru/profile.php?id=230">Алистер Бакстер // Alistair Baxter</a><br>
<a href="https://faceinless.ru/profile.php?id=134">Алита Нимуэ Аддерли // Alita Nimue Adderley</a><br>
<a href="https://faceinless.ru/profile.php?id=255">Бриана Бёргер // Briana Berger</a><br>
<a href="https://faceinless.ru/profile.php?id=172">Даниэлла Шарман // Daniella Sharman</a><br>
<a href="https://faceinless.ru/profile.php?id=182">Джейсон Рид // Jason Reed</a><br>
<a href="https://unholy.f-rpg.me/profile.php?id=240">Джош Льюис // Josh Lewis</a><br>
<a href="https://faceinless.ru/profile.php?id=70">Изабель Рейнвуд // Isabel Rainwood</a><br>
<a href="https://faceinless.ru/profile.php?id=252">Кай Паркер // Kai Parker</a><br>
<a href="https://faceinless.ru/profile.php?id=66">Кассандра Блэквелл // Cassandra Blackwell</a><br>
<a href="https://faceinless.ru/profile.php?id=177">Леонард Бакстер // Leonard Baxter</a><br>
<a href="https://faceinless.ru/profile.php?id=245">Мак Росс // Mac Ross</a><br>
<a href="https://faceinless.ru/profile.php?id=125">Малия Тейт-Кеннер // Malia Tate-Kenner</a><br>
<a href="https://faceinless.ru/profile.php?id=231">Мишель де Мартель // Michelle de Martel</a><br>
<a href="https://faceinless.ru/profile.php?id=179">Руби Росс // Ruby Ross</a><br>
<a href="https://unholy.f-rpg.me/profile.php?id=254">Tyler Lockwood // Тайлер Локвуд</a><br>
<a href="https://faceinless.ru/profile.php?id=138">Хоуп Андреа Майклсон // Hope Andrea Mikaelson</a><br>
<a href="https://faceinless.ru/profile.php?id=232">Шарлотта Сальваторе // Charlotte Salvatore</a><br>
</div>
</p>
</section>
</div>
</div>
</div>
<div class="clearer"></div>
<style>
/* код от вещего духа */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Prata&subset=cyrillic');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700|Old+Standard+TT:400,700|Oranienbaum|Oswald:300,400,700|PT+Sans:400,700|Roboto+Condensed:300,400,700|Roboto:300,400,700');
#vnesh2 {position: absolute;
width: 700px;
height: 520px;
margin: 212px 0px 0px 47px;}
.tabs {
padding: 0px;
margin: 0 auto;
}
.tabs>section {
display: none;
padding: 10px;
height: 440px;
overflow-y: auto;
text-align: justify;
font-size: 10px;
}
.tabs>section>p {
margin: 0 0 5px;
line-height: 1.5;
color: #888888;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
.tabs>input {
display: none;
position: absolute;
}
.tabs>label:first-of-type {box-shadow: none}
.tabs>label {
display: inline-grid;
margin: 0 -2px 0px;
text-align: center;
color: var(--proftext);
height: 28px;
line-height: 25px !important;
width: 348px;
left: 2px;
top: 0px;
position: relative;
font: var(--h1-font);
text-transform: lowercase;
font-weight: bold;
}
.tabs>input:checked+label { color: var(--doptext);}
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 {
display: block;
}
.vnleft { display: inline-block;
width: 45%;
box-sizing: border-box;
overflow-y: auto;
height: 400px;
color: var(--proftext);
margin-right: 30px;}
.vnleft span { display: block;
text-align: center;
font: var(--h1-font);
font-weight: bolder;
margin-bottom: 10px; margin-top: 10px;}
.vnright { width: 49%;
display: inline-block;
box-sizing: border-box;
overflow-y: auto;
color: var(--proftext);
height: 400px;}
.vnright span { display: block;
text-align: center;
font: var(--h1-font);
font-weight: bolder;
margin-bottom: 10px;margin-top: 10px;}
</style>
