Гарпии нужны для ближайшей игры!

Код:
<!--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. Сам Слагхорн крахмалил свой цветочек в платочек на капитана команды Гарпий.</p>
<p>2. Подлецы и завистники поговаривают, что девочек подбирают по принципу шоубиза. Не знаем. Свечку не держали.
</p>
<p>
3. Единственная команда, в чьей раздевалке пахнет чем-то помимо засаленных подштанников и дезодоранта "мощь чародея."

</p>
<p>4. Слабый пол настолько слаб, что противоборствующие команды, как правило, его недооценивают. После прошлогоднего матча парни из Нетопырей решили все-таки не пренебрегать защитой на самом сокровенном. </p>
<p>5. Грязные языки, а также завистливые хари, за глаза называют команду Холихедские Фурии. Доля правды в этом есть. Битый час колдомедики пытались замаскировать царапины на, и без того стремной, роже капитана Соколов. Теперь он знает, что звать уединиться после матча можно только одну барышню.</p>
</div>
</div>


<img src="http://savepic.net/7317672m.gif" />
<div class="mask">
<blockquote></blockquote>
</div>
</div>
</div>

<div class="pinkcodecred">
</div>
</center>
move like krum

Меню навигации

Пользовательские ссылки

Информация о пользователе

Гарпии нужны для ближайшей игры!

Сообщений 1 страница 1 из 1

Поделиться16th Sep 2015 22:25
