таблица от вещего духа
[html]
<div id="spiritworkroom">
<div class="spiritfirst">
<div class="spiritfirstpic"><img src="https://i.ibb.co/DgFH30t/111.png"></div>
<div class="spiritfirsttitle">Каталог рас</div>
<div class="spiritfirsttext"><subtitle>вау, вы нашли эту заметку!</subtitle>
<about>Здесь мы просто хотим сказать, что вы - замечательный человек. Пусть этот день будет хорошим для вас!
</about></div>
</div>
<div class="spiritsecond">
<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>
<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">Полурослики</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>
<input id="tab11" type="radio" name="tabs">
<label for="tab11">Проклятые</label>
<input id="tab12" type="radio" name="tabs">
<label for="tab12">Корвумы</label>
<input id="tab13" type="radio" name="tabs">
<label for="tab13">Гномы</label>
<input id="tab14" type="radio" name="tabs">
<label for="tab14">Гоблины</label>
<section id="content-tab1">
<p>
<img src="http://forumstatic.ru/files/0013/fd/43/35165.png" alt="Люди" width="132" height="174" class="leftimg"><b>Человек</b> всегда гнался за необъятным, стремясь занять первое место в мире. Это одна из наиболее молодых, но одновременно самая многочисленная раса, расселившаяся сплошь по земле и занимающая четверть всей ее территории. Люди не имеют авторитета и доверия у прочих рас, так как межрасовая иерархия сложилась намертво еще до них. Однако именно человек отличается амбициозностью и чаще известен в истории как великий ученый и первооткрыватель. Люди могут преуспеть и в магии, и в технологиях, и в любых других начинаниях - они известны тягой к приключениям. Со своей склонностью к миграции и завоеваниям, люди более разнообразны физически, потому не существует типичной внешности человека. Среди них велико социальное неравенство, часты междоусобицы, оттого нестабильно их королевство — Фиеримор, первое объединение великих и властных людей, что тянется от северо до востока Фирса. В противовес царящей здесь монархии был возведен Концентралий - независимое государство, самопровозглашенная столица и пристанище тем, кто готов стараться на общее благо. До сих пор консерваторы пытаются подчинить себе тех свободолюбивых.
</p>
</section>
<section id="content-tab2">
<p>
Когда Вы создаете нового персонажа, используйте <b><a href="http://karatada.rolka.su/viewtopic.php?id=117">Шаблон анкеты</a></b> и следуйте тем указаниям, что даны в этой теме. Тамошних инструкций должно быть достаточно, однако ниже здесь приведены советы лично от Мастера — это должно помочь Вам понять, чего мы ждем и чего стоит избегать. Обратите внимание, что на странице с шаблоном есть дополнительный шаблон с анкетой без кода.
Каждый персонаж принадлежит к одной из <b><a href="http://karatada.rolka.su/pages/races">множества рас</a></b> мира Каратады. К игре не допускаются расы из других Вселенных, однако, создавая полукровок и комбинируя разные расы, можно получить что-то новое и уникальное. Правила взятия полукровок так же представлены на странице рас — жмите на иконку в правом верхнем углу. Вы можете задумать играть за, например, сатира. Смешайте рогатого тифлинга и земляного джинна! Только вообразите, кем хотите играть, и найдите подходящее сочетание рас.
Через <b><a href="http://karatada.rolka.su/pages/aspects">Способности и Слабости</a></b> можно получать интересные вариации существ, не представленных в каталоге рас. Хотите играть за нежить, но не за проклятого? Возьмите любую расу в сочетании с аспектом «нежить», обернувшись нежитью вроде ходячего трупа, жаждущего отомстить.
Объем каждого пункта анкеты не важнее качества Вашего текста. Не нужны излишние украшательства — важна «концепция» Вашего персонажа, его мотивация и цели в жизни. Чем Вам хочется заниматься в игре? Пробивать головой стены, превращаться в волка, взрывать все подряд или копить золото — сойдет все что угодно, однако важно, чтобы приходя в этот мир, Вы уже представляли себе, чего ждете от игры и что будет Вашим стимулом. Мастер в игре один, игроков — два десятка, потому мы не сможем водить за руку каждого из Вас. Проявляйте инициативу — ищите приключений, кооперируйтесь с другими игроками, наживайте себе проблем! А мы постараемся предоставить Вам достойное поле для действий.
Работая над своим персонажем, вы неизбежно будете придумывать и мир вокруг него — других персонажей, организации, места и все такое. И это замечательно! Опирайтесь на предложенную информацию о мире, но не стесняйтесь вписывать в игру свои деревни, города, академии волшебства, консультируясь с Мастером, если нужно. Мир большой — поместится все, что хочется.
Может быть, Вам захочется состоять в каких-то отношениях с другими персонажами уже на старте игры. Чем больше связей Вы имеете — тем лучше, потому что это дает кучу возможностей развития пути. Посмотреть запросы игроков можно в <b><a href="http://karatada.rolka.su/viewtopic.php?id=396">Розыске</a></b>, а так же Вы можете оставить свои пожелания в Гостевой.
<b>Карточка</b> заполняется уже после того, как Вас приняли в игру. Создайте свою тему в <b><a href="http://karatada.rolka.su/viewforum.php?id=31">Картотеке</a></b>, используя <b><a href="http://karatada.rolka.su/viewtopic.php?id=204">Шаблон оформления карточки</a></b>. В этом разделе речь пойдет непосредственно о том, что можно и нельзя вносить в Карточку, а также о доступном Вам стартовом снаряжении.
Это важная составляющая нашей игры. Карточку интересно смотреть другим игрокам, и она жизненно необходима во время боя и для любых бросков кубика. При желании Вы можете заносить некоторую информацию в ней под спойлер так, чтобы она была видна только ГеймМастеру.
Пожалуйста, внутри своей карточки оставляйте ссылки на свою тему с анкетой и саму карточку, как бы это ни было парадоксально. Это облегчит работу Мастера, да и Вам самим так будет удобнее.
Когда Вы редактируете раздел <b>НАВЫКИ</b> на предмет повышения уровня навыка или получения нового артефакта, Вы обязаны отчитаться об этом в <b><a href="http://karatada.rolka.su/viewtopic.php?id=370">Бюрократии и канцелярии</a></b>. Это подкрепляет честность и достоверность внесенных Вами изменений. Если Вас словят на попытке сжульничать или накрутить чего-нибудь — доверие к Вам бесповоротно потеряется. Не запрещено ошибаться — запрещено обманывать! Мастер легко может отследить историю редактирований Вашей карточки, поэтому играйте честно и на совесть. Мастер оставляет за собой право банить людей за присвоение уровней или предметов обманным путем.
Теперь о приятном. На старте каждому герою положено оружие на Ваш выбор в зависимости от уклона в физическую или магическую атаку. Ваше оружие для физических атак имеет <b>РЕЙТИНГ ОПАСНОСТИ 2</b> и может причинять колющий-рубящий урон, для атак Боем и Точностью. Маги же получают артефакты, обеспечивающие один из видов магического урона, согласно одной из школ магии. На старте игры каждый получит одно оружие, для магов оно будет соответствовать выбранной школе магии и иметь два бонуса +1 к разным аспектам их колдовства. Бонусы выдаются Гейм Мастером.
Вместо предложенного оружия Вы можете выбрать инструмент +2 для любого ремесла. Сумму игровых монет, выдаваемых Вам на старте, Мастер определяет навскидку, в основном ориентируясь на биографию героя и его положение в мире.
</p>
</section>
<section id="content-tab3">
<p>
Вы заполнили карточку, выпросили у Мастера кнопку для нее, получили свои монеты и теперь вольны пуститься в любое приключение. Посетите «Поиск соигрока» чтобы найти спутника, обратитесь к <b><a href="http://karatada.rolka.su/pages/worldsmap">Карте</a></b> для наглядности местонахождения того или иного государства.
Вы всегда можете отправиться в <b><a href="http://karatada.rolka.su/viewforum.php?id=87">Фантасмагорию</a></b>, устроив собственный сюжет на любую тему в любом мире. Создайте здесь свою тему, пригласите друзей и отыграйте причудливый эпизод. Фантасмагория — это мир грез, потому в нем можно играть параллельно игре в локациях реального мира.
Следите за новостями на главной странице, проверяйте ключ форума и <b><a href="http://karatada.rolka.su/viewtopic.php?id=577">Квесты</a></b> на предмет непыльной работенки, за которую Вам заплатят. В <b><a href="http://karatada.rolka.su/viewtopic.php?id=370">Канцелярии тетушки Яг</a></b> представлены способы заработать игровую валюту, которую затем можно потратить в <b><a href="http://karatada.rolka.su/pages/zatovari">Бакалее</a></b>.
</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');
#spiritworkroom {width: 900px;
height: 820px;
background: #151515;
margin:auto;
box-shadow: 0 0 0 1px rgba(0,0,0,.2)}
.spiritfirst {float: left;
margin: 10px;
width: 190px;
height: 820px;
box-shadow: 0 0 0 1px rgba(0,0,0,.2);
overflow: hidden;
position: relative;
border: 5px solid #151515}
.spiritfirstpic {margin:auto;
width: 190px;
height: 820px;}
.spiritfirsttitle {font-family: playfair display;
font-weight: 900;
width: 150px;
color: #dfdfdf;
text-shadow: 1px 1px 0px #000;
font-size: 18px;
height: 50px;
margin: -80px 0 0 0px;
z-index: 10;
position: relative;
padding-left: 10px;
background: rgba(0,0,0,.65);
transition: all .7s cubic-bezier(0.25, 0.1, 0.25, 1) .15s}
.spiritfirsttitle subtitle {box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
font-family: pt sans;
font-weight: normal;
color: #cecece;
text-shadow: 1px 1px 0px #333;
font-size: 9px;
display: block;
text-align: right;
letter-spacing: 1px;
margin-top:4px;
margin-right: 20px}
.spiritfirsttitle:before {background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.65));
content: "";
display: block;
position: absolute;
width: 100%;
height: 50px;
top: -50px;
margin-left: -10px}
.spiritfirsttext {
z-index:8;
position: relative;
background: rgba(0,0,0,.65);
width: 190px;
margin: 0px 0 0 0px;
font-family: pt sans;
font-size: 10px;
text-align: justify;
padding: 1px 0px;
color: #efefef;}
.spiritfirsttext about {margin: 10px 15px;
display: block;
box-shadow: 0 -2px 0 0 rgba(255,255,255,.1);
padding-top:10px}
.spiritfirsttext:after {background:linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,0));
content: "";
display: block;
position: absolute;
width: 100%;
height: 100px;
bottom: -100px;
margin-left: 0px}
.spiritfirsttext subtitle {
text-align: center;
display: block;
width: 190px;
font-size: 9px;
font-family: pt sans;
color: #999;
opacity: 0;
transform: translate(0,400px);
transition: all 1s cubic-bezier(0.25, 0.1, 0.25, 1) .15s
}
.spiritfirst:hover .spiritfirsttitle {margin-top: -530px;
}
.spiritfirst:hover subtitle {opacity:1;
transform: translate(0,0px)}
.spiritsecond {background: #191919;
width: 530px;
margin: 10px;
height: 820px;
margin-top:9px;
border: 1px solid rgba(0,0,0,.2);
position: absolute;
margin-left: 211px
}
.tabs {
padding: 0px;
margin: 0 auto;
}
.tabs>section {
display: none;
padding: 10px;
height: 620px;
overflow-y: auto;
margin: 5px;
font-family: arial;
font-size: 11px;
text-align: justify
}
.tabs>section>p {
margin: 0 0 5px;
line-height: 1.5;
color: #c8c8c8;
-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 {
transform: translate(-400px,0);
transform-origin: 50% 0%;
}
to {
transform: translate(0px,0);
}
}
.tabs>input {
display: none;
position: absolute;
}
.tabs>label:first-of-type {box-shadow: none}
.tabs>label {
display: inline-grid;
margin: 0 -3px 0px;
padding: 10px 0px;
font-weight: 600;
text-align: center;
color: #aaa;
background: #191919;
width: 131px;
border: solid rgba(0,0,0,.2);
border-width: 0px 0px 1px 0px;
left: 3px;
top: 0px;
position: relative;
font-family: pt sans;
font-size: 8px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: lighter;
box-shadow: 1px 0 0 0 rgba(0,0,0,.2) inset
}
.tabs>label:after {content: "";
display: block;
position:absolute;
width: 100px;
height: 3px;
background: #dfdfdf;
left:3px;
bottom:3px;
transform: scaleX(0);
transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}
.tabs>label:hover:after {transform: scaleX(1);
background: #888;}
.tabs>label:hover {
color: #888;
cursor: pointer;
transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s
}
.tabs>input:checked+label {
color: #555;
background: #f1f1f1;
}
.tabs>input:checked+label:after {content: "";
display: block;
position:absolute;
width: 100px;
height: 3px;
background: #888;
left:3px;
bottom:3px;
transform: scaleX(1);
transition: all .3s cubic-bezier(0.25, 0.1, 0.25, 1) 0s}
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 {
display: block;
}
</style>
<style>
.leftimg {
float:left; /* Выравнивание по левому краю */
margin: 7px 7px 7px 0; /* Отступы вокруг картинки */
}
.rightimg {
float: right; /* Выравнивание по правому краю */
margin: 7px 0 7px 7px; /* Отступы вокруг картинки */
}
</style>[/html]
