коды
Сообщений 1 страница 4 из 4
Поделиться22017-01-05 21:27:50
вверх
Код:<!-- ники модера --> <style> .modlist {display: none !important;} </style> <style type="text/css"> @font-face { font-family: 'Lumberjack'; src: url('https://forumstatic.ru/files/0018/0f/9e/67188.eot?'), url('https://forumstatic.ru/files/0018/0f/9e/94677.woff') format('woff'), url('https://forumstatic.ru/files/0018/0f/9e/29812.ttf') format('truetype'), url('https://forumstatic.ru/files/0018/0f/9e/34046.svg#svgFontName') format('svg'); font-weight: normal; font-style: normal; } </style> <!-- БАННЕРЫ НОВОСТЕЙ В ШАПКЕ --> <div style="position: absolute;width: 151px;height: 160px;top: 232px;left: 825px;"> <div class="slider-box"> <div class="slider" style="margin-left: -1120px;"> <a href="http://realfocus.rusff.me/viewtopic.php?id=112#p4419"><img src="http://savepic.ru/12561405m.png"></a> <a href="http://realfocus.rusff.me/viewtopic.php?id=48"><img src="http://savepic.ru/12551599m.png"></a> <a href="http://realfocus.rusff.me/viewtopic.php?id=51"><img src="http://savepic.ru/12530095m.png"></a> <a href="http://realfocus.rusff.me/viewtopic.php?id=29"><img src="http://savepic.ru/12542382.png"></a> </div></div></div> <!--НОВОСТИ--> <div style="overflow-x: auto;height: 110px;width: 182px;padding-right: 5px;margin-left: 764px;margin-top: 82px;position: absolute;"> <div style="font: 10px verdana;color: #655a8a;text-shadow: 1px 1px white;letter-spacing: 0px;line-height: 7pt !important;text-align: justify;">"<b>Н</b>евежество побуждает нас к попытке. Невежество открыто для мечтаний, а пытливое мечтание - сила. Знай Колумб получше космографию, он не открыл бы Америки." - именно это выражение и дало толчок нашему рвению. И мы рады приветствовать Вас, дорогие гости на нашем форуме! Скорее стягивайте слои тяжелой верхней одежды и проходи в гостевую, дабы получить чашечку какао и присоединиться к нам! </div> </div> <!--ЛУЧШАЯ ПАРА--> <div style="width:260px;margin-left: 2px;margin-top: 101px;position: absolute;"> <div class="Hoverbuttons"><a href="ССЫЛКА" title="ИМЯ ПЕРСОНАЖА"><img src="http://i.imgur.com/1Pk6u3R.png"></a> </div> </div> <!--ЛУЧШИЙ ЭПИЗОД--> <div style="width:260px;margin-left: -36px;margin-top: 434px;position: absolute;"> <a href="ССЫЛКА" title="ИМЯ ПЕРСОНАЖА"><img src="http://i.imgur.com/mE8Xs5H.png" class="Hoverbuttons"></a> </div> <!-- ПОСТ --> <div style="position: absolute;margin-top: 549px;margin-left: 403px;padding-right: 3px;font: 10px verdana;color: #377484;width: 200px;height: 88px;overflow-y: auto;text-align: justify;line-height: 6pt !important;text-shadow: 1px 1px white;">Если проснувшись, ты всем организмом чувствуешь, что как-то неправильно встретил Новый Год, то встречу требуется повторить... </div> <!-- ПОСТ картинка --> <div style="position: absolute;margin-top: 549px;margin-left: 316px;"><a fref="ССЫЛКА на пост"><img src="http://i.imgur.com/e5QzmPr.png" title="ИМЯ ПЕРСОНАЖА"></a> </div> <!-- ЦИТАТА --> <div style="position: absolute;margin-top: 603px;margin-left: 779px;padding-right: 3px;font: 10px verdana;color: #705780;width: 159px;height: 42px;overflow-y: auto;text-align: justify;line-height: 6pt !important;text-shadow: 1px 1px white;">"Зима пробуждает аппетит. Пока на улицах лежит снег, шоколадное пирожное — лучшее лекарство." </div> <!--АКТИВНЫЕ ИГРОКИ--> <div class="play" style="margin-left: -4px;margin-top: 549px;position: absolute;"> <a href="ССЫЛКА" title="ИМЯ ПЕРСОНАЖА"><img src="http://i.imgur.com/q7U8MCj.png" class="Hoverbuttons"></a> <a href="ССЫЛКА" title="ИМЯ ПЕРСОНАЖА"><img src="http://i.imgur.com/q7U8MCj.png" class="Hoverbuttons"></a> <a href="ССЫЛКА" title="ИМЯ ПЕРСОНАЖА"><img src="http://i.imgur.com/q7U8MCj.png" class="Hoverbuttons"></a> <a href="ССЫЛКА" title="ИМЯ ПЕРСОНАЖА"><img src="http://i.imgur.com/q7U8MCj.png" class="Hoverbuttons"></a> <a href="ССЫЛКА" title="ИМЯ ПЕРСОНАЖА"><img src="http://i.imgur.com/q7U8MCj.png" class="Hoverbuttons"></a> </div> <!--АКТИВНЫЙ ФЛУД--> <div class="play" style="margin-left: 652px;margin-top: 549px;position: absolute;"> <a href="ССЫЛКА" title="ИМЯ ПЕРСОНАЖА"><img src="http://i.imgur.com/q7U8MCj.png" class="Hoverbuttons"></a> <a href="ССЫЛКА" title="ИМЯ ПЕРСОНАЖА"><img src="http://i.imgur.com/q7U8MCj.png" class="Hoverbuttons"></a> <a href="ССЫЛКА" title="ИМЯ ПЕРСОНАЖА"><img src="http://i.imgur.com/q7U8MCj.png" class="Hoverbuttons"></a> <a href="ССЫЛКА" title="ИМЯ ПЕРСОНАЖА"><img src="http://i.imgur.com/q7U8MCj.png" class="Hoverbuttons"></a> <a href="ССЫЛКА" title="ИМЯ ПЕРСОНАЖА"><img src="http://i.imgur.com/q7U8MCj.png" class="Hoverbuttons"></a> </div> <!-- ССЫЛКИ --> <div style="position: absolute;margin-left: -99px;margin-top: 188px;"> <a href="http://realfocus.rusff.me/viewtopic.php?id=6" class="urls">гостевая</a> </div> <div style="position: absolute;margin-left: -94px;margin-top: 211px;"> <a href="http://realfocus.rusff.me/viewtopic.php?id=7" class="urls">биржа труда</a> </div> <div style="position: absolute;margin-left: -90px;margin-top: 233px;"> <a href="http://realfocus.rusff.me/viewtopic.php?id=5" class="urls">фак</a> </div> <div style="position: absolute;margin-left: -85px;margin-top: 256px;"> <a href="http://realfocus.rusff.me/viewtopic.php?id=2" class="urls">лица</a> </div> <div style="position: absolute;margin-left: -82px;margin-top: 279px;"> <a href="http://realfocus.rusff.me/viewtopic.php?id=8" class="urls">анкета</a> </div> <div style="position: absolute;margin-left: -77px;margin-top: 303px;"> <a href="http://realfocus.rusff.me/viewtopic.php?id=18#p21" class="urls">личное звание</a> </div> <div style="position: absolute;margin-left: -72px;margin-top: 325px;"> <a href="http://realfocus.rusff.me/viewtopic.php?id=12" class="urls">плашки</a> </div> <div style="position: absolute;margin-left: -68px;margin-top: 348px;"> <a href="http://realfocus.rusff.me/viewtopic.php?id=25#p36" class="urls">реклама</a> </div> <!-- АДМИНЫ --> <div class="ams" style="position: absolute;margin-top: 612px;margin-left: 40px;font: 20px lumberjack;text-align: center;color: #4846b9;text-shadow: 1px 1px #fff;"> <a href="http://realfocus.rusff.me/profile.php?id=4">ivanka<span><img src="http://68.media.tumblr.com/35c90e97891bbac91fcd191c339d7a45/tumblr_inline_oghsamd9V41rlxi6w_540.png" style="boder-radius: 50px;"></span></a> : <a href="http://realfocus.rusff.me/profile.php?id=5">vivien<span><img src="https://68.media.tumblr.com/3c3a1b628359e54f610c80d08ec2cef7/tumblr_inline_ogg9sxkUmb1tojlms_540.png" style="boder-radius: 50px;"></span></a> : <a href="http://realfocus.rusff.me/profile.php?id=7">octavia<span><img src="http://68.media.tumblr.com/0f67192b5736b20e95a3a6efbac25543/tumblr_inline_nq3w9jkVyb1rlxi6w_540.png" style="boder-radius: 50px;"></span></a> </div> <!-- КОНЕЦ ТАБЛИЦЫ--> <!--УБРАТЬ ОТОБРАЖЕНИЕ РЕДАКТИРОВАНИЯ В ПОСТАХ--> <style> .lastedit {display:none;} </style> <!--НЕТ НАГРАД--> <style type="text/css"> li#navawards {display: none;} </style> <style type="text/css"> #wrapper {width: 450px;} /* вкладки доп смайлов */ ul.tabs {height: 25px;line-height: 20px;margin: 0 0 3px;list-style: none;} ul.tabs li {float: left;margin-right: 1px; cursor:pointer;} ul.tabs li a {background: url("http://flowplayer.org/img/global/tabs.png") no-repeat scroll -652px 0 transparent;color: #0557B5;cursor: pointer;display: block;margin-bottom: -1px;padding: 0 14px 1px;position: relative;text-decoration: none;width: 84px;} ul.tabs li a:hover {color:#0557B5;padding: 0 14px;background: url("http://flowplayer.org/img/global/tabs.png")no-repeat scroll;background-position: -652px -31px; text-decoration:none;} ul.tabs li.tab-current a {color: #0557B5;padding: 0px 14px 2px;border:medium hidden;line-height: 22px;background-position: -652px -62px;} ul.tabs li.tab-current a:hover {color: #0557B5;} div.t2,div.t3,div.t4 {display: none;width: 450px;} </style>
Поделиться32017-01-05 21:29:02
низ
<script type="text/javascript">
$(document).ready(function(){
$('img.a-info,.my-tabs>span').click(function(){
$("li.tab-a .code-box").each(function(){
if($(this).text().indexOf('<!--HTML-->')!=-1){
$(this).wrap('<div class="htmldemo"></div>')
$(this).replaceWith($('.htmldemo').text().split('<!--HTML-->')[1]);}
});});});
</script><!--САЛАЙДЕР-->
<style>
.slider-box{
width: 151px;
height:160px;
overflow:hidden;
}
.slider{
position:relative;
width:1000px;
height:100px;
}
.slider img{
float:left;
z-index:0;
}
</style><script>
$(function() {
var width=$('.slider-box').width(); // Ширина слайдера.
interval = 3000; // Интервал смены слайдов.$('.slider img:last').clone().prependTo('.slider'); // Копия последнего слайда помещается в начало.
$('.slider img').eq(1).clone().appendTo('.slider'); // Копия первого слайда помещается в конец.
$('.slider').css('margin-left', -width); // Контейнер .slider сдвигается влево на ширину одного слайда.
setInterval('nextSlide()',interval); // Запускается функция nextSlide(), выполняющая смену слайдов.
});
function nextSlide(){var margin = parseInt($('.slider').css('marginLeft')); // Текущее смещение блока .slider
width=$('.slider-box').width(), // Ширина слайдера.
slidersAmount=$('.slider').children().length; // Количество слайдов в слайдере.
if(margin!=(-width*(slidersAmount-1))) // Если текущий слайд не последний,
{
margin=margin-width; // то значение margin уменьшается на ширину слайда.
}else{ // Если показан последний слайд,
$('.slider').css('margin-left', -width); // то блок .slider возвращается в начальное положение,
margin=-width*2;
}
$('.slider').animate({marginLeft:margin},1000); // Блок .slider смещается влево на 1 слайд.
};
</script><!--кнопка хтмл в быстром ответе-->
<style>
#button-html {background-image:url('http://funkyimg.com/i/21TAY.png'); padding:0; line-height:0; background-position:center; background-repeat:no-repeat; height:26px; width:100%}
</style>
<script type="text/javascript">
if(form=document.getElementById("form-buttons"))
form.getElementsByTagName("tr")[0].insertCell(12).innerHTML="<img src='/i/blank.gif' id='button-html' onclick=\"bbcode('Код:[html]', '');\"/>"
</script><!— HTML в постах —>
<script type="text/javascript">
function Transform_Code_Box_in_HTML(aX){
var TemLnk=aX.replace(/^(.*viewtopic\.php\?id=\d*).*$/ig,"$1");
var PstId=aX.replace(/^.*viewtopic\.php\?id=.*(#p\d+)$/ig,"$1");
var L=document.URL.replace(TemLnk,'');
if(L!=document.URL&&(L.slice(0,1)).search(/\d/ig)==-1 ){
L=$("div.topic "+PstId);
if(L.length==1){
var Lhtm=L.find(".post-content .code-box:first .scrollbox pre").text();
L.find(".post-content .code-box:first").replaceWith(Lhtm)
}}}
function Demo_HTML(Ts){var Ll=Ts.parents(".htmldemo").find(".code-box .scrollbox pre").text();
Ts.parents(".htmldemo").after('<div class="demHtml">'+Ll+'</div>');Ts.replaceWith(DemoButt0);
}
$(document).ready(function() {
$("#pun-viewtopic .post .code-box").each(function(){
if($(this).text().indexOf('[html]')!=-1){
$(this).wrap('<div class="htmldemo"></div>')
$(this).replaceWith($('.htmldemo').text().split('[html]')[1]);
}
});
});
</script><script type="text/javascript"><!--Своя картинка в каждую категорию -->
$(document).ready(function(){
myarray=new Array(
"1", "http://i.imgur.com/cJHExC4.png",
"2", "http://i.imgur.com/VVVlZxa.png",
"3", "http://i.imgur.com/J7ixnXa.png",
"4", "http://i.imgur.com/3qNbS1n.png",
"5", "http://i.imgur.com/wNxFH4k.png",
"6", "http://i.imgur.com/BF02Uim.png",
"Статистика форума", "http://i.imgur.com/8lznAjt.png"
)
$("#pun-index div.category h2,#pun-index #pun-stats h2").each(function (i) {
for(q=0;q<myarray.length;q++){
var cssObj = {
"height":"172px",
"width":"1015px",
"background-color": "transparent",
"text-align": "center",
"font-size": "0",
"margin-left": "-55px",
"margin-bottom": "5px",
"background-image":"url("+myarray[q+1]+")",
"background-repeat":"no-repeat" //Последний элемент без запятой!
}
if($(this).children("span").text()==myarray[q])$(this).css(cssObj);
q++}
});
});
</script><!--СЧЕТЧИК СИМВОЛОВ-->
<script type="text/javascript">
var nrisunok="https://forumupload.ru/uploads/0000/0a/f2/68797-1.gif";
if( (document.getElementById("navpm").innerHTML.indexOf("(") != -1))
{
document.getElementById("navpm").innerHTML="<img src='"+nrisunok+"'> "+document.getElementById("navpm").innerHTML;
};
</script><script>var a,L,epl=$("#main-reply"),str='<small id="plng" style="border:1px solid;padding:2px 3px;margin:0 20px 0 10px;">Написано символов: <b>00</b> </small>';epl.parents("fieldset").find("legend").prepend(str);function epl3(){a=epl.val().length;if(a>9){L=''}else{L='0'};$("#plng b").text(L+a)};epl3();$(".pl-quote").click(function (){setTimeout('epl3()',100)});epl.bind('mouseout mousemove keydown keypress keyup',function(e){epl3()});</script>
<!--КНОПКИ ВВЕРХ ВНИЗ-->
<div class="go-up" id='ToTop'><img src="http://i.imgur.com/SoQw3Ss.png" border="0" /></div>
<div class="go-down" id='OnBottom'><img src="http://i.imgur.com/inTuqF9.png" border="0" /></div>
<style>
.go-up,.go-down {
display:none;
position: fixed;
right: 30px;
z-index: 9999;
cursor: pointer;
opacity: .7;
margin-bottom: 70px;
width: 41px;
height: 41px;
}
.go-up {
bottom:170px; /*положение от низа окна браузера верхняя кнопка*/
}
.go-down {
bottom:114px; /*положение от низа окна браузера нижняя кнопка кнопка*/
}
.go-down:hover,.go-up:hover {
opacity:1;
}
</style>
<!--ВВЕРХ ВНИЗ-->
<script type="text/javascript">
$(function(){
if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow")
else $("#ToTop").fadeIn("slow")
});
if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow")
else $("#OnBottom").fadeIn("slow")
});
$("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})
$("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
});
</script><!-- аватар гостя и голого профиля -->
<script type="text/javascript">
var DefAvtr="http://i.imgur.com/ovuUnGM.png"; //Для Юзера
var GuestAvtr="http://i.imgur.com/ovuUnGM.png";//Для Гостя
$("li.pa-title").each(function(){
var b = DefAvtr;if($(this).text()=='Гость')b = GuestAvtr;
var s='<li class="pa-avatar item2"><img class="defavtr" src="'+b+'" alt="Аватар"/></li>';
if (($(this).parent("ul").find("li.pa-avatar").html())==null){$(this).after(s);};});
</script><!-- Дополнительные поля-->
<script type="text/javascript">
var A=[1,2,3,4,5]
$(".post .post-author li").each(function (){
for(var i=0; i<A.length;i++){if($(this).hasClass("pa-fld"+A[i])){
$(this).html($(this).html().replace(/^[^:]*:/,''));}};});
</script>
<!-- Конец --><!--ПИАР-->
<style>.Myimge {position:absolute;margin-top: 0px;margin-left: 195px;}</style>
<script type="text/javascript">
PiarNik="снеговик";
PiarPas="1111";
var L="<div id=\"PR_loginDiv\" style=\"display:none;\">\
<form id=\"form_login\" name=\"login\" method=\"post\" action=\"login.php?action=in\" onsubmit=\"return check_form()\">\
<fieldset>\
<input type=\"hidden\" name=\"form_sent\" value=\"1\"/>\
<input type=\"text\" id=\"fld1\" name=\"req_username\" size=\"21\" maxlength=\"25\"/>\
<input type=\"text\" id=\"fld2\" name=\"req_password\" size=\"7\" maxlength=\"16\"/>\
<input type=\"submit\" class=\"button\" name=\"login\"/>\
</fieldset>\
</form>\
</div>\
<li id=\"navpiar\"><a onclick=\"PiarIn()\"><span style=\"cursor:pointer\">Пиар-вход</span></a></li>";
if($("#navlogin").html()!=null){
$("#navlogin").after(L) //navlogin
$("#PR_loginDiv #fld1").val(PiarNik)
$("#PR_loginDiv #fld2").val(PiarPas)
function PiarIn () {$("#PR_loginDiv input[type='submit']").click();}
}
</script><!--ВСТАВИТЬ КАРТИНКУ-->
<script>
var oldIMG="<td id=\"button-image\" title=\"Вставить картинку\"><img onclick=\"bbcode('--')\" src=\"/i/blank.gif\"/><b><p style=\"z-index:20;position:absolute;height14px;margin:-15px 0 0 22px;\">2</p></b></td>"
$("#button-image").after(oldIMG);
</script><!-- ВЫДЕЛИТЬ КОД -->
<script type="text/javascript">
function select_text(elem) {
if(window.getSelection) {
var s=window.getSelection();
if(s.setBaseAndExtent){
s.setBaseAndExtent(elem,0,elem,elem.innerText.length-1);
}
else {
var r=document.createRange();
r.selectNodeContents(elem);
s.removeAllRanges();
s.addRange(r);
}
}
else if(document.getSelection){
var s=document.getSelection();
var r=document.createRange();
r.selectNodeContents(elem);
s.removeAllRanges();
s.addRange(r);
}
else if(document.selection){
var r=document.body.createTextRange();
r.moveToElementText(elem);
r.select();
}
}
</script>
<script type="text/javascript">
var div = document.getElementById('pun-main').getElementsByTagName('div');
for(x in div){
if(div[x].className=='code-box'){
div[x].getElementsByTagName('strong')[0].innerHTML = '<a href="#" onclick="select_text(this.parentNode.parentNode.childNodes[1].getElementsByTagName(\'pre\')[0]); return false;">Выделить код</a>';
}
}
</script><!--//Новые сообщения в меню навигации. Начало// -->
<script type="text/javascript">
if(GroupID != 3) { $('#pun-ulinks .container').prepend('<li class="item1"><a href="/search.php?action=show_new">Новые сообщения</a></li>'); }
</script>
<!--//Новые сообщения в меню навигации. Конец// --><!-- Всплывающая таблица с вкладками, в топике, с инфой о персонаже -->
<script img-data="http://sa.uploads.ru/SoT3N.png" src="https://forumstatic.ru/files/0013/44/56/57946.js" forum="16"></script><!--//End//Всплывающая таблица с вкладками, в топике, с инфой о персонаже// -->
<style type="text/css">
/*Стиль иконки в мини-профиле*/
img.a-info{
padding:2px;
display:block!important;
cursor:pointer;
/*border-radius:50%;*/
position:absolute;
text-align:left!important;
}/* Затемняющий фон */
#pre-wrap {
margin:0;
top:0;bottom:0;
left:0;right:0;
width:100%;
height:100%;
position:fixed;
z-index:20000;
background: rgba(0,0,0,.65);
}/*Подвижка иконки закрытия таблички*/
.my-tabs > img.close {
float:right;
margin:0 -35px 0 0!important; /*чем больше - тем правее*/
width:27px;
}
/* Корневой таб(UL) */
.my-tabs{
display:block;
z-index:30000;
position:absolute;
max-height:550px; /*максимальная высота таблички*/
}
/* Стиль "Ушка" вкладок */
.my-tabs>span{
width: 110px!important;
height: 17px!important;
display:block!important;
position:relative;
z-index:10;
float:left;
padding-top: 7px;
margin-left: 30px;
margin-bottom: 22px!important;
border-radius: 0px ;text-align:center;
font-size: 9px;
color: #366670;
text-shadow: 1px 1px 2px #cadce0;
letter-spacing: 1px;
text-transform: uppercase;
font-family: Cambria;
font-weight: normal;
background: #afc8cd;
box-shadow: inset 0 0 10px #698c93;
}
/* Cдвиг самого первого "Уха" */
.my-tabs>span:first-child{
margin-left: 30px;
}
/* Активное "Ушко" */
.my-tabs>span.selected{
opacity:1;
border-bottom-color:transparent!important;
}
/* Стиль вкладки(LI)*/
.my-tabs>.tab-a{
padding: 15px;
width:700px;
height:500px;
position:relative;z-index:1;
display:none;
overflow-y:auto;
overflow-x:hidden;
text-align:center;
vertical-align:middle;
background: #afc8cd;
box-shadow: inset 0 0 15px #698c93;
border-radius: 0px;
border-top: 5px solid #bfd6da;
border-bottom: 5px solid #bfd6da;
border-left: 5px solid #bfd6da;
border-right: 5px solid #bfd6da;
}/*Отступ контента вкладки сверху*/
.tab-a .post-content{
margin-top:1.4em;
text-align:left;
display:inline-block;
}/* сдвиг таблицы */
.punbb .my-tabs{
padding-top: 0px!important; /*сдвиг таблицы вверх от положения иконки*/
margin-left: 100px!important; /*сдвиг таблицы вправо от положения иконки*/
}/*Подвижка иконки*/
img.a-info{
margin-top: -10px!important;
margin-left: -15px!important;
/* margin-top: -20px!important;
margin-left: 0!important;*/
width:236px; /*Размер иконки*/
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('img.a-info,.my-tabs>span').click(function(){
$("li.tab-a .code-box").each(function(){
if($(this).text().indexOf('<!--HTML-->')!=-1){
$(this).wrap('<div class="htmldemo"></div>')
$(this).replaceWith($('.htmldemo').text().split('<!--HTML-->')[1]);}
});});});
</script><style>
#pun-stats .statscon ul.container .item3 {
display:none;
}
</style>
Поделиться42017-01-10 17:36:19
<!--HTML--> <style type="text/css"> .topicbox1 { width: 570px; line-height: 120%; letter-spacing: 0px; text-align: justify; padding: -30px 30px 30px 30px; font-family: "cuprum"; font-size: 12px; color: #0f2664; } .topictitle1 { width: 570px; line-height: 120%; letter-spacing: 0px; padding: -30px 30px 30px 30px; text-transform: uppercase; font-weight: bold; color: #9517ff; font-family: cuprum; font-size: 27px; text-align: center; text-shadow: 1px 1px 0px #ffffff; } .chak b { font-weight: extra-bold; color: #E08E79; } .chakra { opacity: 0; width: 180px; height: 180px; position: relative; background-color: rgba(255, 255, 255, 0.85); -webkit-transition:all 1s ease-in-out; transition:all 1.5s ease-in-out; -moz-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; transform:scale(0); -webkit-transform:scale(0); -moz-transform:scale(0); -o-transform:scale(0); } .chakhov:hover { opacity: 1; -webkit-transition:all 1s ease-in-out; transition:all 1.5s ease-in-out; -moz-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; } .chakhov:hover .chakra { opacity:1; transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); } .chakras { width: 160px; height: 160px; position: relative; padding: 10px; text-align: justify; font-family: calibri; font-size: 10px; color: #111; text-transform: lowercase; letter-spacing: 1px; line height: 10px;overflow: auto; } </style> <center> <div class="topbody"> <div class="topicbox1"> <div class="topictitle1"> Хронология </div> <br> <br> <br> <br> <table cellspacing="2" cellpadding="2" ><tr> <td><div style="width: 180px; height: 180px; background-image: url(http://placehold.it/200x200);"> <div class="chakhov"><div class="chakra"><div class="chakras"> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </div></div></div> </div> <div style=" width: 190px; padding: 5px; font-family: calibri; font-size: 9px; color: #fff; text-transform: uppercase; text-align: center; letter-spacing: 1px; background: #9327ff;"><a href="http://refresh.rusff.me/ссылка">Название эпизода</a></div> </td> <td><div style="width: 180px; height: 180px; background-image: url(http://placehold.it/200x200);"> <div class="chakhov"><div class="chakra"><div class="chakras"> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </div></div></div> </div> <div style=" width: 190px; padding: 5px; font-family: calibri; font-size: 9px; color: #fff; text-transform: uppercase; text-align: center; letter-spacing: 1px; background: #9327ff;">Имя</div> </td> <td><div style="width: 180px; height: 180px; background-image: url(http://placehold.it/200x200);"> <div class="chakhov"><div class="chakra"><div class="chakras"> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </div></div></div> </div> <div style=" width: 190px; padding: 5px; font-family: calibri; font-size: 9px; color: #fff; text-transform: uppercase; text-align: center; letter-spacing: 1px; background: #9327ff;">Имя</div> </td> </tr></table> <br>
<!--HTML--> <style type="text/css"> .topicbox1 { width: 570px; line-height: 120%; letter-spacing: 0px; text-align: justify; padding: -30px 30px 30px 30px; font-family: "cuprum"; font-size: 12px; color: #0f2664; } .topictitle1 { width: 570px; line-height: 120%; letter-spacing: 0px; padding: -30px 30px 30px 30px; text-transform: uppercase; font-weight: bold; color: #9517ff; font-family: cuprum; font-size: 27px; text-align: center; text-shadow: 1px 1px 0px #ffffff; } .chak b { font-weight: extra-bold; color: #E08E79; } .chakra { opacity: 0; width: 180px; height: 180px; position: relative; background-color: rgba(255, 255, 255, 0.85); -webkit-transition:all 1s ease-in-out; transition:all 1.5s ease-in-out; -moz-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; transform:scale(0); -webkit-transform:scale(0); -moz-transform:scale(0); -o-transform:scale(0); } .chakhov:hover { opacity: 1; -webkit-transition:all 1s ease-in-out; transition:all 1.5s ease-in-out; -moz-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; } .chakhov:hover .chakra { opacity:1; transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1); } .chakras { width: 160px; height: 160px; position: relative; padding: 10px; text-align: justify; font-family: calibri; font-size: 10px; color: #111; text-transform: lowercase; letter-spacing: 1px; line height: 10px;overflow: auto; } </style> <center> <div class="topbody"> <div class="topicbox1"> <div class="topictitle1"> Отношения </div> <br> <br> <br> <br> <table cellspacing="2" cellpadding="2" ><tr> <td><div style="width: 180px; height: 180px; background-image: url(http://placehold.it/200x200);"> <div class="chakhov"><div class="chakra"><div class="chakras"> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </div></div></div> </div> <div style=" width: 190px; padding: 5px; font-family: calibri; font-size: 9px; color: #fff; text-transform: uppercase; text-align: center; letter-spacing: 1px; background: #9327ff;">Имя</div> </td> <td><div style="width: 180px; height: 180px; background-image: url(http://placehold.it/200x200);"> <div class="chakhov"><div class="chakra"><div class="chakras"> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </div></div></div> </div> <div style=" width: 190px; padding: 5px; font-family: calibri; font-size: 9px; color: #fff; text-transform: uppercase; text-align: center; letter-spacing: 1px; background: #9327ff;">Имя</div> </td> <td><div style="width: 180px; height: 180px; background-image: url(http://placehold.it/200x200);"> <div class="chakhov"><div class="chakra"><div class="chakras"> текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </div></div></div> </div> <div style=" width: 190px; padding: 5px; font-family: calibri; font-size: 9px; color: #fff; text-transform: uppercase; text-align: center; letter-spacing: 1px; background: #9327ff;">Имя</div> </td> </tr></table> <br>