Сюда закидываем все наши коды как оформления, так и просто чтобы вставить в стиль.
Если код хтмл то кидаем вариант сразу как выглядит (для доработки) и в коде.
Кодовая часть.
Страница: 1
Сообщений 1 страница 5 из 5
Поделиться12017-02-16 04:50:49
Поделиться22017-02-16 04:55:08
Этот код мне до сих пор нрав)
Код:<!--HTML--> <div class='postcolor'><link href="http://forumstatic.ru/files/0017/9a/43/15409.css" rel="stylesheet" type="text/css"><link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,700" rel="stylesheet" type="text/css"><link href='http://fonts.googleapis.com/css?family=Roboto:700italic,300,700,300italic' rel='stylesheet' type='text/css'><style type="text/css"> </style> </div> <div class='postcolor'> <center><div class="tempborders"><div class="tempborder2s"> <div class="titles"> BEZZARD </div> <div class="subtitles"> TELIKO BEZZARD </div> <div style="width: 365px; height: 200px; background-image: url(http://i11.pixs.ru/storage/8/6/7/LEGY0nB5KL_9226816_23040867.jpg); background-size: 365px; margin-bottom: 10px;"><div id="appimages"> <div class="age"> 25 y.o </div><div class="birthday"> 06/11 </div><div class="career"> BAKER </div><div class="hometown"> USA, TEXAS, GARLAND </div><div class="nicknames"> TEL, TELLY, BEEZEE </div><div class="group"> SCORPION </div><div class="quote"><div class="marks">❝</div><div class="lyrics" id="scrolln"> DONT KNOW </div></div><div class="faceclaim"> SARAH MARIE KARDA </div></div></div> <div class="apptitles">ЛЮБАЯ ЦИТАТА</div> <center><div class="appwords"> <b>Chapter 1. Biography. </b><br><br> <i>Биография персонажа</i><br><br> <hr> <b>Chapter 2. Character</b><br><br> <i>Характер персонажа</i><br><br> </div><div class="player"> СВЯЗЬ С ВАМИ (ICQ / SKYPE / VK) - КАКАЯ ПО СЧЕТУ РОЛЬ? (ответ цифрой) </div></center></div></div></center>
Поделиться32017-02-16 04:57:37
Код:
<!--HTML--><div class='postcolor'> <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://naestestforum.b1.jcink.com/uploads/naestestforum/ship_css.css">
<style type="text/css">
#ship-base {
width: 500px;
background-color: #fff;
padding: 20px;
border: 1px solid #e8e8e8;
}
#ship-tra-ba .jennatabs {
position: relative;
width: 0px;
height: 0px;
}
#ship-tra-ba .jennatab {
float: left;
}
#ship-tra-ba .jennatab label {
width: 163px;
height: 15px;
padding-top: 10px;
padding-bottom: 10px;
font-family: 'Raleway';
font-size: 15px;
line-height: 15px;
font-weight: 500;
text-transform: lowercase;
text-align: center;
color: #fff;
position: absolute;
left: -250px;
top: 170px;
}
#ship-tra-ba .jennatab [type=radio] {
display: none;
}
.ship-tra-ba-co {
width: 470px;
height: 0px;
background-color: #eee;
font-family; 'raleway';
font-size: 10px;
position: absolute;
left: -240px;
top: 0px;
}
[type=radio]:checked ~ label {
background: fff;
color: #000;
z-index: 4;
}
[type=radio]:checked ~ label ~ .ship-tra-ba-co {
z-index: 5;
}
.jenna {
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-webkit-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
.jenna {
background-color: #5e1a25;
}
.jenna:hover {
background-color: #54272e;
}
ljenna {
font-family: 'Raleway';
font-size: 9px;
text-transform: uppercase;
color: rgba(255, 153, 102, 1);
}
</style>
<center>
<div id="ship-base">
<div id="ship-cb" class="jenna">
<div id="ship-na1" style="font-size:25px">имя</div>
<div id="circimg"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTmjGGdLY0yMVCkjp-Qxxn7QxFhxg_gsa97C6Lh_cjepHBB9Sxkoqk70Q1R">
<div id="circimg-mp3hol"><div id="circimg-mp3">
<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="645" height="120">
<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf">
<param name=wmode value=transparent>
<param name="FlashVars" value="mp3=https://a.tumblr.com/tumblr_mox980cbmh1r92f54o1.mp3&loadingcolor=000000&buttoncolor=ff9966&aslidercolor=000000">
</object>
</div></div>
</div>
<div id="ship-na2" style="font-size:25px">фамилия</div>
<div id="ship-lico1">
<div id="ship-lico2">
<div id="ship-ap"><a href="ссылка на вашу пару">love</a></div>
<div id="ship-sh"><a href="ссылка на родственника">(название)</a></div>
</div>
</div>
<div id="ship-lico3">
<div id="ship-lico4">
<div id="ship-soc"><a href="Ссылка на дневник">dairy</a></div>
<div id="ship-wa"><a href="ссылка на соц.сеть">instagram</a></div>
</div>
</div>
</div>
<div id="ship-tra-ba">
<div class="jennatabs">
<div class="jennatab">
<input type="radio" id="jennatab-1" name="jennatab-group-1" checked>
<label for="jennatab-1" style="margin-left: 0px;" class="jenna">real</label>
<div class="ship-tra-ba-co">
<div id="ship-box"><div id="ship-box-co">
<a href="ссылка на отыгрыш"><ljenna>название</a> // участник
<div class="description">[text] мини-описание.</div>
</div></div>
</div>
</div>
<div class="jennatabs">
<div class="jennatab">
<input type="radio" id="jennatab-2" name="jennatab-group-1">
<label for="jennatab-2" style="margin-left: 168px;" class="jenna"><div style="border-bottom: 2px solid transparent;">dream/memories</div></label>
<div class="ship-tra-ba-co">
<div id="ship-box"><div id="ship-box-co">
<a href="ссылка на отыгрыш"><ljenna>название</a> // участник
<div class="description">[text] мини-описание.</div>
</div></div>
</div>
</div>
<div class="jennatabs">
<div class="jennatab">
<input type="radio" id="jennatab-3" name="jennatab-group-1">
<label for="jennatab-3" style="margin-left: 337px;" class="jenna">alternative</label>
<div class="ship-tra-ba-co">
<div id="ship-box"><div id="ship-box-co">
<a href="ссылка на отыгрыш"><ljenna>название</a> // участник
<div class="description">[text] мини-описание.</div>
</div></div>
</div>
</div>
</div></div>
</div>
</center> </div>Поделиться42017-02-16 04:58:31
Код:
<!--HTML--> <div class='postcolor'> <link href='http://fonts.googleapis.com/css?family=Raleway:200,300,700,900' rel='stylesheet' type='text/css'>
<style type="text/css">
#ba { width: 450px; padding-top: 30px; border: 0px solid #e8e8e8; background-color: #transparent }
#se { width: 390px; padding: 30px; border: 1px solid #e8e8e8; background color: #fff; overflow: hidden; }
#con { padding-top: 0px; background-color: #fff; border-top: 0px solid rgba(67, 116, 87, 1); padding-bottom: 10px; position: relative; }
#con .img { height: 200px; width: 150px; background-position: cover; }
#tenti { padding-right: 10px; height: 200px; width: auto; text-align: justify; font-family: raleway; font-size: 12px; font-weight: 300; line-height: 125%; column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; display: inline-block; overflow: auto;}
#tentih { width: 390px; height: 200px; overflow-x: auto; overflow-y: hidden; }
#tenti b { color: rgba(67, 116, 87, 1); }
#tenti::-webkit-scrollbar { height:3px; background-color: #efefef; }
#tenti::-webkit-scrollbar-thumb { background: rgba(67, 116, 87, 1); }
.bloos { width: 330px; padding: 30px; background-color: rgba(67, 116, 87, 1); position: relative; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; overflow: hidden;}
#se:hover .bloos { background-color: rgba(67, 116, 87, .5); -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; overflow: hidden; }
#ck { width: 280px; margin-left: 50px; font-family: raleway; font-size: 40px; line-height: 100%; font-weight: 700; color: #fff; text-align: right; z-index: 99; position: relative; top: 0px; left: 0px; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; }
#ck b { opacity: .6; font-weight: 700; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; }
#se:hover #ck b { color: rgba(67, 116, 87, 1); -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; opacity: .8;}
#ck m { opacity: .8 }
#se:hover #ck { position: relative; top: -15px; left: 0px; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; }
#by { width: 285px; margin-left: 45px; font-family: raleway; font-size: 9px; font-weight: 200; color: #fff; text-align: right; text-transform: uppercase; line-height: 95%; letter-spacing: 1px; position: relative; top: 0px; left: 0px; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; }
#se:hover #by { position: relative; top: -90px; left: 0px; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; }
.line { position: absolute; top: 20px; left: 20px; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; }
#se:hover .line{ opacity: .9; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; }
.line .img { height: 65px; width: 65px; border: 3px solid rgba(255, 255, 255, 1); border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; background-size: cover; background-position: right; }
#tenti r { float: left; margin-right: 3px; color: rgba(67, 116, 87, .7); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
#tenti r:first-letter { color: rgba(67, 116, 87, 1); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
#tent img { height: 35px; width: 35px; -webkit-filter: grayscale(100%); filter: grayscale(100%); }
#se .holds { position: absolute; top: 0px; left: 0px; width: 390px; height: 200px; background-color: #eee; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; }
#se:hover .holds { position: absolute; top: -230px; left: 0px; width: 390px; height: 200px; background-color: #eee; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; }
.ers { width: 390px; height: 200px; overflow: hidden; }
#cko { width: 280px; margin-left: 80px; font-family: raleway; font-size: 25px; line-height: 100%; font-weight: 700; color: #fff; text-align: right; z-index: 99; position: absolute; top: 120px; left: 0px; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; }
#cko b { color: rgba(255,255,255, .7); }
#cko m { color: rgba(67, 116, 87, 1); }
#se:hover #cko { position: absolute; top: 50px; left: 0px; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; }
#byo { width: 285px; margin-left: 75px; font-family: raleway; font-size: 9px; font-weight: 200; color: #fff; text-align: right; text-transform: uppercase; line-height: 95%; letter-spacing: 1px; position: absolute; top: 150px; left: 0px; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out;}
#se:hover #byo { position: absolute; top: 80px; left: 0px; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; }
</style>
<center><div id="ba">
<div id="se">
<div id="con">
<div class="ers"><div class="holds" style="background-image: url(фото любого размера); background-color:#000; background-size: 390px; background-position: center;"></div>
<div id="tentih"><div id="tenti">
отношения и факты о человеке
</div></div></div>
</div>
<div class="bloos">
<div id="ck"><b>alias</b>surname</div>
<div id="cko"><b>y.o</b><m>zodiac</m></div>
<div id="by">quote</div>
<div id="byo">mini-bio</div>
<div class="line"><div class="img" style="background-image: url(фото или гиф 138на138)"></div></div>
</div>
</div></center>
</div>Поделиться52017-02-16 05:00:28
Код:
<!--HTML--><style type="text/css">
.alice1 { width: 400px; height: 150px; overflow: hidden; }
.alice2 { width: 400px; height: 150px; background: #fff; border-bottom: 5px solid #fff; opacity: 0; -webkit-transition:all 1s ease-in-out; transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; }
.alice4 { height: 10px; font-size: 8px; font-family: cambria; color: #000; text-align: center; letter-spacing: 3px; line-height: 10px; text-transform: uppercase; position: relative; top: -15px; opacity: 0; -webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; }
.alice5 { width: 390px; height: 65px; position: relative; top: 10px; float: center; position: relative; left: 0px; overflow: hidden; }
.alice6 { width: 390px; height: 53px; position: relative; top: 65px; background: #fff; border-top: 1px solid #000; border-bottom: 1px solid #000; float: center; -webkit-transition:all .5s ease-in-out; transition:all .5s ease-in-out; -moz-transition:all .5s ease-in-out; -o-transition:all .5s ease-in-out; }
.alice7 { width: 42px; height: 42px;margin: 0px 0px; float: left; position: relative; top: 5px; left: 5px; }
.alice8 { width: 325px; padding: 5px; text-align: justify; font-size: 10px; line-height: 10px; font-family: cambria; float: right; }
.alice1:hover .alice3 { filter: blur(0px); -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); opacity: 1; -webkit-transition-delay: .5s; transition-delay: .5s; -moz-transition-delay: .5s; -ms-transition-delay: .5s; -o-transition-delay: .5s;}
.alice1:hover .alice3b { -webkit-transition-delay: 1s; transition-delay: 1.1s; -moz-transition-delay: 1.1s; -ms-transition-delay: 1.1s; -o-transition-delay: 1.1s;}
.alice1:hover .alice2 { opacity: 1; top: 0;}
.alice1:hover .alice4 { opacity: 1; top: 0; -webkit-transition-delay: .8s; transition-delay: .8s; -moz-transition-delay: .8s; -ms-transition-delay: .8s; -o-transition-delay: .8s;}
.alice1:hover .alice6 { opacity: 1; top: 0; -webkit-transition-delay: 1.1s; transition-delay: 1.1s; -moz-transition-delay: 1.1s; -ms-transition-delay: 1.1s; -o-transition-delay: 1.1s;}
</style>
<div class='signature'><center><div class="alice1" style=" background: url(http://i11.pixs.ru/storage/9/9/1/iaivavaivp_3893503_22761991.png);"><div class="alice2"><div class="alice4">
I am 100 % Divergent
And I know my purpose.</div><div class="alice5"><div class="alice6"><div class="alice7" style="background: url(http://66.media.tumblr.com/d2bba28797ed73c9967ff80612548340/tumblr_msexavuLCm1qzg2sjo7_250.gif); background-position: center; background-size: 150px auto"></div><div class="alice8"><b>Дневник, внешний вид, с собой:</b><br>
перечисляем что с собой<br><br>
<b>Текущие эпизоды:</b>
ссылки на открытые эпизоды</div></div></div></div>Можно переделать под принятие
Страница: 1



$2")
}}