Шаблон анкеты

[html]
<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<style type="text/css">
#xmenapp {

width: 611px;
height: 584px;
position: relative;
overflow: hidden;
color:

#FFFFFF;
padding: 2% 0 2%;

}

.xmenappback { width: 611px; height: 500px; }
.tabs {
position: relative;
width: 611px;
height: 500px;
background-color: #e6e1e1;
}

.tab {
float: left;
}

.main-box {
background-color:
#202020;
text-align: left;
color:
#fff;
padding: 1% 3%;
width: 78%;
margin-top: 2% !important;
border-left: 12px solid
#d0b000;
}
.tab label {
width: 142px; text-align: center;
height: 18px; display: block;
background-color: #d0b000;
text-transform: uppercase;
font-family: 'Quicksand';
padding: 5px;
margin-left: -1px;
position: relative;
left: 60px;
top: 5px;
bottom: 5px;
margin-right: 16px;
font-size: 15px;
color: #161616;
}
.t-1 {
float: left;
width: 45%;
margin-right: 5px;
margin-left: 4%;
}
.t-2 {
float: left;
width: 45%;
margin-left: 5px;
}
.tab [type=radio] {
display: none;
}

.content {
position: absolute;
top: 28px;
bottom: 0px;
left: 0px;
right: 0px;
color: #000000;
background-color: #e6e1e1;
padding: 20px;
height: 516px;
}

