[html]<style>
.telo { margin:0 auto; width:550px; position:relative; line-height:100%; }
.nachinka { background:#b8bcc0; position:relative; padding:20px; font-family:Open Sans; font-weight:500; font-size:11px; line-height:15px; color:#242627; text-align:justify;outline: 2px solid #fff; border: 10px solid #4e5863; padding: 10px;}
.nachinka b { color: #13191b; font-family:OpenGost Type A TT; font-weight:600;}
.shapka { background:url(http://funkyimg.com/i/2HP6x.png); height:100px; position:relative;}
.textshapki { position:absolute; left:0; top:50px; width:550px; font-family: OpenGost Type A TT; font-weight:600; font-size:15px; letter-spacing:5px; text-transform:uppercase; text-align:center; line-height:100%; color:#fff; text-shadow: 1px 1px 0px #000, 2px 2px 0px #7B7B7B;}
.polosa { width:200px; height:2px; background:#242627; position:absolute; top:65px; left:173px; line-height:100%;}
</style>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600|Poppins:200,300,400,500,600" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
<div class="telo">
<div class="shapka"></div>
<div class="polosa"></div>
<div class="textshapki">анкета</div>
<div class="nachinka">
<center><b>В НАЗВАНИИ АНКЕТЫ СЛЕДУЕТ УКАЗАТЬ: SURNAME NAME, AGE</b></center>
Напоминаем, чтобы отображалась анкета, воспользуйтесь [хтлм] кнопкой.
</div></div>
[/html]
<b>жирный текст</b>
<i>курсив</i>
<u>подчеркнутый текст</u>
<s>зачеркнутый текст</s>
<br> – перенос строки
Код:[html] <link href='http://fonts.googleapis.com/css?family=Playfair+Display|Lekton' rel='stylesheet' type='text/css'> <center> <div id="thtabcontainer"> <div class="thtabname">NAME SURNAME</div> <div class="thtabname2">имя на русс. с маленькой буквы</div> <div class="thtabtopper">ФАКУЛЬТЕТ, КУРС</div><br> <table width="460px" cellspacing="5px" cellpadding="0px" style="margin-bottom:-20px; margin-left: -12px;border: 5px solid #54485E; outline: 1px solid #a9b1c6; "><tr> <td class="thtabimage" width="245px"> <img src="http://funkyimg.com/i/2HHXf.gif"> </td><td class="thtabimage" width="245px"> <img src="http://funkyimg.com/i/2HHXe.gif"> </td></tr></table> <div class="tabs"> <div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1">➊</label> <div class="thcontent" style="height: 390px; overflow: auto;"> <table class="thapptable" width="350px" cellspacing="1px" cellpadding="0px"> <tr><td class="thapprow" colspan="2">УЧАСТНИК ГРУППЫ</td></tr> <tr> <td width="100px" class="thapprow">ВОЗРАСТ</TD> <td width="250px" class="thappcol">укажите свою дату рождения и возраст.</TD> </tr> <tr> <td width="100px" class="thapprow">ОРИЕНТАЦИЯ</TD> <td width="250px" class="thappcol">гетеро/гомо/би/др.</TD> </tr> <tr> <td width="100px" class="thapprow">ЛЮБОВЬ</TD> <td width="250px" class="thappcol">состоит ли ваш персонаж в отношениях?</TD> </tr> <tr> <td width="100px" class="thapprow">РОДСТВЕННИКИ</TD> <td width="250px" class="thappcol">имеются ли в наличии пару личностей</TD> </tr> <tr> <td width="100px" class="thapprow">ЧИСТОТА КРОВИ</TD> <td width="250px" class="thappcol">чистокровный/полукровка/рожден магом через поколение</TD> </tr> <tr> <td width="100px" class="thapprow">МАГИЯ</TD> <td width="250px" class="thappcol">выбрать из списка магических способностей</TD> </tr> <td width="100px" class="thapprow">ЖИВОТНОЕ</TD> <td width="250px" class="thappcol">кот,собака, сова, лягушка</TD> </tr></tr> </table> </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2">➋</label> <div class="thcontent"> <div class="thapp2"> This is bold. This is italics. This will be the freeform app. Write whatever the fuck you want. Go wild. Just make sure you convey your character's shit. Lorem ipsum dolor sit amet, vim id autem delicata rationibus, ius an tantas periculis deseruisse. Cu malis sapientem ius, mei ex prompta inciderint. Ad eum ferri veritus, illud epicuri convenire cu sit. Mel ei munere argumentum, id eos nullam persecuti moderatius, volumus quaerendum sit ad. Eum tale etiam recteque ut. Nusquam rationibus sententiae ad cum, ius soluta definiebas et, qui te zril prompta. Laoreet gubergren expetendis id sed, cu luptatum singulis dissentias usu. Ne pri omnesque torquatos, no aeque commune pri. Qui et malis populo tractatos, paulo dolore vidisse id cum. Ex vel tollit nullam integre, ex labitur vivendo mel, vel amet quando possim at. Populo ridens iuvaret te mei. Lorem ipsum dolor sit amet, vim id autem delicata rationibus, ius an tantas periculis deseruisse. Cu malis sapientem ius, mei ex prompta inciderint. Ad eum ferri veritus, illud epicuri convenire cu sit. Mel ei munere argumentum, id eos nullam persecuti moderatius, volumus quaerendum sit ad. Eum tale etiam recteque ut. Nusquam rationibus sententiae ad cum, ius soluta definiebas et, qui te zril prompta. Laoreet gubergren expetendis id sed, cu luptatum singulis dissentias usu. Ne pri omnesque torquatos, no aeque commune pri. Qui et malis populo tractatos, paulo dolore vidisse id cum. Ex vel tollit nullam integre, ex labitur vivendo mel, vel amet quando possim at. Populo ridens iuvaret te mei. This is bold. This is italics. This will be the freeform app. Write whatever the fuck you want. Go wild. Just make sure you convey your character's shit. Lorem ipsum dolor sit amet, vim id autem delicata rationibus, ius an tantas periculis deseruisse. Cu malis sapientem ius, mei ex prompta inciderint. Ad eum ferri veritus, illud epicuri convenire cu sit. Mel ei munere argumentum, id eos nullam persecuti moderatius, volumus quaerendum sit ad. Eum tale etiam recteque ut. Nusquam rationibus sententiae ad cum, ius soluta definiebas et, qui te zril prompta. Laoreet gubergren expetendis id sed, cu luptatum singulis dissentias usu. Ne pri omnesque torquatos, no aeque commune pri. Qui et malis populo tractatos, paulo dolore vidisse id cum. Ex vel tollit nullam integre, ex labitur vivendo mel, vel amet quando possim at. Populo ridens iuvaret te mei. Lorem ipsum dolor sit amet, vim id autem delicata rationibus, ius an tantas periculis deseruisse. Cu malis sapientem ius, mei ex prompta inciderint. Ad eum ferri veritus, illud epicuri convenire cu sit. Mel ei munere argumentum, id eos nullam persecuti moderatius, volumus quaerendum sit ad. Eum tale etiam recteque ut. Nusquam rationibus sententiae ad cum, ius soluta definiebas et, qui te zril prompta. Laoreet gubergren expetendis id sed, cu luptatum singulis dissentias usu. Ne pri omnesque torquatos, no aeque commune pri. Qui et malis populo tractatos, paulo dolore vidisse id cum. Ex vel tollit nullam integre, ex labitur vivendo mel, vel amet quando possim at. Populo ridens iuvaret te mei. </div> </div> </div> <div class="tab"> <input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3">➌ </label> <div class="thcontent"> <div class="thappcontent"> <div class="charbox-txt"> <div class="lazy-char"> <div class="lazy-charicon"><img src="http://placehold.it/100x100"></div> <div class="lazychar-stuff"> <b>NAME SURNAME</b> — Ne pri omnesque torquatos, no aeque commune pri. Qui et malis populo tractatos, paulo dolore vidisse id cum. Ex vel tollit nullam integre, ex labitur vivendo mel, vel amet quando possim at. Populo ridens iuvaret te mei. </div> </div> <div class="lazy-char"> <div class="lazy-charicon"><img src="http://placehold.it/100x100"></div> <div class="lazychar-stuff"> <b>NAME SURNAME</b> — Ne pri omnesque torquatos, no aeque commune pri. Qui et malis populo tractatos, paulo dolore vidisse id cum. Ex vel tollit nullam integre, ex labitur vivendo mel, vel amet quando possim at. Populo ridens iuvaret te mei. </div> </div> <div class="lazy-char"> <div class="lazy-charicon"><img src="http://placehold.it/100x100"></div> <div class="lazychar-stuff"> <b>NAME SURNAME</b> — Ne pri omnesque torquatos, no aeque commune pri. Qui et malis populo tractatos, paulo dolore vidisse id cum. Ex vel tollit nullam integre, ex labitur vivendo mel, vel amet quando possim at. Populo ridens iuvaret te mei. </div> </div> <div class="lazy-char"> <div class="lazy-charicon"><img src="http://placehold.it/100x100"></div> <div class="lazychar-stuff"> <b>NAME SURNAME</b> — Ne pri omnesque torquatos, no aeque commune pri. Qui et malis populo tractatos, paulo dolore vidisse id cum. Ex vel tollit nullam integre, ex labitur vivendo mel, vel amet quando possim at. Populo ridens iuvaret te mei. </div> </div> <div class="lazy-char"> <div class="lazy-charicon"><img src="http://placehold.it/100x100"></div> <div class="lazychar-stuff"> <b>NAME SURNAME </b> — Ne pri omnesque torquatos, no aeque commune pri. Qui et malis populo tractatos, paulo dolore vidisse id cum. Ex vel tollit nullam integre, ex labitur vivendo mel, vel amet quando possim at. Populo ridens iuvaret te mei. </div> </div> </div> </div></div></div> <div class="tab"> <input type="radio" id="tab-4" name="tab-group-1"> <label for="tab-4">➍</label> <div class="thcontent"> <div class="thappcontent"> <div class="charbox-txt"> <div class="lazy-char"> <div class="lazy-icon">Ⓐ</div> <div class="lazychar-stuff"> <b>EPISODE TITLE</b> — Ne pri omnesque torquatos, no aeque commune pri. Qui et malis populo tractatos, paulo dolore vidisse id cum. Ex vel tollit nullam integre, ex labitur vivendo mel, vel amet quando possim at. Populo ridens iuvaret te mei. </div> </div> <div class="lazy-char"> <div class="lazy-icon">Ⓢ</div> <div class="lazychar-stuff"> <b>EPISODE TITLE</b> — Ne pri omnesque torquatos, no aeque commune pri. Qui et malis populo tractatos, paulo dolore vidisse id cum. Ex vel tollit nullam integre, ex labitur vivendo mel, vel amet quando possim at. Populo ridens iuvaret te mei. </div> </div> <div class="lazy-char"> <div class="lazy-icon">Ⓕ</div> <div class="lazychar-stuff"> <b>EPISODE TITLE</b> — Ne pri omnesque torquatos, no aeque commune pri. Qui et malis populo tractatos, paulo dolore vidisse id cum. Ex vel tollit nullam integre, ex labitur vivendo mel, vel amet quando possim at. Populo ridens iuvaret te mei. </div> </div> <div class="lazy-char"> <div class="lazy-icon">Ⓐ</div> <div class="lazychar-stuff"> <b>EPISODE TITLE</b> — Ne pri omnesque torquatos, no aeque commune pri. Qui et malis populo tractatos, paulo dolore vidisse id cum. Ex vel tollit nullam integre, ex labitur vivendo mel, vel amet quando possim at. Populo ridens iuvaret te mei. </div> </div> <div class="lazy-char"> <div class="lazy-icon">Ⓢ</div> <div class="lazychar-stuff"> <b>EPISODE TITLE </b> — Ne pri omnesque torquatos, no aeque commune pri. Qui et malis populo tractatos, paulo dolore vidisse id cum. Ex vel tollit nullam integre, ex labitur vivendo mel, vel amet quando possim at. Populo ridens iuvaret te mei. </div> </div> <div class="lazy-char"> <div class="lazy-icon">Ⓕ</div> <div class="lazychar-stuff"> <b>EPISODE TITLE</b> — Ne pri omnesque torquatos, no aeque commune pri. Qui et malis populo tractatos, paulo dolore vidisse id cum. Ex vel tollit nullam integre, ex labitur vivendo mel, vel amet quando possim at. Populo ridens iuvaret te mei. </div> </div> </div> </div></div></div> </div> </div> </center>
Код:<link href='http://fonts.googleapis.com/css?family=Playfair+Display|Lekton' rel='stylesheet' type='text/css'> <center> <div id="thtabcontainer"> <div class="thtabname">NAME SURNAME</div> <div class="thtabname2">имя на русс. с маленькой буквы</div> <div class="thtabtopper">ФАКУЛЬТЕТ, КУРС</div><br> <table width="460px" cellspacing="5px" cellpadding="0px" style="margin-bottom:-20px; margin-left: -12px;border: 5px solid #54485E; outline: 1px solid #a9b1c6; "><tr> <td class="thtabimage" width="245px"> <img src="http://placehold.it/245x140"> </td><td class="thtabimage" width="245px"> <img src="http://placehold.it/245x140"> </td></tr></table> <div class="tabs"> <div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1">➊</label> <div class="thcontent" style="height: 390px; overflow: auto;"> <table class="thapptable" width="350px" cellspacing="1px" cellpadding="0px"> <tr><td class="thapprow" colspan="2">УЧАСТНИК ГРУППЫ/СОЛО/МОДЕЛЬ</td></tr> <tr> <td width="100px" class="thapprow">ВОЗРАСТ</TD> <td width="250px" class="thappcol">укажите свою дату рождения и возраст.</TD> </tr> <tr> <td width="100px" class="thapprow">ОРИЕНТАЦИЯ</TD> <td width="250px" class="thappcol">гетеро/гомо/би/др.</TD> </tr> <tr> <td width="100px" class="thapprow">ЛЮБОВЬ</TD> <td width="250px" class="thappcol">состоит ли ваш персонаж в отношениях?</TD> </tr> <tr> <td width="100px" class="thapprow">РОДСТВЕННИКИ</TD> <td width="250px" class="thappcol">имеются ли в наличии пару личностей</TD> </tr> <tr> <td width="100px" class="thapprow">ЧИСТОТА КРОВИ</TD> <td width="250px" class="thappcol">чистокровный/полукровка/рожден магом через поколение</TD> </tr> <tr> <td width="100px" class="thapprow">МАГИЯ</TD> <td width="250px" class="thappcol">выбрать из списка магических способностей</TD> </tr> <td width="100px" class="thapprow">ЖИВОТНОЕ</TD> <td width="250px" class="thappcol">кот,собака, сова, лягушка</TD> </tr></tr> </table> </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2">➋</label> <div class="thcontent"> <div class="thapp2"> общее описания персонажа в свободной форме </div> </div> </div> <div class="tab"> <input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3">➌ </label> <div class="thcontent"> <div class="thappcontent"> <div class="charbox-txt"> <div class="lazy-char"> <div class="lazy-charicon"><img src="http://placehold.it/100x100"></div> <div class="lazychar-stuff"> <b>NAME SURNAME</b> — коротко о ваших отношениях с этим персонажем. </div> </div> <div class="lazy-char"> <div class="lazy-charicon"><img src="http://placehold.it/100x100"></div> <div class="lazychar-stuff"> <b>NAME SURNAME</b> — коротко о ваших отношениях с этим персонажем. </div> </div> <div class="lazy-char"> <div class="lazy-charicon"><img src="http://placehold.it/100x100"></div> <div class="lazychar-stuff"> <b>NAME SURNAME</b> — коротко о ваших отношениях с этим персонажем. </div> </div> <div class="lazy-char"> <div class="lazy-charicon"><img src="http://placehold.it/100x100"></div> <div class="lazychar-stuff"> <b>NAME SURNAME</b> — коротко о ваших отношениях с этим персонажем. </div> </div> <div class="lazy-char"> <div class="lazy-charicon"><img src="http://placehold.it/100x100"></div> <div class="lazychar-stuff"> <b>NAME SURNAME </b> — коротко о ваших отношениях с этим персонажем. </div> </div> </div> </div></div></div> <div class="tab"> <input type="radio" id="tab-4" name="tab-group-1"> <label for="tab-4">➍</label> <div class="thcontent"> <div class="thappcontent"> <div class="charbox-txt"> <div class="lazy-char"> <div class="lazy-icon">Ⓐ</div> <div class="lazychar-stuff"> <b>EPISODE TITLE</b> — краткое описание вашего эпизода. </div> </div> <div class="lazy-char"> <div class="lazy-icon">Ⓢ</div> <div class="lazychar-stuff"> <b>EPISODE TITLE</b> — краткое описание вашего эпизода. </div> </div> <div class="lazy-char"> <div class="lazy-icon">Ⓕ</div> <div class="lazychar-stuff"> <b>EPISODE TITLE</b> — краткое описание вашего эпизода. </div> </div> <div class="lazy-char"> <div class="lazy-icon">Ⓐ</div> <div class="lazychar-stuff"> <b>EPISODE TITLE</b> — краткое описание вашего эпизода. </div> </div> <div class="lazy-char"> <div class="lazy-icon">Ⓢ</div> <div class="lazychar-stuff"> <b>EPISODE TITLE </b> — краткое описание вашего эпизода. </div> </div> <div class="lazy-char"> <div class="lazy-icon">Ⓕ</div> <div class="lazychar-stuff"> <b>EPISODE TITLE</b> — краткое описание вашего эпизода. </div> </div> </div> </div></div></div> </div> </div> </center>
Код:<link href='http://fonts.googleapis.com/css?family=Playfair+Display|Lekton' rel='stylesheet' type='text/css'> <center> <div id="thtabcontainer"> <div class="thtabname">NAME SURNAME</div> <div class="thtabname2">имя на русс. с маленькой буквы</div> <div class="thtabtopper">род деятельности в магическом мире</div><br> <table width="460px" cellspacing="5px" cellpadding="0px" style="margin-bottom:-20px; margin-left: -12px;border: 5px solid #54485E; outline: 1px solid #a9b1c6; "><tr> <td class="thtabimage" width="245px"> <img src="http://placehold.it/245x140"> </td><td class="thtabimage" width="245px"> <img src="http://placehold.it/245x140"> </td></tr></table> <div class="tabs"> <div class="tab"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1">➊</label> <div class="thcontent" style="height: 390px; overflow: auto;" > <table class="thapptable" width="350px" cellspacing="1px" cellpadding="0px"> <tr><td class="thapprow" colspan="2">УЧАСТНИК ГРУППЫ/СОЛО/МОДЕЛЬ</td></tr> <tr> <td width="100px" class="thapprow">ВОЗРАСТ</TD> <td width="250px" class="thappcol">укажите свою дату рождения и возраст.</TD> </tr> <tr> <td width="100px" class="thapprow">ОТНОШЕНИЯ</TD> <td width="250px" class="thappcol"> любит мужчин или женщин?состоит ли ваш персонаж в отношениях?</TD> </tr> <tr> <td width="100px" class="thapprow">ЧИСТОТА КРОВИ</TD> <td width="250px" class="thappcol">чистокровный/полукровка/рожден магом через поколение</TD> </tr> <tr> <td width="100px" class="thapprow">МАГИЯ</TD> <td width="250px" class="thappcol">выбрать из списка магических способностей</TD> </tr> <tr> <td width="100px" class="thapprow">СПЕЦИАЛИЗАЦИЯ</TD> <td width="250px" class="thappcol">какой предмет преподаете/чем промышляете в магическом мире</TD> </tr> <tr><tr> <tr> <td width="100px" class="thapprow">ОБРАЗОВАНИЕ</TD> <td width="250px" class="thappcol">выпускник какого факультета/самоучка </TD> </tr> <tr> <td width="100px" class="thapprow">РОДСТВЕННИКИ</TD> <td width="250px" class="thappcol">имеются ли в наличии пару личностей</TD> </tr></tr> </table> </div> </div> <div class="tab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2">➋</label> <div class="thcontent"> <div class="thapp2"> общее описания персонажа в свободной форме </div> </div> </div> <div class="tab"> <input type="radio" id="tab-3" name="tab-group-1"> <label for="tab-3">➌ </label> <div class="thcontent"> <div class="thappcontent"> <div class="charbox-txt"> <div class="lazy-char"> <div class="lazy-charicon"><img src="http://placehold.it/100x100"></div> <div class="lazychar-stuff"> <b>NAME SURNAME</b> — коротко о ваших отношениях с этим персонажем. </div> </div> <div class="lazy-char"> <div class="lazy-charicon"><img src="http://placehold.it/100x100"></div> <div class="lazychar-stuff"> <b>NAME SURNAME</b> — коротко о ваших отношениях с этим персонажем. </div> </div> <div class="lazy-char"> <div class="lazy-charicon"><img src="http://placehold.it/100x100"></div> <div class="lazychar-stuff"> <b>NAME SURNAME</b> — коротко о ваших отношениях с этим персонажем. </div> </div> <div class="lazy-char"> <div class="lazy-charicon"><img src="http://placehold.it/100x100"></div> <div class="lazychar-stuff"> <b>NAME SURNAME</b> — коротко о ваших отношениях с этим персонажем. </div> </div> <div class="lazy-char"> <div class="lazy-charicon"><img src="http://placehold.it/100x100"></div> <div class="lazychar-stuff"> <b>NAME SURNAME </b> — коротко о ваших отношениях с этим персонажем. </div> </div> </div> </div></div></div> <div class="tab"> <input type="radio" id="tab-4" name="tab-group-1"> <label for="tab-4">➍</label> <div class="thcontent"> <div class="thappcontent"> <div class="charbox-txt"> <div class="lazy-char"> <div class="lazy-icon">Ⓐ</div> <div class="lazychar-stuff"> <b>EPISODE TITLE</b> — краткое описание вашего эпизода. </div> </div> <div class="lazy-char"> <div class="lazy-icon">Ⓢ</div> <div class="lazychar-stuff"> <b>EPISODE TITLE</b> — краткое описание вашего эпизода. </div> </div> <div class="lazy-char"> <div class="lazy-icon">Ⓕ</div> <div class="lazychar-stuff"> <b>EPISODE TITLE</b> — краткое описание вашего эпизода. </div> </div> <div class="lazy-char"> <div class="lazy-icon">Ⓐ</div> <div class="lazychar-stuff"> <b>EPISODE TITLE</b> — краткое описание вашего эпизода. </div> </div> <div class="lazy-char"> <div class="lazy-icon">Ⓢ</div> <div class="lazychar-stuff"> <b>EPISODE TITLE </b> — краткое описание вашего эпизода. </div> </div> <div class="lazy-char"> <div class="lazy-icon">Ⓕ</div> <div class="lazychar-stuff"> <b>EPISODE TITLE</b> — краткое описание вашего эпизода. </div> </div> </div> </div></div></div> </div> </div> </center>