[html]<style type="text/css">
.walden { width: 420px; height: 220px; -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: #716B7C; 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: #716B7C;}
</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.vfl.ru/ii/1532342530/2387 … 592137.png); border: 10px solid #b2addf;"></div></div><div class="waldo"><div style="width: 150px; height: 200px; position: relative; float: left;"><img src="http://images.vfl.ru/ii/1532342794/809860aa/22592170.png"></div><div style="height: 190px; width: 215px; border: 5px solid #96A0A3; background-color: #EBF2EE; position: relative; float: right;"><div style="width: 195px; height: 170px; padding: 12px; text-align: justify; color: #3B2543; font-family: cuprum; font-size: 11px; line-height: 98%;overflow: auto;">
Дорога — это проснуться ночью, почти наощупь собрать рюкзак, позволить сотням пустых обочин вовсю плескаться в твоих глазах, <br>
дорога — это огни заправок, глухих окраин прощальный джаз, и ты вздыхаешь, ох, боже правый, куда я вляпался в этот раз.
И липкий страх начинает литься в тебе холодным и злым дождём, ты в сотый раз вспоминаешь лица тех, кто обратно тебя не ждёт, <br>
в тебе, шипя, остывает город, проблемы, планы — и ты один…<br>
Морская пена, закаты, сосны, откуда вся эта красота; дорога — это вернуться после, и в то же время остаться там.<br>
И пусть закончишь ты это просто, домой вернувшись в конце концов.<br>
Но видишь — линии перекрёстков опять рисуют твоё лицо.<br>
</div></div>
</div></div>
</center>[/html]
Отредактировано Ashley Cole (Пн, 23 Июл 2018 13:53:49)