Код:
<!--HTML--><style type="text/css">#steck {width:670px; padding: 10px; box-sizing:border-box; background-color:#fafafa; border:#ccc solid 1px; margin: 0 auto; font-size:12px; color:rgba(30, 32, 35, .8); font-family: 'Roboto';}/*<br />
*/ .steck-head {  height: 100px; padding: 10px; position: relative; background-color: #b7d8f9; border: #ccc solid 1px; border-bottom: none;}/*<br />
*/ .steck-bild { width: 150px; height: 150px; padding: 5px; border: 3px solid #fff; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; position: absolute; top: 30px; left: 450px; }/*<br />
*/ .steck-bild img { height: 150px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; }/*<br />
*/ .steck-name { font-family: Bebas neue; font-size: 57px; font-style: bold; text-align: center; text-shadow: 1px 1px 0px #37a6d5; text-transform: uppercase; position: absolute; left: 30px; top: 25px; color:#fff;}/*<br />
*/ .steck-sub {  font-family: cuprum; font-size: 12px; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 0px #37a6d5; color: #ffffff; position: absolute; left: 70px; top: 90px; }/*<br />
*/ .steck-info { width:350px; font-family: cuprum; font-size: 10px; text-align: center; text-shadow: 1px 1px 0px #ffffff; color: #006f9e; position: absolute; left: 20px; top: 140px; letter-spacing:3px;}/*<br />
*/ .steck-task {background-color:#fff; text-align: justify; border:#ccc solid 1px; box-sizing: border-box; padding:30px; font-size:12px; color:rgba(30, 32, 35, .8); font-family: 'Roboto';} /*<br />
*/ .steck-task span {display:block; background-color:#b7d8f9; font-family: 'Montserrat'; text-align:center; font-size:10px; color:#fff; padding:3px; text-transform:uppercase; letter-spacing:1px; }/* <br />
*/ .steck-td {height:100px; overflow:auto; box-sizing: content-box; padding: 10px; font-size:11px; color:rgba(30, 32, 35, .8); font-family: 'Roboto'; text-align:justify;}/*<br />
*/ .steck-eig {background-color:rgba(196, 215, 137, 1); color:#fff; padding:10px; font-size: 10px; font-family: 'Roboto'; text-align:justify;}/*<br />
*/ .steck-eig b {font-size:14px; color:#707f44;}/*<br />
*/ .steck-short {font-size:10px; color:rgba(30, 32, 35, .8); font-family: 'Roboto';}/*<br />
/* конец стиля начало картинок соседства*/





/* ДОСТУПНОЕ СОСЕДСТВО */

#suchender { 
width: 215px; 
height: 260px;   
background: url('http://funkyimg.com/i/2f6U9.png'); /* Kleines Bild */
background-repeat: no-repeat; 
position: relative; 
overflow: hidden;
margin: 0px auto;
border-top: solid 3px #aacefb;
border-bottom: solid 3px #aacefb;
}

#suchender b {
color: #ffffff;
font-weight: 900;
}

#suchender i {
color: #ffffff;
}

#suchender u {
color: #ffffff;
}

/* Пункты в соседстве, где есть места*/

#suchender .stext1 {
color: #fff;
font: normal 10px/110% 'Cuprum', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
float: left;
margin: 20px 20px 20px 20px;
}

#suchender .stext2 {
color: #fff;
font: normal 15px/110% 'Cuprum', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-shadow: 1px 1px 0px #186ea4;
float: left; /* rechts */
margin: 20px 20px 20px 20px;
}

/* Stichpunkte Hover Bild klein */

#suchender .stichpunkt1 { 
background:url('http://funkyimg.com/i/2f6YD.png'); 
width: 250px; 
height: 52px; 
position: absolute; 
top: 0px; 
left: -280px; 
opacity: 0.9; 
-webkit-transition: 0.8s; transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s;
}

#suchender .stichpunkt2 {  
background:url('http://funkyimg.com/i/2f6YD.png'); 
width: 250px; 
height: 52px; 
position: absolute; 
top: 52px; 
left: 280px; 
opacity: 0.9; 
-webkit-transition: 0.8s; transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s;
}

#suchender .stichpunkt3 { 
background:url('http://funkyimg.com/i/2f6YD.png');
width: 250px; 
height: 52px; 
position: absolute; 
top: 104px; 
left: -280px; 
opacity: 0.9; 
-webkit-transition: 0.8s; transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s;
}