[type="radio"]:checked ~ label {

background-color:

#dce300;
z-index: 2;

}
.post-content td {
border-width: none !important;
border-style: none;
padding: none !important;
overflow: hidden;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
.table-main1 {
float: left;
width: 42%;
}
.table-main2 {
width: 58%;
float: left;
display: ;
margin-top: 17px;
margin-left: -4%;
}
.main-all {
background:
#fff url("https://funkyimg.com/i/2ZppL.jpg") top center no-repeat;
background-size: auto;
display: inline-block;
width: 100%;
background-size: cover;
padding-bottom: 4%;
}
</style>
<center >
<div class="main-all">
<div id="xmenapp"><div class=""><div class="sptfapp" style="height: 255px;" >

<img src="https://d.radikal.ru/d19/1912/45/c53cb4f2b947.gif" style="width: 611px;">
<div style="font-family: 'QuickSand'; position: relative; margin-top: -146px; font-size: 25px; text-align: center; text-transform: uppercase; color: #FFFFFF; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">Имя и фамилия (eng)</div>
<div style="font-family: 'QuickSand'; position: relative; margin-top: 14px; font-size: 14px; text-align: center; font-style: italic; color: #FFFFFF; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">Внешность (eng)</div></div>
<center>
<div style="width: 650px; height: 20px; background-color: #202020;"></div>
</div>

<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Глава I</label>
<div class="content">
<center><div class="table-main">

<div class="table-main1"><div style="width:185px; height: 195px; border: solid #202020 2px; margin-top: 16px; margin-right: -20%; background-image: url('https://a.radikal.ru/a07/1912/a4/3d71811d2b7f.gif'); "></div></td>
</div>
<div class="table-main2">
<div style="width: 246px; height: 19px; background-color: #d0b000; color:#161616; font-family: 'QuickSand'; text-transform: uppercase; padding: 7px 8px 3px;
text-align: center;
font-size: 12px;">Имя и фамилия на русском</div><br>
<div style="width: 246px; height: 19px; background-color: #d0b000; color:#161616; font-family: 'QuickSand'; text-transform: uppercase; padding: 7px 8px 3px;
text-align: center;
font-size: 12px;">Возраст/дата рождения</div><br>
<div style="width: 246px; height: 19px; background-color: #d0b000; color:#161616; font-family: 'QuickSand'; text-transform: uppercase; padding: 7px 8px 3px;
text-align: center;
font-size: 12px;">Деятельность</div><br>
<div style="width: 246px; height: 19px; background-color: #d0b000; color:#161616; font-family: 'QuickSand'; text-transform: uppercase; padding: 7px 8px 3px;
text-align: center;
font-size: 12px;"">Родной город</div><br>
<div style="width: 246px; height: 19px; background-color: #d0b000; color:#161616; font-family: 'QuickSand'; text-transform: uppercase; padding: 7px 8px 3px;
text-align: center;
font-size: 12px;">Место обитания</div>
</div>
</div></center><br><br>

</div>
</div>

<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Глава II</label>
<div class="content">
<div style="font-family: 'QuickSand'; font-size: 20px; text-align: center; text-transform: uppercase; color: #300e08;">История</div><br>
<center>
<div style="width: 493px; height: 190px; font-family: helvetica; font-size: 14px; text-align: justify; overflow: auto; padding: 3px; scrollbar-color: #202020 rgba(20, 18, 15,0.01);">
Опишите историю вашего персонажа. Раскройте темные и светлые истории его жизни.<br>

Pellentesque a scelerisque est, sed commodo sem. Pellentesque eu posuere erat. Aliquam nec lectus ligula. Mauris non lorem ligula. Nulla vehicula at sem ac auctor. Vestibulum dictum, diam vitae tincidunt commodo, justo leo tincidunt ligula, et consequat diam dolor vel nunc. Nulla quis diam facilisis, venenatis dui at, viverra arcu. In adipiscing leo ut congue aliquam. Nunc congue ullamcorper augue, eget dictum lectus euismod eget. Sed volutpat sapien eget eleifend lobortis. Morbi egestas quam eu euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<p>

Phasellus dapibus varius nibh, sed auctor nisl luctus sed. Nullam ante lectus, tincidunt vestibulum elit eget, interdum rutrum magna. Mauris semper at eros et hendrerit. Phasellus magna lorem, lacinia vel nisi ac, adipiscing ultrices sapien. Fusce sit amet turpis dolor. Integer et luctus nibh. Donec in ipsum ut nibh condimentum commodo. Ut accumsan eu lacus vitae egestas. Ut nec nisl quis risus accumsan euismod. Morbi commodo ultrices ultrices. Cras dignissim tempor massa ut interdum.<p></div>

</div>
</div>

<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Автор</label>
<div class="content">

<br><br>
<center>
<div class="t-1">
<div style="height: 18px; background-color: #d0b000; color:#161616; font-family: 'QuickSand'; text-transform: uppercase; padding: 5px; text-align: center;font-size: 13px;">Вид связи (можно в лс)</div>
</div>
<div class="t-2">
<div style="height: 18px; background-color: #d0b000; color:#161616; font-family: 'QuickSand'; text-transform: uppercase; padding: 5px; text-align: center;font-size: 13px;">Откуда узнали про ролевую?</div></div>
<div class="t-3 t-6" style="text-align: justify;

overflow: auto;

height: 16px;

background-color:
#d0b000;

color:
#161616;

font-family: 'QuickSand';

padding: 14px;

width: 87%;

font-size: 14px;

margin-left: -1px;

margin-top: 2%;

display: inline-block;

scrollbar-color:
#202020
rgba(20, 18, 15,0.01);

margin-bottom: -3%;">Согласны ли вы на то, что вас могут ранить/убить?
</div>
<div class="t-3" style="text-align: justify;

overflow: auto;

height: 116px;

background-color:
#d0b000;

color:
#161616;

font-family: 'QuickSand';

padding: 14px;

width: 87%;
font-size: 14px;
margin-left: -1px;

margin-top: 4%;

display: inline-block; scrollbar-color: #202020 rgba(20, 18, 15,0.01);">
Планы на игру и развитие персонажа. <br>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt est vel felis dictum, sed egestas velit luctus. Ut urna lectus, luctus sed massa ut, convallis posuere mauris. Aliquam blandit urna vitae dictum sollicitudin. Pellentesque vel est sem. Maecenas pharetra turpis elit, eu laoreet augue laoreet sit amet. Fusce quis accumsan elit. Quisque neque libero, sodales vitae convallis ut, pretium eget tortor. Aliquam ultrices erat eu vulputate tempor. Pellentesque convallis cursus urna, id dictum ante varius et. Suspendisse at sollicitudin quam, vitae pharetra lacus. Sed id lacus eu turpis luctus elementum in eget magna. Ut nibh augue, convallis sed fringilla sed, suscipit quis ante.
</div>
</div>

</center>

</div>
<div style="width: 614px; height: 20px; background-color: #202020;"></div>
</div>
</div>
</div>
</div>
</div>
<center>
</center>

</center>
</div>

<center>
<div class="main-box">
<p>
Не забудьте ознакомиться с историей города, занятыми именами и внешностями.
</p>
<p>
Скопируйте код, заполните, и опубликуйте в новой теме этого раздела. Шаблон един для всех, вне зависимости проходите вы по акции или создаёте собственного персонажа.
</p>
<p>
Пример названия темы: Ford, James (22 y.o.)
</p>
</div>
</center>

[/html]

Код:

[html]
<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<style type="text/css">
#xmenapp {

    width: 611px;
    height: 584px;
    position: relative;
    overflow: hidden;
    color: 

    #FFFFFF;
    padding: 2% 0 2%;

}

