The Hanging Tree

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » The Hanging Tree » ADMIN » Кодовая часть.


Кодовая часть.

Сообщений 1 страница 5 из 5

1

Сюда закидываем все наши коды как оформления, так и просто чтобы вставить в стиль.
Если код хтмл то кидаем вариант сразу как выглядит (для доработки) и в коде.

0

2

Этот код мне до сих пор нрав)

Код:
<!--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>

0

3

Код:
<!--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">
&nbsp; &nbsp; <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf">
&nbsp; &nbsp; <param name=wmode value=transparent>
&nbsp; &nbsp; <param name="FlashVars" value="mp3=https://a.tumblr.com/tumblr_mox980cbmh1r92f54o1.mp3&amp;loadingcolor=000000&amp;buttoncolor=ff9966&amp;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>

0

4

Код:
<!--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>

0

5

Код:
<!--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  &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; 
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>

Можно переделать под принятие

0


Вы здесь » The Hanging Tree » ADMIN » Кодовая часть.


Рейтинг форумов | Создать форум бесплатно