Код:
<!--HTML--><center>
<link href='http://fonts.googleapis.com/css?family=Rozha+One' rel='stylesheet' type='text/css'>
<style type="text/css">
#treacherous { width: 500px;height: 560px; position: relative; overflow: hidden; }
#treacherous .treacherous-1 { width: 480px;padding: 10px; height: 70px; background-color: #94C7B6; margin-top: 10px; }
#treacherous .treacherous-2 { width: 185px; overflow: hidden; position: absolute; top: 0px; font-family: 'Rozha One'; font-size: 40px; letter-spacing: 0px;line-height: 280%;color: #EDEBE6; }
#treacherous .treacherous-3 { -webkit-transition: all 1.2s ease-in-out;-moz-transition: all 1.2s ease-in-out;-ms-transition: all 1.2s ease-in-out;-o-transition: all 1.2s ease-in-out;transition: all 1.2s ease-in-out; width: 100px;height: 100px;-webkit-border-radius: 100px;border-radius: 100px; background-image: url(http://www.micexchange.com/MA/images/resized/images/stories/cat/travel/japan-1_100_100.jpg);border: 5px solid #D3643B; position: absolute;left: 195px;top: 0px; }
#treacherous .treacherous-3:after { content: '▼';color: #D3643B; font-family: times;font-size: 38px;position: absolute; top: 115px;left: 32px;all styling elements after; }
#treacherous .treacherous-4 { width: 460px;height: 410px; padding: 20px;background-image: url(http://japancitytrip.com/image-of/Japanese-painting.jpg); position: absolute;top: 100px; left: 0px; }
#treacherous .treacherous-5 { width: 400px;height: 370px; background-color: #ffffff; border: 30px solid #ffffff; position: absolute; top: 0px;left: 20px; font-family: arial;font-size: 9px;color: #222222;text-transform: uppercase;letter-spacing: 1px;line-height: 100%;text-align: justify; }
#treacherous .treacherous-5 i { color: #94C7B6 }
#treacherous .treacherous-5 b { color: #D3643B }
#treacherous .treacherous-6 { width: 340px;height: 310px; padding: 30px; background-image: url(http://media.tumblr.com/tumblr_mcwc2ypviB1qh9yw5.png); }
#treacherous .treacherous-7 { width: 325px;height: 300px; padding-right: 5px; border: 5px solid #ffffff; background-color: #ffffff; text-transform: none; overflow: auto; }
#treacherous .treacherous-7::-webkit-scrollbar { width: 5px; }
#treacherous .treacherous-7::-webkit-scrollbar-track { background-color: #D3643B; border-right: 2px solid #ffffff; border-left: 2px solid #ffffff; }
#treacherous .treacherous-7::-webkit-scrollbar-thumb { background-color: #94C7B6; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; }
#treacherous .treacherous-7 div { font-family: 'rozha one'; font-size: 25px; line-height: 120%; text-align: center; color: #D3643B; }
#treacherous .treacherous-7 div:before { content: ''; width: 60px; height: 1px; display: inline-block; background-color: #D3643B; vertical-align: middle; all elements after; margin-right: 3px;}
#treacherous .treacherous-7 div:after { content: ''; width: 60px; height: 1px; display: inline-block; background-color: #D3643B; vertical-align: middle; all elements after; margin-left: 3px;}
#treacherous .treacherous-8 { -moz-transform: scale(0) rotate(0deg);-webkit-transform: scale(0) rotate(0deg);-o-transform: scale(0) rotate(0deg);-ms-transform: scale(0) rotate(0deg);transform: scale(0) rotate(0deg);-webkit-transition: all 1.2s ease-in-out;-moz-transition: all 1.2s ease-in-out;-ms-transition: all 1.2s ease-in-out;-o-transition: all 1.2s ease-in-out;transition: all 1.2s ease-in-out;background-color: #94C7B6; width: 175px; padding-left: 5px;padding-right: 5px; padding-top: 5px; height: 85px; overflow: hidden; position: absolute; top: 10px; font-family: 'Rozha One'; font-size: 20px; letter-spacing: 0px;line-height: 100%;color: #EDEBE6; text-align: center; }
#treacherous .treacherous-8 div { width: 175px;height: 85px;display: table; }
#treacherous .treacherous-8 div p { display: table-cell; vertical-align: middle; }
#treacherous:hover .treacherous-3 { -moz-transform: rotate(1440deg);-webkit-transform: rotate(1440deg);-o-transform: rotate(1440deg);-ms-transform: rotate(1440deg);transform: rotate(1440deg); }
#treacherous:hover .treacherous-8 { -webkit-transition: all 1.2s ease-in-out 1.2s;-moz-transition: all 1.2s ease-in-out 1.2s;-ms-transition: all 1.2s ease-in-out 1.2s;-o-transition: all 1.2s ease-in-out 1.2s;transition: all 1.2s ease-in-out 1.2s; -moz-transform: scale(1) rotate(1440deg);-webkit-transform: scale(1) rotate(1440deg);-o-transform: scale(1) rotate(1440deg);-ms-transform: scale(1) rotate(1440deg);transform: scale(1) rotate(1440deg); }
</style>
<div id="treacherous">
<div class="treacherous-1">
<div class="treacherous-2" style="left: 5px;">Japan</div>
<div class="treacherous-2" style="right: 5px;">Tokyo</div></div>
<div class="treacherous-4"><div class="treacherous-5"><div class="treacherous-6">
<div class="treacherous-7">
<div>welcome</div>
Охайо, дорогой гость. Ты бы хотел прогуляться по улочкам шумного Токио? погулять по Сибуя, заглянуть в магазины на Акихабару? Насладиться спокойствием созерцая величественную гору Фудзи или оторваться с японской молодежью в Харадзюку? Я думаю, что хотел, иначе бы даже и не стал открывать ссылку на данный форум.
<p>Добро пожаловать на пробник, посвященный будущему реалу в прекрасном городе Токио. Я не буду говорить громких и красивых слов, просто скажу, что если ты ищешь свою частичку Японии, то нам с тобой по пути. Мы с моим другом хотим создать ролевую, в которой бы воплотилась хотя бы небольшая часть той магии, которая исходит от Токио. Нам не важно количество игроков, если оно плохо влияет на качество. Мы просто хотим видеть тех, кто так же не равнодушен к Японии, как и мы.
<div>reserved</div>
<table><tr><td><b>boys</b> </td><td><b>girls</b> </td></tr>
<tr><td></td><td></td></tr></table>
<i>Italics.</i> Pellentesque ornare lacus et tortor congue finibus. Aliquam erat volutpat. Aliquam gravida urna sed risus laoreet, ac blandit augue ultricies. Maecenas facilisis orci quis accumsan mattis. Phasellus semper placerat est, a hendrerit erat. Nulla id libero quis magna tincidunt ultrices. Nulla lobortis nisi in odio molestie facilisis. Phasellus varius viverra turpis posuere vestibulum. Donec egestas purus eros, et gravida dolor suscipit non. Nullam leo felis, placerat et laoreet at, condimentum sit amet felis. <p>
Vivamus vitae aliquet libero. Pellentesque vitae elementum mauris. Nunc massa nisi, tempus ut nibh pretium, efficitur porttitor urna. Mauris et sapien vitae justo cursus dictum. Sed congue, lacus et sodales maximus, arcu leo consectetur lacus, ut ornare enim nisi vestibulum est. Cras eu libero id orci vehicula pulvinar vitae sit amet nulla. Curabitur ipsum mauris, porta nec nisl sed, tincidunt eleifend lacus. Sed egestas dignissim velit, ut rutrum mauris hendrerit eu. Pellentesque elit dui, posuere sodales dignissim mollis, aliquet vitae sem. Nulla in pellentesque tortor. Donec mattis scelerisque suscipit. Phasellus varius viverra turpis posuere vestibulum. Donec egestas purus eros, et gravida dolor suscipit non. Nullam leo felis, placerat et laoreet at, condimentum sit amet felis.
</div></div></div></div>
<div class="treacherous-8" style="left: 0px;"><div><p>nc 21</p></div></div>
<div class="treacherous-8" style="right: 0px;"><div><p>real-life</p></div></div>
<div class="treacherous-3"></div>
</div>
</center>
