<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700italic' rel='stylesheet' type='text/css'>
<center>
 <div id="swim">
   <div class="swimtitle">
     <div class="swimtitlef"> Novus rex, nova lex
</div></div>
         <a href="http://shine.b1.jcink.com/index.php?showuser=6723"><div class="swimp2" style="background-image:url(http://i.imgur.com/9rCr69t.png)"></div></a>
   <div class="swimtag">
     <div class="swimtagg" style="top: 37px"><a href="https://novalex.rusff.me/viewtopic.php?id=18">сюжет</a></div>
     <div class="swimtagg" style="top: 70px"><a href="https://novalex.rusff.me/viewtopic.php?id=17">персонажи</a></div>
     <div class="swimtagg" style="top: 103px"><a href="https://novalex.rusff.me/viewtopic.php?id=3">руководство</a></div>
   </div>

   <div class="swimp1" style="background-image: url(http://i.imgur.com/3NHKTFC.png)">
   </div>
   <div class="swimpost">Багряный кровяной оттенок сложно смыть. Отчистить с манжеток, запятнанных и чистой и грязной кровью, отмыть с рук ихор. Гарри Поттер победил. Ценой боли, ценой страха, ценой сотни детских жизней, победа была вырвана, и в магическом мире наступил покой. Да здравствует новый король, а с ним — да здравствует новое мироустройство. Теперь носить на груди знак ордена Седрика — быть Героем, а на запястье Метку — злодеем. За плечами страшные суды над Пожирателями смерти, на прошлых ступенях — непрекращающиеся похороны, слившиеся в одно сплошное черное месиво, а впереди — новый мир. Мир, полный возможностей и правосудия. Мир, где ради жизни не надо убивать.

</div>
 </div>
</center>

<style>
@keyframes hell {
 0% {
   opacity: 1;
 }
 50% {
   opacity: 0.5;
 }
 100% {
   opacity: 1;
 }
}

@-webkit-keyframes hell {
 0% {
   opacity: 1;
 }
 50% {
   opacity: 0.5;
 }
 100% {
   opacity: 1;
 }
}

@-moz-keyframes hell {
 0% {
   opacity: 1;
 }
 50% {
   opacity: 0.5;
 }
 100% {
   opacity: 1;
 }
}

#swim {
 height: 330px;
 width: 480px;
 position: relative;
 border: 10px solid #585858;
 box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
 overflow: hidden
}

.swimtitle {
 height: 165px;
 width: 480px;
 position: absolute;
 background-color: #680000;
}

.swimtitlef {
 height: 165px;
 width: 480px;
 line-height: 165px;
 position: absolute;
 color: #fff;
 font-family: arial;
 text-transform: uppercase;
 font-size: 13px;
 letter-spacing: 2px;
 -moz-animation: hell 3s infinite ease-in-out;
 -webkit-animation: hell 3s infinite ease-in-out;
 animation: hell 3s infinite ease-in-out;
}

.swimp1 {
 height: 165px;
 width: 480px;
 position: absolute;
 top: 165px;
 background-color: #ffffff;
 background-blend-mode: multiply;
 z-index: 2
}

.swimp2 {
 height: 165px;
 width: 240px;
 background-color: #ffffff;
 background-blend-mode: multiply;
 position: absolute
}

.swimtag {
 height: 165px;
 width: 240px;
 position: absolute;
 left: 240px;
 background-color: transparent
}

.swimtagg {
 height: 20px;
 width: 186px;
 line-height: 20px;
 font-family: arial;
 text-transform: uppercase;
 position: absolute;
 left: 25px;
 color: #c5c5c5;
 letter-spacing: 2px;
 border: 2px solid #c5c5c5;
 font-size: 9px
}

.swimtagg::first-letter {
 color: #fa1e1e
}

.swimtagg  a {
 color: #c5c5c5!important;
}

.swimpost {
 height: 145px;
 width: 460px;
 padding: 5px;
 border: 5px solid #250000;
 position: absolute;
 top: 165px;
 background-color: #a2a2a2;
 text-align: justify;
 font-family: tahoma;
 font-size: 12px;
 overflow: auto;
 line-height: 12px
}

.swimpost b {
 font-size: 12px;
 font-weight: 700;
 font-style: italic;
 color: #805c5c;
 letter-spacing: -1px
}

.swimpost::-webkit-scrollbar {
 height: 2px
}

.swimpost::-webkit-scrollbar-thumb {
 background-color: #805c5c
}

#swim .swimtitlef {
 transform: scale(1);
 -webkit-transition: 0.6s ease-in-out;
 -moz-transition: 0.6s ease-in-out;
 transition: 0.6s ease-in-out;
 -webkit-transition-delay: 0.7s
}

#swim:hover .swimtitlef {
 transform: scale(0);
 opacity: 0;
 -webkit-transition: 0.6s ease-in-out;
 -moz-transition: 0.6s ease-in-out;
 transition: 0.6s ease-in-out;
}

#swim .swimtitle {
 left: 0px;
 -webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 transition: 0.5s linear;
}

#swim:hover .swimtitle {
 left: 240px;
 -webkit-transition: 0.5s linear;
 -webkit-transition-delay: 0.7s;
 -moz-transition: 0.5s linear;
 -moz-transition-delay: 0.7s;
 transition: 0.5s linear;
 transition-delay: 0.7s;
}

#swim .swimp2 {
 left: -240px;
 -webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 transition: 0.5s linear;
}

#swim:hover .swimp2 {
 left: 0px;
 -webkit-transition: 0.5s linear;
 -webkit-transition-delay: 0.7s;
 -moz-transition: 0.5s linear;
 -moz-transition-delay: 0.7s;
 transition: 0.5s linear;
 transition-delay: 0.7s;
}

#swim .swimtag {
 top: -240px;
 -webkit-transition: linear 0.6s;
 -moz-transition: linear 0.6s;
 transition: linear 0.6s;
}

#swim:hover .swimtag {
 top: 0px;
 -webkit-transition-delay: 1.2s
}

#swim .swimp1 {
 left: 0px;
 -webkit-transition: 1s linear
}

#swim:hover .swimp1 {
 left: -480px;
 -webkit-transition: 1s linear
}
</style>