.xmenappback { width: 611px; height: 500px; }
.tabs {
position: relative;  
width: 611px;
height:  500px;
background-color: #e6e1e1;
}

.tab {
float: left;
}

.main-box {
    background-color: 
#202020;
text-align: left;
color:
#fff;
padding: 1% 3%;
width: 78%;
margin-top: 2% !important;
border-left: 12px solid
    #d0b000;
}
.tab label {
width: 142px; text-align: center;
height: 18px; display: block;
background-color: #d0b000;
text-transform: uppercase;
font-family: 'Quicksand';
padding: 5px;
margin-left: -1px;
position: relative;
left: 60px;
top: 5px;
bottom: 5px;
margin-right: 16px;
font-size: 15px;
color: #161616;
}
.t-1 {
	float: left;
	width: 45%;
	margin-right: 5px;
	margin-left: 4%;
}
.t-2 {
	float: left;
	width: 45%;
	margin-left: 5px;
}
.tab [type=radio] {
display: none;  
}

.content {
position: absolute;
top: 28px;
bottom: 0px;
left: 0px;
right: 0px;
color: #000000;
background-color: #e6e1e1;
padding: 20px;
height: 516px;
}

[type="radio"]:checked ~ label {

    background-color: 

    #dce300;
    z-index: 2;

}
.post-content td {
    border-width: none !important;
    border-style: none;
    padding: none !important;
    overflow: hidden;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
.table-main1 {
    float: left;
    width: 42%;
}
.table-main2 {
    width: 58%;
    float: left;
    display: ;
    margin-top: 17px;
    margin-left: -4%;
}
.main-all {
    background: 
    #fff url("https://funkyimg.com/i/2ZppL.jpg") top center no-repeat;
        background-size: auto;
    display: inline-block;
    width: 100%;
    background-size: cover;
    padding-bottom: 4%;
}
</style>
<center >
	<div class="main-all">
<div id="xmenapp"><div class=""><div class="sptfapp" style="height: 255px;" >
<!-- Сюда вставляем ссылку на гиф (611/255) -->
<img src="https://d.radikal.ru/d19/1912/45/c53cb4f2b947.gif" style="width: 611px;">
<div style="font-family: 'QuickSand'; position: relative; margin-top: -146px; font-size: 25px; text-align: center; text-transform: uppercase; color: #FFFFFF; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">Имя и фамилия (eng)</div>
<div style="font-family: 'QuickSand'; position: relative; margin-top: 14px; font-size: 14px; text-align: center; font-style: italic; color: #FFFFFF; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">Внешность (eng)</div></div>
<center>
<div style="width: 650px; height: 20px; background-color: #202020;"></div>
</div>

<center><div class="tabs">

<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Глава I</label>
<div class="content">
<center><div class="table-main">
	<!-- Здесь маленькая гиф (185/195) -->
<div class="table-main1"><div style="width:185px; height: 195px; border: solid #202020 2px; margin-top: 16px; margin-right: -20%; background-image: url('https://a.radikal.ru/a07/1912/a4/3d71811d2b7f.gif'); "></div></td>
</div>
<div class="table-main2">
<div style="width: 246px; height: 19px; background-color: #d0b000; color:#161616; font-family: 'QuickSand'; text-transform: uppercase; padding: 7px 8px 3px;
text-align: center;
font-size: 12px;">Имя и фамилия на русском</div><br>
<div style="width: 246px; height: 19px; background-color: #d0b000; color:#161616; font-family: 'QuickSand'; text-transform: uppercase; padding: 7px 8px 3px;
text-align: center;
font-size: 12px;">Возраст/дата рождения</div><br>
<div style="width: 246px; height: 19px; background-color: #d0b000; color:#161616; font-family: 'QuickSand'; text-transform: uppercase; padding: 7px 8px 3px;
text-align: center;
font-size: 12px;">Деятельность</div><br>
<div style="width: 246px; height: 19px; background-color: #d0b000; color:#161616; font-family: 'QuickSand'; text-transform: uppercase; padding: 7px 8px 3px;
text-align: center;
font-size: 12px;"">Родной город</div><br>
<div style="width: 246px; height: 19px; background-color: #d0b000; color:#161616; font-family: 'QuickSand'; text-transform: uppercase; padding: 7px 8px 3px;
text-align: center;
font-size: 12px;">Место обитания</div>
</div>
</div></center><br><br>


</div>
</div>

<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Глава II</label>
<div class="content">
<div style="font-family: 'QuickSand'; font-size: 20px; text-align: center; text-transform: uppercase; color: #300e08;">История</div><br>
<center>
<div style="width: 493px; height: 190px; font-family: helvetica; font-size: 14px; text-align: justify; overflow: auto; padding: 3px; scrollbar-color: #202020 rgba(20, 18, 15,0.01);">
Опишите историю вашего персонажа. Раскройте темные и светлые истории его жизни.<br>

Pellentesque a scelerisque est, sed commodo sem. Pellentesque eu posuere erat. Aliquam nec lectus ligula. Mauris non lorem ligula. Nulla vehicula at sem ac auctor. Vestibulum dictum, diam vitae tincidunt commodo, justo leo tincidunt ligula, et consequat diam dolor vel nunc. Nulla quis diam facilisis, venenatis dui at, viverra arcu. In adipiscing leo ut congue aliquam. Nunc congue ullamcorper augue, eget dictum lectus euismod eget. Sed volutpat sapien eget eleifend lobortis. Morbi egestas quam eu euismod scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.<p>

Phasellus dapibus varius nibh, sed auctor nisl luctus sed. Nullam ante lectus, tincidunt vestibulum elit eget, interdum rutrum magna. Mauris semper at eros et hendrerit. Phasellus magna lorem, lacinia vel nisi ac, adipiscing ultrices sapien. Fusce sit amet turpis dolor. Integer et luctus nibh. Donec in ipsum ut nibh condimentum commodo. Ut accumsan eu lacus vitae egestas. Ut nec nisl quis risus accumsan euismod. Morbi commodo ultrices ultrices. Cras dignissim tempor massa ut interdum.<p></div>

<br><br>


</div>
</div>

<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Автор</label>
<div class="content">

<br><br>
<center>
<div class="t-1">
	<div style="height: 18px; background-color: #d0b000; color:#161616; font-family: 'QuickSand'; text-transform: uppercase; padding: 5px; text-align: center;font-size: 13px;">Вид связи (можно в лс)</div>
</div>
<div class="t-2">
<div style="height: 18px; background-color: #d0b000; color:#161616; font-family: 'QuickSand'; text-transform: uppercase; padding: 5px; text-align: center;font-size: 13px;">Откуда узнали про ролевую?</div></div>
<div class="t-3 t-6" style="text-align: justify;

overflow: auto;

height: 16px;

background-color:
#d0b000;

color:
#161616;

font-family: 'QuickSand';

padding: 14px;

width: 87%;

font-size: 14px;

margin-left: -1px;

margin-top: 2%;

display: inline-block;

scrollbar-color:
#202020
rgba(20, 18, 15,0.01);

margin-bottom: -3%;">Согласны ли вы на то, что вас могут ранить/убить?
</div>
<div class="t-3" style="text-align: justify;

overflow: auto;

height: 116px;

background-color:
#d0b000;

color:
#161616;

font-family: 'QuickSand';

padding: 14px;

width: 87%;
font-size: 14px;
margin-left: -1px;

margin-top: 4%;

display: inline-block; scrollbar-color: #202020 rgba(20, 18, 15,0.01);">
Планы на игру и развитие персонажа. <br>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt est vel felis dictum, sed egestas velit luctus. Ut urna lectus, luctus sed massa ut, convallis posuere mauris. Aliquam blandit urna vitae dictum sollicitudin. Pellentesque vel est sem. Maecenas pharetra turpis elit, eu laoreet augue laoreet sit amet. Fusce quis accumsan elit. Quisque neque libero, sodales vitae convallis ut, pretium eget tortor. Aliquam ultrices erat eu vulputate tempor. Pellentesque convallis cursus urna, id dictum ante varius et. Suspendisse at sollicitudin quam, vitae pharetra lacus. Sed id lacus eu turpis luctus elementum in eget magna. Ut nibh augue, convallis sed fringilla sed, suscipit quis ante.
</div>
</div>

</center>

</div>
<div style="width: 614px; height: 20px; background-color: #202020;"></div>
</div>
</div>
</div>
</div>
</div>
<center>
</center>



</center>
</div>

[/html]

Shadows of Hemlock Hollow

Меню навигации

Пользовательские ссылки

Информация о пользователе

Шаблон анкеты

Сообщений 1 страница 1 из 1

Поделиться12019-12-13 12:07:54