Код:
<!--HTML-->
<style type="text/css">
div.bg{
background:
url("http://funkyimg.com/i/29yzy.png") 0 0 no-repeat,
url("http://funkyimg.com/i/29yzx.png") 0 100% no-repeat,
url("http://funkyimg.com/i/29yzw.png") 0 0 repeat-y;
background-size: 599px;
margin-left: 80px;
}
div.tname{
padding: 20px 0 0 0;
color: #f3f3f3;
font-size: 30px;
font-family: 'NautilusPompilius';
font-style: normal;
font-weight: normal;
position: relative;
z-index: 1;
text-shadow:
#91b0cd 1px 1px 0,
#91b0cd -0px -0px 0,
#91b0cd -0px 1px 0,
#91b0cd 1px -0px 0;
}
div.qt{
padding: 0 0 0 0;
color: #ffffff;
font-size: 12px;
letter-spacing: 2px;
bottom: 9px;
position: relative;
z-index: 2;
font-style: normal;
font-weight: 900;
font-family: 'Calibri';
}
.box {width: 80px; height: 80px; border-radius: 100%; opacity: 0; transition-duration: 2s; -moz-transition-duration: 2s; -webkit-transition-duration: 2s;}
.box-in {padding: 5px; height: 80x; text-align: center;letter-spacing: 1px; font-family: Franklin Gothic Medium; color: #121212;font-size:10px;}
.needbox1 {width: 80px; height: 80px; border-radius: 100%; background: #f2f2f2 url(http://placehold.it/80x80); align: right;}
.needbox1:hover .box {border-radius: 20%; width: 80px; height: 80px;background-color: #fff; opacity: 0.75;}
.needbox2 {width: 80px; height: 80px; border-radius: 100%; background: #f2f2f2 url(http://placehold.it/80x80); align: right;}
.needbox2:hover .box {border-radius: 20%; width: 80px; height: 80px;background-color: #fff; opacity: 0.75;}
.needbox3 {width: 80px; height: 80px; border-radius: 100%; background: #f2f2f2 url(http://placehold.it/80x80); align: right;}
.needbox3:hover .box {border-radius: 20%; width: 80px; height: 80px;background-color: #fff; opacity: 0.75;}
.needbox4 {width: 80px; height: 80px; border-radius: 100%; background: #f2f2f2 url(http://placehold.it/80x80); align: right;}
.needbox4:hover .box {border-radius: 20%; width: 80px; height: 80px;background-color: #fff; opacity: 0.75;}
.needbox5 {width: 80px; height: 80px; border-radius: 100%; background: #f2f2f2 url(http://placehold.it/80x80); align: right;}
.needbox5:hover .box {border-radius: 20%; width: 80px; height: 80px;background-color: #fff; opacity: 0.75;}
</style>
<center><div class='bg'><div class='tname'>Заберите меня в Сан-Франциско!</div>
<div class='qt'>Если план «А» не сработал, у тебя есть ещё 32 буквы, чтобы попробовать.</div>
<div style="padding: 10px 0 50px 0; width: 530px; text-align: justify; margin-left: -40px;">Ты стоишь посреди улицы и смотришь на счастливые лица. Ты совсем не знаешь кто ты, ты не помнишь свое прошлое, но ты нуждаешься в людях, которые помогут тебе его вспомнить. Ты хочешь творить историю, развивать персонажа, вести его к главной цели, но тебе нужно, чтобы кто-то был рядом на протяжении всего этого пути. Просто поведай немного о себе, и ты удивишься, как быстро найдешь своего попутчика. <table><tr>
<td><div class="needbox1">
<div class="box"><div class="box-in">
свободно
</div>
</td>
<td><div class="needbox2">
<div class="box"><div class="box-in">
свободно
</div>
</td>
<td><div class="needbox3">
<div class="box"><div class="box-in">
свободно
</div>
</td>
<td><div class="needbox4">
<div class="box"><div class="box-in">
свободно
</div>
</td>
<td><div class="needbox5">
<div class="box"><div class="box-in">
свободно
</div>
</td>
</tr></table></div></div></div>
</div>
</center>шаблон
Код:[table layout=fixed width=100%][tr][td bgcolor=#80c0a9][align=center][size=14][color=#ffffff]ЗАБЕРИТЕ МЕНЯ К СЕБЕ [b]ВЫБРАТЬ СВОЕ[/b][/color][/size][/align][/td][/tr] [tr][td bgcolor=#61a2dc][/td][/tr] [tr][td][align=center][img]http://s2.uploads.ru/ndRT5.gif[/img] [size=9]внешности[/size][/align][/td][/tr] [tr][td bgcolor=#61a2dc][/td][/tr] [tr][td bgcolor=#80c0a9][align=center][size=14][color=#ffffff][b]ИНФОРМАЦИЯ[/b][/color][/size][/align][/td][/tr] [tr][td][align=center][size=10]имя фамилия, 00 лет - профессия[/size][/align][align=justify]общая информация о вашем персонаже, его биография и характер, желаемые отношения[/align][/td][/tr] [tr][td bgcolor=#61a2dc][/td][/tr] [tr][td bgcolor=#80c0a9][align=center][size=14][color=#ffffff][b]ДОПОЛНИТЕЛЬНО[/b][/color][/size][/align][/td][/tr] [tr][td][align=justify]пожелания, связь с вами и другая информация[/align][spoiler="пример поста"][/spoiler][/td][/tr] [tr][td bgcolor=#61a2dc][/td][/tr] [/table]
