Код:
<!--HTML--><link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Oleo Script' rel='stylesheet' type='text/css'> <style type="text/css"> /* credit for colour palette inspiration goes to LoversinJapan at colourlovers(dot)com */ .thingy::-webkit-scrollbar { width: 8px; background: #ffffff } .thingy::-webkit-scrollbar-thumb { background: #C6E5D9 } .thingy::-webkit-scrollbar-corner { background: #C6E5D9 } #rules { width: 400px; height: 200px; border: 8px solid #F4EAD5; position: relative; overflow: hidden; } #rules .left { -webkit-transition: 2s all ease-in-out; -moz-transition:0.8s all ease-in-out; o-transition: 0.8s all ease-in-out; position: absolute; left: 0px; bottom: 0px; width: 200px; height: 200px; } #rules:hover .left {-webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; o-transition: 0.8s all ease-in-out; left: -200px; } #rules .right { -webkit-transition: 2s all ease-in-out; -moz-transition:0.8s all ease-in-out; o-transition: 0.8s all ease-in-out; position: absolute; right: 0px; bottom: 0px; width: 200px; height: 200px; } #rules:hover .right {-webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; o-transition: 0.8s all ease-in-out; right: -200px; } </style><center> <div id="rules"> <div class="left"><img src="http://placehold.it/200x200"></div> <div class="right"><img src="http://placehold.it/200x200"></div> <div class="thingy" style="width: 400px; height: 200px; background-color: #ffffff; overflow: auto;"> <div style="font-family: calibri; font-size: 10px; padding: 20px; color: #D68189; text-align: justify;"> <div style="font-family: Oleo Script; font-size: 30px; border: 2px solid #C6E5D9; background: #C6E5D9; text-shadow: 1px 1px #ffffff; letter-spacing: -1px; padding: 10px; text-align: center;">name surname</div> <div style="text-transform: uppercase;"><p>текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки </div> <div style="font-family: calibri; font-size: 8px; border: 1px solid #C6E5D9; background: #C6E5D9; padding: 5px; text-align: center; text-transform: uppercase;"><b>внешность:</b> внешность персонажа <b>связь:</b> связь с вами</div> </center></div>
Код:
[*code]<*!--HTML--><link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Oleo Script' rel='stylesheet' type='text/css'> <style type="text/css"> /* credit for colour palette inspiration goes to LoversinJapan at colourlovers(dot)com */ .thingy::-webkit-scrollbar { width: 8px; background: #ffffff } .thingy::-webkit-scrollbar-thumb { background: #C6E5D9 } .thingy::-webkit-scrollbar-corner { background: #C6E5D9 } #rules { width: 400px; height: 200px; border: 8px solid #F4EAD5; position: relative; overflow: hidden; } #rules .left { -webkit-transition: 2s all ease-in-out; -moz-transition:0.8s all ease-in-out; o-transition: 0.8s all ease-in-out; position: absolute; left: 0px; bottom: 0px; width: 200px; height: 200px; } #rules:hover .left {-webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; o-transition: 0.8s all ease-in-out; left: -200px; } #rules .right { -webkit-transition: 2s all ease-in-out; -moz-transition:0.8s all ease-in-out; o-transition: 0.8s all ease-in-out; position: absolute; right: 0px; bottom: 0px; width: 200px; height: 200px; } #rules:hover .right {-webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; o-transition: 0.8s all ease-in-out; right: -200px; } </style><center> <div id="rules"> <div class="left"><img src="http://placehold.it/200x200"></div> <div class="right"><img src="http://placehold.it/200x200"></div> <div class="thingy" style="width: 400px; height: 200px; background-color: #ffffff; overflow: auto;"> <div style="font-family: calibri; font-size: 10px; padding: 20px; color: #D68189; text-align: justify;"> <div style="font-family: Oleo Script; font-size: 30px; border: 2px solid #C6E5D9; background: #C6E5D9; text-shadow: 1px 1px #ffffff; letter-spacing: -1px; padding: 10px; text-align: center;">name surname</div> <div style="text-transform: uppercase;"><p>текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки текст заявки </div> <div style="font-family: calibri; font-size: 8px; border: 1px solid #C6E5D9; background: #C6E5D9; padding: 5px; text-align: center; text-transform: uppercase;"><b>внешность:</b> внешность персонажа <b>связь:</b> связь с вами</div> </center></div>[/code*]
ДЛЯ ТОГО, ЧТОБЫ КОД СРАБОТАЛ КОРРЕКТНО, НЕОБХОДИМО УБРАТЬ ДВЕ * В НАЧАЛЕ КОДА И ОДНУ * В КОНЦЕ