Сюда закидываем все наши коды как оформления, так и просто чтобы вставить в стиль.
Если код хтмл то кидаем вариант сразу как выглядит (для доработки) и в коде.
Кодовая часть.
Страница: 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