#suchender .stichpunkt4 { 
background:url('http://funkyimg.com/i/2f6YD.png'); 
width: 250px; 
height: 52px; 
position: absolute; 
top: 156px; 
left: 280px; 
opacity: 0.9; 
-webkit-transition: 0.8s; transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s;
}
#suchender .stichpunkt5 { 
background:url('http://funkyimg.com/i/2f6YD.png');
width: 250px; 
height: 52px; 
position: absolute; 
top: 208px; 
left: -280px; 
opacity: 0.9; 
-webkit-transition: 0.8s; transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s;
}


#suchender:hover .stichpunkt1, #suchender:hover .stichpunkt2,#suchender:hover .stichpunkt3,#suchender:hover .stichpunkt4,#suchender:hover .stichpunkt5 {
position: absolute; 
left: 0px; 
}

/* Stichpunkte rechts vom Bild */

.punkt {
width: 120px;
background:url('http://funkyimg.com/i/2eZD6.png');
color: #fff;
font: normal 8px/110% 'Source Sans Pro', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
margin: 1px; 
padding: 5px 2px;
display: inline-block;
opacity: 0.9;
}





/* ЗАПОЛНЕННОЕ СОСЕДСТВО */

#suchender2 { 
width: 215px; 
height: 260px;   
background: url('http://funkyimg.com/i/2f6U8.png'); /* Kleines Bild */
background-repeat: no-repeat; 
position: relative; 
overflow: hidden;
margin: 0px auto;
border-top: solid 3px #ebe7a0;
border-bottom: solid 3px #ebe7a0;
}

#suchender b {
color: #ffffff;
font-weight: 900;
}

#suchender i {
color: #ffffff;
}

#suchender u {
color: #ffffff;
}

/* Пункты в заполненном соседстве*/

#suchender2 .stext1 {
color: #fff;
font: normal 10px/110% 'Cuprum', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
float: left;
margin: 20px 20px 20px 20px;
}

#suchender2 .stext2 {
color: #fff;
font: normal 15px/110% 'Cuprum', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-shadow: 1px 1px 0px #186ea4;
float: left; /* rechts */
margin: 20px 20px 20px 20px;
}

/* Stichpunkte Hover Bild klein */

#suchender2 .stichpunkt1 { 
background:url('http://funkyimg.com/i/2f76f.png'); 
width: 250px; 
height: 52px; 
position: absolute; 
top: 0px; 
left: -280px; 
opacity: 0.9; 
-webkit-transition: 0.8s; transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s;
}

#suchender2 .stichpunkt2 {  
background:url('http://funkyimg.com/i/2f76f.png'); 
width: 250px; 
height: 52px; 
position: absolute; 
top: 52px; 
left: 280px; 
opacity: 0.9; 
-webkit-transition: 0.8s; transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s;
}

#suchender2 .stichpunkt3 { 
background:url('http://funkyimg.com/i/2f76f.png');
width: 250px; 
height: 52px; 
position: absolute; 
top: 104px; 
left: -280px; 
opacity: 0.9; 
-webkit-transition: 0.8s; transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s;
}

#suchender2 .stichpunkt4 { 
background:url('http://funkyimg.com/i/2f76f.png'); 
width: 250px; 
height: 52px; 
position: absolute; 
top: 156px; 
left: 280px; 
opacity: 0.9; 
-webkit-transition: 0.8s; transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s;
}
#suchender2 .stichpunkt5 { 
background:url('http://funkyimg.com/i/2f76f.png');
width: 250px; 
height: 52px; 
position: absolute; 
top: 208px; 
left: -280px; 
opacity: 0.9; 
-webkit-transition: 0.8s; transition: 0.8s; -moz-transition: 0.8s; -o-transition: 0.8s;
}


#suchender2:hover .stichpunkt1, #suchender2:hover .stichpunkt2,#suchender2:hover .stichpunkt3,#suchender2:hover .stichpunkt4,#suchender2:hover .stichpunkt5 {
position: absolute; 
left: 0px; 
}

/* Stichpunkte rechts vom Bild */

.punkt {
width: 120px;
background:url('http://funkyimg.com/i/2eZD6.png');
color: #fff;
font: normal 8px/110% 'Source Sans Pro', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
margin: 1px; 
padding: 5px 2px;
display: inline-block;
opacity: 0.9;
}


/* КАРТИНКА СТРОЯЩЕГОСЯ СОСЕДСТВА */

#suchender3 { 
width: 215px; 
height: 260px;   
background: url('http://funkyimg.com/i/2f6U7.png'); /* Kleines Bild */
background-repeat: no-repeat; 
position: relative; 
overflow: hidden;
margin: 0px auto;
border-top: solid 3px #c3dc9b;
border-bottom: solid 3px #c3dc9b;
}


