<!--HTML--> <style type="text/css"> .walden { width: 400px; height: 249px; -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; -ms-perspective: 1000; } .henry {width: 420x; height: 220px; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d;-ms-transform-style: preserve-3d; } .walden:hover .henry {-webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg);-ms-transform: rotateY(180deg); } .emerson {overflow: hidden; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; position: absolute;} .waldo {overflow: hidden; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); opacity: 0; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; position: absolute; width: 400px; height: 200px; padding: 10px; background-color: #76371f; overflow: auto; float: left; } .walden:hover .waldo {-webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; opacity: 1; background-color: #76371f;} </style> <link href='http://fonts.googleapis.com/css?family=Buda:300' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'> <center> <div class="walden"><div class="henry"><div class="emerson"><div style="width:400px; height: 200px; background-image: url(http://images.kashamalasha.com/201308210014-kote-sekretar-kashamalasha-com.gif); border: 10px solid #76371f;"></div></div><div class="waldo"><div style="width: 150px; height: 200px; position: relative; float: left;"><img src="http://forum.allavatars.ru/index.php?action=media;sa=media;in=2311;preview"></div><div style="height: 190px; width: 215px; border: 5px solid #70473e; background-color: #EBF2EE; position: relative; float: right;"><div style="width: 195px; height: 170px; padding: 12px; text-align: justify; color: #432529; font-family: cuprum; font-size: 11px; line-height: 98%;overflow: auto;"> <div style="width: 180px; background-color: #4c0c0c; padding: 6px; text-align: center; font-family: calibri; font-size: 15px; text-transform: uppercase; line-height: 100%; color: #fff;"> НАСТОЯЩЕЕ </div> <br> [12.12.2014 - Активен - СВ] <a href="https://twsomnia.rusff.me/viewtopic.php?id=16" target="_blank">Живые</a> <br><br> <br><br><div style="width: 180px; background-color: #4c0c0c; padding: 6px; text-align: center; font-family: calibri; font-size: 15px; text-transform: uppercase; line-height: 100%; color: #fff;"> ПРОШЛОЕ </div> <br> [12.12.2014 - Закончен - СВ] <a href="https://twsomnia.rusff.me/viewtopic.php?id=15" target="_blank">Ожившие</a><br><br> <br><br><div style="width: 180px; background-color: #4c0c0c; padding: 6px; text-align: center; font-family: calibri; font-size: 15px; text-transform: uppercase; line-height: 100%; color: #fff;"> АЛЬТЕРНАТИВА </div> <br> [12.12.2014 - Заморожен] <a href="https://twsomnia.rusff.me/viewtopic.php?id=14" target="_blank">Пртнёрство</a><br><br> </div> </div> </div></div> </div></div> </center>
© Bloody Phoenix
Для заполнения вам понадобиться Анимация или Изображение вашего персонажа размером 400х249 и 150х200. Звездочки убираем
[*code]<!--HTML-->
<style type="text/css">
.walden { width: 400px; height: 249px; -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; -ms-perspective: 1000; }.henry {width: 420x; height: 220px; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d;-ms-transform-style: preserve-3d; }
.walden:hover .henry {-webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg);-ms-transform: rotateY(180deg); }
.emerson {overflow: hidden; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; position: absolute;}
.waldo {overflow: hidden; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); opacity: 0; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; position: absolute; width: 400px; height: 200px; padding: 10px; background-color: #76371f; overflow: auto; float: left; }
.walden:hover .waldo {-webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; opacity: 1; background-color: #76371f;}
</style>
<link href='http://fonts.googleapis.com/css?family=Buda:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'><center>
<div class="walden"><div class="henry"><div class="emerson"><div style="width:400px; height: 200px; background-image: url(ВАШЕ ИЗОБРАЖЕНИЕ ИЛИ АНИМАЦИЯ РАЗМЕРОМ 400х249); border: 10px solid #76371f;"></div></div><div class="waldo"><div style="width: 150px; height: 200px; position: relative; float: left;"><img src="ВАШЕ ИЗОБРАЖЕНИЕ ИЛИ АНИМАЦИЯ РАЗМЕРОМ 150х200"></div><div style="height: 190px; width: 215px; border: 5px solid #70473e; background-color: #EBF2EE; position: relative; float: right;"><div style="width: 195px; height: 170px; padding: 12px; text-align: justify; color: #432529; font-family: cuprum; font-size: 11px; line-height: 98%;overflow: auto;">
<div style="width: 180px; background-color: #4c0c0c; padding: 6px; text-align: center; font-family: calibri; font-size: 15px; text-transform: uppercase; line-height: 100%; color: #fff;">НАСТОЯЩЕЕ
</div>
<br>
[Дата - Открыт/Закончен/Заморожен - ЛВ(Личная Ветка)/СВ(Сюжетная Ветка)] <a href="ссылка на эпизод" target="_blank">Название эпизода</a>
<br><br><br><br><div style="width: 180px; background-color: #4c0c0c; padding: 6px; text-align: center; font-family: calibri; font-size: 15px; text-transform: uppercase; line-height: 100%; color: #fff;">
ПРОШЛОЕ
</div>
<br>
[Дата - Открыт/Закончен/Заморожен - ЛВ(Личная Ветка)/СВ(Сюжетная Ветка)] <a href="ссылка на эпизод" target="_blank">Название эпизода</a><br><br><br><br><div style="width: 180px; background-color: #4c0c0c; padding: 6px; text-align: center; font-family: calibri; font-size: 15px; text-transform: uppercase; line-height: 100%; color: #fff;">
АЛЬТЕРНАТИВА
</div>
<br>
[Дата - Открыт/Закончен/Заморожен] <a href="ссылка на эпизод" target="_blank">Название Эпизода</a><br><br></div>
</div>
</div></div>
</div></div>
</center>[*/code]