тихо шифером шурша

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

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



коды

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

1

0

2

Код:
<!--HTML-->
<link rel="stylesheet" type="text/css" href="http://cartegardes.b1.jcink.com/uploads/cartegardes/icebox.css"><div class="icebox1"><div class="icebox2"><div class="icebox3">❝</div><div class="icebox5">❞</div><div class="icebox4">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis eros dignissim, blandit dolor ac, pretium justo. Curabitur ornare lorem mattis pellentesque aliquam. Fusce viverra arcu est, at porta nisi finibus et. Nunc suscipit auctor odio, vel tempus neque vestibulum vitae. Fusce sit amet leo pretium, feugiat turpis in, viverra felis. In mattis scelerisque sapien sit amet consectetur. Ut eget tortor luctus, tempus enim quis, eleifend massa. <b>Maecenas porttitor eget justo vitae tempus.</b> Vestibulum justo enim, tincidunt in interdum a, malesuada sed dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis ut eros vitae faucibus. Curabitur sodales nunc a ultricies tempor. Donec pharetra velit arcu, ac hendrerit nibh feugiat in. Sed porttitor erat quis sodales convallis. Nunc sed sagittis augue.<p>

<i>Morbi congue metus quis gravida feugiat.</i> Ut auctor libero et orci bibendum lacinia. Sed sit amet nulla sit amet mi gravida tempus. Aenean eget nisi quam. Nullam porttitor erat a vestibulum scelerisque. Etiam pretium facilisis lorem in convallis. Nullam lobortis laoreet ante, at finibus turpis facilisis nec. Aliquam vitae tincidunt nisl.

</p></div></div><center><div id="icebox7"><div class="icebox6">

<img src="http://placehold.it/90/6F7B96/fff">

</div>

<div class="icebox8">

<center><div class="icebox9">

put any text u want here, bc it scrolls w enough info. notes, tags, word counts, etc goes here

</div></center>

</div>

</div>
</center></div>

0

3

Код:
<!--HTML-->
<div class="signature"><link rel="stylesheet" href="http://spinsyr.com/css/wintersig.css"><link href="https://fonts.googleapis.com/css?family=Prata|Raleway:500,700" rel="stylesheet" type="text/css"><div class="wsig"><div class="wupc"><div class="wsigup"><div class="wupitemc"><div class="wupitem" style="text-align:right">23 y/o</div><div class="wupitem" style="text-align:right">INFJ</div></div><div class="wupititle">spenny</div><div class="wupitemc"><div class="wupitem" style="text-align:left">he/him</div><div class="wupitem" style="text-align:left">GMT</div></div></div><div class="siglinksc"><a href="http://spinsyr.tumblr.com" target="_blank" class="wsiglinks">tumblr</a> <a href="http://shine.jcink.net/index.php?act=Msg&amp;CODE=04&amp;MID=17198" target="_blank" class="wsiglinks">message</a> <a href="http://magical-hogwarts.org/rpg" target="_blank" class="wsiglinks">rp home</a> <a href="http://shine.jcink.net/index.php?showtopic=26391" target="_blank" class="wsiglinks">gallery</a> <a href="http://shine.jcink.net/index.php?showtopic=29178" target="_blank" class="wsiglinks">testing</a></div><div class="wsiglow"><div class="wup"><div class="wupl"><div class="wday">03</div><div class="wmonth">feb</div></div><div class="wupr">have an insane uni project I'm dealing with, so I'll probably be around but slow for a few weeks!</div></div></div></div></div></div>

0

4

