[html]<script>$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
})
</script><style>::-webkit-scrollbar-thumb {
background-color: #222;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
height: auto;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
border: 2px solid #eee;
background-color: #999;
}
::-webkit-scrollbar-corner {
background-color: #eee;
height: 4px;
width: 4px;
}
body { margin-top: 100px; font-family: 'roboto', serif; line-height: 1.5; font-size: 10px; }
.container{ width: 600px; height: auto; margin: 0 auto; }
</style>
<link href="path/to/colofilter.css" rel="stylesheet" type="text/css">
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1"><s> </s> <b>I. instruction</b></li>
</ul>
<div id="tab-1" class="tab-content current">
<div class="title">&. ИНСТРУКЦИЯ ПО ИСПОЛЬЗОВАНИЮ ТЕМЫ :</div>
<b>занятость и список ролей</b> -
<p>во вкладках сверху можно увидеть разные отрасли ; в любые из них можно добавить отдельные категории - так, например, при желании можно добавить больше достопримечательностей и так далее ; заполняется строго по шаблону ; BB-коды не работают, для оформления пользуйтесь html - если код неправильно оформлени, администрация имеет право его не ставить, а сообщить в плюсе к сообщению об ошибке ;
</div><!-- container -->[/html]
[html]<script>$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
})
</script>
<style>::-webkit-scrollbar-thumb {
background-color: #222;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
height: auto;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
border: 2px solid #eee;
background-color: #999;
}
::-webkit-scrollbar-corner {
background-color: #eee;
height: 4px;
width: 4px;
}
body { margin-top: 100px; font-family: 'roboto', serif; line-height: 1.5; font-size: 10px; }
.container{ width: 600px; height: auto; margin: 0 auto; }
ul.tabs { margin: 0px; padding: 0px; list-style: none; text-align: right; background-color: #000; padding-right: 30px; border-bottom: 1px solid #fff; }
ul.tabs li{ background: none;
color: #666;
display: inline-block;
padding: 0px 0px;
margin-top: 0px;
cursor: crosshair;
font-family: 'istok web';
font-weight: 700;
text-transform: uppercase;
font-size: 7px;
letter-spacing: 1px;
background-color: #100b09;
z-index: 10000;}
ul.tabs li b { font-family: 'roboto'; font-weight: 400; color: #eee; }
ul.tabs li.current{ background: #000; color: #eee; }
.tab-content { display: none; background: #f8f8f8; padding: 20px 40px 20px 40px; }
.tab-content.current { display: inherit; }
#tab-1, #tab-2, #tab-3, #tab-4 { height: 300px; text-align: justify; }
#tab-1 { overflow: hidden }
#tab-1 img { margin-top: -20px; margin-left: -40px; width: 600px; overflow: hidden; height: 360px; margin-top: -20px; -webkit-filter: grayscale(100%); filter: grayscale(100%); }
#tab-1 h1 { font-family: 'playfair display'; font-size: 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-top: 200px; color: #fff; z-index: 1000; float: left; margin-left: 10px; margin-top: 90px; position: absolute; opacity: 0.8; }
.mein h4 { font-family: 'roboto'; font-size: 7px; text-transform: uppercase; color: #fff; margin-top: 10px; font-weight: 400; }
.mein h4 b { font-weight: 900; }
.mein { font-family: 'times'; font-size: 9.5px; font-weight: 400; letter-spacing: 1px; text-transform: normal; width: 360px; text-align: justify; line-height: 1.2em; margin-top: 120px; color: #fff; z-index: 1000; float: left; margin-left: 10px; position: absolute; opacity: 0.8; }
</style>
<link href="path/to/colofilter.css" rel="stylesheet" type="text/css">
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1"><s> </s> <b>I. THE BASIC</b></li>
<li class="tab-link" data-tab="tab-2"><s> </s> <b>II. CITY</b></li>
<li class="tab-link" style="padding-left: 25px!important;" data-tab="tab-3"><s> </s> <b>III. MYSTIC </b></li>
<li class="tab-link" data-tab="tab-4"><s> </s> <b>IV. WORK</b></li>
<li class="tab-link" style="padding-left: 25px!important;" data-tab="tab-5"><s> </s> <b>IV. CREATURES</b></li>
</ul>
<div id="tab-1" class="tab-content current"><h1>РАБОТА В БАМБЕРГЕ</h1>
<div class="mein">Стоящий на семи холмах город издавна стал местом обитания нечисти ; во время Второй Мировой Войны ведьмы, оборотни и вампиры объединились, чтобы защитить свой город — благодаря им город остался нетронутым, избежал бомбёжек и понёс малочисленные потери. Нечисть также облюбовала этот город, потому что именно здесь мэрия и её администрация уже продолжительное время с удовольствием сотрудничает с главами ковенов, альфами стай и советом вампиров. Мэрия передала в руки нечисти следующие территории :<p><h4><s> </s> <b>CITY</b> ДОСТОПРИМЕЧАТЕЛЬНОСТИ <s> </s> <b>MYSTIC</b> ТЕРРИТОРИЯ НЕЧИСТИ <s> </s> <b>WORK</b> ОБЩИЕ ПРОФЕССИИ <s> </s> <b>CREATURES</b> СПИСОК НЕЧИСТИ</h4></div>
<img src="https://forumupload.ru/uploads/0017/f2/a8/2/627433.jpg" width="620">
</div>
<div id="tab-2" class="tab-content">
<div class="title">&. ДОСТОПРИМЕЧАТЕЛЬНОСТИ</div>
<p>Архитектура города уцелела в военное время - кто-то считает, что чудом, кто-то знает, что нечисть объединилась во время Второй Мировой, чтобы защитить город. Достопримечательности Бамберга были бережно сохранены и сейчас считаются наследием всего человечества.
<table layout=fixed width=100%>
<tr valign=top>
<td><div class="bill-7">Императорский собор Бамберга :</div>
<div class='bill-6'><br><br>главный священник : акция
<br>священник :
<br>регент хора :
<br>хористы :
</div></td>
<td><div class="bill-7">Исторический музей Бамберга :</div>
<div class='bill-6'>
<br>
<br>директор :
<br>секретарь :
<br>экскурсоводы :
<br>реставраторы :
<br>смотрители :
</div></td>
<td><div class="bill-7">Международный Дом деятелей искусств :</div>
<div class='bill-6'>
<br>
<br>директор : акция
<br>секретарь :
<br>администратор :
<br>стипендиаты :
<br>сотрудники :
</div></td>
<tr>
</table></div>
<div id="tab-3" class="tab-content">
<div class="title">&. ТЕРРИТОРИИ НЕЧИСТИ</div>
<p>По завершению Второй Мировой войны мэр города передал нечисти в полное распоряжение ( с условием не нарушать законы города ) несколько территорий - теперь на них находятся важные места собраний и силы, которые бережно охраняются ;
<table layout=fixed width=100%>
<tr valign=top>
<td><div class="bill-7">Кладбище Drudenhaus :</div>
<div class="bill-6"><i>[ принадлежит ведьмам ]</i><br>
<br>смотритель :
<br>могильщики :
<br>сторожи :
</div></td>
<td><div class="bill-7">Замок Altenburg :</div>
<div class="bill-6"><i>[ принадлежит совету вампиров ]</i>
<br>
<br>совет вампиров :
<br>судьи :
<br>охранники тюрьмы :
<br>следователи :
<br>каратели :
</div></td>
<td><div class="bill-7">Национальный парк <br>Sonnentempel Im Hain :</div>
<div class="bill-6"><i>[ принадлежит оборотням ]</i>
<br>
<br>смотритель :
<br>сотрудники :
</div></td>
<tr>
</table>
<div class="title">&. Кладбище Drudenhaus ( Drudenhaus (Malefizhaus, Trudenhaus, Hexenhaus, Hexengefängnis ) :</div>
<p>Тюрьма для обвинённых в колдовстве женщин, существовавшая в Бамберге с 1627 по 1632 года ; тюрьма действительно служила своей цели и практически все находящиеся в ней были способны колдовать. Ведьм пытали и пытались заставить их использовать силы на благо церкви, однако большинство ведьм отказывалось сотрудничать. В настоящий момент на месте, где когда-то была тюрьма, находится частное кладбище, принадлежащее ведьмам, где они хоронят своих умерших, чтобы не терять с ними связь и черпать их силу. Место считается священным и бережно защищено от нечисти — ни один вампир или оборотень не могут туда попасть без разрешения главы ковена.
<div class="title">&. Замок Altenburg :</div>
<p>Замок, некогда принадлежавший правящей Бамбергом семье Бишопов ; находится на самом высоком холме из семи, что 'поддерживают' Бамберг. Предположительно замок был построен в 1109-ом году. В 1553-ом году впервые был использован как тюрьма, которой управляли вампиры, чтобы питаться заключёнными, спустя сто лет замок сгорел и до сих пор неизвестно почему — ходят слухи, что сам Влад Дракула приложил к этому руку. В 1801-ом был отреставрирован и заново отдан в руки Совета Вампиров, которые сделали из него свою западно-европейскую штаб-квартиру, которая существует и по сей день — здесь же находится тюрьма для вампиров, которых арестовали за нарушение кодекса.
<div class="title">&. Sonnentempel Im Hain & Bruderwald :</div>
<p>Национальные парки, которые на данный момент принадлежат оборотням и часто служат местом их общих собраний ; в остальных случаях близлежащие к городу территории поделены на принадлежащие стаям земли, где мэрией был введён закон о запрете охоты, чтобы люди случайно не ранили и не спровоцировали кого-то из оборотней.
</div>
<div id="tab-4" class="tab-content">
<div class="title">&. ОБЩИЕ ПРОФЕССИИ</div>
<p>Несмотря на присутствие в городе нечисти, Бамберг живёт за счёт своей инфраструктуры, которая в большинстве своём занята простыми людьми ; тем не менее многие вампиры, ведьмы и оборотни становятся работниками в самых разных отраслях, чтобы поддерживать человеческий образ жизни ;
<table layout=fixed width=100%>
<tr valign=top>
<td><div class="bill-7">Государственная служба :</div>
<div class="bill-6"><i>[ мэрия, полиция, университет и так далее ; профессии оплачиваемые государством ]</i><br>
<br>мэр : акция
<br>начальник полиции : акция
<br>директор университета : акция
<br>профессия :
</div></td>
<td><div class="bill-7">Частный <br>бизнес :</div>
<div class="bill-6"><i>[ бары, салоны красоты, магазины и так далее ; профессии связанные с частными компаниями - продавцы, бармены, владельцы бизнесов ]</i>
<br>
<br>профессия :
</div></td>
<td><div class="bill-7">Самозанятые :</div>
<div class="bill-6"><i>[ свободные художники, дизайнеры - фриланс ; преступники - наркоторговцы, гонщики и так далее ]</i>
<br>
<br>профессия :
</div></td>
<tr>
</table>
</div>
<div id="tab-5" class="tab-content">
<div class="title">&. СПИСОК НЕЧИСТИ</div>
<p>Несмотря на своё магическое происхождение, нечисти так же не чужда статистика и подсчёт 'своих' ;
<div class='title'>ВАМПИРЫ :</div>
<table layout=fixed width=100%>
<tr valign=top>
<td><div class="bill-7">КЛАН 'название клана'</div>
<div class="bill-6"><i>[ описание клана ]</i><br>
<br>глава клана :
<br>члены клана :
</div></td>
<td><div class="bill-7">КЛАН 'название клана'</div>
<div class="bill-6"><i>[ описание клана ]</i><br>
<br>глава клана :
<br>члены клана :
</div></td>
<td><div class="bill-7">КЛАН 'название клана'</div>
<div class="bill-6"><i>[ описание клана ]</i><br>
<br>глава клана :
<br>члены клана :
</div></td>
<td layout=fixed width=30%><div class="bill-7">ОДИНОЧКИ</div>
<div class="bill-6"><i>[ X - ВАМПИР ЯВЛЯЕТСЯ ПРЕСТУПНИКОМ И ОБЪЯВЛЕН В РОЗЫСК СОВЕТОМ ]</i><br>
<br>
</div></td>
<tr>
</table>
<div class='title'>оборотни :</div>
<table layout=fixed width=100%>
<tr valign=top>
<td><div class="bill-7">СТАЯ 'название стаи'</div>
<div class="bill-6"><i>[ описание стаи ]</i><br>
<br>альфа :
<br>бета :
<br>члены стаи :
</div></td>
<td><div class="bill-7">СТАЯ 'название стаи'</div>
<div class="bill-6"><i>[ описание стаи ]</i><br>
<br>альфа :
<br>бета :
<br>члены стаи :
</div></td>
<td><div class="bill-7">СТАЯ 'название стаи'</div>
<div class="bill-6"><i>[ описание стаи ]</i><br>
<br>альфа :
<br>бета :
<br>члены стаи :
</div></td>
<td layout=fixed width=30%><div class="bill-7">ОДИНОЧКИ</div>
<div class="bill-6"><br>
<br>name surname
</div></td>
<tr>
</table>
<div class='title'>ведьмы / ведьмаки :</div>
<table layout=fixed width=100%>
<tr valign=top>
<td><div class="bill-7">КОВЕН 'название ковена'</div>
<div class="bill-6"><i>[ описание ковена ]</i><br>
<br>глава ковена :
<br>члены ковена :
<br>ученики ковена :
</div></td>
<td><div class="bill-7">КОВЕН 'название ковена'</div>
<div class="bill-6"><i>[ описание ковена ]</i><br>
<br>глава ковена :
<br>члены ковена :
<br>ученики ковена :
</div></td>
<td><div class="bill-7">КОВЕН 'название ковена'</div>
<div class="bill-6"><i>[ описание ковена ]</i><br>
<br>глава ковена :
<br>члены ковена :
<br>ученики ковена :
</div></td>
<td layout=fixed width=30%><div class="bill-7">ОДИНОЧКИ</div>
<div class="bill-6"><br>
<br>name surname
</div></td>
<tr>
</table>
</div>
</div><!-- container -->[/html]
место работы, раса, принадлежность клану-ковену-стае - <a href="ссылка на профиль">имя фамилия английском</a>