Код:
<!--HTML--><style type="text/css">
.golliew {
width: 500px;
height: 600px;
margin: 10px;
border: 10px solid #3D3222 ;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #354854;
-moz-box-shadow: 1px 1px 2px #354854;
box-shadow: 1px 1px 2px #354854;
background: url(http://imguploads.ru/img/2015/02/27/iecu2F.gif) no-repeat center center;
}
.golliew .gollask,.golliew .gollent {
width: 500px;
height: 600px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.golliew img {
display: block;
position: relative;
}
.golliew-ninth .gollask-1, .golliew-ninth .gollask-2 {
height: 400px;
width: 400px;
background: rgba(145,170,185,0.3);
-webkit-transition: all 0.3s ease-in-out 0.6s;
-moz-transition: all 0.3s ease-in-out 0.6s;
-o-transition: all 0.3s ease-in-out 0.6s;
transition: all 0.3s ease-in-out 0.6s;
}
.golliew-ninth .gollask-1 {
left: auto;
right: 0;
-webkit-transform: rotate(56.5deg) translateX(-400px);
-moz-transform: rotate(56.5deg) translateX(-400px);
-o-transform: rotate(56.5deg) translateX(-400px);
-ms-transform: rotate(56.5deg) translateX(-400px);
transform: rotate(56.5deg) translateX(-400px);
-webkit-transform-origin: 100% 0%;
-moz-transform-origin: 100% 0%;
-o-transform-origin: 100% 0%;
-ms-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
.golliew-ninth .gollask-2 {
top: auto;
bottom: 0;
-webkit-transform: rotate(56.5deg) translateX(400px);
-moz-transform: rotate(56.5deg) translateX(400px);
-o-transform: rotate(56.5deg) translateX(400px);
-ms-transform: rotate(56.5deg) translateX(400px);
transform: rotate(56.5deg) translateX(400px);
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.golliew-ninth .gollent {
background-color: rgba(59,45,44,0.9);
color: #ffffff;
height: 0;
width: 448px;
overflow: hidden;
-webkit-transform: rotate(-33.5deg) translate(-112px, 166px);
-moz-transform: rotate(-33.5deg) translate(-112px, 166px);
-o-transform: rotate(-33.5deg) translate(-112px, 166px);
-ms-transform: rotate(-33.5deg) translate(-112px, 166px);
transform: rotate(-33.5deg) translate(-112px, 166px);
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-o-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transition: all 0.4s ease-in-out 0.3s;
-moz-transition: all 0.4s ease-in-out 0.3s;
-o-transition: all 0.4s ease-in-out 0.3s;
transition: all 0.4s ease-in-out 0.3s;
}
.golliew-ninth a.info {
display: none;
}
.golliew-ninth:hover .gollent {
height: 448px;
width: 448px;
top: 100px;
left: 50px;
-webkit-transform: rotate(0deg) translate(0, 0);
-moz-transform: rotate(0deg) translate(0, 0);
-o-transform: rotate(0deg) translate(0, 0);
-ms-transform: rotate(0deg) translate(0, 0);
transform: rotate(0deg) translate(0, 0);
}
.golliew-ninth:hover .gollask-1, .golliew-ninth:hover .gollask-2 {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.golliew-ninth:hover .gollask-1 {
-webkit-transform: rotate(56.5deg) translateX(113px);
-moz-transform: rotate(56.5deg) translateX(1px);
-o-transform: rotate(56.5deg) translateX(1px);
-ms-transform: rotate(56.5deg) translateX(1px);
transform: rotate(56.5deg) translateX(1px);
}
.golliew-ninth:hover .gollask-2 {
-webkit-transform: rotate(56.5deg) translateX(-112px);
-moz-transform: rotate(56.5deg) translateX(-1px);
-o-transform: rotate(56.5deg) translateX(-1px);
-ms-transform: rotate(56.5deg) translateX(-1px);
transform: rotate(56.5deg) translateX(-1px);
}
.gollund {
overflow: hidden;
text-align: center;
color: #91aab9;
font-family: Courier New;
font-size: 14px;
text-transform: lowercase;
font-style: italic;
}
.gollund:before, .gollund:after {
background-color: #837372;
gollent: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
.gollund:before {
right: 0.5em;
margin-left: -50%;
}
.gollund:after {
left: 0.5em;
margin-right: -50%;
}
.three-columns .column {
width: 50%;
float: left;
}
.gollinfo {
height: 250px;
overflow: auto;
padding: 4px;
font-family: Candara, sans-serif;
font-size: 12px;
color: #dddede;
line-height: 12px;
text-align: justify;
}
div.gollinfo::-webkit-scrollbar {
width: 6px;
}
div.gollinfo::-webkit-scrollbar-button {
width: 6px;
height: 4px;
}
div.gollinfo::-webkit-scrollbar-track {
background: transparent;
}
div.gollinfo::-webkit-scrollbar-thumb {
background:#837372;
}
.gollname {
font-family: Courier New;
font-size: 24px;
color: #91aab9;
padding-top: 6px;
}
a.gollc {
font-size: 8px;
text-decoration: none;
color: black;
}
</style>
<center>
<div class="golliew golliew-ninth">
<img src="http://imguploads.ru/img/2015/02/27/iecu2F.gif" />
<div class="gollask gollask-1"></div>
<div class="gollask gollaskco-2"></div>
<div class="gollent">
<div class="gollname">HOSTAGES, приветствует вас!</div>
<div style="padding: 4px;"><div class="gollinfo"><font color="#837372">♦</font>Вы должны остаться с нами, потому что наш сюжет совершенно уникален. Мы ни на кого не похожи и вы найдете себе теплое местечко возле нашего ведьминского костра.<br /><br />
<font color="#837372">♦</font> Люди, вампиры, оборотни, ведьмы, даже гибриды, мы рады вам всем. Но Маркос изловчился гад перед смертью наложил какое-то заклинание, мы не в курсах какое, знаем лишь то, что супер ниндзя черепашки не пройдут. Еще по округе бродит злой, серый волк и цапает за ляжки всех юных и няшных вампиров, как ты понимаешь, после порции яда попавшего к ним в организм они долго не живут.<br /><br />
<font color="#837372">♦</font> У нас разрешено все в пределах разумного. Хочешь кому-нибудь голову оторвать? Пожалуйста, главное прибери за собой. Любишь нецензурно выражаться? Шериф по головке не погладит, но тоже можно. А секисом заниматься сам бог велел, поэтому плодитесь и размножайтесь, дети мои!<br /><br />
Вербены и аконита тебя, странник! Ты попал на The Vampire Diaries: Hostages и даже не смей нажимать тот красный крестик в правом верхнем углу экрана, потому что таких дневников ты еще не видел. Мы не шутим <s>если только совсем чуть-чуть</s> мы подошли к созданию проекта со всей ответственностью и любовью, в чем ты можешь убедиться самостоятельно, прошвырнувшись по нашим темам. Если ты все еще надеешься уйти незамеченным, знай, мы разучили не один десяток заклинаний, что удержат тебя здесь. Открыл новую вкладку, а там Хостэджис? Да-да-да, это магия, бадди! В общем, располагайся, чувствуй себя как дома<s>, но не забывай, что ты в гостях.</s> Бурбончику, кстати, накапать? У Сальваторе-старшего лучшие запасы, может быть не в мире, но в Мистик Фоллс точно и он любезно поделился с нами. Ладно, все, молчу-молчу, если что надумаешь, ты знаешь, где нас найти!</div><br />
<div class="three-columns">
<div id="clm1" class="column"><div class="gollund">ПРИДЕРЖАННЫЕ РОЛИ</div>
<div class="gollinfo">name here<br />
name here<br />
name here</div></div>
<div id="clm2" class="column"><div class="gollund">ПРИДЕРЖАННЫЕ ВНЕШНОСТИ</div>
<div class="gollinfo">name here<br />
name here<br />
name here</div></div>
</div>
</div>
</div>
</center>
