Код:
<!--HTML-->
<style>
.ponaward {width: 570px; height: auto; padding: 5px; background: url("http://i.imgur.com/o7Q1amt.png") no-repeat center top, url("http://i.imgur.com/0i8QhTv.png") no-repeat center bottom, url("http://i.imgur.com/Ln7yhHb.png") repeat-y center;}
.textpon {width: 510px; height: auto; margin-top: 50px;}
.the-image {width: 150px; height: 203px;}
.the-image .the-hover {margin: auto 20px auto 20px; padding: 10px; opacity: 0; width: 190px; height: 260px; transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; position: relative; top: 20px;}
.the-image:hover .the-hover {opacity: 1.0;}
.the-writing {margin-top: -32px; margin-left: -94px; text-align: justify; overflow: auto; height: 265px; padding-right: 5px; line-height: 90%;}
.the-writing b {color: #FB5472;}
.temn {width: 480px; margin-top: 110px; font-family: lobster; font-size: 25px; color: #5b6e01; text-shadow: 2px 0 0 #fcfcfc;}
</style>
<center><div class="ponaward">
<div class="temn">награды</div>
<div class="textpon">
ø Награды – приятные плюшки, которые вы можете получить за то или иное достижение. Мелочь, а приятно. <br>
ø Для получения награды достаточно написать название награды и приложить ссылку-доказательство. <br>
<br><div style="width: 510px; background-color: #dfe79e; border-bottom: 1px ridge #be9e77; text-align: center; font-size: 12px; color: #788936;"> первооткрываетели</div><br>
<table>
<tr>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://funkyimg.com/i/ZV2D.png
); "></div></div><b>добро пожаловать!</b> <br>
С прибытием в Даллас!
</td>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://funkyimg.com/i/24PhF.png
); "></div></div><b>первый пост</b> <br>
Поздравляем с началом игры!
</td>
</tr><tr>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://funkyimg.com/i/UBZ6.png
); "></div></div><b>первая 1000 сообщений</b> <br>
Вы преодолели первый рубеж!
</td>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://savepic.ru/8502552.png
); "></div></div> <b>первый закрытый эпизод</b> <br>
Поздравляем с завершением первого эпизода!
</td>
</tr>
</table>
<br><div style="width: 510px; background-color: #dfe79e; border-bottom: 1px ridge #be9e77; text-align: center; font-size: 12px; color: #788936;"> пончиковые шеф-повара</div><br>
<table>
<tr>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://funkyimg.com/i/ZWze.png
); "></div></div><b>5 000 сообщений!</b> <br>
Ого, вы написали 5 000 сообщений!
</td>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://i.imgur.com/V9wVzTv.png
); "></div></div><b>10 000 сообщений!</b> <br>
Ого, вы написали 10 000 сообщений!
</td>
</tr><tr>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://funkyimg.com/i/21wVj.png
); "></div></div><b>10 постов</b> <br>
Вы написали 10 игровых постов!
</td>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://savepic.su/5309479.png
); "></div></div> <b>50 постов</b> <br>
Вы написали 50 игровых постов!
</td>
</tr>
<tr>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://lugamama.lg.ua/uploads/jawards/7a93240ca483.gif
); "></div></div><b>пиар-мастер</b> <br>
Вы оставили больше 200 реклам!
</td>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://images.vfl.ru/ii/1423186936/1a5cc2df/7696963.png
); "></div></div><b>Отзыв</b> <br>
Спасибо за отзыв на топе!
</td>
</tr><tr>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://s1.uploads.ru/t/3i7Be.png
); "></div></div><b>Блоггер</b> <br>
За активное ведение соцсети! (у вас более 10 постов)
</td>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://savepic.su/5360715.png
); "></div></div> <b>Отношения и хронология</b> <br>
Мечта, а не анкета. У вас заполнены отношения и(или) хронология!
</td>
</tr>
<tr>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://i.imgur.com/Gm2mWiU.png
); "></div></div><b>Самый уважаемый</b> <br>
У тебя уже целая 100 плюсов в профиле!
</td>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://s018.radikal.ru/i502/1409/07/372ab8c13491.png
); "></div></div><b>Самый позитивный</b> <br>
Порадовал других 200 плюсами!
</td>
</tr>
</table>
<br><div style="width: 510px; background-color: #dfe79e; border-bottom: 1px ridge #be9e77; text-align: center; font-size: 12px; color: #788936;"> пончиковые су-шефы</div><br>
<table>
<tr>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://funkyimg.com/i/28hoF.png
); "></div></div><b>Неделя с нами</b> <br>
Неделя с нами (по дням в профиле)
</td>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://rucodelnica.ru/forum/images/medals/2mesto.png
); "></div></div><b>Месяц с нами</b> <br>
Месяц с нами (по дням в профиле)
</td>
</tr><tr>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://funkyimg.com/i/ZV4V.png
); "></div></div><b>Самый дружелюбный</b> <br>
Забрали 5 человек из темы "хочу к вам".
</td>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://uploads.ru/i/6/L/t/6Ltmd.png
); "></div></div> <b>Помощь администрации</b> <br>
Выдается администрацией.
</td>
</tr>
<tr>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://pycb-clan.ru/uploads/jawards/Kzn.png
); "></div></div><b>Победа в 10 конкурсах</b> <br>
Самая настоящая гроза глазури и сахарной пудры – победитель 10 конкурсов!
</td>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://sh.uploads.ru/t/e72L1.png
); "></div></div><b>Победа в мафии</b> <br>
Крестный отец клана Donutello, одержал верх в мафии!
</td>
</tr>
<tr>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://forum.myjane.ru/medals/myjane_50x50-thread-1.gif
); "></div></div><b>Самый креативный</b> <br>
Выполнил 10 заказов в мастерской.
</td>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://sd.uploads.ru/t/Xn7Sl.png
); "></div></div><b>Ведение личной темы</b> <br>
За активное ведение личной темы. (дневник, творчество)
</td>
</tr>
</table>
<br><div style="width: 510px; background-color: #dfe79e; border-bottom: 1px ridge #be9e77; text-align: center; font-size: 12px; color: #788936;"> поедатели сладостей </div><br>
<table>
<tr>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://funkyimg.com/i/24PhG.png
); "></div></div><b>Лучший пост</b> <br>
У вас лучший пост недели.
</td>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://funkyimg.com/i/WGGb.png
); "></div></div><b>Лучший эпизод</b> <br>
У вас лучший эпизод недели.
</td>
</tr><tr>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://i21.servimg.com/u/f21/17/56/01/76/iazoe_10.png
); "></div></div><b>Флудер недели</b> <br>
Вы самый активный флудер недели
</td>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://funkyimg.com/i/28hzE.png
); "></div></div> <b>Активист недели</b> <br>
Вы самый активный игрок недели
</td>
</tr>
<tr>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://funkyimg.com/i/24yBQ.png
); "></div></div><b>Лучшая пара</b> <br>
Вы часть лучшей пары недели.
</td>
<td><div class="fact"><div style="width: 50px; height: 50px; background: url(
http://funkyimg.com/i/28hwo.png
); "></div></div><b>Завсегдатай</b> <br>
Вы засветились в таблице уже 10 раз!
</td>
</tr>
</table>
<br><br><br><br><br>
</div>
</div></center>Свернутый текст