Код:
<!--HTML-->
<div class="postcolor"> <link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css"><style>
  
  .jcontrol1 { width: 375px; height: 375px; padding: 20px; background-color: #fafafa; border: 1px solid #efefef; }
  
  .jcontrol2 { width: 375px; height: 375px; background-color: #EED8DC; position: relative; overflow: hidden; }
  
  .jcontrol3 { width: 335px; height: 335px; background-color: rgba(255,255,255,.7); position: absolute; top: 20px; left: 20px; overflow: hidden; }
  
  .jcontrol2 .jcontrol4 { width: 0px; height: 0px; border-top: 375px solid transparent; border-left: 375px solid #EBD0D2; position: absolute; bottom: 0px; left: 0px; transition: all 1.6s ease-in-out; -moz-transition: all 1.6s ease-in-out; -webkit-transition: all 1.6s ease-in-out; }
  
  .jcontrol2:hover .jcontrol4 { left: -275px; }
  
  .jcontrol2 .jcontrol5 { width: 0px; height: 0px; border-bottom: 375px solid transparent; border-right: 375px solid #EBD0D2; position: absolute; bottom: 0px; right: 0px; transition: all 1.6s ease-in-out; -moz-transition: all 1.6s ease-in-out; -webkit-transition: all 1.6s ease-in-out; }
  
  .jcontrol2:hover .jcontrol5 { right: -275px; }
  
  .jcontrol2 .jcontrol6 { width: 100px; height: 100px; padding: 5px; border: 1px solid #efefef; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; position: absolute; top: 130px; left: 130px; transition: all 1.6s ease-in-out; -moz-transition: all 1.6s ease-in-out; -webkit-transition: all 1.6s ease-in-out; }
  
  .jcontrol2:hover .jcontrol6 { top: 40px; left: 40px; width: 80px; height: 80px; transform: rotate(720deg); -webkit-transform: rotate(720deg); -moz-transform: rotate(720deg); }
  
  .jcontrol2:hover .jcontrol6 img { width: 80px; height: 80px; }
  
  .jcontrol6 img { width: 100px; height: 100px; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; transition: all 1.6s ease-in-out; -moz-transition: all 1.6s ease-in-out; -webkit-transition: all 1.6s ease-in-out; }
  
  .jcontrol7 { width: 160px; height: 250px; padding: 10px; background-color: rgba(255,255,255,.7); position: absolute; bottom: 25px; right: -225px; transition: all 1.6s ease-in-out; -moz-transition: all 1.6s ease-in-out; -webkit-transition: all 1.6s ease-in-out; opacity: 0; }
  
  .jcontrol2:hover .jcontrol7 { right: 25px; opacity: 1; }
  
  .jcontrol8 { width: 157px; height: 250px; padding-right: 3px; overflow: auto; font: normal normal 10px/13px 'inconsolata'; color: #666; text-align: justify; text-transform: lowercase; }
  
  .jcontrol8::-webkit-scrollbar { width:5px; height:4px; }
  .jcontrol8::-webkit-scrollbar-track { background-color: #eee; }
  .jcontrol8::-webkit-scrollbar-thumb { background-color: #fafafa; border: 1px solid #efefef; }
  
  .jcontrol9 { width: 80px; height: 20px; background-color: #fefefe; padding: 5px; border: 1px solid #EBD0D2; font: normal normal 10px/10px 'inconsolata'; color: #aaa; text-transform: lowercase; position: absolute; bottom: -100px; left: 40px; transition: all 1.6s ease-in-out; -moz-transition: all 1.6s ease-in-out; -webkit-transition: all 1.6s ease-in-out; opacity: 0; }
  
  .jcontrol2:hover .jcontrol9 { bottom: 200px; opacity: 1; }
  
  .jcontrol10 { width: 80px; height: 10px; background-color: #fefefe; padding: 5px; border: 1px solid #EBD0D2; font: normal normal 10px/10px 'inconsolata'; color: #aaa; text-transform: lowercase; position: absolute; bottom: -100px; left: 40px; transition: all 1.8s ease-in-out; -moz-transition: all 1.8s ease-in-out; -webkit-transition: all 1.8s ease-in-out; opacity: 0; }
  
  .jcontrol2:hover .jcontrol10 { bottom: 170px; opacity: 1; }
  
  .jcontrol11 { width: 80px; height: 10px; background-color: #fefefe; padding: 5px; border: 1px solid #EBD0D2; font: normal normal 10px/10px 'inconsolata'; color: #aaa; text-transform: lowercase; position: absolute; bottom: -100px; left: 40px; transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; opacity: 0; }
  
  .jcontrol2:hover .jcontrol11 { bottom: 140px; opacity: 1; }
  
  .jcontrol12 { width: 80px; height: 10px; background-color: #fefefe; padding: 5px; border: 1px solid #EBD0D2; font: normal normal 10px/10px 'inconsolata'; color: #aaa; text-transform: lowercase; position: absolute; bottom: -100px; left: 40px; transition: all 2.2s ease-in-out; -moz-transition: all 2.2s ease-in-out; -webkit-transition: all 2.2s ease-in-out; opacity: 0; }
  
  .jcontrol2:hover .jcontrol12 { bottom: 110px; opacity: 1; }
  
  .jcontrol13 { width: 80px; height: 10px; background-color: #fefefe; padding: 5px; border: 1px solid #EBD0D2; font: normal normal 10px/10px 'inconsolata'; color: #aaa; text-transform: lowercase; position: absolute; bottom: -100px; left: 40px; transition: all 2.4s ease-in-out; -moz-transition: all 2.4s ease-in-out; -webkit-transition: all 2.4s ease-in-out; opacity: 0; }
  
  .jcontrol2:hover .jcontrol13 { bottom: 80px; opacity: 1; }
  
  .jcontrol14 { width: 75px; height: 25px; font: normal normal 25px/25px 'inconsolata'; text-transform: lowercase; color: #EBD0D2; text-align: left; position: absolute; top: -23px; right: 120px; transition: all 1.6s ease-in-out; -moz-transition: all 1.6s ease-in-out; -webkit-transition: all 1.6s ease-in-out; opacity: 0; }
  
  .jcontrol2:hover .jcontrol14 { top: 23px; opacity: 1; }
  
</style>

<center>
  
  <div class="jcontrol1">
    
    <div class="jcontrol2">
      
      <div class="jcontrol3">
        
       <div class="jcontrol7">
         
         <div class="jcontrol8">
           
           Do you remember the taste of my lips that night
I stole a bit of my mother's perfume
Cause I remember when my father put his fist through
The wall that separated the dining room
And I remember the fear in your eyes
The very first time we snuck into the city pool
Late December with my heart in my chest and the clouds of my breath
Didn't know where we were running to
But don't look back

We'll be looking for sunlight
Or the headlights
Till our wide eyes burn blind
We'll be lacing the same shoes
That we've worn through
To the bottom of the line
And we know that we're headstrong
And our heart's gone
And the timing's never right
But for now let's get away
On a Roman holiday

Could you imagine the taste of your lips
If we never tried to kiss on the drive to Queen's
Cause I imagine the weight of your ribs
If you lied between my hips in the backseat
I imagine the tears in your eyes
The very first night I'll sleep without you
And when it happens I'll be miles away
And a few months late
Didn't know where I was running to
But I won't look back

We'll be looking for sunlight
Or the headlights
Till our wide eyes burn blind
We'll be lacing the same shoes
That we've worn through
To the bottom of the line
And we know that we're headstrong
And our heart's gone
And the timing's never right
But for now let's get away
On a Roman holiday

Feet first, don't fall
We'll be running again
Keep close, stand tall

We'll be looking for sunlight
Or the headlights
Till our wide eyes burn blind
We'll be lacing the same shoes
That we've worn through
To the bottom of the line
And we know that we're headstrong
And our heart's gone
And the timing's never right
But for now let's get away
On a Roman holiday
           
         </div>
         
       </div>
       
       <div class="jcontrol14">
          
          halsey
          
        </div>
        
      </div>
      
      <div class="jcontrol9">
        
        Ashley Nicolette Frangipane
        
      </div>
      
      <div class="jcontrol10">
        
        twenty-one
        
      </div>
      
      <div class="jcontrol11">
        
        singer
        
      </div>
      
      <div class="jcontrol12">
        
        songwriter
        
      </div>
      
      <div class="jcontrol13">
        
        adorable
        
      </div>
      
      <div class="jcontrol4"></div>
      
      <div class="jcontrol5"></div>
      
      <div class="jcontrol6">
        
        <img src="http://i.imgur.com/dDZoXhH.png">
        
      </div>
      
    </div>
    
  </div>
  
</center><br><br>this is so pink  </div>

0

5

Код:
<!--HTML-->
<div class="postcolor"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<style>
  
  .adrient1 { width: 380px; height: 400px; padding: 20px; border: 1px solid #eee; }
  
  .adrient2 { width: 340px; padding: 20px; margin-bottom: 20px; background-color: #000; }
  
  .adrient3 { width: 85px; height: 85px; padding: 5px; border: 1px solid #eee; margin-right: 20px; }
  
  .adrient3 img { width: 85px; height: 85px; }
  
  .adrient4 { font: normal 700 30px/30px 'open sans'; color: #fff; text-transform: uppercase; text-align: center; letter-spacing: 0px; text-shadow: 2px 2px #999; }
  
  .adrient5 { padding: 5px; font: normal 300 9px/9px calibri; color: #fff; text-transform: uppercase; text-align: center; letter-spacing: 0px; }
  
  .adrient6 { width: 95px; height: 10px; padding: 10px; text-align: center; text-transform: lowercase; letter-spacing: 0px; font: normal 300 10px/10px 'open sans'; color: #666; border: 1px solid #eee; overflow: hidden; position: relative; }
  
  .adrient6a { width: 95px; height: 10px; text-align: center; text-transform: lowercase; letter-spacing: 0px; font: normal 300 10px/10px 'open sans'; color: #666; position: absolute; top: 10px; transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; }
  
  .adrient6b { width: 95px; height: 10px; text-align: center; text-transform: lowercase; letter-spacing: 0px; font: normal 300 10px/10px 'open sans'; color: #666; position: absolute; top: 10px; opacity: 0; transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; }
  
  .adrient6:hover .adrient6a { top: -12px; }
  
  .adrient6:hover .adrient6b { opacity: 1; }
  
  .adrient7 { width: 95px; height: 10px; margin-left: 14px; margin-right: 15px; padding: 10px; text-align: center; text-transform: lowercase; letter-spacing: 0px; font: normal 300 10px/10px 'open sans'; color: #666; border: 1px solid #eee; position: relative; overflow: hidden; }
  
  .adrient7:hover .adrient6a { top: -12px; }
  
  .adrient7:hover .adrient6b { opacity: 1; }
  
  .adrient8 { width: 95px; height: 126px; padding: 10px; text-align: justify; text-transform: lowercase; letter-spacing: 0px; font: normal 300 9px/11px 'open sans'; color: #666; border: 1px solid #eee; }
  
  .adrient9 { width: 95px; height: 126px; margin-left: 14px; margin-right: 15px; padding: 10px; text-align: justify; text-transform: lowercase; letter-spacing: 0px; font: normal 300 9px/11px 'open sans'; color: #aaa; border: 1px solid #eee; }
  
  .adrient8 a, .adrient9 a { font: normal 700 9px/9px 'open sans'; color: #333; text-transform: uppercase; text-decoration: none; }
  
  .adrient8 h1, .adrient9 h1 { font: normal 300 8px/8px 'open sans'; color: #999; text-indent: 5px; margin-top: 0px; }
  
</style>

<center>
  
  <div class="adrient1">
    
    <div class="adrient2">
      
      <table cellspacing="0" cellpadding="0"><tbody><tr><td>
        
        <div class="adrient3">
          
          <img src="http://placehold.it/85/">
          
        </div>
        
      </td><td>
        
        <div class="adrient4">
          
          first last
          
        </div>
        
        <div class="adrient5">
          
          age, member group, occupation, playby
          
        </div>
        
      </td></tr></tbody></table>
      
    </div>
    
    <table cellspacing="0" cellpadding="0"><tbody><tr><td>
      
      <a href="link"><div class="adrient6"><div class="adrient6b">
        
        application
        
      </div><div class="adrient6a">
        
        <i class="fa fa-folder-open"></i>
        
      </div></div></a>
      
    </td><td>
      
      <a href="link"><div class="adrient7"><div class="adrient6b">
        
        shipper
        
      </div><div class="adrient6a">
        
        <i class="fa fa-heart"></i>
        
      </div></div></a>
      
    </td><td>
      
      <a href="link"><div class="adrient6"><div class="adrient6b">
        
        request
        
      </div><div class="adrient6a">
        
        <i class="fa fa-user-plus"></i>
        
      </div></div></a>
      
    </td></tr><tr><td><div style="height: 14px;"></div></td></tr><tr><td>
      
      <div class="adrient6"><div class="adrient6b">
        
        comms
        
      </div><div class="adrient6a">
        
        <i class="fa fa-tty"></i>
        
      </div></div>
      
    </td><td>
      
      <div class="adrient7"><div class="adrient6b">
        
        active
        
      </div><div class="adrient6a">
        
        <i class="fa fa-pencil"></i>
        
      </div></div>
      
    </td><td>
      
      <div class="adrient6"><div class="adrient6b">
        
        archived
        
      </div><div class="adrient6a">
        
        <i class="fa fa-archive"></i>
        
      </div></div>
      
    </td></tr><tr><td><div style="height: 14px;"></div></td></tr><tr><td>
      
      <div class="adrient8">
        
        <a href="link">thread title.</a><br>
        <h1>with who.</h1>
        
      </div>
      
    </td><td>
      
      <div class="adrient9">
        
        <a href="link">thread title.</a><br>
        <h1>with who, where at.</h1>
        
      </div>
      
    </td><td>
      
      <div class="adrient8">
        
        <a href="link">thread title.</a><br>
        <h1>with who, where at.</h1>
        
      </div>
      
    </td></tr></tbody></table>
    
  </div>
  
</center>  </div>

0

6

Код:
<!--HTML-->
<div class="postcolor"> <style type="text/css">
#CHARINITIALS { width: 320px; background-color: #e1e1e1; border-radius: 5px; padding: 8px 4px 8px 4px; }
.ignamebar { width:300px; height: 25px; overflow: hidden; background-color: #105687; position: relative; overflow: hidden; font-family: 'Lobster Two', cursive; font-size: 20px; color: #fff; text-align: left; padding: 11px 5px 3px 10px; }
.pmthing { width: 30px; left: 260px; position: relative; top: -23px; background-color: #105687; }
.igusericon { width: 303px; height: 30px; position: relative; padding: 5px 5px 5px 7px; background-color: #fff; text-align: left; overflow: hidden; }
.igusericon img { border-radius: 100px; }
.igusername { width: 200px; position: relative; padding: 4px; color: #105687; font-family: 'Calibri'; font-size: 13px; font-weight: 700; text-align: left; top: -26px; left: 35px;}
.igpostcap { width: 301px; position: relative; padding: 7px; font-family: 'Noto Sans', sans-serif; font-size: 12px; color: #222; overflow: auto; background-color: #ffffff; text-align: justify; line-height: 13px; }
.igpostcap i { color: #105687; }
.igpostcap b { color: #105687; font-family: 'Calibri'; font-weight: 700; }
</style>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lobster+Two:400,700" rel="stylesheet" type="text/css">
<center>
<div id="CHARINITIALS">
<div class="ignamebar">Instagram 
	<div class="pmthing"><a href="http://cttw.jcink.net/index.php?showuser=100" target="_blank"><img src="http://i.imgur.com/NjCvAhr.jpg" width="35"></a></div>
</div>
<div class="igusericon"><img src="http://placehold.it/30x30" width="30"> 
<div class="igusername">username</div></div>
<div style="width: 311px; overflow: hidden; padding: 0px 2px 7px 2px; background-color: #fff; position: relative;">
<img src="http://placehold.it/300x300" width="300"></div>
<div style="width: 315px; overflow: hidden; position: relative; background-color: #fff;"><a href="http://shine.b1.jcink.com/index.php?showuser=6984" target="_blank"><img src="http://i.imgur.com/QVIbUlA.jpg" width="315"></a></div>
<div class="igpostcap"><b><font size="3">♥</font> 721 likes</b><br>
<b>username</b> caption goes here! caption goes here! caption goes here! caption goes here! caption goes here! caption goes here! caption goes here! caption goes here!
<br><i>#hashbrowns</i></div>
</div>
</center>  </div>

0

7

Код:
<!--HTML-->
<div class="postcolor"> <style type="text/css">
#CHARACTERIG { width: 320px; background-color: #ccc; border-radius: 5px; padding: 7px 3px 7px 3px; }
.iguserbar { width:315px; background-color: #105687; position: relative; overflow: hidden; padding-top: 5px; }
.userigname { width: 200px; height: 15px; font-family: 'Arial Black'; font-size: 11px; position: relative; left: -35px; color: #fff; text-align: left; text-transform: uppercase; padding: 1px; top: 9px; letter-spacing: 1px;}
.dotdothing { width: 20px; height: 20px; color: #fff;  font-family: 'Arial Black'; font-size: 20px; text-align: right; left: 120px; position: relative; top: -10px; font-weight: 800; }
.userigprofile { width: 295px; height: 135px; background-color: #fff; padding: 10px; padding-bottom: 15px; position: relative; overflow: hidden; border-bottom: solid 1px #ddd; color: #222; }
.dotheavatar { width: 85px; height: 85px; position: relative; left: -100px; }
.dotheavatar img { border-radius: 100px; }
.demfollowcount { width: 185px; height: 80px; position: relative; top: -85px; left: 50px; padding-top: 10px; }
.infothingie { width: 275px; height: 50px; background-color: #fff; font-family: Calibri; font-size: 13px; font-color: #222; position: relative; top: -90px; text-align: left; padding-top: 4px; overflow: hidden; }
.infothingie b { font-weight: 800; }
.infothingie i { color: #105687; font-style: normal; }
.tinybubbles { width: 315px; overflow: hidden; padding: 0px 0px 5px 0px; background-color: #fff;}
</style>

<center>
<div id="CHARACTERIG">
<div class="iguserbar"><div class="userigname">username</div>
<div class="dotdothing">∶</div></div>

<div class="userigprofile">
<div class="dotheavatar"><img src="http://placehold.it/80x80" width="80" height="80"></div>
<div class="demfollowcount"><table width="180" align="center" cellpadding="0" style="font-family: Calibri; font-size: 13.5px; color: #222; ">
<tbody><tr><td align="center" width="80px"><font color="#222222" size="2"><b>700</b></font><br><font color="#b4b4b4" size="1">posts</font></td>
<td align="center" width="80px"><font color="#222222" size="2"><b>730</b></font><br><font color="#b4b4b4" size="1">followers</font></td>
<td align="center" width="80px"><font color="#222222" size="2"><b>760</b></font><br><font color="#b4b4b4" size="1">following</font></td>
</tr>
<tr><td colspan="3"></td></tr>
<tr><td colspan="3" align="center" bgcolor="#cccccc" height="5" cellpadding="2">
<b><font color="#222222" size="1">EDIT YOUR PROFILE</font></b>
</td></tr>
</tbody></table></div>
	<div class="infothingie"><b>name here</b>
	<br> short blubber up to two lines only! (including link)
	<br> <i>linkcangohere.com</i>
	</div>
</div>
<div style="width: 309px; background-color: #fff; padding: 3px; overflow: hidden;"><img src="http://i.imgur.com/4qlYjl0.jpg" width="300"></div>
<div class="tinybubbles">
<table cellpadding="1"><tbody><tr><td><img src="http://placehold.it/100x100" width="100"></td>
	<td><img src="http://placehold.it/100x100" width="100"></td>
	<td><img src="http://placehold.it/100x100" width="100"></td>
	</tr>
	<tr><td><img src="http://placehold.it/100x100" width="100"></td>
	<td><img src="http://placehold.it/100x100" width="100"></td>
	<td><img src="http://placehold.it/100x100" width="100"></td></tr>
	</tbody></table>
</div>
<div style="width: 314px; background-color: #232728; overflow: hidden; text-align: right;"><a href="http://shine.b1.jcink.com/index.php?showuser=6984" target="_blank"><img src="http://i.imgur.com/gXi5wOS.jpg" width="305"></a></div>
</div>
</center>  </div>

0

8

Код:
<!--HTML-->
<div class="postcolor"> <center><div class="comvers">
<a href="http://shine.b1.jcink.com/index.php?showuser=6984" target="_blank"><img src="http://i.imgur.com/QVIbUlA.jpg" width="310"></a>
<div class="commsect">
<img src="http://placehold.it/80x80" width="80"><!---any square image would do. it will resize-/-->
<div class="actcomm"><b>username</b> blah blah etc etc blah blah etc etc blah blah etc etc blah blah etc etc blah blah etc etc blah blah etc etc blah blah etc etc 
<i>#hashbrowns #aighbruh</i>  blah blah etc etc blah blah etc etc blah blah etc etc blah blah etc etc blah blah etc etc blah blah etc etc blah blah etc etc 
<i>#hashbrowns #aighbruh</i>
</div>
</div>
</div></center><style type="text/css">.comvers { width: 315px; background-color: #e1e1e1; border-radius: 4px; padding: 6px 5px 6px 5px;} .commsect { width: 294px; height: 90px; padding: 8px; background-color: #fff; position: relative; text-align: left;} .commsect img { border-radius: 100px; }
.actcomm { width: 200px; font-family: 'Noto Sans', sans-serif; font-size: 11px; color: #222; line-height: 10px; text-align: justify; position: relative; top: -75px; left: 90px; height: 80px; overflow: auto; }
.actcomm i { color: #105687; font-family: 'Calibri'; font-size: 12px;} 
.actcomm b { color: #105687; font-family: 'Calibri'; font-size: 12px; font-weight: 800; }
.actcomm::-webkit-scrollbar { background:transparent; width: 2px; padding-right: 3px; } 
.actcomm::-webkit-scrollbar-thumb { background: #ccc; border-radius: 20px; }
.actcomm::-webkit-scrollbar-button:start:decrement;
.actcomm::-webkit-scrollbar-button:end:increment { height: 3px; display: block; background:transparent; }
</style><link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700" rel="stylesheet" type="text/css">
  </div>

0

9

Код:
<!--HTML-->
<div class="postcolor"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,900|Roboto+Condensed:300,400,700" rel="stylesheet" type="text/css"><style>

.n-tabhold { width: 420px; height: 320px;  position: relative }
.n-tab { float: left }
.n-tab label { width: 130px; height: 10px; padding: 5px; background: #e1b09a; color: #fff; font-family: roboto condensed; font-weight: 300; font-size: 8px; line-height: 10px; text-align: center; text-transform: uppercase; letter-spacing: 1.0px; display: block; position: relative; top: 0px; left: 0px }
.n-int { width: 400px; height: 280px; padding: 10px; background: #fff; position: absolute; top: 20px; left: 0px }

.n-tab [type=radio] { display: none }
[type=radio]:checked ~ label { height: 10px; background: #e27964; color: #fff; font-style: italic; z-index: 2 }
[type=radio]:checked ~ label ~ .n-int { z-index: 1 }

.n-double1 { width: 420px; border: 10px solid #fdfdfd; box-shadow: 0px 0px 10px #eee; background: #fff; margin: 0 auto }
.n-double2 { width: 420px; height: 200px; background-size: cover; background-position: center center }
.n-double3 { width: 400px; height: 30px; padding: 10px; background: rgba(255,255,255,0.2); position: relative; top: 150px; overflow: hidden; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out  }
.n-double4 { width: 400px; font-family: roboto condensed; font-size: 25px; line-height: 25px; text-align: left; text-transform: uppercase; letter-spacing: -1.5px; color: #fafafa; text-shadow: 1px 0px 0px #9ad0de; font-weight: 700; position: relative; top: 4px; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out }
.n-double5 { width: 400px; font-family: roboto condensed; font-weight: 700; font-style: italic; font-size: 8px; line-height: 10px; text-transform: uppercase; text-align: right; color: #fafafa; position: relative; top: 15px; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out}
.n-double6 { width: 100px; height: 280px;  display: inline-block; vertical-align: top; margin-right: 0px!important }
.n-double7 { width: 90px; height: 90px; padding: 4px; border: 1px solid #f3eded }
.n-double7a { width: 90px; height: 90px; padding: 4px; border: 1px solid #f3eded; margin-top: 5px }
.n-double8 { width: 90px; height: 90px; background-size: cover; background-position: center center }
.n-double9 { width: 100px; margin-top: 5px }
.n-double10 { width: 90px; padding: 4px; border: 1px solid #f3eded; font-family: roboto condensed; font-size: 8px; font-weight: 300; line-height: 10px; text-align: center; margin-top: 5px; text-transform: uppercase; letter-spacing: 0.5px }
.n-double11 { width: 279px; height: 270px; margin-left: 10px; padding: 5px; font-family: roboto; font-size: 9px; line-height: 10px; text-align: justify; display: inline-block; vertical-align: top }
.n-double12 { width: 90px; height: 270px; overflow: auto; font-family: roboto condensed; font-size: 8px; line-height: 10px; text-transform: uppercase; font-weight: 300; padding: 5px; background: #f3eded; display: inline-block; vertical-align: top; margin-right: 0px!important }

.n-double3:hover { background: rgba(255,255,255,0.4) }
.n-double3:hover .n-double4 { letter-spacing: -1.0 }
.n-double3:hover .n-double5 { top: 0px }
.n-double11 b { font-family: roboto; font-weight: 900; font-size: 8px; line-height: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #e27964 }
.n-double11 a { font-family: roboto; font-weight: 500; font-size: 8px; line-height: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #e1b09a; font-style: italic }

</style>

<div class="n-double1">

<div class="n-double2" style="background-image: url(http://36.media.tumblr.com/2a0d5df67bea6ac5db09a52a5947855a/tumblr_nxz5i1Fn9l1shxvq6o3_500.jpg)">

<div class="n-double3"><div class="n-double4"> 

aiden callaghan 

</div><div class="n-double5"> 

23. <span style="color: #9ad0de">local</span>. brother. father. husband. josh hutcherson. 

</div></div></div>

<div class="n-tabhold">
 
<div class="n-tab"><input type="radio" id="n-tab-1" name="n-tab-group-1" checked=""><label for="n-tab-1"> aiden: an overview </label><div class="n-int">

<div class="n-double6">

<div class="n-double7"><div class="n-double8" style="background-image: url(http://45.media.tumblr.com/5675d30a9cdcf187fe996deb240458dc/tumblr_nw2irmaSMT1tqwe0ao1_250.gif)"></div></div>

<div class="n-double9">

<div class="n-double10"> 23 (b. 1992) </div>

<div class="n-double10"> open job </div>

<div class="n-double10"> married </div>

<div class="n-double7a"><div class="n-double8" style="background-image: url(http://49.media.tumblr.com/6a556b8c6cbad349e57e7a8b9585856e/tumblr_nw2irmaSMT1tqwe0ao2_250.gif)"></div></div>

</div></div><div class="n-double11">


this is an ad for this precious lil man lalalala ad ad ad also you can <b>bold</b> things and that's mildly exciting but yes this is the kinda blurb bit you know like the front bit and then you can check the tabs for more info and it's all very functional


</div></div></div>
 
<div class="n-tab"><input type="radio" id="n-tab-2" name="n-tab-group-1"><label for="n-tab-2"> the brother </label><div class="n-int">

<div class="n-double12">

<b>1987</b> jack callaghan and elizabeth sawyer meet in miami, florida

<br><br><b>1989</b> they get married

<br><br><b>1992</b> <i>aiden</i> is born 

<br><br><b>1995</b> isabel is born 

<br><br><b>2002</b> the callaghans move to san francisco

<br><br><b>2007</b> elizabeth is paralysed in a car accident

<br><br><b>2010</b> <i>aiden</i> moves out of home to study at the university of san francisco

<br><br><b>2013</b> isabel moves in with <i>aiden</i> and his family for six months


</div><div class="n-double11">

<center><a href="">isabel's application</a> • <a href="">isabel's shipper</a></center><br>


blah blah blah give me a brother (this is where the main body of the ad goes basically)


</div></div></div>
 

<div class="n-tab"><input type="radio" id="n-tab-3" name="n-tab-group-1"><label for="n-tab-3"> the husband and daddy </label><div class="n-int">

<div class="n-double12">

<b>2007</b> <i>aiden</i> meets stella hartford on her first day at her new high school

<br><br><b>2008</b> they begin dating over the summer holidays

<br><br><b>2011</b> their son, riley samuel, is born on july 24

<br><br><b>2012</b> <i>aiden</i> proposes to stella

<br><br><b>2013</b> their daughter, madison claire, is born on april 5

<br><br><b>2014</b> <i>aiden</i> and stella finally get married 

<br><br><b>2015</b> stella falls pregnant again, and is due in march 2016


</div><div class="n-double11">

<center><a href="">stella's application</a> • <a href="">stella's shipper</a></center><br>


la de da pls fulfil this ad and give me a husband and our children a father etc etc


</div></div></div>
 
</div></div>  </div>

0

10

Код:
<!--HTML-->
<div class="postcolor"> <link href="http://fonts.googleapis.com/css?family=Handlee|Montserrat:400,700" rel="stylesheet" type="text/css"><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<style>

#l-hearts { width: 400px; background: #93C9CA;  box-shadow: 0px 0px 10px #eee; margin: 0 auto }
#l-hearts .l-iwanna { width: 360px; padding: 20px; background: #704E3A }
#l-hearts .l-takeyou { font-family: handlee; font-size: 8px; line-height: 10px; color: #EEF3DA; text-align: center; text-transform: uppercase; letter-spacing: 6.0px }
#l-hearts .l-somewhere { font-family: montserrat; font-weight: 700; color: #eef3da; text-transform: uppercase; text-align: center; font-size: 50px; line-height: 100%; letter-spacing: -5.0px }
#l-hearts .l-soyou { width: 400px; height: 220px; background-size: cover; background-position: center center; background-color: #C7E363; background-blend-mode: multiply }
#l-hearts .l-knowi { width: 300px; height: 120px; padding: 50px; background: rgba(0,0,0,0.2); opacity: 0.0; -webkit-transition: all 1.0s ease-in-out; -moz-transition: all 1.0s ease-in-out; -o-transition: all 1.0s ease-in-out; -ms-transition: all 1.0s ease-in-out; transition: all 1.0s ease-in-out }
#l-hearts .l-care { width: 100px; height: 100px; border: 10px solid #C7E363; background-size: cover; background-position: center center; opacity: 0.8; display: inline-block; vertical-align: top; margin-right: 10px }
#l-hearts .l-butits { width: 170px; height: 120px; background: transparent; opacity: 0.9; display: inline-block; vertical-align: top }
#l-hearts .l-socold { width: 150px; height: 10px; border: 10px solid #704e3a; overflow: hidden; background: #704E3A; font-family: handlee; font-size: 8px; line-height: 10px; text-transform: uppercase; text-align: center; letter-spacing: 1.5px; color: #EEF3DA }
#l-hearts .l-andi { width: 150px; height: 70px; overflow: hidden; padding: 10px; background: #EEF3DA; font-family: montserrat; font-weight: 700; font-size: 8px; line-height: 10px; text-align: justify }
#l-hearts .l-dont { width: 350px; padding: 25px }
#l-hearts .l-know { width: 320px; padding: 15px; background: rgba(255,255,255, 0.15); color: #EEF3DA; font-family: montserrat; font-weight: 400; font-size: 9px; line-height: 12px; text-align: justify }

#l-hearts .l-somewhere b { color: #F35E5E }
#l-hearts .l-know b { font-weight: 700; font-size: 11px; line-height: 12px; color: #F35E5E }

#l-hearts .l-knowi:hover { opacity: 1.0 }

</style>

<div id="l-hearts">

<div class="l-iwanna"><div class="l-takeyou"> all my tears have been used up on</div><div class="l-somewhere">another <b>love</b></div></div>

<div class="l-soyou" style="background-image: url(http://41.media.tumblr.com/tumblr_m57jl8kolf1rxky27o5_1280.jpg)">

<div class="l-knowi">

<div class="l-care" style="background-image: url(http://24.media.tumblr.com/43a344f162bc51209e71248387ac6ce5/tumblr_n02eaaPDHL1rrwwbao1_250.gif)"></div><div class="l-butits">
<div class="l-socold"><i class="fa fa-tag"></i> claire / sophie </div>

<div class="l-andi"><i class="fa fa-pencil"></i> baby get notey after school (this is where u note just so u know like if ur too busy gettin that song out of ur head like i am rn but u no it's w/e also i'm not even sure this section is gonna make it tbh its tacky and i hate it) </div>

</div>


</div>

</div>


<div class="l-dont">

<div class="l-know">

lol post here or ?? and then u do stuff and <b>bold shit</b> and ya thats it tbh


</div>


</div>





</div>

  </div>

0

11

Код:
<!--HTML-->
<link rel="stylesheet" href="http://spinsyr.com/css/winter.css" type="text/css">
   <link href='https://fonts.googleapis.com/css?family=Prata|Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<div class="wupdate">
       <div class="wupc">
           <div class="wuptitle">updated</div>
           <div class="wup">
               <div class="wupl">
                   <div class="wuday">31</div>
                   <div class="wumonth">feb</div>
               </div>
               <div class="wupr">here is where you write the update it can be however long you want it doesnt matter the box will adjust to accomodate it and it will not scroll because in this case I think its easier and better to just see it all at once.here is where you write the update it can be however long you want it doesnt matter the box will adjust to accomodate it and it will not scroll because in this case I think its easier and better to just see it all at once.here is where you write the update it can be however long you want it doesnt matter the box will adjust to accomodate it and it will not scroll because in this case I think its easier and better to just see it all at once.here is where you write the update it can be however long you want it doesnt matter the box will adjust to accomodate it and it will not scroll because in this case I think its easier and better to just see it all at once. </div>
           </div>
       </div>
   </div>

0

12

Код:
<!--HTML-->
<div class="postcolor"> 
<link href="http://fonts.googleapis.com/css?family=Pathway+Gothic+One" rel="stylesheet" type="text/css">
<center>
<div style="width: 270px;  padding:15px; background:white;">
<div style="width: 240px;  padding:15px; color:black; font: 9px georgia; text-align:justify">
<div style="text-shadow: 2px 0 .2px #FF0000, -2px 0 .2px #00F1F5;
color: #000; opacity: .8; text-transform: uppercase;font: 25px/80% Pathway Gothic One; letter-spacing: 2px; text-align:center;">da rulez</div>
‣ first code on shine yay~<br>
‣ don't steal, kthx<br>
‣ keep the credit on<br>
‣ the big picture is 425x425, it doesn't resize so you have to be exact~<br>
‣ yes, it is used twice<br>
‣ the smaller pic is 150x375, also doesn't resize.<br>
‣ the rest is in the code<br>
‣ minor edits are cool just don't frankenstein it<br>
‣ to change the red, just look for #ba2800<br>
‣ show me where you're using it so i can cry &lt;33<br>
‣ and if there are any questions, pm me &lt;333
</div>
</div></center>
<br><br><link href="http://fonts.googleapis.com/css?family=Dawning+of+a+New+Day" rel="stylesheet" type="text/css">
<center>
<style type="text/css"> 
.containna::-webkit-scrollbar { width:3px;} 
.containna::-webkit-scrollbar-track { background:#f1f2ea; } 
.containna::-webkit-scrollbar-thumb { background:#ba2800; }
img.blur { -webkit-filter:blur(3px); filter:blur(3px); -moz-filter:blur(3px); -o-filter:blur(3px); filter: url(http://beoverjoyed.b1.jcink.com/uploads/beoverjoyed/blur.svg#blur); }
.focus { width:425px; height:425px; overflow:hidden; }
.blurred { width:425px; height:425px; -webkit-transition:all .7s ease-in-out; transition:all .7s ease-in-out; -moz-transition:all .7s ease-in-out; -o-transition:all .7s ease-in-out; opacity:0; overflow:hidden; } 
.focus:hover .blurred { opacity:1; }
.contah { width: 375px; height: 375px; overflow-y: hidden; background: white;position: relative;bottom: 400px; opacity: 0; -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; transition-delay:.9s; }
.contah:hover { opacity: .9 }
.redda { width: 150px; height:375px; background: url(http://i.imgur.com/fEs43PC.png); float: left; }
.reddaundah { width: 120px; height:125px; background: #2d2d2d; font: 9px courier; color: white; text-align:center; text-transform: uppercase; opacity:0; padding: 150px 15px 100px 15px; -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out;}
.reddaundah:hover { opacity: .7 }
.containna { width: 185px; height: 330px; background: white; text-align: justify; color: 2d2d2d;font: 9px/100% georgia;padding: 25px 20px;overflow-y: auto; }
.containna:first-letter { background: #ba2800; padding: 14px 17px; font: 9px courier; display: block;color: white; float: left; margin: 0 6px 5px 0; text-transform:uppercase; }
.containna b { font: 9px courier; color: #ba2800; text-transform: uppercase; }
.redunwa { width: 115px; text-align: justify; }
</style>

<div class="focus" style="background: url(http://i.imgur.com/aB3bU8D.png); "> <div class="blurred"><img src="http://i.imgur.com/aB3bU8D.png" class="blur"></div>
<div class="contah">

<div class="redda">
<div class="reddaundah">
<center><a href="http://shine.b1.jcink.com/index.php?showuser=3777"><span style="font: 30px/80% 'Dawning of a New Day'; text-transform: lowercase; color: white;">"bailey"</span></a><br>
<div class="redunwa">25. aristocrat. christina caradona.  too rich. spoiled. no work ethic. painfully outspoken. better than you.</div></center>
</div></div>
<div class="containna">Lorem boofron dolizzle daahng dawg amizzle, cool adipiscing own yo'. Nullam my shizz velizzle, izzle volutpizzle, suscipit quis, gravida get down get down, i saw beyonces tizzles and my pizzle went crizzle. Pellentesque eget fo shizzle. For sure erizzle. Fo bizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle dapibizzle boofron tempizzle daahng dawg. Mauris pellentesque nibh et crunk. Check it out izzle tortizzle. Pellentesque shizznit rhoncizzle sheezy. In hac nizzle platea dictumst. Dawg pimpin'. Shizznit tellizzle urna, pretium you son of a bizzle, mattizzle sure, break yo neck, yall crazy, nunc. Dope suscipizzle. Integer semper velit sizzle crazy.
<p>
<b>friends</b> et pizzle quizzle nisi ass mollizzle. Suspendisse potenti. Away odio. Tellivizzle neque. Cras orci. Crazy maurizzle mauris, interdizzle a, feugizzle that's the shizzle ma nizzle, malesuada in, pede. Boofron mah nizzle. Vestibulizzle crunk mi, dawg , sagittis sizzle, fo shizzle semper, velit. Cras i saw beyonces tizzles and my pizzle went crizzle ipsizzle. Mah nizzle volutpizzle yo vizzle orci. Cras break it down justo in purizzle ornare. Break yo neck, yall venenatizzle justo et things. Nunc pizzle. Suspendisse doggy bizzle the bizzle. Curabitur ass ante. Tellivizzle gizzle, leo eu dapibus hendrerizzle, ipsum felizzle elementum sizzle, in aliquizzle mah nizzle felizzle luctus pede. Nizzle a nisl. Crackalackin crunk pizzle shiz izzle litora torquent boofron conubia nostra, pizzle yo hymenaeos. Aliquizzle interdizzle, nec nizzle bling bling, nisl orci brizzle mammasay mammasa mamma oo sa, doggy sempizzle fo shizzle shut the shizzle up dizzle break yo neck, yall.
</p><p>
<b>enemies</b> boofron dolizzle daahng dawg amizzle, cool adipiscing own yo'. Nullam my shizz velizzle, izzle volutpizzle, suscipit quis, gravida get down get down, i saw beyonces tizzles and my pizzle went crizzle. Pellentesque eget fo shizzle. For sure erizzle. Fo bizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle dapibizzle boofron tempizzle daahng dawg. Mauris pellentesque nibh et crunk. Check it out izzle tortizzle. Pellentesque shizznit rhoncizzle sheezy. In hac nizzle platea dictumst. Dawg pimpin'. Shizznit tellizzle urna, pretium you son of a bizzle, mattizzle sure, break yo neck, yall crazy, nunc. Dope suscipizzle. Integer semper velit sizzle crazy.
</p><p>
<b>lovers</b> et pizzle quizzle nisi ass mollizzle. Suspendisse potenti. Away odio. Tellivizzle neque. Cras orci. Crazy maurizzle mauris, interdizzle a, feugizzle that's the shizzle ma nizzle, malesuada in, pede. Boofron mah nizzle. Vestibulizzle crunk mi, dawg , sagittis sizzle, fo shizzle semper, velit. Cras i saw beyonces tizzles and my pizzle went crizzle ipsizzle. Mah nizzle volutpizzle yo vizzle orci. Cras break it down justo in purizzle ornare. Break yo neck, yall venenatizzle justo et things. Nunc pizzle. Suspendisse doggy bizzle the bizzle. Curabitur ass ante. Tellivizzle gizzle, leo eu dapibus hendrerizzle, ipsum felizzle elementum sizzle, in aliquizzle mah nizzle felizzle luctus pede. Nizzle a nisl. Crackalackin crunk pizzle shiz izzle litora torquent boofron conubia nostra, pizzle yo hymenaeos. Aliquizzle interdizzle, nec nizzle bling bling, nisl orci brizzle mammasay mammasa mamma oo sa, doggy sempizzle fo shizzle shut the shizzle up dizzle break yo neck, yall.</p></div>
</div>
</div></center><br><br><!--c1--><table border="0" align="center" width="95%" cellpadding="3" cellspacing="1" id="CODE-WRAP"><tbody><tr><td><b>CODE</b> </td></tr><tr><td id="CODE"><!--ec1--><br>[dohtml]&lt;link href='http://fonts.googleapis.com/css?family=Dawning+of+a+New+Day' rel='stylesheet' type='text/css'&gt;<br>&lt;center&gt;<br>&lt;style type="text/css"&gt; <br>.containna::-webkit-scrollbar { width:3px;} <br>.containna::-webkit-scrollbar-track { background:#f1f2ea; } <br>.containna::-webkit-scrollbar-thumb { background:#ba2800; }<br>img.blur { -webkit-filter:blur(3px); filter:blur(3px); -moz-filter:blur(3px); -o-filter:blur(3px); filter: url(http://beoverjoyed.b1.jcink.com/uploads/beoverjoyed/blur.svg#blur); }<br>.focus { width:425px; height:425px; overflow:hidden; }<br>.blurred { width:425px; height:425px; -webkit-transition:all .7s ease-in-out; transition:all .7s ease-in-out; -moz-transition:all .7s ease-in-out; -o-transition:all .7s ease-in-out; opacity:0; overflow:hidden; } <br>.focus:hover .blurred { opacity:1; }<br>.contah { width: 375px; height: 375px; overflow-y: hidden; background: white;position: relative;bottom: 400px; opacity: 0; -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; transition-delay:.9s; }<br>.contah:hover { opacity: .9 }<br>.redda { width: 150px; height:375px; background: url(150X375 IMG HEREEEEEE); float: left; }<br>.reddaundah { width: 120px; height:125px; background: #2d2d2d; font: 9px courier; color: white; text-align:center; text-transform: uppercase; opacity:0; padding: 150px 15px 100px 15px; -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out;}<br>.reddaundah:hover { opacity: .7 }<br>.containna { width: 185px; height: 330px; background: white; text-align: justify; color: 2d2d2d;font: 9px/100% georgia;padding: 25px 20px;overflow-y: auto; }<br>.containna:first-letter { background: #ba2800; padding: 14px 17px; font: 9px courier; display: block;color: white; float: left; margin: 0 6px 5px 0; text-transform: uppercase;}<br>.containna b { font: 9px courier; color: #ba2800; text-transform: uppercase; }<br>.redunwa { width: 115px; text-align: justify; }<br>&lt;/style&gt;<br><br>&lt;div class="focus" style="background: url(425X425 IMG HEREEEEE); "&gt; &lt;div class="blurred"&gt;&lt;img src="425X425 IMG HEREEEEEEE" class="blur" /&gt;&lt;/div&gt;<br>&lt;div class="contah"&gt;<br><br>&lt;div class="redda"&gt;<br>&lt;div class="reddaundah"&gt;<br>&lt;center&gt;&lt;a href="http://shine.b1.jcink.com/index.php?showuser=3777"&gt;&lt;span style="font: 30px/80% 'Dawning of a New Day'; text-transform: lowercase; color: white;"&gt;"nickname"&lt;/span&gt;&lt;/a&gt;&lt;br&gt;<br>&lt;div class="redunwa"&gt;##. member group. face claim. job. sexuality? trait. trait. trait. trait.&lt;/div&gt;&lt;/center&gt;<br>&lt;/div&gt;&lt;/div&gt;<br>&lt;div class="containna"&gt;words about your character<br>&lt;p&gt;<br>&lt;b&gt;friends&lt;/b&gt; words about friends<br>&lt;p&gt;<br>&lt;b&gt;enemies&lt;/b&gt; words about enemies<br>&lt;p&gt;<br>&lt;b&gt;lovers&lt;/b&gt; words about lovers&lt;/div&gt;<br>&lt;/div&gt;<br>&lt;/center&gt;[/dohtml]<br><!--c2--></td></tr></tbody></table><!--ec2--><br><br><link href="http://fonts.googleapis.com/css?family=Dawning+of+a+New+Day" rel="stylesheet" type="text/css">
<center>
<style type="text/css"> 
.containnaa::-webkit-scrollbar { width:3px;} 
.containnaa::-webkit-scrollbar-track { background:white; } 
.containnaa::-webkit-scrollbar-thumb { background:black; }
img.blur { -webkit-filter:blur(3px); filter:blur(3px); -moz-filter:blur(3px); -o-filter:blur(3px); filter: url(http://beoverjoyed.b1.jcink.com/uploads/beoverjoyed/blur.svg#blur); }
.focus { width:425px; height:425px; overflow:hidden; }
.blurred { width:425px; height:425px; -webkit-transition:all .7s ease-in-out; transition:all .7s ease-in-out; -moz-transition:all .7s ease-in-out; -o-transition:all .7s ease-in-out; opacity:0; overflow:hidden; } 
.focus:hover .blurred { opacity:1; }
.contah { width: 375px; height: 375px; overflow-y: hidden; background: white;position: relative;bottom: 400px; opacity: 0; -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; transition-delay:.9s; }
.contah:hover { opacity: .9 }
.redda2 { width: 150px; height:375px; background: url('http://i.imgur.com/nNmBB6Z.png'); float: left; }
.reddaundah2 { width: 120px; height:125px; background: #2d2d2d; font: 7px arial; color: white; text-align:center; text-transform: uppercase; opacity:0; padding: 150px 15px 100px 15px; -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out;}
.reddaundah2:hover { opacity: .7 }
.containnaa { width: 185px; height: 330px; background: white; text-align: justify; color: 2d2d2d;font: 9px/90% georgia;padding: 25px 20px;overflow-y: auto; }
.containnaa:first-letter { background: black; padding: 12px 14px; font: 16px Georgia; display: block;color: white; float: left; margin: 0 6px 2px 0; text-transform: uppercase;}
.containnaa b { font: 9px courier; color: black; text-transform: uppercase; }
.redunwa2 { width: 115px; text-align: justify; }

.clickaa { height: 21px; overflow: hidden; -webkit-transition:all .7s ease-in-out; transition:all .7s ease-in-out; -moz-transition:all .7s ease-in-out; -o-transition:all .7s ease-in-out;}
.clickaa:hover { height: 440px; -webkit-transition:all .7s ease-in-out; transition:all .7s ease-in-out; -moz-transition:all .7s ease-in-out; -o-transition:all .7s ease-in-out; }
</style>

<div class="focus" style="background: url(http://i.imgur.com/DW9IGi8.png); "> <div class="blurred"><img src="http://i.imgur.com/DW9IGi8.png" class="blur"></div>
<div class="contah">

<div class="redda2">
<div class="reddaundah2">
<center><a href="http://shine.b1.jcink.com/index.php?showuser=3777"><span style="font: 30px/80% 'Dawning of a New Day'; text-transform: lowercase; color: white;">wren</span></a><br>
<div class="redunwa2">21. incubus. louis tomlinson. student teacher. pansexual. optimistic. lover of chocolate and shiny things. slightly neurotic. but also an oversized kid. just a little odd.</div></center>
</div></div>
<div class="containnaa">Wren was born right here in New Orleans and has pretty much lived here his entire life. His parents are English though so he spent a few of his summer across the pond which means he has the slightest hint of an accent but just barely. He can fake one pretty well though #win. Right now, he's a senior at the University of New Orleans (the regular, non-mortician one) and he's studying education or child care or something like that I dunno, just know that he's planning to be a teacher okay? He's currently a student teacher at one of the elementary schools and he loves it so much it makes his heart sing. His family is sort of loaded (yay for English high society) and he does tend to forget that not everyone can buy things without thinking about it but he isn't <i>too</i> unbearable.
<p>
</p><div class="clickaa"><b>hover here for unnecessarily long backstory</b><br>
Lorem boofron dolizzle daahng dawg amizzle, cool adipiscing own yo'. Nullam my shizz velizzle, izzle volutpizzle, suscipit quis, gravida get down get down, i saw beyonces tizzles and my pizzle went crizzle. Pellentesque eget fo shizzle. For sure erizzle. Fo bizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle dapibizzle boofron tempizzle daahng dawg. Mauris pellentesque nibh et crunk. Check it out izzle tortizzle. Pellentesque shizznit rhoncizzle sheezy. In hac nizzle platea dictumst. Dawg pimpin'. Shizznit tellizzle urna, pretium you son of a bizzle, mattizzle sure, break yo neck, yall crazy, nunc. Dope suscipizzle. Integer semper velit sizzle crazy. rem boofron dolizzle daahng dawg amizzle, cool adipiscing own yo'. Nullam my shizz velizzle, izzle volutpizzle, suscipit quis, gravida get down get down, i saw beyonces tizzles and my pizzle went crizzle. Pellentesque eget fo shizzle. For sure erizzle. Fo bizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle dapibizzle boofron tempizzle daahng dawg. Mauris pellentesque nibh et crunk. Check it out izzle tortizzle. Pellentesque shizznit rhoncizzle sheezy. In hac nizzle platea dictumst. Dawg pimpin'. Shizznit tellizzle urna, pretium you son of a bizzle, mattizzle sure, break yo neck, yall crazy, nunc. Dope suscipizzle. Integer semper velit sizzle crazy. rem boofron dolizzle daahng dawg amizzle, cool adipiscing own yo'. Nullam my shizz velizzle, izzle volutpizzle, suscipit quis, gravida get down get down, i saw beyonces tizzles and my pizzle went crizzle. Pellentesque eget fo shizzle. For sure erizzle. Fo bizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle dapibizzle boofron tempizzle daahng dawg. Mauris pellentesque nibh et crunk. Check it out izzle tortizzle. Pellentesque shizznit rhoncizzle sheezy. In hac nizzle platea dictumst. Dawg pimpin'. Shizznit tellizzle urna, pretium you son of a bizzle, mattizzle sure, break yo neck, yall crazy, nunc. Dope suscipizzle. Integer semper velit sizzle crazy.
</div>
<p>
<b>friends</b> Wren loves everybody okay, he thinks you're all perfect, give him all the friends. But seriously, he's a "people person", he tries to play nice with everyone because he doesn't really see a reason not to? He's pretty outgoing and has a habit of collecting friends which probably sounds weird but he just likes being able to walk into a party and know 9/10 of the people there. So yeah, sociable is his middle name. He'll literally befriend anybody <s>okay <i>almost</i> anybody</s>, for any reason and just talk to him okay, he'll love you for it.
</p><p>
<b>enemies</b> I don't think Wren would ever outright <i>hate</i> somebody though there could definitely be people he dislikes. He can be a bit dramatic at times (he was a theater kid in high school, he can't help it) so that might get annoying but tbh I am up for pretty much anything so~
</p><p>
<b>lovers</b> Wren is <i>delightfully</i> pansexual, <s>whatever that means</s>. So obviously, he goes for guys and gals and everything in between because <s>Lynn is bad at picking definitive sexualities for her characters</s> everyone is beautiful. I wouldn't say he's a whore or anything but the idea of having one night stands, friends with benefits, flings and like is not repulsive to him. Sharing the love great *U* He's more of a relationship guy though? A bit of a serial dater but HE TREATS ALL OF HIS LOVES RIGHT okay? They just tend to get annoyed at his protective <s>aka jealous</s> attitude, oops. I have absolutely no plans for him so everything is open man, past loves, future loves, even current loves, come at me bro~</p></div>
</div>
</div></center><br><br><br>
<link href="http://fonts.googleapis.com/css?family=Pathway+Gothic+One" rel="stylesheet" type="text/css">
<center>
<div style="width: 270px;  padding:15px; background:white;">
<div style="width: 240px;  padding:15px; color:black; font: 9px georgia; text-align:justify">
because i'm the greatest ever, i've added a little extra to to the code? this is for those of you that drone on for hours in your shippers okay look at this neato thing. basically you can hide all that extra info that no one wants to read but is totally necessary under a cut (just like tumblr omg). all ya gotta do is adjust the height so it shows all the text/doesn't cut off anything and you're good to goooooo.
</div>
</div></center>
<br><br><br><!--c1--><table border="0" align="center" width="95%" cellpadding="3" cellspacing="1" id="CODE-WRAP"><tbody><tr><td><b>CODE</b> </td></tr><tr><td id="CODE"><!--ec1--><br>[dohtml]&lt;link href='http://fonts.googleapis.com/css?family=Dawning+of+a+New+Day' rel='stylesheet' type='text/css'&gt;<br>&lt;center&gt;<br>&lt;style type="text/css"&gt; <br>.containnaa::-webkit-scrollbar { width:3px;} <br>.containnaa::-webkit-scrollbar-track { background:white; } <br>.containnaa::-webkit-scrollbar-thumb { background:black; }<br>img.blur { -webkit-filter:blur(3px); filter:blur(3px); -moz-filter:blur(3px); -o-filter:blur(3px); filter: url(http://beoverjoyed.b1.jcink.com/uploads/beoverjoyed/blur.svg#blur); }<br>.focus { width:425px; height:425px; overflow:hidden; }<br>.blurred { width:425px; height:425px; -webkit-transition:all .7s ease-in-out; transition:all .7s ease-in-out; -moz-transition:all .7s ease-in-out; -o-transition:all .7s ease-in-out; opacity:0; overflow:hidden; } <br>.focus:hover .blurred { opacity:1; }<br>.contah { width: 375px; height: 375px; overflow-y: hidden; background: white;position: relative;bottom: 400px; opacity: 0; -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out; transition-delay:.9s; }<br>.contah:hover { opacity: .9 }<br>.redda { width: 150px; height:375px; background: url(150x375 B&amp;W IMAGE HEREEEEEEEEE); float: left; }<br>.reddaundah { width: 120px; height:125px; background: #2d2d2d; font: 7px arial; color: white; text-align:center; text-transform: uppercase; opacity:0; padding: 150px 15px 100px 15px; -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out; -moz-transition:all .4s ease-in-out; -o-transition:all .4s ease-in-out;}<br>.reddaundah:hover { opacity: .7 }<br>.containnaa { width: 185px; height: 330px; background: white; text-align: justify; color: 2d2d2d;font: 9px/90% georgia;padding: 25px 20px;overflow-y: auto; }<br>.containnaa:first-letter { background: black; padding: 12px 14px; font: 16px Georgia; display: block;color: white; float: left; margin: 0 6px 2px 0; text-transform: uppercase;}<br>.containnaa b { font: 9px courier; color: black; text-transform: uppercase; }<br>.redunwa { width: 115px; text-align: justify; }<br><br>.clickaa { height: 21px; overflow: hidden; -webkit-transition:all .7s ease-in-out; transition:all .7s ease-in-out; -moz-transition:all .7s ease-in-out; -o-transition:all .7s ease-in-out;}<br>.clickaa:hover { height: 000px; -webkit-transition:all .7s ease-in-out; transition:all .7s ease-in-out; -moz-transition:all .7s ease-in-out; -o-transition:all .7s ease-in-out; }<br><br>&lt;/style&gt;<br><br>&lt;div class="focus" style="background: url(425X425 B&amp;W IMG HEREEEEE); "&gt; &lt;div class="blurred"&gt;&lt;img src="425X425 B&amp;W IMG HEREEEEEEE" class="blur" /&gt;&lt;/div&gt;<br>&lt;div class="contah"&gt;<br><br>&lt;div class="redda"&gt;<br>&lt;div class="reddaundah"&gt;<br>&lt;center&gt;&lt;a href="http://shine.b1.jcink.com/index.php?showuser=3777"&gt;&lt;span style="font: 30px/80% 'Dawning of a New Day'; text-transform: lowercase; color: white;"&gt;"nickname"&lt;/span&gt;&lt;/a&gt;&lt;br&gt;<br>&lt;div class="redunwa"&gt;##. member group. face claim. job. sexuality? trait. trait. trait. trait.&lt;/div&gt;&lt;/center&gt;<br>&lt;/div&gt;&lt;/div&gt;<br>&lt;div class="containnaa"&gt;words about character<br>&lt;p&gt;<br>&lt;div class="clickaa"&gt;&lt;b&gt;hover here for unnecessarily long backstory&lt;/b&gt;&lt;br&gt;<br>super long backstory hereeeeeeeee <br>&lt;/div&gt;<br>&lt;p&gt;<br>&lt;b&gt;friends&lt;/b&gt; words about friends<br>&lt;p&gt;<br>&lt;b&gt;enemies&lt;/b&gt; words about enemies<br>&lt;p&gt;<br>&lt;b&gt;lovers&lt;/b&gt; words about lovers&lt;/div&gt;<br>&lt;/div&gt;<br>&lt;/center&gt;[/dohtml]<br><!--c2--></td></tr></tbody></table><!--ec2-->  </div>

0

13

Код:
<!--HTML-->
<div class="postcolor"><link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet" type="text/css"><center><div style="width: 200px; padding: 20px; background: #fff; color: #999; font: 10px/100% poppins; text-align: justify;"></div><link href="https://fonts.googleapis.com/css?family=Poppins|Montserrat" rel="stylesheet" type="text/css"><style type="text/css">
#minakotwo { position: relative; width: 400px; height: 200px; padding: 25px; background: #fff; border: 3px double #81b2e3; overflow: hidden; }
#minakotwo .header { width: 370px; height: 170px; background: #81b2e3; padding: 15px; }
#minakotwo .img { width: 160px; height: 160px; top: 40px; left: 40px; background: url(http://placehold.it/160); border-radius: 100%; border: 5px #fff solid; overflow: hidden; }
.img img { min-width: 160px; min-height: 160px; }
#minakotwo .name { width: 200px; bottom: 40px; right: 35px; padding: 0 0 10 0px; color: #eee; font: 20px/100% montserrat; text-align: right; text-transform: uppercase; border-bottom: solid 3px; }
#minakotwo .content { width: 190px; height: 150px; top: 35px; left: 35px; padding: 15px; background: #fff; font: 11px/100% poppins; text-align: justify; overflow: auto; opacity: 0; }
#minakotwo .header:hover .img { transform: scale(.65); top: 75px; left: 275px; }
#minakotwo .header:hover .name { transform: scale(.75) translate(35px,-150px);}
#minakotwo .header:hover .content { opacity: 1; }
.content::-webkit-scrollbar { width: 5px; padding: 1px; background: #fff; border: solid 1px #aaa; }
.content::-webkit-scrollbar-thumb { width: 3px; background: #aaa; }
.content::-webkit-scrollbar-track { width: 3px; background: #fff; }

.img, .name, .content { position: absolute; -webkit-transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; -o-transition: 0.8s all ease-in-out; transition: 0.8s all ease-in-out; }
.img { -webkit-transition: 1s all ease-in-out; transition: 1s all ease-in-out; -webkit-transition-delay: 0.3s; transition-delay: 0.5s; }
a.credit { width: 100px; font: 10px poppins; color: #777; text-align: right; text-decoration: none; }
</style><center><div id="minakotwo"><div class="header"><div class="img"><img src="http://49.media.tumblr.com/tumblr_ma6gyomOek1r9ipqio1_500.gif" width="160" style="margin: -40 0 0 0px;"></div><div class="name"><b>name</b><br>age<br>face claim<br></div><div class="content">

</p></div></div></div><a href="http://shine.b1.jcink.com/index.php?showuser=18882" class="credit">ありがとう</a></center><br><br></div>

0

14

Код:
<!--HTML-->
<style type="text/css">

.chak b { font-weight: extra-bold; color: #E08E79; }

.chakra { opacity: 0; width: 200px; height: 200px; position: relative; background-color: #fff; -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: 180px; height: 180px; 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>

<table cellspacing="2" cellpadding="2" ><tr>
<td><div style="width: 200px; height: 200px; background-image: url(http://placehold.it/200x200);">

<div class="chakhov"><div class="chakra"><div class="chakras">

your request goes here, it'll scroll if it gets too long.

</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: #E08E79;">FIRST LAST</div>

</td>

<td><div style="width: 200px; height: 200px; background-image: url(http://placehold.it/200x200);">

<div class="chakhov"><div class="chakra"><div class="chakras">

your request goes here, it'll scroll if it gets too long.

</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: #E08E79;">FIRST LAST</div>

</td></tr>

<tr><td><div style="width: 200px; height: 200px; background-image: url(http://placehold.it/200x200);">

<div class="chakhov"><div class="chakra"><div class="chakras">

request goes here, it'll scroll if it gets too long

</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: #E08E79;">FIRST LAST</div>

</td>

<td><div style="width: 200px; height: 200px; background-image: url(http://placehold.it/200x200);">

<div class="chakhov"><div class="chakra"><div class="chakras">

request goes here, it'll scroll if it gets too long

</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: #E08E79;">FIRST LAST</div>

</td></tr>

</table>

</center>

<center><a href="http://shine.b1.jcink.com/index.php?showuser=3079"><div style="width: 400px; text-align: right; font-family: times; font-size: 7px; text-transform: uppercase;">OLIVER QUEEN</div></a></center>

0

15

Код:
<!--HTML-->
<div class="postcolor"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">$(document).ready(function(){
 
$(".toggle1").click(function() {
$(".apptoggle").slideDown(500);
$(".toggle1").slideUp(500);
});
 
$(".toggle2").click(function() {
$(".apptoggle").slideUp(500);
$(".toggle1").slideDown(500);
});
 
});</script>
<style>

.apptoggle { display: none; }
</style>

<div id="container">
<div class="toggle1" style="display: block;">open</div>

<div class="apptoggle" style="display: none;"><div class="inner">
this is some new content!

<div class="toggle2">close</div></div></div></div>
  </div>

0

16

Код:
<!--HTML-->
<link href='https://fonts.googleapis.com/css?family=Anaheim' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway:900,800,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<style type="text/css">

.ntitle { width: 512px; background: #000; color: #fff; font-family: raleway; font-weight: 800; font-size: 30px; text-transform: uppercase; padding: 50px 30px 50px 30px; }
.nstuff { height: 345px; width: 330px; overflow: auto; text-align: justify; padding: 0px 5px 0px 0px; font-family: arial; font-size: 10px; line-height: 100%; }
thing { font-family: anaheim; font-size: 8px; text-transform: uppercase; margin-left: -15px; font-weight: normal; letter-spacing: 1px; color: #373737; }
.nstuff2 { height: 345px; overflow: auto; text-align: justify; font-family: arial; font-size: 10px; padding: 5px; }
.nstuffff { margin-left: 15px; }
.head { color: #ccc; font-family: raleway; font-weight: 900; text-transform: uppercase; font-size: 15px; padding: 5px; border-bottom: solid 1px #eee; margin: 5px; text-align: left; }
.ndetails { width: 541px; padding: 15px; raleway; font-weight: 700; background: #000; color: #fff; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; margin-left: 20px; margin-top: -10px; text-align: center; }
.nshipper { background-color: #fafafa; border: 1px solid #eee; width: 550px; height: 400px; padding: 10px 10px 10px 10px; }
.Ncontainer {
height: 400;
width: 550;
}
.Ntabs {
position: relative;
width: 550px; 
height:  400px;
}
.Ntab {
float: left; }
.Ntab label {
display: block;
width: 90px;
height: 20px;
background: #fff;
padding: 10px; 
margin: 0px;
position: relative;
left: 0px;
top: 0px;
z-index: 3;
font-family: anaheim;
text-transform: uppercase; }
.Ntab input[type=radio]:checked ~ label {
border-bottom: 5px solid #ccc;
z-index: 2; }
.Ntab input[type=radio] {
display: none; }
.Ncontent {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: white;
padding: 45px 0px 0px 0px;
opacity: 0; 
-webkit-transition-duration: 1s; 
-moz-transition-duration: 1s;
 -o-transition-duration: 1s; }
.Ntab input[type=radio]:checked ~ label ~ .Ncontent {
z-index: 1; 
opacity: 1; }
</style>

<center>
<div class="ntitle" style="background: MEMBER GROUP HEX">

first last

</div>
<div class="nshipper">
<div class="Ncontainer">

<div class="Ntabs">


<div class="Ntab">
<input type="radio" id="Ntab-1" name="Ntab-group-1" checked>
<label for="Ntab-1"> <i class="fa fa-home fa-fw" style="font-size: 10px;margin-top:5px"></i>&nbsp; image</label>
<div class="Ncontent">
<img src="http://placehold.it/550x355/eee" width="550" height="355">
</div>
</div>


<div class="Ntab">
<input type="radio" id="Ntab-2" name="Ntab-group-1">
<label for="Ntab-2"> <i class="fa fa-heartbeat" style="font-size: 10px;margin-top:5px"></i>&nbsp; in depth</label>
<div class="Ncontent">
<table cellpadding="5" cellspacing="0"><tr><td>

<img src="http://placehold.it/200x345/eee/" width="200" height="345">

</td><td>

<div class="nstuff">
<div class="nstuffff">
<div class="head">basics</div>
<thing>full name:</thing> here
<br>
<thing>nicknames/aliases:</thing> here
<br>
<thing>age:</thing> in letters
<br>
<thing>date of birth:</thing> ##day month, ## year
<br>
<thing>zodiac sign:</thing> here
<br>
<thing>place of birth:</thing> here
<br>
<thing>current residence:</thing> here
<br>
<thing>hometown:</thing> here
<br>
<thing>nationality:</thing> here
<br>
<thing>ethnicity:</thing> here
<br>
<thing>gender:</thing> here
<br>
<thing>pronouns:</thing> here
<br>
<thing>occupation:</thing> here
<br>
<thing>languages:</thing> here
<br>
<thing>member group:</thing> here
<br>
<thing>for a request?:</thing> here

<div class="head">appearance</div>

<thing>playby:</thing> here
<br>
<thing>height:</thing> here
<br>
<thing>weight:</thing> here
<br>
<thing>build:</thing> here
<br>
<thing>hair color:</thing> here
<br>
<thing>eye color:</thing> here
<br>
<thing>tattoos:</thing> here
<br>
<thing>piercings:</thing> here
<br>
<thing>scars:</thing> here
<br>
<thing>glasses/contacts:</thing> here
<br>
<thing>distinguishing features:</thing> here
<br>
<thing>best feature:</thing> here
<br>
<thing>demeanor:</thing> here

<div class="head">relationships</div>

<thing>sexual orientation:</thing> here
<br>
<thing>romantic orientation:</thing> here
<br>
<thing>parents:</thing> here
<br>
<thing>siblings:</thing> here
<br>
<thing>children:</thing> here
<br>
<thing>other family:</thing> here
<br>
<thing>relationship status:</thing> here
<br>
<thing>current partner:</thing> here
<br>
<thing>past partners:</thing> here
<br>
<thing>future partners:</thing> here
<br>
<thing>sex life:</thing> here
<br>
<thing>turn ons:</thing> here
<br>
<thing>turn offs:</thing> here

<div class="head">health</div>

<thing>physical ailments:</thing> here
<br>
<thing>neurological ailments:</thing> here
<br>
<thing>allergies:</thing> here
<br>
<thing>current addictions:</thing> here
<br>
<thing>past addictions:</thing> here
<br>
<thing>smoking:</thing> here
<br>
<thing>drugs:</thing> here
<br>
<thing>alcohol:</thing> here
<br>
<thing>scars:</thing> here

<div class="head">personality</div>

<thing>negative traits:</thing> here
<br>
<thing>positive traits:</thing> here
<br>
<thing>alignment:</thing> here
<br>
<thing>myers-briggs:</thing> here
<br>
<thing>element:</thing> here
<br>
<thing>hogwarts house:</thing> here
<br>
<thing>divergent faction:</thing> here
<br>
<thing>pet peeves:</thing> here
<br>
<thing>bad habits:</thing> here
<br>
<thing>fears:</thing> here
<br>
<thing>hopes and dreams:</thing> here
<br>
<thing>likes:</thing> here
<br>
<thing>dislikes:</thing> here

<div class="head">favorites</div>

<thing>television show:</thing> here
<br>
<thing>movie:</thing> here
<br>
<thing>book:</thing> here
<br>
<thing>character:</thing> here
<br>
<thing>author:</thing> here
<br>
<thing>song:</thing> here
<br>
<thing>food:</thing> here
<br>
<thing>school subject:</thing> here
<br>
<thing>holiday:</thing> here
<br>
<thing>season:</thing> here
<br>
<thing>color:</thing> here
<br>
<thing>feeling:</thing> here
<br>
<thing>location:</thing> here
<br>
<thing>person:</thing> here

</div></div></td></tr></table></div></div>


<div class="Ntab">
<input type="radio" id="Ntab-3" name="Ntab-group-1">
<label for="Ntab-3"> <i class="fa fa-pencil fa-fw" style="font-size: 10px;margin-top:5px"></i>&nbsp; freeform</label>
<div class="Ncontent">

<div class="nstuff2" style="padding: 10px 40px 10px 40px">
<div class="head">this is a header</div>
Tacos retro drinking vinegar, next level intelligentsia mixtape umami. Poutine pork belly cornhole vice pabst locavore. Blue bottle flannel pork belly, chicharrones cornhole humblebrag readymade. Bushwick pickled intelligentsia heirloom master cleanse locavore, echo park affogato fixie. Mlkshk chartreuse normcore butcher, flexitarian pop-up XOXO tilde chambray PBR&B. Hashtag drinking vinegar whatever, bespoke paleo cliche +1 chicharrones chia fixie you probably haven't heard of them intelligentsia. Blog pug four loko kinfolk disrupt, banjo portland celiac normcore narwhal franzen you probably haven't heard of them authentic.
<p>
Letterpress deep v gluten-free hella umami put a bird on it single-origin coffee godard. 8-bit post-ironic hammock forage four loko sriracha gastropub, lo-fi gentrify everyday carry. Wayfarers gluten-free organic 90's, letterpress small batch wolf kitsch. Synth salvia blog, pork belly plaid shoreditch 3 wolf moon. Flannel lumbersexual yuccie authentic, austin disrupt crucifix normcore meditation. Flannel helvetica church-key mlkshk. Fingerstache artisan tattooed raw denim, asymmetrical hoodie cred roof party tilde freegan mlkshk migas.
<p>
Pork belly meh banh mi kombucha trust fund. Normcore echo park cred, 8-bit cold-pressed waistcoat cardigan cornhole pour-over four loko blue bottle lumbersexual tote bag gochujang. Messenger bag wayfarers viral keffiyeh, banh mi letterpress cardigan pug celiac food truck. Hoodie retro organic poutine salvia, gluten-free vinyl. Distillery drinking vinegar schlitz biodiesel slow-carb listicle normcore, 8-bit franzen farm-to-table mixtape gluten-free helvetica flannel knausgaard. Chillwave quinoa four loko XOXO, mustache pork belly stumptown. Slow-carb flannel YOLO craft beer.
<p>
DIY quinoa chicharrones brooklyn VHS ethical. Butcher authentic freegan slow-carb. Celiac organic selvage art party fashion axe. Quinoa austin mustache intelligentsia ethical vinyl trust fund ugh cray whatever disrupt, listicle 90's. Four loko pop-up affogato, PBR&B vinyl austin DIY next level +1 literally flannel freegan tumblr williamsburg. Pinterest organic asymmetrical kickstarter mumblecore. Sartorial bushwick asymmetrical, mlkshk shoreditch occupy photo booth chambray hella affogato gastropub.
<p>
Tacos retro drinking vinegar, next level intelligentsia mixtape umami. Poutine pork belly cornhole vice pabst locavore. Blue bottle flannel pork belly, chicharrones cornhole humblebrag readymade. Bushwick pickled intelligentsia heirloom master cleanse locavore, echo park affogato fixie. Mlkshk chartreuse normcore butcher, flexitarian pop-up XOXO tilde chambray PBR&B. Hashtag drinking vinegar whatever, bespoke paleo cliche +1 chicharrones chia fixie you probably haven't heard of them intelligentsia. Blog pug four loko kinfolk disrupt, banjo portland celiac normcore narwhal franzen you probably haven't heard of them authentic.
<p>
Letterpress deep v gluten-free hella umami put a bird on it single-origin coffee godard. 8-bit post-ironic hammock forage four loko sriracha gastropub, lo-fi gentrify everyday carry. Wayfarers gluten-free organic 90's, letterpress small batch wolf kitsch. Synth salvia blog, pork belly plaid shoreditch 3 wolf moon. Flannel lumbersexual yuccie authentic, austin disrupt crucifix normcore meditation. Flannel helvetica church-key mlkshk. Fingerstache artisan tattooed raw denim, asymmetrical hoodie cred roof party tilde freegan mlkshk migas.
<p>
Pork belly meh banh mi kombucha trust fund. Normcore echo park cred, 8-bit cold-pressed waistcoat cardigan cornhole pour-over four loko blue bottle lumbersexual tote bag gochujang. Messenger bag wayfarers viral keffiyeh, banh mi letterpress cardigan pug celiac food truck. Hoodie retro organic poutine salvia, gluten-free vinyl. Distillery drinking vinegar schlitz biodiesel slow-carb listicle normcore, 8-bit franzen farm-to-table mixtape gluten-free helvetica flannel knausgaard. Chillwave quinoa four loko XOXO, mustache pork belly stumptown. Slow-carb flannel YOLO craft beer.
<p>
DIY quinoa chicharrones brooklyn VHS ethical. Butcher authentic freegan slow-carb. Celiac organic selvage art party fashion axe. Quinoa austin mustache intelligentsia ethical vinyl trust fund ugh cray whatever disrupt, listicle 90's. Four loko pop-up affogato, PBR&B vinyl austin DIY next level +1 literally flannel freegan tumblr williamsburg. Pinterest organic asymmetrical kickstarter mumblecore. Sartorial bushwick asymmetrical, mlkshk shoreditch occupy photo booth chambray hella affogato gastropub.
</div></div></div>

<div class="Ntab">
<input type="radio" id="Ntab-4" name="Ntab-group-1">
<label for="Ntab-4"> <i class="fa fa-user-plus" style="font-size: 10px;margin-top:5px"></i> &nbsp; plotting</label>
<div class="Ncontent">

<table cellpadding="3" cellspacing="0"><tr>

<td><div class="nstuff">

<div class="head">about</div>

Tacos retro drinking vinegar, next level intelligentsia mixtape umami. Poutine pork belly cornhole vice pabst locavore. Blue bottle flannel pork belly, chicharrones cornhole humblebrag readymade. Bushwick pickled intelligentsia heirloom master cleanse locavore, echo park affogato fixie. Mlkshk chartreuse normcore butcher, flexitarian pop-up XOXO tilde chambray PBR&B. Hashtag drinking vinegar whatever, bespoke paleo cliche +1 chicharrones chia fixie you probably haven't heard of them intelligentsia. Blog pug four loko kinfolk disrupt, banjo portland celiac normcore narwhal franzen you probably haven't heard of them authentic.
<p>
Letterpress deep v gluten-free hella umami put a bird on it single-origin coffee godard. 8-bit post-ironic hammock forage four loko sriracha gastropub, lo-fi gentrify everyday carry. Wayfarers gluten-free organic 90's, letterpress small batch wolf kitsch. Synth salvia blog, pork belly plaid shoreditch 3 wolf moon. Flannel lumbersexual yuccie authentic, austin disrupt crucifix normcore meditation. Flannel helvetica church-key mlkshk. Fingerstache artisan tattooed raw denim, asymmetrical hoodie cred roof party tilde freegan mlkshk migas.

<div class="head">friendly</div>

Pork belly meh banh mi kombucha trust fund. Normcore echo park cred, 8-bit cold-pressed waistcoat cardigan cornhole pour-over four loko blue bottle lumbersexual tote bag gochujang. Messenger bag wayfarers viral keffiyeh, banh mi letterpress cardigan pug celiac food truck. Hoodie retro organic poutine salvia, gluten-free vinyl. Distillery drinking vinegar schlitz biodiesel slow-carb listicle normcore, 8-bit franzen farm-to-table mixtape gluten-free helvetica flannel knausgaard. Chillwave quinoa four loko XOXO, mustache pork belly stumptown. Slow-carb flannel YOLO craft beer.
<p>
DIY quinoa chicharrones brooklyn VHS ethical. Butcher authentic freegan slow-carb. Celiac organic selvage art party fashion axe. Quinoa austin mustache intelligentsia ethical vinyl trust fund ugh cray whatever disrupt, listicle 90's. Four loko pop-up affogato, PBR&B vinyl austin DIY next level +1 literally flannel freegan tumblr williamsburg. Pinterest organic asymmetrical kickstarter mumblecore. Sartorial bushwick asymmetrical, mlkshk shoreditch occupy photo booth chambray hella affogato gastropub.

<div class="head">romantic</div>

Tacos retro drinking vinegar, next level intelligentsia mixtape umami. Poutine pork belly cornhole vice pabst locavore. Blue bottle flannel pork belly, chicharrones cornhole humblebrag readymade. Bushwick pickled intelligentsia heirloom master cleanse locavore, echo park affogato fixie. Mlkshk chartreuse normcore butcher, flexitarian pop-up XOXO tilde chambray PBR&B. Hashtag drinking vinegar whatever, bespoke paleo cliche +1 chicharrones chia fixie you probably haven't heard of them intelligentsia. Blog pug four loko kinfolk disrupt, banjo portland celiac normcore narwhal franzen you probably haven't heard of them authentic.
<p>
Letterpress deep v gluten-free hella umami put a bird on it single-origin coffee godard. 8-bit post-ironic hammock forage four loko sriracha gastropub, lo-fi gentrify everyday carry. Wayfarers gluten-free organic 90's, letterpress small batch wolf kitsch. Synth salvia blog, pork belly plaid shoreditch 3 wolf moon. Flannel lumbersexual yuccie authentic, austin disrupt crucifix normcore meditation. Flannel helvetica church-key mlkshk. Fingerstache artisan tattooed raw denim, asymmetrical hoodie cred roof party tilde freegan mlkshk migas.

<div class="head">antagonistic</div>

Pork belly meh banh mi kombucha trust fund. Normcore echo park cred, 8-bit cold-pressed waistcoat cardigan cornhole pour-over four loko blue bottle lumbersexual tote bag gochujang. Messenger bag wayfarers viral keffiyeh, banh mi letterpress cardigan pug celiac food truck. Hoodie retro organic poutine salvia, gluten-free vinyl. Distillery drinking vinegar schlitz biodiesel slow-carb listicle normcore, 8-bit franzen farm-to-table mixtape gluten-free helvetica flannel knausgaard. Chillwave quinoa four loko XOXO, mustache pork belly stumptown. Slow-carb flannel YOLO craft beer.
<p>
DIY quinoa chicharrones brooklyn VHS ethical. Butcher authentic freegan slow-carb. Celiac organic selvage art party fashion axe. Quinoa austin mustache intelligentsia ethical vinyl trust fund ugh cray whatever disrupt, listicle 90's. Four loko pop-up affogato, PBR&B vinyl austin DIY next level +1 literally flannel freegan tumblr williamsburg. Pinterest organic asymmetrical kickstarter mumblecore. Sartorial bushwick asymmetrical, mlkshk shoreditch occupy photo booth chambray hella affogato gastropub.

<div class="head">other</div>

Tacos retro drinking vinegar, next level intelligentsia mixtape umami. Poutine pork belly cornhole vice pabst locavore. Blue bottle flannel pork belly, chicharrones cornhole humblebrag readymade. Bushwick pickled intelligentsia heirloom master cleanse locavore, echo park affogato fixie. Mlkshk chartreuse normcore butcher, flexitarian pop-up XOXO tilde chambray PBR&B. Hashtag drinking vinegar whatever, bespoke paleo cliche +1 chicharrones chia fixie you probably haven't heard of them intelligentsia. Blog pug four loko kinfolk disrupt, banjo portland celiac normcore narwhal franzen you probably haven't heard of them authentic.
<p>
Letterpress deep v gluten-free hella umami put a bird on it single-origin coffee godard. 8-bit post-ironic hammock forage four loko sriracha gastropub, lo-fi gentrify everyday carry. Wayfarers gluten-free organic 90's, letterpress small batch wolf kitsch. Synth salvia blog, pork belly plaid shoreditch 3 wolf moon. Flannel lumbersexual yuccie authentic, austin disrupt crucifix normcore meditation. Flannel helvetica church-key mlkshk. Fingerstache artisan tattooed raw denim, asymmetrical hoodie cred roof party tilde freegan mlkshk migas.
</div></td>
<td>

<img src="http://placehold.it/200x345/eee/" width="200" height="345">

</td></tr></table>

</div>
</div>

<div class="Ntab">
<input type="radio" id="Ntab-5" name="Ntab-group-1">
<label for="Ntab-5"> <i class="fa fa-cog fa-fw" style="font-size: 10px;margin-top:5px"></i> &nbsp; player</label>
<div class="Ncontent">
<table cellpadding="5" cellspacing="0"><tr><td>
<img src="http://placehold.it/200x160/eee" width="200" height="160">
<p>
<img src="http://placehold.it/200x160/eee" width="200" height="160">
</td><td>
<div class="nstuff">
<div class="nstuffff">
<div class="head">alias</div>
<thing>nicknames:</thing> here
<br>
<thing>age:</thing> here
<br>
<thing>pronouns:</thing> in letters
<br>
<thing>timezone:</thing> ##day month, ## year
<br>
<thing>contact:</thing> here
<br>
<thing>triggers:</thing> here
<br>
<thing>mature threading:</thing> here
<br>
<thing>other characters:</thing> here
<thing>about:</thing> write a lil' bout yourself here!
</td></tr></table>

</div></div></div></div></div> </div>
<div class="ndetails" style="background: MEMBER GROUP HEX">
age. occupation. group. playby.
</div>
<a href="http://shine.jcink.net/index.php?showuser=11594">thanks♥</a>
</center>

0

17

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'>
<style type="text/css">
::-webkit-scrollbar { height: 12px; width: 10px; background-color: transparent;} 
::-webkit-scrollbar-thumb { background: #030303; } 
::-webkit-scrollbar-corner { background: #030303; }
::-webkit-scrollbar-track { background: transparent; }
#thtabcontainer { width: 500px; height: 500px; background-color: #030303; position: relative; }
.thcontimage img { position: absolute; right: 0px; top: 0px; width: 325px; height: 500px; }
.thooc { position: absolute; bottom: 20px; left: 25px; width: 105px; padding: 10px; font-family: kite one; font-size: 6px; letter-spacing: 1px; line-height: 8px; color: white; text-transform: uppercase; }


.tabs { position: relative; height: 500px; width: 500px; clear: both; }
.tab label { display: block; width: 50px; background: #FFF; color: #030303; padding: 15px; font: 6px/12px kite one; text-transform: uppercase; letter-spacing: 3px; text-align: right; position: absolute; right: 325px; top: 200px; }
.tab [type=radio] { display: none; }

[type=radio]:checked ~ label { background: #DBDF8A; color: #FFF; border-bottom: 0px; z-index: 2; }
[type=radio]:checked ~ label ~ .thcontent { z-index: 1; opacity: 1; filter: alpha(opacity=100); }
.thcontent { width: 300px; position: absolute; top: 12px; left: 187px; float: right; right: 12px; bottom: 12px; text-align: justify; opacity: 0; filter: alpha(opacity=0); }
[type=radio]:checked ~ label { background: #DBDF8A; color: #030303; border-bottom: 0px; z-index: 2; }
[type=radio]:checked ~ label ~ .thcontent { z-index: 1; }

.thfirsttab { text-align: center; width: 300px; position: absolute; bottom: 20px; left: 35px; background-color: rgba(0,0,0,0.8); padding: 20px; width: 190px; height: 90px; color: white; font-family: times; font-size: 7px; text-transform: uppercase; letter-spacing: 2px; line-height: 90px; }

.thappcontent { background-color: rgba(255,255,255,0.8); padding: 20px; font-family: times; font-size: 10px; line-height: 11px; letter-spacing: 1px; height: 432px; overflow: auto; }

.thabout { position: absolute; top: 180px; left: -15px; width: 300px; }
.thabout ul { list-style: none; }
.thabout li { display: block; float: left; margin-left: 5px; margin-bottom: 5px; background-color: #030303; text-align: center; font-family: kite one; letter-spacing: 1px; color: white; font-size: 6px; line-height: 25px; width: 80px; text-transform: uppercase; }

</style>
<center>

<div id="thtabcontainer">
<div class="thcontimage">

<img src="325 x 500 IMAGE GOES HERE">

</div>
<div class="thooc">

OOC NAME. CONTACT INFO. TIMEZONE.

</div>
<div class="tabs">
  
 <div class="tab">
     <input type="radio" id="tab-1" name="tab-group-1" checked>
     <label for="tab-1">one</label><div class="thcontent"><div class="thfirsttab">

FIRST M. LAST

</div></div> </div>
<div class="tab">
     <input type="radio" id="tab-2" name="tab-group-1">
     <label for="tab-2" style="margin-top: 42px;">two</label><div class="thcontent"><div class="thabout">

<ul>
 <li>age</li>
<li>birth date</li>
<li>zodiac</li>
</ul>
<ul>
<li style="width: 165px;">HOMETOWN</li>
<li>other</li>
</ul>
<ul>
<li style="width: 250px;">MEMBER GROUP</li>
</ul>
<ul>
 <li>other</li>
<li>other</li>
<li>other</li>
</ul>

     </div></div>
 <div class="tab">
     <input type="radio" id="tab-3" name="tab-group-1">
     <label for="tab-3" style="margin-top: 84px;">three</label><div class="thcontent"><div class="thappcontent">

APP CONTENT GOES HERE. WILL SCROLL.

</div>
     </div> 
 </div>

  
</div>
</div>
<div style="font-size: 7px; text-transform: uppercase; font-family: georgia; letter-spacing: 1px; word-spacing: 3px;"><a href="http://shine.b1.jcink.com/index.php?showtopic=3546">THEONS</a> @ SHINE</div>
</center>

0

18

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic,700' rel='stylesheet' type='text/css'>
<center><table cellspacing="1" cellpadding="2">

<tr><td><div style="width: 245px; height: 150px; background-image: url(http://placehold.it/245x150)"></div>
<div style="width: 245px; height: 40px; background-color: #000; color: #fff; padding-top: 5px; padding-bottom: 5px; font-family: old standard tt; font-style: italic; font-weight: bold; text-transform: lowercase; text-align: center; font-size: 18px;">“ description ”
<div style="margin-top: 3px; font-family: old standard tt; font-size: 9px; text-transform: uppercase; font-weight: bold; text-align: center; line-height: 100%;">NAME - AGE - PLAYBY</div></td>
<td><div style="width: 200px; height: 190px; background-color: #fff; padding-top: 10px;"><center><div style="width: 175px; height: 180px; font-family: calibri; font-size: 11px; text-align: justify; line-height: 110%; color: #121212; text-transform: none; overflow: auto; padding-right: 5px;">Text here, will scroll.</div></center></div></td></tr>

<tr height="5px"></tr>

<tr><td><div style="width: 245px; height: 150px; background-image: url(http://placehold.it/245x150)"></div>
<div style="width: 245px; height: 40px; background-color: #000; color: #fff; padding-top: 5px; padding-bottom: 5px; font-family: old standard tt; font-style: italic; font-weight: bold; text-transform: lowercase; text-align: center; font-size: 18px;">“ description ”
<div style="margin-top: 3px; font-family: old standard tt; font-size: 9px; text-transform: uppercase; font-weight: bold; text-align: center; line-height: 100%;">NAME - AGE - PLAYBY</div></td>
<td><div style="width: 200px; height: 190px; background-color: #fff; padding-top: 10px;"><center><div style="width: 175px; height: 180px; font-family: calibri; font-size: 11px; text-align: justify; line-height: 110%; color: #121212; text-transform: none; overflow: auto; padding-right: 5px;">Text here, will scroll.</div></center></div></td></tr>

</table><div style="text-align: center; text-transform: uppercase; font-size: 9px;"><a href="http://z10.invisionfree.com/CAUTIONTOTHEWIND/index.php?showuser=212">&copy;</a> <a href="http://shine.b1.jcink.com/index.php?showuser=147">riza</a></div></center>

0

19

Код:
<!--HTML-->
<center><link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300|Raleway:400,800,900' rel='stylesheet' type='text/css'><link rel="stylesheet" type="text/css" href="http://itsabattlecry.b1.jcink.com/uploads/itsabattlecry/divine.css"><style type="text/css">

.divineover1, .divineover2, .divineover3, .divineover4 { background-color: #24C1C7; }
.divinecontent1 b { color: #65776F; }
.divinecontent1 i { color: #A4ACA4; }
.divinecontent1::first-letter, .divinecontent1 p::first-letter, .divinecontent1::-webkit-scrollbar-thumb { background-color: #449C9B; }
.divinequote1 { color: #449C9B; }

</style>

<div id="divinewrap">
<div id="divineinside">
<div class="divinetop">
<div class="divinegif" style="background-image: url(http://placehold.it/160x160);"></div>
<div class="divinename">first m. last</div>
<div class="divineinfo">##. member group. occupation.</div>
</div>

<div class="divinecontent"><div class="divinecontent1">

Shipper stuff here! This is what <b>bold</b> looks like. This is what <i>italic</i> looks like. 

</div></div>

</div>
<div class="divinequote"><div class="divinequote1">❝</div>

lyrics here

</div>
<div class="divineover1"></div><div class="divineover2"></div><div class="divineover3"></div><div class="divineover4"></div>
<div class="divinebg" style="background-image: url(http://placehold.it/300x500)"></div>
</div>
<div class="reexoxo"><a href="http://shine.b1.jcink.com/index.php?showuser=3019">nevermore.</a></div>
</center>

0

20

Код:
<!--HTML-->
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700|Karla:400,700|Lora:700italic);
.pt_text::-webkit-scrollbar {width: 3px;  background:#fff;}
.pt_text::-webkit-scrollbar-thumb {	background:#e5d727; border:1px solid #fff; width:1px;}
.pt_text::-webkit-scrollbar-track {	background:#fff; }
#pt_container {border:1px solid #ccc; padding:30px; width:450px; margin:0 auto; background-color:#fff;}
#pt_image {width:200px; height:320px;float:left; background-size:cover;}
.pattern {width:200px; height:320px; background-image:url('http://i.imgur.com/HejYAsw.png'); opacity:0.15;}
.pt_text {width:212px; height:320px;  font:10px 'karla'; font-weight:400; line-height:12px; display:block; overflow:auto; float:left; text-align:justify; padding-right:5px; margin-left:10px;}
.byrachel {text-align:right; width:510px; margin:0 auto; display:block; opacity:0.7;}
.pt_text h1 {font:12px 'montserrat'; text-transform:uppercase; letter-spacing:3px; font-weight:700; margin-bottom:2px; margin-top:15px; color:#e5d727}
.pt_text h2 {font:12px 'montserrat'; text-transform:uppercase; letter-spacing:3px; font-weight:700; margin-bottom:2px; margin-top:15px;  color:#98dac6}
.pt_text h3 {font:12px 'montserrat'; text-transform:uppercase; letter-spacing:3px; font-weight:700; margin-bottom:2px; margin-top:15px;  color:#f18b9c}

.pt_desc {font:7px 'montserrat'; font-weight:700; letter-spacing:1px; display:block; border-top:3px solid #fff; text-align:right; padding-top:4px;}

label img {width:50px; height:50px;}

.pt_text i {font:12px 'lora'; line-height:12px; font-style:italic; font-weight:700; color:#f18b9c;}
.pt_text b {text-transform:uppercase; font-size:9px; font-weight:700; color:#5bc7ab}

.r_tabs {  position: relative;   min-height: 535px;   clear: both; overflow:hidden;  margin:0;  border:1px solid #f0f0f0; padding:10px;}
.r_tab {  float: left; }
.r_tab label {display:block; width:50px; cursor:pointer; height:50px;  padding:5px; border:1px solid #ddd; 
 position: relative; margin-right:11px; top: 474px; z-index:9; opacity:0.7; -webkit-transition: all 0.4s;
   -moz-transition: all 0.4s;    -o-transition: all 0.4s;    transition: all 0.4s;}
.r_tab [type=radio] {  display: none;   }
.pt_top {padding:0px;  position: absolute; height:320px; overflow:hidden;  top: 10px; width:438px;  left: -400;  background: white;  right: 10; 
 bottom: 0; opacity:0; -webkit-transition: all 0.4s;    -moz-transition: all 0.4s;    -o-transition: all 0.4s;    transition: all 0.4s;}

.pt_line {  position: absolute;  top: 464px; background-color:#f18b9c; height:10px; left:10px; right:10px; overflow:hidden;}

.pt_line2 {  position: absolute;  top: 337px; background-color:#e5d727; height:1px; left:10px; right:10px; overflow:hidden;}

.pt_bottom {  position: absolute;  top: 345px; background-color:#5bc7ab; color:#fff; padding:30px; left:10px; right:10px; overflow:hidden; height:50px; }

.pt_h {display:block;   top: 345px; padding:30px; left:400px; right:10px;  position:absolute;
font:25px 'montserrat'; letter-spacing:-1px; font-weight:700; text-transform:uppercase;
-webkit-transition: all 0.4s;    -moz-transition: all 0.4s;    -o-transition: all 0.4s;    transition: all 0.4s; opacity:0; z-index:1000; color:#fff; width:368px;  height:50px;}

[type=radio]:checked ~ label {  z-index: 2; opacity:1;}
[type=radio]:checked ~ label ~ .pt_top  {  left:10px; opacity:1; z-index:1;}
[type=radio]:checked ~ label ~ .pt_h {  left:10px; opacity:1; z-index:1;}
</style>
<div id="pt_container">


<div class="r_tabs">  
<div class="pt_line2"></div>
<div class="pt_bottom"></div>
<div class="pt_line"></div>

  <div class="r_tab">
      <input type="radio" id="r_tab-1" name="r_tab-group-1" checked>
      

<label for="r_tab-1"><img src="http://placehold.it/50x50"></label>
      
<div class="pt_top">
<div id="pt_image" style="background-image:url(http://placehold.it/200x300);"><div class="pattern"></div></div>

<div class="pt_text">

Text here. <b>Bold</b> <i>Italic.</i>

<h1>H1</h1>

<h2>H2</h2>

<h3>H3</h3>

</div></div><div class="pt_h"><span class="pt_name">

FIRST LAST

</span><span class="pt_desc">

SHORT DESCRIPTION

</span></div> </div>
   
  <div class="r_tab">
      <input type="radio" id="r_tab-2" name="r_tab-group-1">
      <label for="r_tab-2"><img src="http://placehold.it/50x50"></label>
      
<div class="pt_top">
<div id="pt_image" style="background-image:url(http://placehold.it/200x300);"><div class="pattern"></div></div>

<div class="pt_text">

Text here. <b>Bold</b> <i>Italic.</i>

<h1>H1</h1>

<h2>H2</h2>

<h3>H3</h3>

</div></div><div class="pt_h"><span class="pt_name">

FIRST LAST

</span><span class="pt_desc">

SHORT DESCRIPTION

</span></div> </div>
   
   <div class="r_tab">
      <input type="radio" id="r_tab-3" name="r_tab-group-1">
      <label for="r_tab-3"><img src="http://placehold.it/50x50"></label>
    
<div class="pt_top">
<div id="pt_image" style="background-image:url(http://placehold.it/200x300);"><div class="pattern"></div></div>

<div class="pt_text">

Text here. <b>Bold</b> <i>Italic.</i>

<h1>H1</h1>

<h2>H2</h2>

<h3>H3</h3>

</div></div><div class="pt_h"><span class="pt_name">

FIRST LAST

</span><span class="pt_desc">

SHORT DESCRIPTION

</span></div> </div>

   <div class="r_tab">
      <input type="radio" id="r_tab-4" name="r_tab-group-1">
      <label for="r_tab-4"><img src="http://placehold.it/50x50"></label>
    
<div class="pt_top">
<div id="pt_image" style="background-image:url(http://placehold.it/200x300);"><div class="pattern"></div></div>

<div class="pt_text">

Text here. <b>Bold</b> <i>Italic.</i>

<h1>H1</h1>

<h2>H2</h2>

<h3>H3</h3>

</div></div><div class="pt_h"><span class="pt_name">

FIRST LAST

</span><span class="pt_desc">

SHORT DESCRIPTION

</span></div> </div>
   

   <div class="r_tab">
      <input type="radio" id="r_tab-5" name="r_tab-group-1">
      <label for="r_tab-5"><img src="http://placehold.it/50x50"></label>
    
<div class="pt_top">
<div id="pt_image" style="background-image:url(http://placehold.it/200x300);"><div class="pattern"></div></div>

<div class="pt_text">

Text here. <b>Bold</b> <i>Italic.</i>

<h1>H1</h1>

<h2>H2</h2>

<h3>H3</h3>

</div></div><div class="pt_h"><span class="pt_name">

FIRST LAST

</span><span class="pt_desc">

SHORT DESCRIPTION

</span></div> </div>

   <div class="r_tab">
      <label style="padding:0px; height:62px; width:62px; margin-right:0px; opacity:1; background-color:#e5d727; cursor:default; border:0px;"></label>
  </div>
</div>
</div><span class="byrachel"><a href="http://shine.b1.jcink.com/index.php?showuser=16867" title="breezeblocks. @ shine">●</a></span>

0



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