/* НАЧИНАЯ ОТСЮДА МОЖНО ЧТО-ТО ТРОГАТЬ*/
</style>




<div id="steck"><div class="steck-head"><div class="steck-bild"><img src="http://funkyimg.com/i/2f5cY.png"></div> <div class="steck-name">система соседства</div> <div class="steck-sub">без тебя на моей лестничной площадке так пусто...</div> <div class="steck-info">как много вы знаете о своих соседях? нет, серьезно, мы можем десятилетиями жить бок о бок, и не представлять, какие тайны скрыты за гипсокартоном, но иногда подглядывать в замочную скважину... </div></div>

<div class="steck-task" style="padding-top:100px;"><span>СКОРЕЕ ОЗНАКОМЬТЕСЬ С <a href="http://noway.rusff.me/viewtopic.php?id=14#p23">ПРАВИЛАМИ</a> И ВПЕРЕД!</span> <br>

<span style="background-color:#fff; display: inline; letter-spacing: 0px; font-size:13px; color:rgba(30, 32, 35, .8); font-family: 'cuprum'; text-transform: lowercase; ; color: #517993; padding: 0px;">MAKE IT MONEY достает свой рупор и настоятельно советует вам не расслабляться, потому что Бог видит все, а соседи – еще больше. 
Сегодня мы даем вам уникальную возможность самостоятельно сформировать свое окружение и пространство. Шанс, который выпадает так редко – стать частью слаженной команды и доказать всем, что делить с вами лестничную клетку – одно удовольствие. Не углубляясь в подробности, мы предлагаем вам самостоятельно выбрать команду, вместе с которой вы будете двигаться к цели! Бюро недвижимости *НАЗВАНИЕ* предлагает вам на выбор совершенно разные районы, среди которых каждый обязательно найдет что-то по душе: они по-своему уникальны, во всей мере отображают статус и характер местности, и, соответственно, своих жильцов.
</span><br><br>
<span style="background-color:#fff; text-align: center; font-family: cuprum; font-size: 12px; font-style: bold; text-align: center; text-shadow: 1px 1px 0px #fff; color:#5591ce;"><b>голубой</b> - в соседстве есть места  |  <b>желтый</b> - мест нет<br>
 <b>зеленый</b> - объект еще не достроен, поселиться нельзя </span>
<span style="background-color:#fff; text-align: center; font-family: Bebas neue; font-size: 30px; font-style: bold; text-align: center; text-shadow: 1px 1px 0px #5591ce; color:#fff;">• • • • • • • • • • • • </span>

<table><tbody><tr><td><span style="background-color:#fff"><div id="suchender">
<div class="stichpunkt1"><div class="stext2"><b><a href="http://noway.rusff.me/viewtopic.php?id=13">@RIVERSIDE</a> <br>
Риверсайд-Хайтс</div></div>
<div class="stichpunkt2"><div class="stext1"><b>СТОИМОСТЬ ОБЪЕКТА: </b>1000$<br>
РЕМОНТ КОМНАТЫ: 1100$</div></div>
<div class="stichpunkt3"><div class="stext1"><b>ЖИЛЬЦОВ: </b>0<br>
СВОБОДНЫХ КОМНАТ: 10</div></div>
<div class="stichpunkt4"><div class="stext1"><b>ТИП: </b>ГЕТТО</div></div>
<div class="stichpunkt5"><div class="stext1"><b>ЧЛЕНСКИЙ ВЗНОС: </b>250$</div></div>
</div></span></td>

<td>
<span style="background-color:#fff"><div id="suchender">
<div class="stichpunkt1"><div class="stext2"><b><a href="http://noway.rusff.me/viewtopic.php?id=12">@Congress</a>  <br>
Саут-Конгресс</div></div>
<div class="stichpunkt2"><div class="stext1"><b>СТОИМОСТЬ ОБЪЕКТА: </b>0$<br>
РЕМОНТ КОМНАТЫ: 1300$</div></div>
<div class="stichpunkt3"><div class="stext1"><b>ЖИЛЬЦОВ: </b>0<br>
СВОБОДНЫХ КОМНАТ: 10</div></div>
<div class="stichpunkt4"><div class="stext1"><b>ТИП: </b>ТУСОВЩИКИ</div></div>
<div class="stichpunkt5"><div class="stext1"><b>ЧЛЕНСКИЙ ВЗНОС: </b>350$</div></div>
</div></span>

