Код:
<!--HTML--> <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Cabin+Condensed:500' rel='stylesheet' type='text/css'> <style> .pinkholder { float: center; width: 400px; height: 261px; background: url('http://funkyimg.com/i/Z951.png'), repeat repeat center center; padding: 8px; position: relative; border: 3px solid #7C5E19; box-shadow: 0 0 1px #7C5E19; } .pinksubholdercontainer { float: right; width: 199px; height: 155px; padding: 3px 5px 5px 1px; background: #b7a88a; overflow: hidden; position: relative; margin: 0 1px 7px 0; border-left: 3px solid #422004; border-right: 3px solid #7C5E19; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); } .pinksubholdercontainer h3 { color: #7d9c1a; font-family: 'Lobster', cursive; font-size: 25px; text-align: center; text-transform: none; text-shadow: none; margin: 7px 0 5px 0; } .pinksubholdercontainer h2 { color: #7e9e19; font-family: calibri; font-size: 9px; text-align: center; text-transform: uppercase; letter-spacing: 0px; margin: 0; } .pinksubholder { width: 194px; height: 119px; color: #7e9e19; font-family: calibri; font-size: 10px; text-align: left; line-height: 11px; background: transparent; overflow-y: auto; } .pinksubholder::-webkit-scrollbar { width: 5px; background: #7C5E19; } .pinksubholder::-webkit-scrollbar-track { margin: 5px; border-radius: 0.2em; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); } .pinksubholder::-webkit-scrollbar-thumb { background: #422004; border-radius: 0.2em; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } .pinksubholder p { color: #4d4d4d; font-family: calibri, serif; font-size: 10px; font-style: none; text-align: left; line-height: 10px; background: transparent; padding: 2px 0px 0px; margin: 1px 2px 3px 5px; position: relative; } .pinksubholder p:first-letter { display: inline-block; float: left; color: #ffffff; font-family: georgia; font-size: 20px; text-shadow: 0 0 1px #85a826; background-color: #ba5c5f; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7c5e19+15,7c5e19+15,422004+16,7c5e19+100 */ background: #7c5e19; /* Old browsers */ background: -moz-linear-gradient(top, #7c5e19 15%, #7c5e19 15%, #422004 16%, #7c5e19 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#7c5e19), color-stop(15%,#7c5e19), color-stop(16%,#422004), color-stop(100%,#7c5e19)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7c5e19 15%,#7c5e19 15%,#422004 16%,#7c5e19 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7c5e19 15%,#7c5e19 15%,#422004 16%,#7c5e19 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #7c5e19 15%,#7c5e19 15%,#422004 16%,#7c5e19 100%); /* IE10+ */ background: linear-gradient(to bottom, #7c5e19 15%,#7c5e19 15%,#422004 16%,#7c5e19 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c5e19', endColorstr='#7c5e19',GradientType=0 ); /* IE6-9 */ padding: 8px; margin: 1px 5px 0 0px; box-shadow: 0 0 1px #222; } .pinksubholder a { color: #bde4b5; text-transform: uppercase; text-decoration: none; cursor: url(http://s6.uploads.ru/LkIFS.png), auto; transition: all 0.5s linear; } .pinksubholder a:hover { color: #bde4b5; } .pinkleftmenu { float: left; width: 200px; padding:0; margin: 0 -5px 0 -10px; } .pinkleftmenu li { display: block; width: 177px; height: 40px; background: #b7a88a; margin-bottom: 4px; overflow: hidden; position: relative; border-left: 3px solid #7C5E19; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); transition: all 300ms linear; -webkit-transition: all 300ms linear; -ms-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; } .pinkleftmenu li:last-child { margin-bottom: 0px; } .pinkleftmenu li a { display: block; width: 100%; height: 100%; color: #333; text-align: left; padding-left: 10px; position: relative; } { color: #bee5b6; font-family: 'Cabin Condensed', sans-serif; font-size: 11px; text-transform: uppercase; text-shadow: none; margin: 10px 0 0 0; transition: all 300ms linear; -webkit-transition: all 300ms linear; -ms-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; } .pinkleftsub { color: #666; font-family: calibri; font-size: 8px; text-transform: uppercase; margin: 0; transition: all 300ms linear; -webkit-transition: all 300ms linear; -ms-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; } .pinkleftmenu li:hover { background: #bee5b6; border-left: 3px solid #7d9c1a; } { opacity: 1; color: #7e9e15; -webkit-animation: moveFromTop 300ms ease-in-out; -ms-animation: moveFromTop 300ms ease-in-out; -moz-animation: moveFromTop 300ms ease-in-out; } .pinkleftmenu li:hover .pinkleftsub { opacity: 1; color: #222; -webkit-animation: moveFromBottom 300ms ease-in-out; -ms-animation: moveFromBottom 300ms ease-in-out; -moz-animation: moveFromBottom 300ms ease-in-out; } @-webkit-keyframes moveFromBottom { from { opacity: 0; -webkit-transform: translateY(200%); } to { opacity: 1; -webkit-transform: translateY(0%); } } @-moz-keyframes moveFromBottom { from { opacity: 0; -moz-transform: translateY(200%); } to { opacity: 1; -moz-transform: translateY(0%); } } @-ms-keyframes moveFromBottom { from { opacity: 0; -ms-transform: translateY(200%); } to { opacity: 1; -ms-transform: translateY(0%); } } @-webkit-keyframes moveFromTop { from { opacity: 0; -webkit-transform: translateY(-200%); } to { opacity: 1; -webkit-transform: translateY(0%); } } @-moz-keyframes moveFromTop { from { opacity: 0; -moz-transform: translateY(-200%); } to { opacity: 1; -moz-transform: translateY(0%); } } @-ms-keyframes moveFromTop { from { opacity: 0; -ms-transform: translateY(-200%); } to { opacity: 1; -ms-transform: translateY(0%); } } .pinkinfoimage { float: right; width: 205px; height: 84px; text-align: center; background: #bee5b6 url('') no-repeat center center; position: relative; margin: 0 1px 0 0; border: 3px solid #555; overflow: hidden; cursor: default; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); } .pinkinfoimage .mask, .pinkinfoimage .content { top: 0; left: 0; width: 205px; height: 84px; position: absolute; overflow: hidden; } .pinkinfoimage-content .mask { opacity: 1; background-color: #bee5b6; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transform: translateX(300px); -webkit-transform: translateX(300px); -ms-transform: translateX(300px); -moz-transform: translateX(300px); -o-transform: translateX(300px); -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); } .pinkinfoimage-content:hover .mask { transform: translateX(0px); -webkit-transform: translateX(0px); -ms-transform: translateX(0px); -moz-transform: translateX(0px); -o-transform: translateX(0px); } .pinkinfoimage img { display: block; position: relative; } .pinkinfoimage-content img { transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } .pinkinfoimage-content:hover img { transform: translateX(-300px); -webkit-transform: translateX(-300px); -ms-transform: translateX(-300px); -moz-transform: translateX(-300px); -o-transform: translateX(-300px); } .pinkinfoimage blockquote { float: center; width: 185px; height: 60px; color: #777; font-family: calibri; font-size: 10px; text-align: left; line-height: 10px; background: #bee5b6; padding: 5px 5px 3px 5px; margin: 5px 2px 1px 5px; border-top: 3px solid #ba5c5f; border-bottom: 3px solid #ba5c5f; } .pinkinfoimage blockquote:first-letter { float: left; display: inline-block; color: #85a826; font-family: georgia; font-size: 20px; text-shadow: 0 0 1px #85a826; background-color: #ba5c5f; background-image: -webkit-linear-gradient(top, #bde4b5, #85a826); background-image: -moz-linear-gradient(top, #bde4b5, #85a826); background-image: -o-linear-gradient(top, #bde4b5, #85a826); background-image: -ms-linear-gradient(top, #bde4b5, #85a826); background-image: linear-gradient(top, #bde4b5, #85a826); padding: 8px; margin: 1px 5px 0 0px; box-shadow: 0 0 1px #222; } .pinkinfoimage blockquote b { color: #2d3c04; font-family: calibri; font-size: 10px; text-transform: uppercase; line-height: 10px; } .pinkinfoimage blockquote b:hover { color: #ba5c5f; } .pinkcodecred { float: center; width: 420px; height: 20px; text-align: right; background: transparent; margin: 0 0 0; position: relative; } .pinkcodecred a { color: #79991a; } .pinkcodecred a:hover { color: #779816; } </style> <center> <div class="pinkholder"> <ul class="pinkleftmenu"> <li> <a href="#"> <h2 class="pinkleftmain">недлятебясвойснитчхранила</h2> <h3 class="pinkleftsub">свобода!равенство!постоплата!</h3> </a> </li> <li> <a href="#"> <h2 class="pinkleftmain">Idk what to put here</h2> <h3 class="pinkleftsub">осыкурятпапиросы</h3> </a> </li> <li> <a href="#"> <h2 class="pinkleftmain">So many links omg</h2> <h3 class="pinkleftsub">восахтолькомальчики</h3> </a> </li> <li> <a href="#"> <h2 class="pinkleftmain">Links are great, right?</h2> <h3 class="pinkleftsub">королевыулья</h3> </a> </li> <li> <a href="#"> <h2 class="pinkleftmain">Links have it easy</h2> <h3 class="pinkleftsub">большиежаладетектед</h3> </a> </li> <li> <a href="#"> <h2 class="pinkleftmain">Irdk what to write here</h2> <h3 class="pinkleftsub">этидниЛюдуобними</h3> </a> </li> </ul> <div class="pinksubholdercontainer"> <div class="pinksubholder"> <p> 1. Команда славится <s>внушительными жалами</s> огромным потенциалом и амбициями.</p> <p>2. Именно у Ос самые упоротые фанаты эвер. И если девчонки скандируют с трибун "Бэгмен, я хочу от тебя детей" и "Людо, можно я укушу тебя за попу", то парни просто создают невыносимый гул, чем отвлекают внимание нападающих противника при выполнении штрафного броска. </p> <p> 3. Мы уже говорили, что игроки команды неутомимы как пчелы? <s>Если вы понимаете, о чем мы.</s> Восемнадцать побед в национальных чемпионатах - это вам не Гарпий в раздевалке щупать.</p> <p>4. Рекламщики опять же отдают предпочтение именно черно-полосатым. Возможно, яркая форма, возможно, "особые связи", но за прошедший год они трижды были на обложках Ведьминого Досуга. </p> <p>5. Спонсоры тоже не обделяют вниманием любимчиков толпы. Хотят слухи, что на восемнадцать побед, три приходятся не честными. Но опять же. Мы не привыкли сплетничать. Об этом можете спросить госпожу Скитер.</p> </div> </div> <img src="http://savepic.net/7323886m.gif" /> <div class="mask"> <blockquote></blockquote> </div> </div> </div> <div class="pinkcodecred"> </div> </center>