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

Не забываем убирать звездочки из шаблона чтобы код заработал. Звездочки имеются в трёх местах: [*code], <*--HTML--> и [*/code] что расположен почти в самом конце. Для вашего удобства места, где необходимо авторское заполнение, выделены большими отступами. Надеемся, никто не потеряется в этих кодах. По всем возникшим вопросам можете смело писать любому члену амс.

Код:

<!--HTML--><style type="text/css">
.dttcontainer { margin: 10px auto;  height: 355px; width: 480px; border: 20px solid #597199; overflow: hidden; }
.dttcontainer2 { margin: 10px auto; margin-top:-40px; height: 355px; width: 480px; border: 20px solid #db866f; overflow-x: auto;}
.dttcontainer3 { margin: 10px auto; margin-top:-40px; height: relative; width: 480px; border: 20px solid #db866f; overflow-x: auto;}
.dttname{  background-color: #030C22;  color: #A9B0B3;  text-align: center;  line-height: 100%;  padding: 10px 15px;  font-family: 'lobster', monospace;  font-size: 30px; vertical-align: middle;}
.dttname a{  font-size: 8px;  line-height: 100%;  vertical-align: middle;  color: #fff;  text-decoration: none;  letter-spacing: 2px;}
.dttdesc{  font-size: 8px;  line-height: 100%;  vertical-align: middle;  text-decoration: none;  letter-spacing: 2px;}
.dtttabs { margin: 0px auto;  position: relative;   width: 480px;  height:  355px;







background-image: url(http://placehold.it/480x280);







 background-position: 0px 60px;}
.dtttab { float: left; }
.dtttab label {  display: block;  width: 160px;  height: 20px;  background: #eee;  margin-left: 0px;  position: relative;  left: 0px;  top: 280px; font-family: 'inconsolata', monospace;  font-size: 12px;  line-height: 20px;  text-align: center;  color: #828282;  letter-spacing: 2px;  z-index: 9999;  -webkit-transition: all 0.7s ease;  -moz-transition: all 0.7s ease;  -ms-transition: all 0.7s ease;  -o-transition: all 0.7s ease;  transition: all 0.7s ease;}
.dtttab input[type=radio]:checked ~ label { color: #fff; z-index: 2;}
.dtttab input[type=radio] { display: none;}
.dttcontent { position: absolute; top: 355px; bottom: 20px; left: 0px; right: 0px; opacity: 1;  z-index: 5;  -webkit-transition: all 0.7s ease;  -moz-transition: all 0.7s ease;  -ms-transition: all 0.7s ease;  -o-transition: all 0.7s ease;  transition: all 0.7s ease;}
.dtttab input[type=radio]:checked ~ label ~ .dttcontent { z-index: 1;  opacity: 1;  top: 55px;}
.dttactive{   width: 140px;  background-color: rgba(3,12,34,0.9);  height: 280px;  padding: 10px;  color: #A9B0B3;  font-family: 'calibri', sans-serif;  font-size: 13px;  line-height: 100%; overflow-x: auto;}
.dtttitle{  font-family: 'inconsolata', monospace;  font-size: 15px; border-bottom: 1px solid;  line-height: 100%;  padding-bottom: 2px;  margin-bottom: 5px;}
.dttcontent a{  color: #fff;  font-family: 'inconsolata', monospace;  text-decoration: none;}
.dttcomp{   width: 140px;  background-color: rgba(32,41,63,0.9);  height: 280px;  padding: 10px;  color: #A9B0B3;  font-family: 'calibri', sans-serif;  font-size: 13px;  line-height: 100%;  position: relative;  left: 160px;  top: 0px; overflow-x: auto;}
.dttother{   width: 140px;  background-color: rgba(64,71,73,0.9);  height: 280px;  padding: 10px;  color: #A9B0B3;  font-family: 'calibri', sans-serif;  font-size: 13px;  line-height: 100%;  position: relative;  left: 320px;  top: 0px; overflow-x: auto;}
</style><link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<div class="dttcontainer">
<div class="dtttabs"><div class="dtttab"><input type="radio" id="dtttab-1" name="dtttab-group-1" checked>  <label for="dtttab-1" style="background-color:#030C22;top:0px; width:480px;height: 55px; overflow:hidden;"><div class="dttname">







Name Surname, Age








</div> </label><div class="dttcontent">  
</div></div><div class="dtttab"><input type="radio" id="dtttab-2" name="dtttab-group-1">  <label for="dtttab-2" style="background-color:#313e5c;"><b>ЛИЧНОЕ ДОСЬЕ</b></label>
<div class="dttcontent">
 <div class="dttactive">
<div class="dtttitle">ЛИЧНОЕ ДОСЬЕ</div>







<b>ИМЯ НА РУССКОМ:</b><br>
Ваше имя на русском<br>
<b>ВОЗРАСТ, ДР:</b><br>
XX/XX/XXXX - XX лет<br>
<b>РОДНОЙ ГОРОД:</b><br>
Город, Страна<br>
<b>ВЛАДЕНИЕ ЯЗЫКАМИ:</b><br>
Английский, другие языки<br>
<b>ОРИЕНТАЦИЯ:</b><br>
Гетеро/Гомо/Би/Варианты<br>
<b>ЗАНЯТОСТЬ:</b><br>
Профессия/Учёба<br>






 </div></div></div><div class="dtttab"><input type="radio" id="dtttab-3" name="dtttab-group-1"><label for="dtttab-3" style="background-color:#85483e;"><b>РОДСТВЕННИКИ</b></label><div class="dttcontent">  <div class="dttcomp">







<div class="dtttitle">РОДСТВЕННИКИ</div>
<b>ОТЕЦ:</b><br>
Имя отца, XX лет<br>
<b>МАТЬ:</b><br>
Имя матери, XX лет<br>
<b>БРАТЬЯ И СЁСТРЫ:</b><br>
Брат или сестра 1<br>
Брат или сестра 2<br>
Брат или сестра 3<br>
<b>ДРУГИЕ:</b><br>
Дяди или тетя<br>
Дедушка или бабушка<br>
Кто угодно важный для вашего персонажа<br>







 </div></div></div><div class="dtttab"><input type="radio" id="dtttab-4" name="dtttab-group-1"><label for="dtttab-4" style="background-color:#404749;"><b>ИМУЩЕСТВО</b></label><div class="dttcontent">  <div class="dttother">








<div class="dtttitle">ИМУЩЕСТВО</div>
Перечисляем имущество в пользовании, владении или распоряжении начиная от квартир (в собственности или взятых внаём) заканчивая автомобилями и банковскими счетами.<br>







</div></div></div></div>
</div><div class="dttcontainer2">
<div style="width:451px; padding:10px; font-family: times new roman; font-size: 14px; line-height: 100%; text-align: justify;  background-color: #e5e3eb; position:relative;">
<table cellspacing="0" cellpadding="0"><tr><td>





<img src="http://placehold.it/220x100" width= "220" height= "100"></a>





<td>
<div style="width: 200px; height: 15px; text-align: center; font-family: 'Open Sans Condensed', sans-serif; font-size: 11px; line-height: 170%;  color: #fff; padding: 5px; background-color: #313a51;">Связь с вами:</div>
<div style="width: 200px; height: 15px; text-align: center; font-family: 'Open Sans Condensed', sans-serif; font-size: 11px; line-height: 170%;  color: #fff; padding: 5px; background-color: #8590ab;">




СЮДА СВЯЗЬ БЕЗ КАПСА





</div><div style="width: 200px; height: 15px; text-align: center; font-family: 'Open Sans Condensed', sans-serif; font-size: 11px; line-height: 170%;  color: #fff; padding: 5px; background-color: #596685;">Внешность:</div>
<div style="width: 200px; height: 15px; text-align: center; font-family: 'Open Sans Condensed', sans-serif; font-size: 11px; line-height: 170%;  color: #fff; padding: 5px; background-color: #4f535c;">





СЮДА ВНЕШНОСТЬ БЕЗ КАПСА






</div>
</td></tr></table>
<div style="width: 451px; height: relative; text-align: center; font-family: 'lobster', sans-serif; font-size: 20px; color: #a9b0b3; padding: 0px; background-color: #4d5a77;">История жизни</div>




Биография сюда




<div style="width: 451px; height: relative; text-align: center; font-family: 'lobster', sans-serif; font-size: 20px; color: #a9b0b3; padding: 0px; background-color: #4d5a77;">Тайны личности</div>





Характер сюда





</div>



</div>

Биография и характер раздельно

Код тут

Код:

[*code]<!*--HTML--><style type="text/css">
.dttcontainer { margin: 10px auto;  height: 355px; width: 480px; border: 20px solid #597199; overflow: hidden; }
.dttcontainer2 { margin: 10px auto; margin-top:-40px; height: 355px; width: 480px; border: 20px solid #db866f; overflow-x: auto;}
.dttcontainer3 { margin: 10px auto; margin-top:-40px; height: relative; width: 480px; border: 20px solid #db866f; overflow-x: auto;}
.dttname{  background-color: #030C22;  color: #A9B0B3;  text-align: center;  line-height: 100%;  padding: 10px 15px;  font-family: 'lobster', monospace;  font-size: 30px; vertical-align: middle;}
.dttname a{  font-size: 8px;  line-height: 100%;  vertical-align: middle;  color: #fff;  text-decoration: none;  letter-spacing: 2px;}
.dttdesc{  font-size: 8px;  line-height: 100%;  vertical-align: middle;  text-decoration: none;  letter-spacing: 2px;}
.dtttabs { margin: 0px auto;  position: relative;   width: 480px;  height:  355px;







background-image: url(ССЫЛКА НА ВАШЕ ИЗОБРАЖЕНИЕ 480х280);







 background-position: 0px 60px;}
.dtttab { float: left; }
.dtttab label {  display: block;  width: 160px;  height: 20px;  background: #eee;  margin-left: 0px;  position: relative;  left: 0px;  top: 280px; font-family: 'inconsolata', monospace;  font-size: 12px;  line-height: 20px;  text-align: center;  color: #828282;  letter-spacing: 2px;  z-index: 9999;  -webkit-transition: all 0.7s ease;  -moz-transition: all 0.7s ease;  -ms-transition: all 0.7s ease;  -o-transition: all 0.7s ease;  transition: all 0.7s ease;}
.dtttab input[type=radio]:checked ~ label { color: #fff; z-index: 2;}
.dtttab input[type=radio] { display: none;}
.dttcontent { position: absolute; top: 355px; bottom: 20px; left: 0px; right: 0px; opacity: 1;  z-index: 5;  -webkit-transition: all 0.7s ease;  -moz-transition: all 0.7s ease;  -ms-transition: all 0.7s ease;  -o-transition: all 0.7s ease;  transition: all 0.7s ease;}
.dtttab input[type=radio]:checked ~ label ~ .dttcontent { z-index: 1;  opacity: 1;  top: 55px;}
.dttactive{   width: 140px;  background-color: rgba(3,12,34,0.9);  height: 280px;  padding: 10px;  color: #A9B0B3;  font-family: 'calibri', sans-serif;  font-size: 13px;  line-height: 100%; overflow-x: auto;}
.dtttitle{  font-family: 'inconsolata', monospace;  font-size: 15px; border-bottom: 1px solid;  line-height: 100%;  padding-bottom: 2px;  margin-bottom: 5px;}
.dttcontent a{  color: #fff;  font-family: 'inconsolata', monospace;  text-decoration: none;}
.dttcomp{   width: 140px;  background-color: rgba(32,41,63,0.9);  height: 280px;  padding: 10px;  color: #A9B0B3;  font-family: 'calibri', sans-serif;  font-size: 13px;  line-height: 100%;  position: relative;  left: 160px;  top: 0px; overflow-x: auto;}
.dttother{   width: 140px;  background-color: rgba(64,71,73,0.9);  height: 280px;  padding: 10px;  color: #A9B0B3;  font-family: 'calibri', sans-serif;  font-size: 13px;  line-height: 100%;  position: relative;  left: 320px;  top: 0px; overflow-x: auto;}
</style><link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<div class="dttcontainer">
<div class="dtttabs"><div class="dtttab"><input type="radio" id="dtttab-1" name="dtttab-group-1" checked>  <label for="dtttab-1" style="background-color:#030C22;top:0px; width:480px;height: 55px; overflow:hidden;"><div class="dttname">







Name Surname, Age








</div> </label><div class="dttcontent">  
</div></div><div class="dtttab"><input type="radio" id="dtttab-2" name="dtttab-group-1">  <label for="dtttab-2" style="background-color:#313e5c;"><b>ЛИЧНОЕ ДОСЬЕ</b></label>
<div class="dttcontent">
 <div class="dttactive">
<div class="dtttitle">ЛИЧНОЕ ДОСЬЕ</div>







<b>ИМЯ НА РУССКОМ:</b><br>
Ваше имя на русском<br>
<b>ВОЗРАСТ, ДР:</b><br>
XX/XX/XXXX - XX лет<br>
<b>РОДНОЙ ГОРОД:</b><br>
Город, Страна<br>
<b>ВЛАДЕНИЕ ЯЗЫКАМИ:</b><br>
Английский, другие языки<br>
<b>ОРИЕНТАЦИЯ:</b><br>
Гетеро/Гомо/Би/Варианты<br>
<b>ЗАНЯТОСТЬ:</b><br>
Профессия/Учёба<br>






 </div></div></div><div class="dtttab"><input type="radio" id="dtttab-3" name="dtttab-group-1"><label for="dtttab-3" style="background-color:#85483e;"><b>РОДСТВЕННИКИ</b></label><div class="dttcontent">  <div class="dttcomp"><div class="dtttitle">РОДСТВЕННИКИ</div>







<b>ОТЕЦ:</b><br>
Имя отца, XX лет<br>
<b>МАТЬ:</b><br>
Имя матери, XX лет<br>
<b>БРАТЬЯ И СЁСТРЫ:</b><br>
Брат или сестра 1<br>
Брат или сестра 2<br>
Брат или сестра 3<br>
<b>ДРУГИЕ:</b><br>
Дяди или тетя<br>
Дедушка или бабушка<br>
Кто угодно важный для вашего персонажа<br>







 </div></div></div><div class="dtttab"><input type="radio" id="dtttab-4" name="dtttab-group-1"><label for="dtttab-4" style="background-color:#404749;"><b>ИМУЩЕСТВО</b></label><div class="dttcontent">  <div class="dttother"><div class="dtttitle">ИМУЩЕСТВО</div>







Перечисляем имущество в пользовании, владении или распоряжении начиная от квартир (в собственности или взятых внаём) заканчивая автомобилями и банковскими счетами.<br>







</div></div></div></div>
</div><div class="dttcontainer2">
<div style="width:451px; padding:10px; font-family: times new roman; font-size: 14px; line-height: 100%; text-align: justify;  background-color: #e5e3eb; position:relative;">
<table cellspacing="0" cellpadding="0"><tr><td>





<img src="ССЫЛКА НА ВАШЕ ИЗОБРАЖЕНИЕ 220х100" width= "220" height= "100"></a>





<td>
<div style="width: 200px; height: 15px; text-align: center; font-family: 'Open Sans Condensed', sans-serif; font-size: 11px; line-height: 170%;  color: #fff; padding: 5px; background-color: #313a51;">Связь с вами:</div>
<div style="width: 200px; height: 15px; text-align: center; font-family: 'Open Sans Condensed', sans-serif; font-size: 11px; line-height: 170%;  color: #fff; padding: 5px; background-color: #8590ab;">




СЮДА СВЯЗЬ БЕЗ КАПСА





</div><div style="width: 200px; height: 15px; text-align: center; font-family: 'Open Sans Condensed', sans-serif; font-size: 11px; line-height: 170%;  color: #fff; padding: 5px; background-color: #596685;">Внешность:</div>
<div style="width: 200px; height: 15px; text-align: center; font-family: 'Open Sans Condensed', sans-serif; font-size: 11px; line-height: 170%;  color: #fff; padding: 5px; background-color: #4f535c;">





СЮДА ВНЕШНОСТЬ БЕЗ КАПСА






</div>
</td></tr></table>
<div style="width: 451px; height: relative; text-align: center; font-family: 'lobster', sans-serif; font-size: 20px; color: #a9b0b3; padding: 0px; background-color: #4d5a77;">История жизни</div>




Биография сюда




<div style="width: 451px; height: relative; text-align: center; font-family: 'lobster', sans-serif; font-size: 20px; color: #a9b0b3; padding: 0px; background-color: #4d5a77;">Тайны личности</div>





Характер сюда





</div>



</div>[*/code]
[spoiler="Пробный пост"]Можно с другой ролевой[/spoiler]

Биография и характер объединены

Код тут

Код:

[*code]<!*--HTML--><style type="text/css">
.dttcontainer { margin: 10px auto;  height: 355px; width: 480px; border: 20px solid #597199; overflow: hidden; }
.dttcontainer2 { margin: 10px auto; margin-top:-40px; height: 355px; width: 480px; border: 20px solid #db866f; overflow-x: auto;}
.dttcontainer3 { margin: 10px auto; margin-top:-40px; height: relative; width: 480px; border: 20px solid #db866f; overflow-x: auto;}
.dttname{  background-color: #030C22;  color: #A9B0B3;  text-align: center;  line-height: 100%;  padding: 10px 15px;  font-family: 'lobster', monospace;  font-size: 30px; vertical-align: middle;}
.dttname a{  font-size: 8px;  line-height: 100%;  vertical-align: middle;  color: #fff;  text-decoration: none;  letter-spacing: 2px;}
.dttdesc{  font-size: 8px;  line-height: 100%;  vertical-align: middle;  text-decoration: none;  letter-spacing: 2px;}
.dtttabs { margin: 0px auto;  position: relative;   width: 480px;  height:  355px;







background-image: url(ССЫЛКА НА ВАШЕ ИЗОБРАЖЕНИЕ 480х280);







 background-position: 0px 60px;}
.dtttab { float: left; }
.dtttab label {  display: block;  width: 160px;  height: 20px;  background: #eee;  margin-left: 0px;  position: relative;  left: 0px;  top: 280px; font-family: 'inconsolata', monospace;  font-size: 12px;  line-height: 20px;  text-align: center;  color: #828282;  letter-spacing: 2px;  z-index: 9999;  -webkit-transition: all 0.7s ease;  -moz-transition: all 0.7s ease;  -ms-transition: all 0.7s ease;  -o-transition: all 0.7s ease;  transition: all 0.7s ease;}
.dtttab input[type=radio]:checked ~ label { color: #fff; z-index: 2;}
.dtttab input[type=radio] { display: none;}
.dttcontent { position: absolute; top: 355px; bottom: 20px; left: 0px; right: 0px; opacity: 1;  z-index: 5;  -webkit-transition: all 0.7s ease;  -moz-transition: all 0.7s ease;  -ms-transition: all 0.7s ease;  -o-transition: all 0.7s ease;  transition: all 0.7s ease;}
.dtttab input[type=radio]:checked ~ label ~ .dttcontent { z-index: 1;  opacity: 1;  top: 55px;}
.dttactive{   width: 140px;  background-color: rgba(3,12,34,0.9);  height: 280px;  padding: 10px;  color: #A9B0B3;  font-family: 'calibri', sans-serif;  font-size: 13px;  line-height: 100%; overflow-x: auto;}
.dtttitle{  font-family: 'inconsolata', monospace;  font-size: 15px; border-bottom: 1px solid;  line-height: 100%;  padding-bottom: 2px;  margin-bottom: 5px;}
.dttcontent a{  color: #fff;  font-family: 'inconsolata', monospace;  text-decoration: none;}
.dttcomp{   width: 140px;  background-color: rgba(32,41,63,0.9);  height: 280px;  padding: 10px;  color: #A9B0B3;  font-family: 'calibri', sans-serif;  font-size: 13px;  line-height: 100%;  position: relative;  left: 160px;  top: 0px; overflow-x: auto;}
.dttother{   width: 140px;  background-color: rgba(64,71,73,0.9);  height: 280px;  padding: 10px;  color: #A9B0B3;  font-family: 'calibri', sans-serif;  font-size: 13px;  line-height: 100%;  position: relative;  left: 320px;  top: 0px; overflow-x: auto;}
</style><link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<div class="dttcontainer">
<div class="dtttabs"><div class="dtttab"><input type="radio" id="dtttab-1" name="dtttab-group-1" checked>  <label for="dtttab-1" style="background-color:#030C22;top:0px; width:480px;height: 55px; overflow:hidden;"><div class="dttname">







Name Surname, Age








</div> </label><div class="dttcontent">  
</div></div><div class="dtttab"><input type="radio" id="dtttab-2" name="dtttab-group-1">  <label for="dtttab-2" style="background-color:#313e5c;"><b>ЛИЧНОЕ ДОСЬЕ</b></label>
<div class="dttcontent">
 <div class="dttactive">
<div class="dtttitle">ЛИЧНОЕ ДОСЬЕ</div>







<b>ИМЯ НА РУССКОМ:</b><br>
Ваше имя на русском<br>
<b>ВОЗРАСТ, ДР:</b><br>
XX/XX/XXXX - XX лет<br>
<b>РОДНОЙ ГОРОД:</b><br>
Город, Страна<br>
<b>ВЛАДЕНИЕ ЯЗЫКАМИ:</b><br>
Английский, другие языки<br>
<b>ОРИЕНТАЦИЯ:</b><br>
Гетеро/Гомо/Би/Варианты<br>
<b>ЗАНЯТОСТЬ:</b><br>
Профессия/Учёба<br>






 </div></div></div><div class="dtttab"><input type="radio" id="dtttab-3" name="dtttab-group-1"><label for="dtttab-3" style="background-color:#85483e;"><b>РОДСТВЕННИКИ</b></label><div class="dttcontent">  <div class="dttcomp"><div class="dtttitle">РОДСТВЕННИКИ</div>







<b>ОТЕЦ:</b><br>
Имя отца, XX лет<br>
<b>МАТЬ:</b><br>
Имя матери, XX лет<br>
<b>БРАТЬЯ И СЁСТРЫ:</b><br>
Брат или сестра 1<br>
Брат или сестра 2<br>
Брат или сестра 3<br>
<b>ДРУГИЕ:</b><br>
Дяди или тетя<br>
Дедушка или бабушка<br>
Кто угодно важный для вашего персонажа<br>







 </div></div></div><div class="dtttab"><input type="radio" id="dtttab-4" name="dtttab-group-1"><label for="dtttab-4" style="background-color:#404749;"><b>ИМУЩЕСТВО</b></label><div class="dttcontent">  <div class="dttother"><div class="dtttitle">ИМУЩЕСТВО</div>







Перечисляем имущество в пользовании, владении или распоряжении начиная от квартир (в собственности или взятых внаём) заканчивая автомобилями и банковскими счетами.<br>







</div></div></div></div>
</div><div class="dttcontainer2">
<div style="width:451px; padding:10px; font-family: times new roman; font-size: 14px; line-height: 100%; text-align: justify;  background-color: #e5e3eb; position:relative;">
<table cellspacing="0" cellpadding="0"><tr><td>





<img src="ССЫЛКА НА ВАШЕ ИЗОБРАЖЕНИЕ 220х100" width= "220" height= "100"></a>





<td>
<div style="width: 200px; height: 15px; text-align: center; font-family: 'Open Sans Condensed', sans-serif; font-size: 11px; line-height: 170%;  color: #fff; padding: 5px; background-color: #313a51;">Связь с вами:</div>
<div style="width: 200px; height: 15px; text-align: center; font-family: 'Open Sans Condensed', sans-serif; font-size: 11px; line-height: 170%;  color: #fff; padding: 5px; background-color: #8590ab;">




СЮДА СВЯЗЬ БЕЗ КАПСА





</div><div style="width: 200px; height: 15px; text-align: center; font-family: 'Open Sans Condensed', sans-serif; font-size: 11px; line-height: 170%;  color: #fff; padding: 5px; background-color: #596685;">Внешность:</div>
<div style="width: 200px; height: 15px; text-align: center; font-family: 'Open Sans Condensed', sans-serif; font-size: 11px; line-height: 170%;  color: #fff; padding: 5px; background-color: #4f535c;">





СЮДА ВНЕШНОСТЬ БЕЗ КАПСА






</div>
</td></tr></table>








Описание вашего персонажа










</div>



</div>[*/code]
[spoiler="Пробный пост"]Можно с другой ролевой[/spoiler]

WHOA AUSTIN, TX

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

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

Объявление

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

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

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

Поделиться12015-07-19 15:30:05