Код:
<!--HTML-->
<script type="text/javascript">
function move(id,spd) {
var obj=document.getElementById(id);
var max=-obj.offsetHeight+obj.parentNode.offsetHeight;
var top=parseInt(obj.style.top);
if ((spd>0&&top<=0)||(spd<0&&top>=max)){
obj.style.top=top+spd+"px";
move.to=setTimeout(function(){ move(id,spd); },20);
}
else obj.style.top=(spd>0?0:max)+"px";
}
</script>
<style type="text/css">
.faq2 { width: 620px; height: 800; margin-left: -3px; padding-top: 120px; padding-bottom: 30px; display: ; background: url(http://funkyimg.com/i/28hED.png) top no-repeat, url(http://funkyimg.com/i/28hET.png) bottom no-repeat, url(http://funkyimg.com/i/28hEF.png) repeat-y;}
#rt1 img { float: right; margin: 0 2px 1px 0; border: 1px solid #D8EAC2; padding: 0px; width: 80px; }
#rt2 img { float: left; margin: 0 2px 1px 0; border: 1px solid #D8EAC2; padding: 0px; width: 80px; }
</style>
<center>
<div class="faq2">
<br>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lily+Script+One' rel='stylesheet' type='text/css'>
<center>
<div style="width: 450px; background: #; padding: 20px;">
<div style="font-family: lobster; font-size: 35px; color: #01909f; margin-left: 163px; line-height: 70%;">VIP-lines</div>
<div style="width: 220px; height: 8px; background: #67bf1c; border-left: 80px solid #0cc3d3; border-right: 150px solid #074e70;"></div>
<div style="width: 500px; height: auto; font-family: Cuprum; font-size: 14px; line-height: 95%; color: #3b3b3b; overflow: ; text-align: justify; padding-top: 20px; margin-bottom: -15px; margin-left: -30px;">
<center><font color="#017586" face="lobster">Стартовый набор!</font>
<table><tr><td><center>
<div class="libship"><div class="album1">
<div class="libship4"><div class="libship5">
<center><p><img class="grayscale" src="http://funkyimg.com/i/2aXCP.png" title="слушать музыку в наушниках"> <img src="http://funkyimg.com/i/2aXEk.png" title="подраться из-за человека, который нравится"> <img src="http://funkyimg.com/i/2aXEj.png" title="очутиться в школе">
<br><img src="http://funkyimg.com/i/2aXEm.png" title="держать в руке алую розу"> <img src="http://funkyimg.com/i/2aXFr.png" title="мыть пол в туалете">
<br><img src="http://funkyimg.com/i/2aXCA.png" title="оставить 10 песен в теме музыки"></center>
</div>
</div>
<a href="http://candylandcouture.b1.jcink.com/index.php?showuser=3956">
<div class="libship3">
BTS - Skool Luv Affair
</div>
</a>
</div></div>
</center></td>
<td><center>
<div class="libship"><div class="album2">
<div class="libship4"><div class="libship5">
<center><p><img class="grayscale" src="http://funkyimg.com/i/2aXKk.png" title="лететь в самолете">
<img src="http://funkyimg.com/i/2aXKj.png" title="танцевать на пляже">
<img src="http://funkyimg.com/i/2aXKi.png" title="пить алкоголь у бассейна">
<br><img src="http://funkyimg.com/i/2aXKh.png" title="носить цветы в волосах">
<img src="http://funkyimg.com/i/2aXKg.png" title="встречать закат на берегу моря">
<br><img src="http://funkyimg.com/i/2aXKf.png" title="проходить с минимумом одежды на аватаре"></center>
</div>
</div>
<a href="http://candylandcouture.b1.jcink.com/index.php?showuser=3956">
<div class="libship3">
GG - Party
</div>
</a>
</div></div>
</center></td></tr>
<tr><td><center>
<div class="libship"><div class="album3">
<div class="libship4"><div class="libship5">
<center><p><img class="grayscale" src="http://funkyimg.com/i/2aZnM.png" title="оказаться на крыше">
<img src="http://funkyimg.com/i/2aZnN.png" title="садиться на шпагат или в шутку пытаться">
<img src="http://funkyimg.com/i/2aZnQ.png" title="смотреть фильм/сериал про зомби">
<br><img src="http://funkyimg.com/i/2aZnR.png" title="изображать зомби">
<img src="http://funkyimg.com/i/2aZnS.png" title="ходить в спортивной форме">
<br><img src="http://funkyimg.com/i/2aZnP.png" title="быть онлайн больше 6 часов (предоставить скриншот)"></center>
</div>
</div>
<a href="http://candylandcouture.b1.jcink.com/index.php?showuser=3956">
<div class="libship3">
TWICE - The Story Begins
</div>
</a>
</div></div>
</center></td>
<td><center><div class="libship"><div class="album4">
<div class="libship4"><div class="libship5">
<center><p><img class="grayscale" src="http://funkyimg.com/i/2aZia.png" title="быть связанным(ой)">
<img src="http://funkyimg.com/i/2aZib.png" title="строить из себя плохого парня/девочку">
<img src="http://funkyimg.com/i/2aZic.png" title="попасть в дтп">
<br><img src="http://funkyimg.com/i/2aZid.png" title="держать в руке пистолет">
<img src="http://funkyimg.com/i/2aZie.png" title="раскидываться деньгами">
<br><img src="http://funkyimg.com/i/2aZig.png" title="оставить 7 фото в инстаграме"></center>
</div>
</div>
<a href="http://candylandcouture.b1.jcink.com/index.php?showuser=3956">
<div class="libship3">
TAEMIN - Press It
</div>
</a>
</div></div>
</center></td></tr>
<tr><td><center>
<div class="libship"><div class="album5">
<div class="libship4"><div class="libship5">
<center><p><img class="grayscale" src="http://funkyimg.com/i/2aZiz.png" title="напиться с друзьями">
<img src="http://funkyimg.com/i/2aZiA.png" title="улететь в другую страну">
<img src="http://funkyimg.com/i/2aZiB.png" title="играть в баскетбол">
<br><img src="http://funkyimg.com/i/2aZiC.png" title="узнать об измене">
<img src="http://funkyimg.com/i/2aZiD.png" title="смотреть фейерверк">
<br><img src="http://funkyimg.com/i/2aZiE.png" title="оставить 25 реклам форума"></center>
</div>
</div>
<a href="http://candylandcouture.b1.jcink.com/index.php?showuser=3956">
<div class="libship3">
WINNER - EXIT : E
</div>
</a>
</div></div>
</center></td>
<td><center><div class="libship"><div class="album6">
<div class="libship4"><div class="libship6">
<center><p><img class="grayscale" src="http://funkyimg.com/i/2aZjk.png" title="пойти на прогулку в лес">
<img src="http://funkyimg.com/i/2aZjh.png" title="сплести венок">
<img src="http://funkyimg.com/i/2aZji.png" title="прокатиться на лодке">
<br><img src="http://funkyimg.com/i/2aZjj.png" title="покормить белок (или других мелких диких животных)">
<img src="http://funkyimg.com/i/2aZjg.png" title="любоваться облаками">
<br><img src="http://funkyimg.com/i/2aZnL.png" title="проходить с венком на аватаре"></center>
</div>
</div>
<a href="http://candylandcouture.b1.jcink.com/index.php?showuser=3956">
<div class="libship3">
Oh my girl - Closer
</div>
</a>
</div></div>
</center></td></tr>
<tr><td><center>
<div class="libship"><div class="album7">
<div class="libship4"><div class="libship5">
<center><p><img class="grayscale" src="http://funkyimg.com/i/2aZiz.png" title="напиться с друзьями">
<img src="http://funkyimg.com/i/2aZiA.png" title="улететь в другую страну">
<img src="http://funkyimg.com/i/2aZiB.png" title="играть в баскетбол">
<br><img src="http://funkyimg.com/i/2aZiC.png" title="узнать об измене">
<img src="http://funkyimg.com/i/2aZiD.png" title="смотреть фейерверк">
<br><img src="http://funkyimg.com/i/2aZiE.png" title="оставить 25 реклам форума"></center>
</div>
</div>
<a href="http://candylandcouture.b1.jcink.com/index.php?showuser=3956">
<div class="libship3">
WINNER - EXIT : E
</div>
</a>
</div></div>
</center></td>
<td><center><div class="libship"><div class="album8">
<div class="libship4"><div class="libship6">
<center><p><img class="grayscale" src="http://funkyimg.com/i/2aZk3.png" title="говорить, что видишь Чешира/говорить с ним">
<img src="http://funkyimg.com/i/2aZk4.png" title="заблудиться в лабиринте">
<img src="http://funkyimg.com/i/2aZk5.png" title="куда-то бежать, торопиться">
<br><img src="http://funkyimg.com/i/2aZk6.png" title="играть в карты">
<img src="http://funkyimg.com/i/2aZk7.png" title="устроить безумное чаепитие">
<br><img src="http://funkyimg.com/i/2aZka.png" title="оставить во флуде 40 сообщений"></center>
</div>
</div>
<a href="http://candylandcouture.b1.jcink.com/index.php?showuser=3956">
<div class="libship3">
Oh my girl - Closer
</div>
</a>
</div></div>
</center></td></tr>
<tr><td><center>
<div class="libship"><div class="album9">
<div class="libship4"><div class="libship5">
<center><p><img class="grayscale" src="http://funkyimg.com/i/2aZoe.png" title="рисовать на стенах">
<img src="http://funkyimg.com/i/2aZof.png" title="подзадоривать кого-то">
<img src="http://funkyimg.com/i/2aZoh.png" title="устроить импровизированный театр теней">
<br><img src="http://funkyimg.com/i/2aZoi.png" title="играть в детские игры (догонялки, прятки и т.д.)">
<img src="http://funkyimg.com/i/2aZoj.png" title="играть в видео-игры">
<br><img src="http://funkyimg.com/i/2aZok.png" title="оставить 35 мыслей"></center>
</div>
</div>
<a href="http://candylandcouture.b1.jcink.com/index.php?showuser=3956">
<div class="libship3">
Up10tion - Bravo!
</div>
</a>
</div></div>
</center></td>
<td><center><div class="libship"><div class="album10">
<div class="libship4"><div class="libship6">
<center><p><img class="grayscale" src="http://funkyimg.com/i/2aZk3.png" title="говорить, что видишь Чешира/говорить с ним">
<img src="http://funkyimg.com/i/2aZk4.png" title="заблудиться в лабиринте">
<img src="http://funkyimg.com/i/2aZk5.png" title="куда-то бежать, торопиться">
<br><img src="http://funkyimg.com/i/2aZk6.png" title="играть в карты">
<img src="http://funkyimg.com/i/2aZk7.png" title="устроить безумное чаепитие">
<br><img src="http://funkyimg.com/i/2aZka.png" title="оставить во флуде 40 сообщений"></center>
</div>
</div>
<a href="http://candylandcouture.b1.jcink.com/index.php?showuser=3956">
<div class="libship3">
Oh my girl - Closer
</div>
</a>
</div></div>
</center></td></tr></table>
<style type="text/css">
.libship {
width: 180px;
height: 210px;
padding: 10px;
border: 1px solid #eee;
background-color: #fefefe;
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.album1 {
width: 180px;
height: 210px;
background-image: url(http://funkyimg.com/i/2aXAh.png);
background-repeat: no-repeat;
-webkit-background-size: 180px 180px;
background-size: 180px 180px;
position: relative;
overflow: hidden
}
.album2 {
width: 180px;
height: 210px;
background-image: url(http://funkyimg.com/i/2aXHK.png);
background-repeat: no-repeat;
-webkit-background-size: 180px 180px;
background-size: 180px 180px;
position: relative;
overflow: hidden
}
.album3 {
width: 180px;
height: 210px;
background-image: url(http://funkyimg.com/i/2aXYR.png);
background-repeat: no-repeat;
-webkit-background-size: 180px 180px;
background-size: 180px 180px;
position: relative;
overflow: hidden
}
.album4 {
width: 180px;
height: 210px;
background-image: url(http://funkyimg.com/i/2aZif.png);
background-repeat: no-repeat;
-webkit-background-size: 180px 180px;
background-size: 180px 180px;
position: relative;
overflow: hidden
}
.album5 {
width: 180px;
height: 210px;
background-image: url(http://funkyimg.com/i/2aZiy.png);
background-repeat: no-repeat;
-webkit-background-size: 180px 180px;
background-size: 180px 180px;
position: relative;
overflow: hidden
}
.album6 {
width: 180px;
height: 210px;
background-image: url(http://funkyimg.com/i/2aZjf.png);
background-repeat: no-repeat;
-webkit-background-size: 180px 180px;
background-size: 180px 180px;
position: relative;
overflow: hidden
}
.album8 {
width: 180px;
height: 210px;
background-image: url(http://funkyimg.com/i/2aZk8.png);
background-repeat: no-repeat;
-webkit-background-size: 180px 180px;
background-size: 180px 180px;
position: relative;
overflow: hidden
}
.album9 {
width: 180px;
height: 210px;
background-image: url(http://funkyimg.com/i/2aZoE.png);
background-repeat: no-repeat;
-webkit-background-size: 180px 180px;
background-size: 180px 180px;
position: relative;
overflow: hidden
}
.libship3 {
width: 180px;
height: 30px;
position: absolute;
bottom: 0;
left: 0;
background-color: #b0b0b0;
line-height: 30px;
color: #b0b0b0;
font-family: Economica;
font-size: 15px;
text-shadow: #fff 1px 1px 0px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 1px
}
.libship3 a {
color: #f3f3f3;
font-weight: normal;
text-transform: uppercase
}
.libship4 {
width: 180px;
height: 180px;
position: absolute;
top: 0px;
left: 0px;
background-color: #fcfcfc;
background-image: url(http://funkyimg.com/i/2aXBd.png);
font-family: lato;
font-size: 10px;
text-align: justify;
padding-top: 10px;
line-height: 1%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
-moz-transition: all 0.7s ease-out;
-o-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
transition: all 0.7s ease-out
}
.libship5 {
width: 180px;
height: 180px;
padding: 0px;
position: relative;
left: 0px;
overflow: auto
}
.album1:hover .libship4 {
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
transition: all 1s ease-in;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1)
}
.album2:hover .libship4 {
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
transition: all 1s ease-in;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1)
}
.album3:hover .libship4 {
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
transition: all 1s ease-in;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1)
}
.album4:hover .libship4 {
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
transition: all 1s ease-in;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1)
}
.album5:hover .libship4 {
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
transition: all 1s ease-in;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1)
}
.album6:hover .libship4 {
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
transition: all 1s ease-in;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1)
}
.album8:hover .libship4 {
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
transition: all 1s ease-in;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1)
}
.album9:hover .libship4 {
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
transition: all 1s ease-in;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1)
}
.libship5 span {
color: #84bd92;
margin-right: 3px
}
</style>
<link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'>
</center>
<br><br><br><br>
</div></center>
