<!--HTML-->
<center>
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
<div style="width:500px; padding: 20px; background-image: url('https://imgur.com/oM1RqJl.png'); border: 3px solid #4e545e;">
<div style ="background-color:#c5bfa7; padding:2px;">

Вы можете выбрать для заполнения анкеты любой из предоставленных шаблонов: <b>bbcode</b> или <b>html/css</b>.<br><br>
Название темы оформляем следующим образом:<br>
<b>имя персонажа на английском, возраст цифрой</b> <br>
например, <b>lee taemin, 23</b> <br><br>
<b>p.s.</b> Если понравился html-шаблон, но возникли сложности с его заполнением, не стесняйтесь постучаться к админам)<br>

</div></div></center>

[table layout=fixed width=100%][tr][align=center][font=Playfair Display][b][i][size=20]surname name//фамилия имя[/size][/i][/b]
[i][size=13]- сокращения, прозвища - [/size][/i][/font][/align][/tr][/table]


[table layout=fixed width=100%][tr][td bgcolor=#CDC8B1 width==43% rowspan=5][align=center][img]http://s5.uploads.ru/Ux9NH.png[/img][/align]

[align=center][size=10][i]песня или цитата по желанию[/i][/size][/align][/td]

[td bgcolor=#CDC8B1][align=center][font=Playfair Display][size=13]дата рождения:[/font] ответ[/size][/align][/td][/tr]
[tr][td bgcolor=#CDC8B1][align=center][font=Playfair Display][size=13]родной город:[/font] ответ[/size][/align][/td][/tr]
[tr][td bgcolor=#CDC8B1][align=center][font=Playfair Display][size=13]ориентация:[/font] ответ[/size][/align][/td][/tr]
[tr][td bgcolor=#CDC8B1][align=center][font=Playfair Display][size=13]профессия:[/font] ответ[/size][/align][/td][/tr]
[tr][td bgcolor=#CDC8B1][align=center][font=Playfair Display][size=13]родственная душа:[/font] ответ[/size][/align][/td][/tr]
[/table]
[table layout=fixed width=100%][tr][td bgcolor=#BC8F8F][font=Playfair Display][align=center][size=18]история жизни[/size][/align][/font][/td][/tr][/table]
[table layout=fixed width=100%][tr][td bgcolor=#CDC8B1]Описание биографии и характера персонажа в свободном виде.[/td][/tr][/table]
[table layout=fixed width=100%][tr][td bgcolor=#BC8F8F][font=Playfair Display][align=center][size=18]связь[/size][/align][/font][/td][/tr][/table]
[table layout=fixed width=100%][tr][td bgcolor=#CDC8B1]Любой актуальный вид связи.[/td][/tr][/table]

[html]
<div id="outersiliconapp"><div class="characternamesilicon">

NAME

</div> <div class="siliconsidebar"><div class="siliconrightav"><img src="

http://via.placeholder.com/100x100

"></div><ul><li>nickname</li><li>

NICKNAME

</li><li>age</li><li>

AGE

</li><li>date of birth</li><li>

DATE OF BIRTH

</li><li>orientation</li><li>

ORIENTATION

</li><li>soulmate</li><li>

<a href="">SOULMATE NAME</a>

</li><li>occupation</li><li>

OCCUPATION

</li></ul></div> <div class="backgroundsiliconblue"></div> <div class="outersilicontabs"> <input type="radio" id="silicon1" name="silicon" checked="checked"><label for="silicon1">main</label><div class="siliconappimage"><img src="

http://via.placeholder.com/400x250

"></div> <input type="radio" id="silicon2" name="silicon"><label for="silicon2">life story</label><div class="siliconapptabs"><div class="siliconapp"><div class="insidesiliconapp"><div class="insideinsidesilicon">

ВАША БИОГРАФИЯ/ХАРАКТЕР/ ВСЁ, ЧТО ХОТЕЛОСЬ БЫ РАССКАЗАТЬ О ПЕРСОНАЖЕ

</div></div></div></div> <input type="radio" id="silicon3" name="silicon"><label for="silicon3">other</label><div class="siliconapptabs"><div class="siliconapp"><div class="insidesiliconapp"><div class="insideinsidesilicon">

СВЯЗЬ

</div></div></div></div> </div> <div class="siliconplayer">

СЛОВО, ЦИТАТА (НЕ ДЛИННАЯ)

</div><div class="maps-credit"><a href="http://shine.b1.jcink.com/index.php?showuser=13623"></a></div><div></div></div> 




<style type="text/css"> 
@font-face { src:url('http://essiskins.b1.jcink.com/uploads/essiskins/DTM_Sans.ttf'); font-family:down; } 
@font-face { src:url('http://symmetry.b1.jcink.com/uploads/symmetry/fontawesome_webfont.ttf'); font-family:awesome; } 

#outersiliconapp { border:1px solid; width:560px; height:337px; padding:3px; margin:auto;     margin-bottom: 20px;} 
.characternamesilicon { height:50px; text-align: left; font-family: down; padding-left:25px; border-top:5px solid; text-shadow: 1px 0 0 #fff; font-size: 13.5px; text-transform: Uppercase; line-height:40px; letter-spacing: 1.5px; } 
.characternamesilicon::before { content:""; font-size:14px; margin-right:5px; text-shadow:none; font-family:awesome; } 
#outersiliconapp [type="radio"] { display:none; } 
.outersilicontabs { width:530px; height:300px; text-align:right; margin-top:-17px; padding-right:10px; overflow:hidden; position:absolute; z-index:2; } 
#outersiliconapp [type="radio"]:checked+label::after { content:""; font-family:awesome; positioN:absolute; margin-left:5px; margin-right:5px; margin-top:-2px;} 
#outersiliconapp label { display:inline-block; height:10px; margin-right:13px; width:60px; text-align: right; font-family: courier; padding-left:25px; border-top:1px dashed;   font-size: 8px;    text-transform: Uppercase; letter-spacing:.3px; line-height:12px; cursor:pointer; } 
.siliconappimage { opacity:0; z-index:0; width:400px; height:250px; overflow:hidden; position:absolute; margin-top:5px; margin-left:0px; -webkit-transition:opacity .8s 0s, z-index 0s .8s; -o-transition:opacity .8s 0s, z-index 0s .8s; -moz-transition:opacity .8s 0s, z-index 0s .8s; -ms-transition:opacity .8s 0s, z-index 0s .8s; } 
.siliconappimage img { width:400px; height:250px; margin-top: -1px;} 
#outersiliconapp [type="radio"]:checked+label+.siliconappimage { opacity:1; z-index:2; -webkit-transition:opacity .8s 0s, z-index 0s 0s; -ms-transition:opacity .8s 0s, z-index 0s 0s; -o-transition:opacity .8s 0s, z-index 0s 0s; -moz-transition:opacity .8s 0s, z-index 0s 0s; margin-left:0px; } 
#outersiliconapp [type="radio"]:checked+label+.siliconapptabs { opacity:1; z-index:2; -webkit-transition:margin-left .8s 0s, z-index 0s 0s; -moz-transition:margin-left .8s 0s, z-index 0s 0s; -o-transition:margin-left .8s 0s, z-index 0s 0s; -ms-transition:margin-left .8s 0s, z-index 0s 0s; margin-left:0px; } 
.siliconapptabs { z-index:0; width:400px; margin-left:-455px; height:250px; overflow:hidden; position:absolute; margin-top:5px; -webkit-transition:margin-left .8s 0s, z-index 0s 1s; -moz-transition:margin-left .8s 0s, z-index 0s 1s; -ms-transition:margin-left .8s 0s, z-index 0s 1s; -o-transition:margin-left .8s 0s, z-index 0s 1s; } 
.siliconplayer { position:absolute; margin-top:250px; height:33px; width:550px; padding-right:10px; text-align:right; line-height:32px; font-family:down; font-size:9px; letter-spacing:2px; border-top:1px dashed; } 
.siliconplayer::before { content:" "; display:inline-block; border-top:1px dashed; margin-right:10px; margin-bottom:1.5px; height:0px; width:150px; } .siliconplayer::after { content:" "; display:inline-block; border-top:1px dashed; margin-left:10px; margin-bottom:1.5px; height:0px; width:50px; } 
.siliconsidebar { position:absolute; width:160px; height:250px; margin-left:400px;} 
.siliconrightav { float:right; overflow:hidden; border:3px solid; margin-top:10px; margin-right:45px; } 
.siliconrightav img { width:50px; height:50px; margin:5px; border:1px solid; } 
.siliconsidebar ul { list-style:none; margin:0px; padding:0px; border-top:1px solid; margin-tOP:88px; } 
.siliconsidebar li:nth-child(odd) { font-family:down; font-size:8px; padding-left:5px; padding-top:2px; text-transform:lowercase; letter-spacing:.5px; } 
.siliconsidebar li:nth-child(even) { font-family:courier; font-size:9px; text-aligN:right; padding-right:5px; text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid; padding-bottom:2px; } 
.insidesiliconapp {  border:1px solid #ccc; margin:20px; padding:10px; text-aligN:justify; font-family:courier; height:190px; font-size:12px; line-height:10px; } 
.backgroundsiliconblue { position:absolute; width:400px; height:250px;  z-index:0; } 
.insideinsidesilicon { padding-right:10px; height:190px; overflow:auto; } 
.maps-credit { width:10px; height:10px; font-size:8px!important; z-index:10; font-family:awesome; margin-top:288px; float:right; position:relative; } 
.maps-credit a {font-size:10px!important; } 
</style>[/html]

[html]
<center><div class="chronspace"><div id="chrontxt">Chronology</div><br><div id="chrnsmll">

цитата цитата цитата цитата цитата

</div><ul class="tabs"><li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">Past</a></li><li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">Present</a></li><li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_3">Future</a></li><li><a href="javascript:tabSwitch('tab_4', 'content_4');" id="tab_4">AU</a></li></ul></div><div class="chron1">
        
        <div id="content_1" class="content">твои эпизоды </div>
        <div id="content_2" class="content">твои эпизоды </div>
        <div id="content_3" class="content">твои эпизоды </div>
        <div id="content_4" class="content">твои эпизоды </div>

</div></center>
<style>
@font-face { src:url('http://essiskins.b1.jcink.com/uploads/essiskins/DTM_Sans.ttf'); font-family:down; } 
@font-face { src:url('http://symmetry.b1.jcink.com/uploads/symmetry/fontawesome_webfont.ttf'); font-family:awesome; }
ul.tabs li {list-style:none; display:inline;} 
ul.tabs li a {width: 58px; padding: 2px; margin: 1px; border: none; text-align: -webkit-center; font-family: down;} 
ul.tabs li a:hover {width: 58px; padding: 2px; margin: 1px; border: 2px dashed; text-align: -webkit-center; font-family: down;} 
ul.tabs li a.active {width: 58px; padding: 2px; margin: 1px; border: 2px dashed; text-align: -webkit-center; font-family: down;} 
.content {width: 500px; height: 100px; padding: 5px; border-bottom: 5px dotted; text-align: -webkit-left;} 
#content_2, #content_3, #content_4 { display:none; } 
#chrontxt {line-height: 55px; text-align: left; padding-left: 15px; font-size: 20px; font-family: down; letter-spacing: 2px; margin-top: -7px;} 
#chrnsmll {margin-top: -32px; margin-left: 15px; font-family: courier; font-size: 8px; text-transform: uppercase; letter-spacing: 1px; text-align: left;} 
.chronspace {width: 500px; padding: 5px; height: 50px; border-bottom: 5px dotted; border-top: 10px solid; } 
ul.tabs { margin-top: -19px; margin-left: 300px;}
</style> 

<script type="text/javascript">
function tabSwitch(new_tab, new_content) {document.getElementById('content_1').style.display = 'none'; document.getElementById('content_2').style.display = 'none'; document.getElementById('content_3').style.display = 'none'; document.getElementById('content_4').style.display = 'none'; document.getElementById(new_content).style.display = 'block'; document.getElementById('tab_1').className = ''; document.getElementById('tab_2').className = ''; document.getElementById('tab_3').className = ''; document.getElementById('tab_4').className = ''; document.getElementById(new_tab).className = 'active';          }
</script>
[/html]

[html]<div id="silicongenout"><div class="silicongentitle">

Имя

<div class="silicongensmalltitle">

Собутыльник/любовник/начальник ...

</div><div id="silicongenimspace"><img width="60px" height="60px" src="

http://via.placeholder.com/60x60

" id="silicongenim"></div></div><div class="silicongentext">

<span class="silicon-title">Слово</span> текст текст текст  

</div></div>

<style type="text/css">
@font-face {src:url('http://essiskins.b1.jcink.com/uploads/essiskins/DTM_Sans.ttf');font-family:down;}
#silicongenimspace {margin-top: -49px; margin-left: 220px; width: 60px; }
#silicongenout { border:1px solid; width:320px; margin:auto; padding:2px;}
.silicongentitle {height:61px; line-height:55px; text-align:left; padding-left:15px; font-size:20px; font-family:down; letter-spacing:2px; border-bottom:4px dotted; border-top:10px solid;}
.silicongensmalltitle {font-family:courier; font-size:8px; height:10px; margin-top:-16px; line-height:0px; letter-spacing:1px; text-transform:uppercase; text-align:left;}
.silicongentext {padding: 30px; font-family: courier; font-size: 9.5px; border-bottom: 4px dotted; overflow-y: auto; height: 50px;}
.silicon-title {font-family:down; font-size:20px; letter-spacing:2px; border-bottom:2px solid; margin:5px; height:15px; display:inline-block;}
.silicon-title::after { content:"."; letter-spacing:-5px; height:15px; display:inline-block;padding-right:1px;}
.maps-credit {width:10px; height:10px; font-size:8px!important; z-index:10; font-family:awesome; margin-top:8px; float:right; position:relative;}
.maps-credit a {font-size:10px!important;}
</style>
[/html]