</td></tr></tbody></table>
<table><tbody><tr><td><span style="background-color:#fff"><div id="suchender">
<div class="stichpunkt1"><div class="stext2"><b><a href="http://noway.rusff.me/viewtopic.php?id=11">@TRAVIS</a>  <br>
Тревис-Хайтс</div></div>
<div class="stichpunkt2"><div class="stext1"><b>СТОИМОСТЬ ОБЪЕКТА: </b>0$<br>
РЕМОНТ КОМНАТЫ: 1400$</div></div>
<div class="stichpunkt3"><div class="stext1"><b>ЖИЛЬЦОВ: </b>0<br>
СВОБОДНЫХ КОМНАТ: 10</div></div>
<div class="stichpunkt4"><div class="stext1"><b>ТИП: </b>СЕМЕЙНЫЙ</div></div>
<div class="stichpunkt5"><div class="stext1"><b>ЧЛЕНСКИЙ ВЗНОС: </b>400$</div></div>
</div></span></td>

<td>
<span style="background-color:#fff"><div id="suchender">
<div class="stichpunkt1"><div class="stext2"><b><a href="http://noway.rusff.me/viewtopic.php?id=10">@DOWNTOWN</a> <br>
ДАУНТАУН</div></div>
<div class="stichpunkt2"><div class="stext1"><b>СТОИМОСТЬ ОБЪЕКТА: </b>0$<br>
РЕМОНТ КОМНАТЫ: 1500$</div></div>
<div class="stichpunkt3"><div class="stext1"><b>ЖИЛЬЦОВ: </b>0<br>
СВОБОДНЫХ КОМНАТ: 10</div></div>
<div class="stichpunkt4"><div class="stext1"><b>ТИП: </b>ЭЛИТА</div></div>
<div class="stichpunkt5"><div class="stext1"><b>ЧЛЕНСКИЙ ВЗНОС: </b>450$</div></div>
</div></span>

</td></tr></tbody></table>
<table><tbody><tr>

<td><span style="background-color:#fff"><div id="suchender3">
</div></span>
</td>

<td>
<span style="background-color:#fff"><div id="suchender3">
</div></span>
</td></tr></tbody></table>
<span style="background-color:#fff; text-align: center; font-family: Bebas neue; font-size: 30px; font-style: bold; text-align: center; text-shadow: 1px 1px 0px #5591ce; color:#fff;">• • • • • • • • • • • • </span>
<br>

<span>ПОТОРОПИСЬ!</span><br>
<span style="background-color:#fff; display: inline; letter-spacing: 0px; font-size:13px; color:rgba(30, 32, 35, .8); font-family: 'cuprum'; text-transform: lowercase; color: #517993; padding: 0px;">Наши риелторы подсуетились и в поисках годных объектов обошли весь Остин от Сан-Антонио до Хилл-Кантри. А теперь внимательно присмотритесь, проверьте наличие необходимой суммы у себя в кошельке и решите уже наконец, где приземлиться! Для этого воспользуйтесь шаблоном подачи заявки. Если ни в одном приглянувшемся вам соседстве нет свободных мест или вы не можете определиться, заполните шаблон для «Бездомных».</span>
<br><br>
<span style="padding:20px;"><a href="http://noway.rusff.me/viewtopic.php?id=14#p23">правила (чаво)</a> // <a href="http://noway.rusff.me/viewtopic.php?id=7">предметы</a> // <a href="http://noway.rusff.me/viewtopic.php?id=15#p24">председатели</a> // <a href="http://noway.rusff.me/viewtopic.php?id=8">комбо</a></span></div></div>
шаблоны заявок

Заявка на вступление в соседство
Вступаю в соседство: название объекта, район
Оплачиваю членский взнос: пишем стоимость членского взноса, которая соответствует вашему объекту
Я собираюсь: просто стать членом соседства/действительно поселить персонажа в этот объект

код
Код:
[b]Вступаю в соседство:[/b] [i]...[/i]
[b]Оплачиваю членский взнос:[/b] [i]...[/i]
[b]Я собираюсь:[/b] [i]...[/i]

Шаблон заявки для бездомных

http://placehold.it/100x100 http://placehold.it/100x100 http://placehold.it/100x100
на моей лестничной площадке так пусто…

Я очень хочу: описываете ваши предпочтения или называете конкретные соседства, между которыми не можете выбрать
Я весь такой: описываете ваши качества, что вы готовы «дать» своим соседям [насколько активно будете участвовать в жизни соседства], и почему должны взять именно вас

код
Код:
[quote][align=center][img]ссылка на изображение 100х100[/img] [img]ссылка на изображение 100х100[/img] [img]ссылка на изображение 100х100[/img]
[font=Fixedsys][i]на моей лестничной площадке так пусто…[/i][/font][/align]
[b]Я очень хочу:[/b] [i]...[/i]
[b]Я весь такой:[/b] [i]...[/i]