00
00
00
Тихая, грустная мелодия нарушила полную тишину в маленькой спальне. Будильник. Опять. Рука протягивается машинально к телефону, откладывая звонок ещё на пять минут, а глаза все так же недвижимо смотрят в потолок, как и последние несколько часов. Сегодня Триш не сомкнула и глаз, сон, как бы она не хотела, не приходил к ней, и все что она могла — бесцельно пялиться в потолок... дальше
Тихая, грустная мелодия нарушила полную тишину в маленькой спальне. Будильник. Опять. Рука протягивается машинально к телефону, откладывая звонок ещё на пять минут, а глаза все так же недвижимо смотрят в потолок, как и последние несколько часов. Сегодня Триш не сомкнула и глаз, сон, как бы она не хотела, не приходил к ней, и все что она могла — бесцельно пялиться в потолок... дальше

Pilot.

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

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


Вы здесь » Pilot. » приемная » твиттер


твиттер

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

1

0

2

Код:
<!--HTML-->

<script src="https://use.fontawesome.com/2aa626c137.js"></script>
<center><div class="fp"><div class="fppic"><fpuser>name</fpuser><fpat>@username</fpat><fpdot>•</fpdot><fpdate>24.10.16</fpdate></div><fptweet>this here is you tweet, i don't think that there is a character limit to this tweet, so happy tweeting. </fptweet><fpreply><i class="fa fa-reply" aria-hidden="true"></i>&nbsp; &nbsp; &nbsp;  <i class="fa fa-retweet" aria-hidden="true"></i> &nbsp; &nbsp; &nbsp;  <i class="fa fa-heart" aria-hidden="true"></i> &nbsp; &nbsp; &nbsp; <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</fpreply> </div> <fpcredit><a href="http://shine.jcink.net/index.php?showuser=1195">*</a></fpcredit>

<style> 
.fp { width: 500px; height: 98px;  background-color:#fafafa; position: relative;  } 
.fppic { width: 48px; height:48px; background-image:url(http://placehold.it/48x48); position: relative; top:3%; float:left; left:2%;  } 
fpuser { font-family: arial; font-size: 12px; top: 8%; left: 112%;  font-weight:bold; position: relative;  } 
fpat { position: relative; color: #8899a6; font-size:9px; font-family: arial; left: 115%; top:7%;    } 
fpdot { position: relative; color: #8899a6; font-size:9px; font-family: arial; left: 125%; top:8%; }
fpdate {position: relative; color: #8899a6; font-size:9px; font-family: arial; left: 135%; top:9%;}
fptweet {float:left;  position: relative; color:black; font-size:12px; font-family: arial; left:3%; top:28%;font-family:arial;  width:430px; height:30px; word-wrap:break-word; text-align:left;    }
fpreply { float:left; position: relative;  color:black; font-size:15px; font-family: helvetica; left:3%; top:40%; color: #8899a6; } 
fpcredit { top:30px; position: relative; font-size:30px; font-family:arial; text-align:center; }  </style>

0

3

Код:
<!--HTML-->

<style type="text/css">
.twita { width:500px; border:1px solid #ddd; border-radius: 5px;  -moz-border-radius: 5px; -webkit-border-radius: 5px; background:url(your 500x250 cover image url) #f1f1f1 no-repeat top; padding:0; }
.twiti { line-height:20px; margin-top:40px; }
.twits { background:#fff; width:500px; padding:0px; text-align:justify; margin-top:30px; }
.twitf { background:#f1f1f1; width:480px; padding:10px; text-align:justify; margin-top:0px; font-size:11px; font-family:arial; font-color: #0c0c0c; }
.twitf a, .tweet1 a { color:#19AAE0;}
.twitf img, .twiti img, .tweet1 img { border-radius: 5px;  -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.twets { width:500px; border:1px solid #ddd; border-radius: 5px;  -moz-border-radius: 5px; -webkit-border-radius: 5px; background:#fff; padding:0; margin-top:10px;}
.tweet1 { width:480px; border-top:1px solid #f1f1f1; padding:20px 10px; }
</style>

<center><div class="twita"><div class="twiti">

<img src="your 73x73 avatar image url (resizes automatically)" style="width:73px;height:73px;border:4px solid #fff;border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;"><br />
<span style="font-family:arial;font-size:18px;color:#fff;"><b>

name on twitter

</b></span><br /><span style="font-family:arial;font-size:14px;color:#fff;">

@twitterusername

</span><br /><span style="font-family:arial;font-size:11px;color:#fff;line-height:16px;">

description, use br-tags to start a new row if you think it goes too wide for your liking

<br /><small>

city/town

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

<div class="twits"><table cellspacing="0" cellpadding="10" style="margin-left:0px;"><tr><td valign="top" style="border-right:1px solid #f1f1f1;padding-left:20px;padding-right:20px;"><span style="font-family:arial; font-size:13px;color:#0c0c0c;"><b>

tweet count in numbers

</b></span><br /><span style="font-family:arial;font-size:8px;color:#0c0c0c;opacity:0.3;">TWEETS</span></td><td valign="top" style="border-right:1px solid #f1f1f1;padding-left:20px;padding-right:20px;"><span style="font-family:arial; font-size:13px;color:#0c0c0c;"><b>

following count in numbers

</b></span><br /><span style="font-family:arial;font-size:8px;color:#0c0c0c;opacity:0.3;">FOLLOWING</span></td>
<td valign="top" style="border-right:0px solid #ddd;padding-left:20px;"><span style="font-family:arial; font-size:13px;color:#0c0c0c;"><b>

follower count in number

</b></span><br /><span style="font-family:arial;font-size:8px;color:#0c0c0c;opacity:0.3;">FOLLOWERS</span></td><td valign="top" style="border-right:0px solid #ddd;text-align:right;padding-left:50px;"><div style="border-radius: 5px;  -moz-border-radius: 5px; -webkit-border-radius: 5px; border:1px solid #ddd; background:#f1f1f1;padding:5px 3px;margin-left:70px;float:right;">&nbsp;<img src="http://www.inf.ethz.ch/img/eth_website_icon_vcard.png" style="width:12px;height:12px;">▾</div></td><td valign="top" style="border-right:0px solid #ddd;text-align:right;"><div style="border-radius: 5px;  -moz-border-radius: 5px; -webkit-border-radius: 5px; border:1px solid #057ED0; background:#19AAE0;padding:5px 5px;font-family:arial;font-size:10px;color:#fff;margin-left:-10px;margin-top:2px;"><b>Following</b></div></td></tr></table></div><div class="twitf">
<img src="http://25.media.tumblr.com/avatar_61b3ff4f254b_30.png"> &nbsp; <img src="http://ggcdn-1.gogoyoko.com/30/6e61b3428c07ad21c58c22c22a9bfd66.jpg"> &nbsp;
<img src="http://24.media.tumblr.com/avatar_6e966dfc1a21_30.png"> &nbsp;Followed by <a>Sherlock Holmes</a>, <a>Thomas Mitt</a>, <a>Rose is rad</a> and <a>59 others</a>.</div></div>
<div class="twets"><p style="text-align:left;margin-left:20px;"><span style="font-family:arial; font-size:13px;color:#0c0c0c;"><b>Tweets</b></span></p><div class="tweet1"><table style="width:100%;"><tr><td rowspan="3" style="padding-left:10px;">

<img src="your 73x73 avatar image url (resizes automatically)" style="width:60px;height:60px;">

</td><td style="padding-left:10px;"><span style="font-family:arial; font-size:11px;color:#0c0c0c;"><b>

name on twitter

</b></span> &nbsp; <span style="font-family:arial;font-size:10px;color:#0c0c0c;opacity:0.5;">

@twitterusername

</span></td><td style="text-align:right;"><span style="font-family:arial;font-size:10px;color:#0c0c0c;opacity:0.5;">1h</span></td></tr><tr><td colspan="2" style="padding-left:10px;"> <span style="font-family:arial; font-size:11px;color:#0c0c0c;">

tweet goes here. remember to keep in around 140 characters??

</span></td></tr><tr><td style="padding-left:15px;"> <span style="font-family:arial; font-size:10px;color:#0c0c0c;opacity:0.3;">Expand</span>
</td><td style="text-align:right;"> <span style="font-family:arial; font-size:10px;color:#0c0c0c;opacity:0.3;"><img src="http://s.telegraph.co.uk/graphics/html/TwitterEmbed/Version1/reply.png"> Reply &nbsp; <img src="http://politwitter.ca/images/icon_retweet.png"> Retweet &nbsp; <img src="http://rahulvarshneya.com/wp-content/themes/rahul/home/images/icon_three.png"> Favorite </span></td></tr></table></div></div></center><center><sup><a href="http://shine.b1.jcink.com/index.php?showuser=6359">▲▲▲</a></sup></center>

0

4

Код:
<!--HTML-->

<center><div class="twets"><div class="tweet1"><table style="width:90%;"><tr><td style="padding-right:10px;width:55px;">

<img src="your 73x73 avatar image url (resizes automatically)" style="height:60px;width:60px;">

</td><td style="width:280px;"><span style="font-family:arial;font-size:18px;color:#0c0c0c;"><b>

name on twitter

</b></span><br /><span style="font-family:arial;font-size:13px;color:#0c0c0c;opacity:0.5;">

@twitterusername

</span></td><td><div style="border-radius: 5px;  -moz-border-radius: 5px; -webkit-border-radius: 5px; border:1px solid #ddd; background:#f1f1f1;padding:5px 3px; width:23px;">&nbsp;<img src="http://www.inf.ethz.ch/img/eth_website_icon_vcard.png" style="width:12px;height:12px;">▾</div></td><td><div style="border-radius: 5px;  -moz-border-radius: 5px; -webkit-border-radius: 5px; border:1px solid #057ED0; background:#19AAE0;padding:5px 5px;font-family:arial;font-size:10px;color:#fff;width:48px;"><b>Following</b></div></td></tr><tr><td colspan="4"> <br /><span style="font-family: georgia;font-size:22px;color:#0c0c0c;">

the tweet goes here! remember 140 characters if u wanna b 4realsies

</span></td></tr><tr><td style="text-align:left;padding-left:10px;" colspan="4"> <span style="font-family:arial; font-size:10px;color:#0c0c0c;opacity:0.3;"><br />

0 minutes ago via iPhone 5 or whatever device???

</span></td></tr></table></div></div></center><center><sup><a href="http://shine.b1.jcink.com/index.php?showuser=6359">▲▲▲</a></sup></center>

0

5

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

#jinxsevena { position: relative; width: 500px; height: 450px; background: #e7e7e7; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; overflow: hidden; }
.avatara img { position: absolute; width: 120px; height: 120px; top: 100px; left: 20px; border: 5px solid #fff; -webkit-border-radius: 5%; -moz-border-radius: 5%; border-radius: 5%; }
.stat { width: 70px; padding: 10px 5px 0px; color: #555; font: 10px arial; text-transform: uppercase; text-align: center; }
.stats { padding: 5px; color: #06a2cb; font: 18px arial; text-align: center; }
.following { position: absolute; width: 75px; height: 5px; top: 15px; margin-left: 5px; padding: 10px; background: #54aaec; color: #fff; font: bold 13px/5px arial; display: inline-block; text-align: center; -webkit-border-radius: 5%; -moz-border-radius: 5%; border-radius: 5%; border: 1px solid #3b88c3; }
.tweetm { width: 290px; padding: 10 10 0px; background: #fff; color: #000; font: 11px arial; }

</style><center><div id="jinxsevena"><div style="width: 500px; height: 175px; background: url(500X150 IMG HERE);"></div><div class="avatara"><a href="http://shine.b1.jcink.com/index.php?showuser=13521"><img src="120X120 IMG HERE" width="120" height="120"></a></div><table cellspacing="0" cellpadding="0" style="position: absolute; top: 175px; left: 150px;"><tr><td class="stat">TWEETS</td><td class="stat">FOLLOWING</td><td class="stat">FOLLOWERS</td></tr></tr><td class="stats">824</td>
<td class="stats">126</td>
<td class="stats">15.8M</td><td><div class="following">Following</div></td></tr></table><table cellspacing="10" cellpadding="0" style="position: absolute; height: 200px; top: 230px; left: 10px; overflow: auto;"><tr><td style="width: 150px; font: 14px arial;">

<span style="font: bold 18px arial;">NAME</span><br><font color="#aaaaaa">@USERNAME</font><p>

BRIEF DESCRIPTION/BIOGRAPHY

<p><table cellspacing="1" cellpadding="0"><td><img src="http://i.imgur.com/dWf0Tlf.png"></td><td style="font: 14px/23px arial; padding-left: 5px;">LOCATION<br><span style="color: #06a2cb;">WEBSITE</span><br>Joined MONTH YEAR

</td></tr></table></td><td><div class="tweetm" style="position: absolute; top: 10px;"><img src="AVATAR IMG HERE" width="30" height="30" style="position: absolute; padding-right: 10px;"><div style="padding-left: 40px;"><b>NAME</b><font color="#aaaaaa">@USERNAME · MON D</font><br>

TWEET EQUAL OR UNDER 140 CHARACTERS GOES HERE

<p><img src="http://i.imgur.com/VIGC0CN.png" height="15"></div>

</tr></table></div></center>

0

6

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

#jinxsevenb { position: relative; width: 420px; height: 245px; padding: 15px; background: #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 1px solid #ccc; overflow: hidden; }
.avatarb img { width: 70px; height: 70px; -webkit-border-radius: 5%; -moz-border-radius: 5%; border-radius: 5%; }
.handle { width: 225px; color: #aaa; font: 11px arial; text-align: left; }
.follow { width: 75px; height: 5px; padding: 10px; background: #54aaec; color: #fff; font: bold 13px/5px arial; display: inline-block; text-align: center; -webkit-border-radius: 5%; -moz-border-radius: 5%; border-radius: 5%; border: 1px solid #3b88c3; }
.tweet { width: 410px; height: 100px; color: #000; font: 20px/22px georgia; text-align: left; }
.tweet img { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }

</style><center><div id="jinxsevenb"><table cellspacing="15" cellpadding="0" width="450" style="float: left;"><tr><td class="avatarb"><a href="http://shine.b1.jcink.com/index.php?showuser=13521"><img src="AVATAR IMG HERE"></a></td><td class="handle"><span style="color: #000; font: bold 15px arial;">NAME</span><br>@USERNAME</td><td><div class="follow">Following</div></td></tr></table><p><div class="tweet">

TWEET EQUAL OR UNDER 140 CHARACTERS GOES HERE

<p><img src="http://i.imgur.com/VIGC0CN.png"><p><span class="handle">7:42 AM - 5 Jan 2015</div></table></div></center>

0

7

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Lato:100,400,700' rel='stylesheet' type='text/css'><style type='text/css'>
#twittercontainer { width:500px; height:308px; -moz-box-shadow: 2px 2px 5px #333; -webkit-box-shadow: 2px 2px 5px #333; box-shadow: 2px 2px 5px #333; border-radius:4px; text-transform:none; }
#twittercontainer .header { width:460px; height:210px; padding:20px; border-radius:4px 4px 0px 0px; }
#twittercontainer .icon { width:75px; height:75px; border:5px solid #fff; border-radius:4px 4px; -moz-box-shadow: 2px 2px 5px #333; -webkit-box-shadow: 2px 2px 5px #333; box-shadow: 2px 2px 5px #333; }
#twittercontainer .name { margin-top:5px; font-family: arial; font-size:25px; color:#fff; letter-spacing-1px; text-shadow:1px 1px 1px #333; line-height:100%; font-weight:bold; }
#twittercontainer .handle { margin-top:5px; font-family:arial; font-size:18px; color:#fff; letter-spacing:0px; text-shadow:1px 1px 1px #333; line-height:100%; }
#twittercontainer .description { margin-top:5px; font-family:arial; font-size:15px; color:#fff; letter-spacing:0px; text-shadow:1px 1px 1px #333; line-height:100%; padding-left:25px; padding-right:25px; }
#twittercontainer .bottombarthing { width:500px; height:58px; background-color:#fff; border-radius:0px 0px 4px 4px; }
#twittercontainer .boxes { width:90px; height:58px; padding-left:10px; display:inline-block; }
#twittercontainer .words { line-height:15px; padding-top:8px; height:15px; text-align:justify; font-family:lato; color:#acafac; font-size:10px; font-weight:100; letter-spacing:-1px; text-transform:uppercase; }
#twittercontainer .bolded { text-align:justify; height:18px; padding-bottom:5px; font-family:lato; font-weight:700; color:#2e8cb1; font-size:18px; line-height:18px; }
</style><center>
<div id='twittercontainer'><div class='header' style=' background-image:url(http://pacehold.it/500x250);'><div class='icon'><img src='http://placehold.it/75' width='75px'></div>
<div class='name'>

name here

</div><div class='handle'>

@handlehere

</div><div class='description'>

description

</div></div><div class='bottombarthing'><div class='boxes'><div class='words'>TWEETS</div><div class='bolded'>

###

</div></div><div class='boxes'><div class='words'>Following</div><div class='bolded'>

###

</div></div><div class='boxes'><div class='words'>Followers</div><div class='bolded'>

###

</div></div><div style='margin-left:40px; display:inline-block; width:108px; height:35px; padding-top:0px; padding-bottom:7px; padding-left:23px; padding-right:23px;'><div style='width:106px; height:33px; line-height:33px; border:1px solid #e2e8ee; border-radius:4px; text-transform:none; font-family: arial; font-size:12px; color:#677580; letter-spacing-2px; font-weight:bold;'>Edit profile</div></div>

</div></div><div style='margin-top:8px; width:450px; text-align:center; font-family:calibri; font-size:8px; color:#777; line-height:100%; letter-spacing:4px;'>[URL=http://shine.b1.jcink.com/index.php?showuser=599] THANKS TO LOUIS AT SHINE![/URL]</div></center>

0

8

Код:
<!--HTML-->

<link href='http://fonts.googleapis.com/css?family=Lato:100,400,700' rel='stylesheet' type='text/css'><center><div style='width:300px; min-height:75px; padding:20px; background-color:#fff; -moz-box-shadow: 2px 2px 5px #333; -webkit-box-shadow: 2px 2px 5px #333; box-shadow: 2px 2px 5px #333; border-radius:4px 4px;'><div style='width:75px; height:75px; border-radius:4px 4px; background-image:url(http://placehold.it/75); float:left; margin-right:20px; margin-bottom:5px;'></div><div style='font-family:arial black; color:#000; text-transform:none; font-size:10px; line-height:10px; text-align:left;'>

name here

</div><div style='font-family:arial; color:#677580; text-transform:none; font-size:9px; line-height:10px; text-align:left;'>

@handlehere

</div><div style='margin-top:5px; text-align:justify; font-family:lato; font-weight:400; color:#000; font-size:10px; text-transform:none; line-height:120%;'>

tweet here. 140 characters or less to keep it realistic obvs.

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

0

9

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

<center>


<style type="text/css">

.bakie { width:470px; padding:20px; background:#fff; border:1px solid #eee; }

.name { font:50px pacifico; color:#121212;  }

.masstext { width:200px; height:400px; padding:5px; overflow:auto; margin-right:12px; text-align:justify; font:10px gerogia; line-height:90%; }

.masstext::-webkit-scrollbar { width: 1px; height: 1px; border:0px;}
.masstext::-webkit-scrollbar-track { background-color: #e7e7e7; border:0px; }
.masstext::-webkit-scrollbar-thumb { background-color:#121212; border:0px;}

</style>

<div class="bakie">

<div class="name">first middle last</div>

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

<td valign="top"><div class="masstext" style="text-align:right;">

<font style="text-transform:uppercase; font-weight:bold; font-size:16px; letter-spacing:3px;">basics //</font><br><br>

<b>full name:</b> here<br>
<b>age:</b> in letters here<br>
<b>hometown:</b> here<br>
<b>birthday:</b> here<br>
<b>occupation:</b> here<br>
<b>parents:</b> here, age - here, age<br>
<b>siblings:</b> here, age - here, age - here, age<br>
<b>relationship status:</b> here<br>

<br><br>

<font style="text-transform:uppercase; font-weight:bold; font-size:16px; letter-spacing:3px;">relationships //</font><br><br>

<div style="margin-bottom:10px;">I

list all of your current relationships - it'll make it super easy to find ways to plot people together if they know someone in common.

</div>

<font style="text-transform:uppercase; font-weight:bold; font-size:16px; letter-spacing:3px;">education //</font><br><br>

<b> highscool name here ( 2009 - 2012 )</b><br>
<i>-graduated with honors</i><br>
<b>college here ( 2012 - 2015 )</b><br>
<i>- bachelors in science</i><br>

<br><br>

<font style="text-transform:uppercase; font-weight:bold; font-size:16px; letter-spacing:3px;">facts //</font><br><br>

> random fact here<br>
> random fact here<br>
> random fact here<br>
> random fact here<br>
> random fact here<br>
> random fact here<br>
> random fact here<br>
> random fact here<br>


</div></td>



<td valign="top"><div class="masstext" style="border-left:1px solid #eee; padding-left:15px;">

<font style="text-transform:uppercase; font-weight:bold; font-size:16px; letter-spacing:3px;">experiences  //</font><br><br>

<b>moment one ( march 10, 1994 )</b>: I'll die fighting, Inside me there's a fire that burns (whoa) My life begins And ends without the faith that we learn (whoa) Save me from the darkest places Save me from myself I'm a loaded gun An only son But I'm nobody's hero I've come undone I'm on the run Yeah, I'm nobody's hero Nobody's hero To heal, your scars I will give you everything <br><br>

<b>moment two ( april 25, 2010 ):</b> I'll die fighting, Inside me there's a fire that burns (whoa) My life begins And ends without the faith that we learn (whoa) Save me from the darkest places Save me from myself I'm a loaded gun An only son But I'm nobody's hero I've come undone I'm on the run Yeah, I'm nobody's hero Nobody's hero To heal, your scars I will give you everythingAn only son, But I'm nobody's hero I've come undone I'm on the run Yeah, I'm nobody's hero Nobody's hero (nobody's hero) This martyrs cross gets too heavy to exist (whoa) And we feel the loss of the lives I left to risk (C'mon) I'm a loaded gun An only son But I'm nobody's hero I've  <br><br>

<b>moment two ( april 25, 2010 ):</b> I'll die fighting, Inside me there's a fire that burns (whoa) My life begins And ends without the faith that we learn (whoa) Save me from the darkest places Save me from myself I'm a loaded gun An only son But I'm nobody's hero I've come undone I'm on the run Yeah, I'm nobody's hero Nobody's hero To heal, your scars I will give you everything I can (whoa) This war, of hearts We will rise again and take a stand (whoa) I can't lead you to salvation An only son, But I'm nobody's hero I've come undone I'm on the run Yeah, I'm nobody's hero Nobody's hero (nobody's hero) This martyrs cross gets too heavy to exist (whoa) And we feel the loss of the lives I left to risk (C'mon) I'm a loaded gun An only son But I'm nobody's hero I've  <br><br>

<b>moment two ( april 25, 2010 ):</b> I'll die fighting, Inside me there's a fire that burns (whoa) My life begins And ends without the faith that we learn (whoa) Save me from the darkest places Save me from myself I'm a loaded gun An only son But I'm nobody's hero I've come undone I'm on the run Yeah, I'm nobody's hero Nobody's hero To heal, your scars I will give you everything I can (whoa) This war, of hearts We will rise again and take a stand (whoa) I can't lead you to salvation Yet I am just a man I'm a loaded gun, An only son, But I'm nobody's hero I've come undone I'm on the run Yeah, I'm nobody's hero Nobody's hero (nobody's hero) This martyrs cross gets too heavy to exist (whoa) And we feel the loss of the lives I left to risk (C'mon) I'm a loaded gun An only son But I'm nobody's hero I've <br><br>


</div></td>

</tr></table>

<table cellpadding="5px" cellspacing="5px;"><tr>

<td><div style="width:150px; height:150px; background:url(150x150IMAGE 150x150IMAGE HERE RIGHT HERE YEAHH) center; background-size:cover; border:10px solid #f8f8f8;"></div></td>

<td>
<font style="text-transform:uppercase; font-weight:bold; font-size:16px; letter-spacing:3px;">about the author  //</font><br>

<div class="masstext" style="width:250px; height:110px; padding:15px; overflow:auto; text-align:justify; font:10px georgia;">

<b>alias - age - timezone</b><br>
I'll die fighting, Inside me there's a fire that burns (whoa) My life begins And ends without the faith that we learn (whoa) Save me from the darkest places Save me from myself I'm a loaded gun An only son But I'm nobody's hero I've come undone I'm on the run Yeah, I'm nobody's hero Nobody's hero To heal, your scars I will give you everything I can (whoa) This war, of hearts We will rise again and take a stand (whoa) I can't lead you to salvation Yet I am just a man I'm a loaded gun, An only son, But I'm nobody's hero I've come undone I'm on the run Yeah, I'm nobody's hero Nobody's hero (nobody's hero) This martyrs cross gets too heavy to exist (whoa) And we feel the loss of the lives I left to risk (C'mon) I'm a loaded gun An only son But I'm nobody's hero I've 

</div></td>

</tr></table>

</div>


</center>

0

10

Код:
<!--HTML-->
<center> <link href='http://fonts.googleapis.com/css?family=Nova+Mono|Life+Savers|Source+Code+Pro:300' rel='stylesheet' type='text/css'> <style type="text/css">

.sara-boxes { width: 96px; height: 16px; background-color: #f1f1f1; text-align: center; font-family: times; font-size: 10px; text-transform: lowercase; font-weight: none; font-style: italic; color: #000; letter-spacing: 1px; line-height: 100%; margin-left: 5px; padding: 5px 0px 0px 0px;}

.name-box { width: 220px; height: 20px; background-color: #fff; border: 3px double #CCC; padding: 18px 10px 10px 10px; font-family: 'cambria'; font-size: 20px; letter-spacing: 1px; color: #000; font-style: italic; position: relative; top: 180px; opacity: .88;  }

.alias-box { width: 220px; height: 5px; padding: 5px 10px 10px 10px; text-align: center; font-family: cambria; font-size: 13px; font-style: italic; color: #000; background-color: #f1f1f1; border: 3px double #CCC; margin: 8px 0px 0px 0px; }

</style>
<div style="width: 450px;">
<div style="width: 450px; height: 250px; background-image: url(450 X 250 IMAGE GOES HERE!!!!!!!!!!!);"> <div class="name-box"> annalise hughes </div> </div>
<div style="width: 450px; height: 60px; background-color: #333; position: relative;">
<table cellspacing="0" cellpadding="0" style="position: relative; top: 20px; left: -3px;">
<td><div class="sara-boxes">

age

</div>  </td><td><div class="sara-boxes">

occupation

</div> </td><td><div class="sara-boxes">

member group

</div>  </td>
<td><div class="sara-boxes">

playby name

</div>  </td> </table></div>
<div style="width: 450px; background-color: #333; padding: 0px 0px 10px 0px;">
<div style="width: 380px; height: 230px; background-color: #4E4E4E; padding: 10px; font-family: cambria; font-size: 10px; color: #f1f1f1; line-height: 100%; text-align: justify; overflow: auto; ">

app goes here. it will scroll.

</div>
<div style="height: 7px;"></div>
<div class="alias-box"> player info goes here.  </div> 

</div></div>
<a href="http://shine.b1.jcink.com/index.php?showuser=165"><div style="width: 450px;text-align: right; font-family: cambria; font-size: 8px; text-transform: uppercae; font-style: italic; color: #000; line-height: 100%; letter-spacing: 1px;"> ♥ SARA! </div></a>
</center>

0

11

Код:
<!--HTML-->
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
<style>
#wisp { width:500px; height:420px; background:url(http://i.imgur.com/AYDUbR9.jpg); background-position:center top;  margin:auto;z-index:1; box-shadow: 0px 0px 25px #888; }
#wisp .will { width:90px; padding:25px 15px; height:370px; position:relative; top:0px; left:0px; background-color:#fff; }
.burrs { float:left; }
.burr label { background:url(http://i.imgur.com/5Umsp9d.jpg); font-family:times new roman; text-transform:lowercase; text-align:center; display:block; padding:5px; margin-bottom:5px; width:80px;text-shadow:0px 0px 5px #ffffff; color:#000; }
.burr [type=radio] {display:none;}
.burr [type=radio]:checked ~ label { color:#fff;text-shadow:0px 0px 2px #787878; background: #000; }
.burr .fluff {  box-shadow:0px 0px 25px #555555; font-family: tahoma, sans-serif;position:absolute; top:25px; left:-100px; width:320px; height:370px; background:#fff; -moz-transition: linear 0.5s; -webkit-transition: linear 0.5s;z-index:-2; }
.burr [type=radio]:checked ~ label ~ .fluff { position:absolute; top:25px; left:150px; z-index:0; -moz-transition: linear 0.5s; -webkit-transition: linear 0.5s;}
.tuft { position:absolute: top:-10px; left:-10px; background-color:#000;border:10px solid #000; width:300px; height:80px;overflow:hidden; }
.wheat {width:320px; height:270px; overflow:hidden;margin:10px auto; }
.stalk {margin: auto; width:300px; height:270px; overflow:auto; font-family: tahoma, sans-serif; font-size:11px; padding-right:2px; }
.stalk h1 { font-family:arial; text-transform:lowercase;border-bottom:1px solid #000; font-style:italic; font-size:25px;text-align:right; font-weight: normal; letter-spacing:-2px;  }
.seed { position:absolute;top:20px;right:10px;width: 210px;font-family: Roboto Slab, serif; font-size:25px;text-align:right;color:#fff; text-transform:uppercase;letter-spacing:-2px;line-height:23px; }
.seed sub { font-size:10px; font-family:times new roman;color:#aaa;text-transform:none;letter-spacing:0px; }
.roots { position:absolute; left:15px; bottom:10px; font-family:times new roman; color:#000; width:80px; text-align: center;z-index:2; text-transform:lowercase; font-size: 12px; }
.roots a { color:#474747; text-transform:lowercase; font-size: 12px; }
</style>
<br><br>
<div id="wisp"><div class="will"><div class="burrs">

<div class="burr">
<input type="radio" id="burr-1" name="burr-group-1">
<label for="burr-1">name 1</label>
<div class="fluff"><div class="tuft"><div style="width:80px; height:80px; border-radius:40px;"> <img src="http://placehold.it/80x80" style="width:80px; height:80px; border-radius:40px;"></div> <div class="seed"><div style="border-bottom:1px solid #fff;padding-bottom:1px;">character name</div><sub>age // something here // something else here</sub></div></div>
<div class="wheat"><div class="stalk">
<h1>active;; </h1>
<a href="URLHERE">link to thread</a> with Name Here
<br>
<a href="URLHERE">link to thread</a> with Name Here
<br>

<h1>completed;; </h1>
<a href="URLHERE">link to thread</a> with Name Here
<br>

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

<div class="burr">
<input type="radio" id="burr-2" name="burr-group-1">
<label for="burr-2">name 2</label>
<div class="fluff"><div class="tuft"><div style="width:80px; height:80px; border-radius:40px;"> <img src="http://placehold.it/80x80" style="width:80px; height:80px; border-radius:40px;"></div> <div class="seed"><div style="border-bottom:1px solid #fff;padding-bottom:1px;">character name</div><sub>age // something here // something else here</sub></div></div>
<div class="wheat"><div class="stalk">
<h1>active;; </h1>
<a href="URLHERE">link to thread</a> with Name Here
<br>
<a href="URLHERE">link to thread</a> with Name Here
<br>

<h1>completed;; </h1>
<a href="URLHERE">link to thread</a> with Name Here
<br>

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

<div class="burr">
<input type="radio" id="burr-3" name="burr-group-1">
<label for="burr-3">name 3</label>
<div class="fluff"><div class="tuft"><div style="width:80px; height:80px; border-radius:40px;"> <img src="http://placehold.it/80x80" style="width:80px; height:80px; border-radius:40px;"></div> <div class="seed"><div style="border-bottom:1px solid #fff;padding-bottom:1px;">character name</div><sub>age // something here // something else here</sub></div></div>
<div class="wheat"><div class="stalk">
<h1>active;; </h1>
<a href="URLHERE">link to thread</a> with Name Here
<br>
<a href="URLHERE">link to thread</a> with Name Here
<br>

<h1>completed;; </h1>
<a href="URLHERE">link to thread</a> with Name Here
<br>

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

</div>
<div class="roots"><a href="http://shine.b1.jcink.com/index.php?showuser=16494">☂ echo</a></div>
</div>

</div>

0

12

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style type="text/css">
.background {
width: 430px; 
height: 600px;  }

.beecred {
width: 150px; 
height: 20px;
position: absolute;
top: 470px;
left: 61px;
font-size:10px;
}

.tabs {
width: 50px;
height: 420px;
clear: both;
float: left;
position: relative; }

.tab { float: left; width: 60px; }
.tab label:hover { opacity: 0.3; filter: alpha(opacity=30); }
.tab label {
color: #444;
background-color: #DBD4DB;  
position: relative;
padding: 4px;
left: 1px; 
font-family: calibri;
font-size: 10px;
text-transform: uppercase;
display: block;
}
.tab [type=radio] {
display: none;   
baseline-tab-shift: true, retrieve;
} [type=radio]:checked ~ label { background: #AA9FAB; z-index: 2; color: #444; } [type=radio]:checked ~ label ~ .content { z-index: 1; }

.content {
position: absolute;
background: #AA9FAB;
padding: 3px;
width: 300px;
height: 450px;
left: 61px;
right: 0; top: 0; bottom: 0;
border: 5px solid #AA9FAB;
}

.btrext {
position: absolute; background: #fff;
font-family: 'Calibri'; font-size:11px;
text-align: left; 
width: 290px; height: 245px;
left: 0; top: 195px; right: 0; bottom: 0;
padding: 8px; line-height: 11px;
}
.btrext table { height: 230px; width:285px; }
.btrext::-webkit-scrollbar { background:transparent; width: 2px; padding-right: 3px } 
.btrext::-webkit-scrollbar-thumb { background: #d1d1d1; border-radius: 20px }
.btrext::-webkit-scrollbar-button:start:decrement,
.btrext::-webkit-scrollbar-button:end:increment { height: 3px; display: block; background:transparent }

.bthrd { width: 270px; height: 80px; overflow: auto; position: relative; font-family: 'Calibri'; font-size:11px; padding: 4px;}
.bthrd::-webkit-scrollbar { background:transparent; width: 2px; padding-right: 3px } 
.bthrd::-webkit-scrollbar-thumb { background: #d1d1d1; border-radius: 20px }
.bthrd::-webkit-scrollbar-button:start:decrement,
.bthrd::-webkit-scrollbar-button:end:increment { height: 3px; display: block; background:transparent }

.bpicsy {  margin-top:1px; margin-left:10px; margin-right:10px; height: 140px; width: 140px; -webkit-border-radius: 140px; -moz-border-radius: 140px; border-radius: 140px; overflow: hidden; border: solid 5px #402A42;}

.bmane { width: 270px; height: 12px;  font-family: 'Lobster', cursive; color: #402A42; font-size: 22px; top: 185px; padding-top:5px; }
</style>

<center><div class="background">
<div class="tabs">
</-START OF ONE TAB-/>
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">NAME1</label>
    
<div class="content">
<div class="bpicsy" style="background: url(http://i.imgur.com/ro6bxgf.gif);  background-repeat: no-repeat; background-position: left top;"></DIV>
<div class="bmane">first m. lastname</div>
<div class="btrext">
<CENTER><a href="linkhere" title="tagnamehere">APPLICATION</a> ■ <a href="/index.php?showtopic=2095">SHIPPER</a>  ■ <a href="http://crazypeople.b1.jcink.com/index.php?showtopic=657" title="character development">CHAR DEV</a>  ■ <a href="linkhere" title="@namehere">INSTAGRAM</a> </center>
<table>
<tr><td><font style="font-family: georgia; font-size:16px; color: #74498A;"><b>threads</b></font>
<div class="bthrd">
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ] <br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ] <br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ] <br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ] <br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>


</div></td>
</tr> <tr><td> 
<font style="font-family: georgia; font-size:16px; color: #74498A;"><b>tech threads</b></font>
<div class="bthrd">
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ] <br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ] <br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ] <br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ] <br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
</div> 
</td></tr></table>


</div>
</div> 
</div>
</-END OF ONE TAB-/>  

</-START OF ONE TAB-/>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">NAME2</label>
    
<div class="content">
<div class="bpicsy" style="background: url(http://i.imgur.com/HFdKlJY.gif);  background-repeat: no-repeat; background-position: left top;"></DIV>
<div class="bmane">first m. lastname</div>
<div class="btrext"><CENTER><a href="linkhere" title="tagnamehere">APPLICATION</a> ■ <a href="/index.php?showtopic=2095">SHIPPER</a>  ■ <a href="/index.php?showtopic=2538" title="character development">CHAR DEV</a> ■ <a href="linkhere" title="@namehere">INSTAGRAM</a> </center>
<table>
<tr><td><font style="font-family: georgia; font-size:16px; color: #74498A;"><b>threads</b></font>
<div class="bthrd">
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ] <br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ] <br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
</div></td>
</tr> <tr><td> 
<font style="font-family: georgia; font-size:16px; color: #74498A;"><b>tech threads</b></font>
<div class="bthrd">
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ] <br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ] <br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
</div> 
</td></tr></table>

</div>
</div> 
</div>
</-END OF ONE TAB-/>

</-START OF ONE TAB-/>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">NAME3</label>
  
<div class="content">
<div class="bpicsy" style="background: url(http://i.imgur.com/cj2zIph.gif);  background-repeat: no-repeat; background-position: left top;"></DIV>
<div class="bmane">first m. last</div>
<div class="btrext"><CENTER><a href="linkhere" title="tagnamehere">APPLICATION</a> ■ <a href="/index.php?showtopic=2095">SHIPPER</a> ■ <a href="/index.php?showtopic=2658" title="character development">CHAR DEV</a>  ■ <a href="linkhere" title="tagnamehere">INSTAGRAM</a> </center>
<table>
<tr><td><font style="font-family: georgia; font-size:16px; color: #74498A;"><b>threads</b></font>
<div class="bthrd">
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ] <br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ] <br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
</div></td>
</tr> <tr><td> 
<font style="font-family: georgia; font-size:16px; color: #74498A;"><b>tech threads</b></font>
<div class="bthrd">
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ] <br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ] <br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">blah</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
</div> 
</td></tr></table>

</div>
</div> 
</div>
</-END OF ONE TAB-/>


</-START OF ONE TAB-/>
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">NAME4</label>
    
<div class="content">
<div class="bpicsy" style="background: url(http://placehold.it/140x140);  background-repeat: no-repeat; background-position: left top;"></DIV>
<div class="bmane">first m. lastname</div>
<div class="btrext"><CENTER><a href="linkhere" title="tagnamehere">APPLICATION</a> ■ <a href="/index.php?showtopic=2095">SHIPPER</a>  ■ <a href="linkhere" title="character development">CHAR DEV</a> ■ <a href="linkhere" title="@namehere">INSTAGRAM</a> </center>
<table>
<tr><td><font style="font-family: georgia; font-size:16px; color: #74498A;"><b>threads</b></font>
<div class="bthrd">
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ] <br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
</div></td>
</tr> <tr><td> 
<font style="font-family: georgia; font-size:16px; color: #74498A;"><b>tech threads</b></font>
<div class="bthrd">
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ] <br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
■ <a href="linkhere" title="tagnamehere">titlehere</a> w/ namehere [ <i>status</i> ]<br>
</div> 
</td></tr></table>

</div>
</div> 
</div>
</-END OF ONE TAB-/>

<div align=center style="height: 10px;"><a href="http://cttw.jcink.net/index.php?showuser=100" target="_blank">▼</a><a href="http://candylandcouture.b1.jcink.com/index.php?showuser=1603" target="_blank">▼</a><a href="http://z10.invisionfree.com/A_THOUSAND_FIREFLIES/index.php?showuser=25753" target="_blank">▼</a><a href="http://shine.b1.jcink.com/index.php?showuser=6984" target="_blank">▼</a><a href="http://z10.invisionfree.com/CAUTIONTOTHEWIND/index.php?showuser=67116" target="_blank">▼</a>
</div>

</div>

</center>

0

13

Код:
<!--HTML-->
<link href='http://fonts.googleapis.com/css?family=Roboto:900' rel='stylesheet' type='text/css'><center><div class="sun-five">
<div class="sun-six">REQUEST TITLE</div>
<table cellspacing="0" cellpadding="0"><td><div class="sun-seven"><div id="sunshine"><img src="http://placehold.it/160"><div class="sunny"><div class="sun-four"></div><div class="sun-one"><div class="sun-two">##</div><div class="sun-three">PLAYBY<BR>TRAIT. TRAIT.</div></div></div></div></div></td><td><div class="sun-eight"></div></td><td><div class="sun-nine"><div class="sun">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis nulla felis, et tincidunt sem volutpat eget. Donec sit amet massa velit. Mauris et dui ultricies, mattis leo eu, sollicitudin libero. Integer in turpis ultrices, porttitor lectus at, placerat lectus. Nulla facilisi. Nunc sit amet libero neque. Mauris pharetra pellentesque sapien, in maximus odio eleifend in. Nullam id ante id metus mollis laoreet vitae eget felis. Sed varius eros in eros commodo, id accumsan mauris luctus. Nulla facilisi. Suspendisse ac consectetur augue. Fusce rutrum neque eu neque sagittis, eleifend tristique felis tincidunt. Pellentesque ullamcorper, diam sit amet tristique consectetur, quam orci consequat enim, in aliquet est nisi id quam. Phasellus maximus tincidunt lorem, eget luctus turpis vehicula vulputate.

Suspendisse pulvinar lorem sed placerat cursus. Maecenas luctus dui quis ante congue aliquam. Curabitur rutrum massa et est dapibus, at vestibulum eros bibendum. Proin eu leo quis est luctus auctor. Duis fringilla eu tellus ac tincidunt. In hac habitasse platea dictumst. Proin porta tortor non justo gravida viverra non quis ligula. Proin mollis, diam eget molestie dictum, felis velit fermentum tellus, a ultricies nisi augue eget nibh. Vestibulum ac est id lorem semper dictum. Aenean id rutrum justo, vitae sollicitudin dui. Sed interdum porta nisi eu placerat. Donec non ipsum viverra, pharetra risus sollicitudin, cursus neque. Phasellus vel odio ultricies urna bibendum molestie.

Suspendisse volutpat est non neque bibendum porta. Proin aliquam ac arcu id scelerisque. Donec sed efficitur sem. Sed pellentesque erat venenatis dui gravida, et interdum enim varius. Phasellus ullamcorper efficitur mattis. Curabitur at tincidunt mauris, vel tempus libero. Curabitur eu dolor a massa mollis aliquam.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc non egestas lectus. Aliquam laoreet eu magna sed molestie. Cras et justo condimentum dolor rhoncus iaculis sit amet eu nunc. Duis vestibulum justo sed elementum sagittis. Phasellus nec blandit enim, sed rutrum urna. Curabitur efficitur metus in egestas congue. Sed ut scelerisque sem. Nunc vel libero in purus placerat viverra. Ut nisi justo, porttitor sit amet nunc quis, fringilla porta leo.


</div></div></td></table>
<div class="sun-ten"></div>
<table cellspacing="0" cellpadding="0"><td><div class="sun-nine"><div class="sun">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis nulla felis, et tincidunt sem volutpat eget. Donec sit amet massa velit. Mauris et dui ultricies, mattis leo eu, sollicitudin libero. Integer in turpis ultrices, porttitor lectus at, placerat lectus. Nulla facilisi. Nunc sit amet libero neque. Mauris pharetra pellentesque sapien, in maximus odio eleifend in. Nullam id ante id metus mollis laoreet vitae eget felis. Sed varius eros in eros commodo, id accumsan mauris luctus. Nulla facilisi. Suspendisse ac consectetur augue. Fusce rutrum neque eu neque sagittis, eleifend tristique felis tincidunt. Pellentesque ullamcorper, diam sit amet tristique consectetur, quam orci consequat enim, in aliquet est nisi id quam. Phasellus maximus tincidunt lorem, eget luctus turpis vehicula vulputate.

Suspendisse pulvinar lorem sed placerat cursus. Maecenas luctus dui quis ante congue aliquam. Curabitur rutrum massa et est dapibus, at vestibulum eros bibendum. Proin eu leo quis est luctus auctor. Duis fringilla eu tellus ac tincidunt. In hac habitasse platea dictumst. Proin porta tortor non justo gravida viverra non quis ligula. Proin mollis, diam eget molestie dictum, felis velit fermentum tellus, a ultricies nisi augue eget nibh. Vestibulum ac est id lorem semper dictum. Aenean id rutrum justo, vitae sollicitudin dui. Sed interdum porta nisi eu placerat. Donec non ipsum viverra, pharetra risus sollicitudin, cursus neque. Phasellus vel odio ultricies urna bibendum molestie.

Suspendisse volutpat est non neque bibendum porta. Proin aliquam ac arcu id scelerisque. Donec sed efficitur sem. Sed pellentesque erat venenatis dui gravida, et interdum enim varius. Phasellus ullamcorper efficitur mattis. Curabitur at tincidunt mauris, vel tempus libero. Curabitur eu dolor a massa mollis aliquam.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc non egestas lectus. Aliquam laoreet eu magna sed molestie. Cras et justo condimentum dolor rhoncus iaculis sit amet eu nunc. Duis vestibulum justo sed elementum sagittis. Phasellus nec blandit enim, sed rutrum urna. Curabitur efficitur metus in egestas congue. Sed ut scelerisque sem. Nunc vel libero in purus placerat viverra. Ut nisi justo, porttitor sit amet nunc quis, fringilla porta leo.


</div></div></td><td><div class="sun-eight"></div></td><td><div class="sun-seven"><div id="sunshine"><img src="http://placehold.it/160"><div class="sunny"><div class="sun-four"></div><div class="sun-one"><div class="sun-two">##</div><div class="sun-three">PLAYBY<BR>TRAIT. TRAIT.</div></div></div></div></div></td></table>

<div class="sun-ten"></div>

<table cellspacing="0" cellpadding="0"><td><div class="sun-seven"><div id="sunshine"><img src="http://placehold.it/160"><div class="sunny"><div class="sun-four"></div><div class="sun-one"><div class="sun-two">##</div><div class="sun-three">PLAYBY<BR>TRAIT. TRAIT.</div></div></div></div></div></td><td><div class="sun-eight"></div></td><td><div class="sun-nine"><div class="sun">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis nulla felis, et tincidunt sem volutpat eget. Donec sit amet massa velit. Mauris et dui ultricies, mattis leo eu, sollicitudin libero. Integer in turpis ultrices, porttitor lectus at, placerat lectus. Nulla facilisi. Nunc sit amet libero neque. Mauris pharetra pellentesque sapien, in maximus odio eleifend in. Nullam id ante id metus mollis laoreet vitae eget felis. Sed varius eros in eros commodo, id accumsan mauris luctus. Nulla facilisi. Suspendisse ac consectetur augue. Fusce rutrum neque eu neque sagittis, eleifend tristique felis tincidunt. Pellentesque ullamcorper, diam sit amet tristique consectetur, quam orci consequat enim, in aliquet est nisi id quam. Phasellus maximus tincidunt lorem, eget luctus turpis vehicula vulputate.

Suspendisse pulvinar lorem sed placerat cursus. Maecenas luctus dui quis ante congue aliquam. Curabitur rutrum massa et est dapibus, at vestibulum eros bibendum. Proin eu leo quis est luctus auctor. Duis fringilla eu tellus ac tincidunt. In hac habitasse platea dictumst. Proin porta tortor non justo gravida viverra non quis ligula. Proin mollis, diam eget molestie dictum, felis velit fermentum tellus, a ultricies nisi augue eget nibh. Vestibulum ac est id lorem semper dictum. Aenean id rutrum justo, vitae sollicitudin dui. Sed interdum porta nisi eu placerat. Donec non ipsum viverra, pharetra risus sollicitudin, cursus neque. Phasellus vel odio ultricies urna bibendum molestie.

Suspendisse volutpat est non neque bibendum porta. Proin aliquam ac arcu id scelerisque. Donec sed efficitur sem. Sed pellentesque erat venenatis dui gravida, et interdum enim varius. Phasellus ullamcorper efficitur mattis. Curabitur at tincidunt mauris, vel tempus libero. Curabitur eu dolor a massa mollis aliquam.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc non egestas lectus. Aliquam laoreet eu magna sed molestie. Cras et justo condimentum dolor rhoncus iaculis sit amet eu nunc. Duis vestibulum justo sed elementum sagittis. Phasellus nec blandit enim, sed rutrum urna. Curabitur efficitur metus in egestas congue. Sed ut scelerisque sem. Nunc vel libero in purus placerat viverra. Ut nisi justo, porttitor sit amet nunc quis, fringilla porta leo.


</div></div></td></table>
<div class="sun-ten"></div>
<table cellspacing="0" cellpadding="0"><td><div class="sun-nine"><div class="sun">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque venenatis nulla felis, et tincidunt sem volutpat eget. Donec sit amet massa velit. Mauris et dui ultricies, mattis leo eu, sollicitudin libero. Integer in turpis ultrices, porttitor lectus at, placerat lectus. Nulla facilisi. Nunc sit amet libero neque. Mauris pharetra pellentesque sapien, in maximus odio eleifend in. Nullam id ante id metus mollis laoreet vitae eget felis. Sed varius eros in eros commodo, id accumsan mauris luctus. Nulla facilisi. Suspendisse ac consectetur augue. Fusce rutrum neque eu neque sagittis, eleifend tristique felis tincidunt. Pellentesque ullamcorper, diam sit amet tristique consectetur, quam orci consequat enim, in aliquet est nisi id quam. Phasellus maximus tincidunt lorem, eget luctus turpis vehicula vulputate.

Suspendisse pulvinar lorem sed placerat cursus. Maecenas luctus dui quis ante congue aliquam. Curabitur rutrum massa et est dapibus, at vestibulum eros bibendum. Proin eu leo quis est luctus auctor. Duis fringilla eu tellus ac tincidunt. In hac habitasse platea dictumst. Proin porta tortor non justo gravida viverra non quis ligula. Proin mollis, diam eget molestie dictum, felis velit fermentum tellus, a ultricies nisi augue eget nibh. Vestibulum ac est id lorem semper dictum. Aenean id rutrum justo, vitae sollicitudin dui. Sed interdum porta nisi eu placerat. Donec non ipsum viverra, pharetra risus sollicitudin, cursus neque. Phasellus vel odio ultricies urna bibendum molestie.

Suspendisse volutpat est non neque bibendum porta. Proin aliquam ac arcu id scelerisque. Donec sed efficitur sem. Sed pellentesque erat venenatis dui gravida, et interdum enim varius. Phasellus ullamcorper efficitur mattis. Curabitur at tincidunt mauris, vel tempus libero. Curabitur eu dolor a massa mollis aliquam.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc non egestas lectus. Aliquam laoreet eu magna sed molestie. Cras et justo condimentum dolor rhoncus iaculis sit amet eu nunc. Duis vestibulum justo sed elementum sagittis. Phasellus nec blandit enim, sed rutrum urna. Curabitur efficitur metus in egestas congue. Sed ut scelerisque sem. Nunc vel libero in purus placerat viverra. Ut nisi justo, porttitor sit amet nunc quis, fringilla porta leo.


</div></div></td><td><div class="sun-eight"></div></td><td><div class="sun-seven"><div id="sunshine"><img src="http://placehold.it/160"><div class="sunny"><div class="sun-four"></div><div class="sun-one"><div class="sun-two">##</div><div class="sun-three">PLAYBY<BR>TRAIT. TRAIT.</div></div></div></div></div></td></table>

</div></center><center><div style="Width: 360px; font-family: calibri; font-size: 7px; margin-top: 5px; text-align: right; text-transform: uppercase; letter-spacing: 1px; line-height: 100%;"><a href="http://shine.b1.jcink.com/index.php?showuser=10542">THANKS</a> <a href="http://wecode.jcink.net/index.php?showuser=168">FELICITY</a>!</DIV></CENTER>
<style type="text/css"> #sunshine { width: 160px; height: 160px; overflow: hidden; } .sunny { width: 160px; height: 160px; position: relative; top: -320px; background-color: rgba(255,255,255,.3); -webkit-transition-duration: .7s; -o-transition-duration: .7s; -moz-transition-duration: .7s; } #sunshine:hover .sunny { top: -160px; } .sun-one { margin-left: 30px; padding-top: 20px; padding-bottom: 20px; width: 100px; background-color: #fff; } .sun-two { font-family: roboto; font-size: 40px; text-align: center; line-height: 100%; color: #D9565B; margin-bottom: 2px; } .sun-three { font-family: calibri; font-size: 8px; text-align: center; line-height: 100%; text-transform: uppercase; letter-spacing: 1px; } .sun-five { width: 400px; padding: 15px; background-color: #fafafa; } .sun-four { height: 30px; } .sun-six { width: 400px; padding-top: 25px; padding-bottom: 25px; background-color: #D9565B; font-family: roboto; font-size: 30px; text-align: center; line-height: 100%; margin-bottom: 5px; text-transform: uppercase; color: #fff; } .sun-seven { width: 160px; height: 160px; padding: 5px; background-color: #fff; border: 1px solid #eee; } .sun-eight { width: 5px; } .sun-nine { width: 201px; padding: 10px; background-color: #fff; border: 1px solid #eee; height: 150px; font-family: arial; font-size: 9px; text-align: justify; line-height: 100%; text-transform: lowercase; color: #333; } .sun { width: 196px; height: 150px; padding-right: 5px; overflow: auto; } .sun::-webkit-scrollbar {width: 5px;background: #fff;} .sun::-webkit-scrollbar-thumb {background: #4B403A;}.sun::-webkit-scrollbar-corner {background: #fff;} .sun-ten { height: 5px; } </style>

0

14

Код:
<!--HTML-->
<div id="dwo1">
<h1>alias; timezone; contact</h1>
<div id="dwo2"><c></c><h2>name mcname</h2></div>
<img src="http://placehold.it/100">

<div class="nahdwo">

<div class="dwoult">
<input type="radio" id="dwotab-1" name="dwotab-group-1" checked>
<label for="dwotab-1"><i class="fa fa-camera"></i></label>
<div class="dwo3" style="overflow: hidden;">
<div style="background-image: url(http://placehold.it/240x200); height: 202px; width: 240px;"></div>
</div>
</div>

<div class="dwoult">
<input type="radio" id="dwotab-2" name="dwotab-group-1">
<label for="dwotab-2"><i class="fa fa-folder-open"></i></label>
<div class="dwo3">
<h3>basics</h3>
<ul>
 <li><b>full name:</b> name middle mcname</li>
 <li><b>nicknames:</b>here</li>
 <li><b>dob/age:</b>00/00/0000 (##)</li>
 <li><b>zodiac:</b>here</li>
 <li><b>hometown:</b>here</li>
 <li><b>nationality:</b>here</li>
 <li><b>ethnicity:</b>here</li>
 <li><b>gender:</b>here</li>
 <li><b>pronouns:</b>here</li>
 <li><b>occupation:</b>here</li>
 <li><b>education:</b>here</li>
</ul>
<h3>visage</h3>
<ul>
 <li><b>natural hair color:</b>here</li>
 <li><b>current hair color:</b>here</li>
 <li><b>hair length:</b>here</li>
 <li><b>eye color:</b>here</li>
 <li><b>height:</b>here</li>
 <li><b>weight:</b>here</li>
 <li><b>prominent features:</b>here</li>
</ul>
<h3>family</h3>
<ul>
 <li><b>mother:</b>here</li>
 <li><b>father:</b>here</li>
 <li><b>siblings:</b>here</li>
 <li><b>children:</b>here</li>
 <li><b>extended family:</b>here</li>
 <li><b>other family:</b>here</li>
 <li><b>household:</b>here</li>
</ul>
<h3>relationships</h3>
<ul>
 <li><b>sexual orientation:</b>here</li>
 <li><b>romantic orientation:</b>here</li>
 <li><b>status:</b>here</li>
 <li><b>current partner:</b>here</li>
 <li><b>past partners:</b>here</li>
</ul>
<h3>personality</h3>
<ul>
 <li><b>5 positive traits:</b>here</li>
 <li><b>5 negative traits:</b>here</li>
 <li><b>5 likes:</b>here</li>
 <li><b>5 dislikes:</b>here</li>
 <li><b>current goal:</b>here</li>
 <li><b>recent goal achieved:</b>here</li>
 <li><b>myers-briggs:</b>here</li>
 <li><b>hogwarts house:</b>here</li>
 <li><b>zodiac:</b>here</li>
 <li><b>element:</b>here</li>
 <li><b>archetype:</b>here</li>
</ul>
</div>
</div>

<div class="dwoult">
<input type="radio" id="dwotab-3" name="dwotab-group-1">
<label for="dwotab-3"><i class="fa fa-pencil"></i></label>
<div class="dwo3">
<h3>header here</h3>
No, this is mount everest. you should flip on the discovery channel from time to time. but i guess you can't now, being dead and all. cities fall but they are rebuilt. heroes die but they are remembered. well, what is it today? more spelunking? well, what is it today? more spelunking? no, this is mount everest. you should flip on the discovery channel from time to time. but i guess you can't now, being dead and all. the man likes to play chess; let's get him some rocks. i once heard a wise man say there are no perfect men. only perfect intentions. i don't think they tried to market it to the billionaire, spelunking, base-jumping crowd. that tall drink of water with the silver spoon up his ass. circumstances have taught me that a man's ethics are the only possessions he will take beyond the grave. i now issue a new commandment: thou shalt do the dance. let me tell you something my friend. hope is a dangerous thing. hope can drive a man insane.
<p>I once heard a wise man say there are no perfect men. only perfect intentions. cities fall but they are rebuilt. heroes die but they are remembered. bruce... i'm god. the man likes to play chess; let's get him some rocks. that tall drink of water with the silver spoon up his ass. multiply your anger by about a hundred, kate, that's how much he thinks he loves you. that tall drink of water with the silver spoon up his ass. you measure yourself by the people who measure themselves by you. circumstances have taught me that a man's ethics are the only possessions he will take beyond the grave. i once heard a wise man say there are no perfect men. only perfect intentions. bruce... i'm god. rehabilitated? well, now let me see. you know, i don't have any idea what that means.
<p>Multiply your anger by about a hundred, kate, that's how much he thinks he loves you. it only took me six days. same time it took the lord to make the world. i now issue a new commandment: thou shalt do the dance. cities fall but they are rebuilt. heroes die but they are remembered. bruce... i'm god. circumstances have taught me that a man's ethics are the only possessions he will take beyond the grave. let me tell you something my friend. hope is a dangerous thing. hope can drive a man insane. boxing is about respect. getting it for yourself, and taking it away from the other guy. mister wayne, if you don't want to tell me exactly what you're doing, when i'm asked, i don't have to lie. but don't think of me as an idiot. boxing is about respect. getting it for yourself, and taking it away from the other guy. boxing is about respect. getting it for yourself, and taking it away from the other guy. no, this is mount everest. you should flip on the discovery channel from time to time. but i guess you can't now, being dead and all.
<p>I did the same thing to gandhi, he didn't eat for three weeks. it only took me six days. same time it took the lord to make the world. the man likes to play chess; let's get him some rocks. rehabilitated? well, now let me see. you know, i don't have any idea what that means. i did the same thing to gandhi, he didn't eat for three weeks. well, what is it today? more spelunking? let me tell you something my friend. hope is a dangerous thing. hope can drive a man insane. i don't think they tried to market it to the billionaire, spelunking, base-jumping crowd. it only took me six days. same time it took the lord to make the world. cities fall but they are rebuilt. heroes die but they are remembered. i don't think they tried to market it to the billionaire, spelunking, base-jumping crowd. cities fall but they are rebuilt. heroes die but they are remembered.
</div>
</div>

<div class="dwoult">
<input type="radio" id="dwotab-4" name="dwotab-group-1">
<label for="dwotab-4"><i class="fa fa-paperclip"></i></i></label>
<div class="dwo3">
<w>what question is this?</w>
here's your answer, my friend.
<w>is this another question?</w>
yes it is. and i'll give you a longer answer here, since interview questions can sometimes lead to rambling. interview apps are fun though, right? i think so, i guess. i haven't done one in a really long time, though, so it's time i return for another fun question and answer time.
<w>what question is this?</w>
here's your answer, my friend.
<w>what question is this?</w>
here's your answer, my friend.
<w>what question is this?</w>
here's your answer, my friend.
</div>
</div>

<div class="dwoult">
<input type="radio" id="dwotab-5" name="dwotab-group-1">
<label for="dwotab-5"><i class="fa fa-ship"></i></i></label>
<div class="dwo3">
<h3>friends</h3>
Wouldn't that bring about chaos? Congratulations - you just destroyed the Enterprise. When has justice ever been as simple as a rule book? Why don't we just give everybody a promotion and call it a night - 'Commander'? Commander William Riker of the Starship Enterprise. Your head is not an artifact! I will obey your orders. I will serve this ship as First Officer. And in an attack against the Enterprise, I will die with this crew. But I will not break my oath of loyalty to Starfleet. Well, I'll say this for him - he's sure of himself. Did you come here for something in particular or just general Riker-bashing? We could cause a diplomatic crisis. Take the ship into the Neutral Zone For an android with no feelings, he sure managed to evoke them in others.
<h3>enemies</h3>
Wouldn't that bring about chaos? Congratulations - you just destroyed the Enterprise. When has justice ever been as simple as a rule book? Why don't we just give everybody a promotion and call it a night - 'Commander'? Commander William Riker of the Starship Enterprise. Your head is not an artifact! I will obey your orders. I will serve this ship as First Officer. And in an attack against the Enterprise, I will die with this crew. But I will not break my oath of loyalty to Starfleet. Well, I'll say this for him - he's sure of himself. Did you come here for something in particular or just general Riker-bashing? We could cause a diplomatic crisis. Take the ship into the Neutral Zone For an android with no feelings, he sure managed to evoke them in others.
<h3>lovers</h3>
Wouldn't that bring about chaos? Congratulations - you just destroyed the Enterprise. When has justice ever been as simple as a rule book? Why don't we just give everybody a promotion and call it a night - 'Commander'? Commander William Riker of the Starship Enterprise. Your head is not an artifact! I will obey your orders. I will serve this ship as First Officer. And in an attack against the Enterprise, I will die with this crew. But I will not break my oath of loyalty to Starfleet. Well, I'll say this for him - he's sure of himself. Did you come here for something in particular or just general Riker-bashing? We could cause a diplomatic crisis. Take the ship into the Neutral Zone For an android with no feelings, he sure managed to evoke them in others.
<h3>other</h3>
Wouldn't that bring about chaos? Congratulations - you just destroyed the Enterprise. When has justice ever been as simple as a rule book? Why don't we just give everybody a promotion and call it a night - 'Commander'? Commander William Riker of the Starship Enterprise. Your head is not an artifact! I will obey your orders. I will serve this ship as First Officer. And in an attack against the Enterprise, I will die with this crew. But I will not break my oath of loyalty to Starfleet. Well, I'll say this for him - he's sure of himself. Did you come here for something in particular or just general Riker-bashing? We could cause a diplomatic crisis. Take the ship into the Neutral Zone For an android with no feelings, he sure managed to evoke them in others.
</div>
</div>

</div><a href="http://shine.jcink.net/index.php?showuser=11414" id="didcred1">▼</a></div><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"><link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'><link href='https://fonts.googleapis.com/css?family=Hind:400,700' rel='stylesheet' type='text/css'><link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto|Lily+Script+One' rel='stylesheet' type='text/css'><style>#dwo1 { position: relative; transition: 1s; width: 400px; height: 260px; 

background-image: url(http://placehold.it/400x260); 

margin: 10px auto; background-position: -40px -40px; background-color: none; background-blend-mode: multiply; border: 40px double white }#dwo1 h1 { width: 100%; display: block; margin: 0; position: absolute; bottom: 0; left: 0; height: 8px; background: white; font: 700 7px/3 montserrat; text-transform: uppercase; letter-spacing: 1px; padding: 5px 0; text-align: right; color: navy; }#dwo1 img { width: 60px; position: absolute; bottom: 10px; left: 50px; border: 4px solid white; border-radius: 50%; }#dwo2 { width: 80px; height: 242px; background: white; position: absolute; top: 0; left: 0; }#dwo2 c { transition: 1s; height: 100%; width: 8px; background: rgba(255,255,255,.5); position: absolute; top: 0; left: 80px; }#dwo2 h2 { transform: rotate(90deg); width: 242px; display: block; position: absolute; top: 62px; left: -105px; text-align: center; font: 40px/100% roboto condensed; text-transform: uppercase; color: #dedede; border-top: 1px solid #dedede; padding: 6px 0; letter-spacing: -2px; }#dwo2 h2:first-letter { color: navy; border-top: 2px solid navy; }.nahdwo { transition: 1s; opacity: 0; width: 300px; height: 222px; position: absolute; top: 10px; right: 10px; }.dwo3 { text-align: justify; color: #383838; font: 10px/120% roboto; transition: 1s; width: 236px; height: 202px; padding-right: 4px; background: white; position: absolute; top: 0; right: 0; border: 10px solid white; overflow: auto; }.dwo3 h3 { margin: 0 0 8px 0; text-align: left; border-bottom: 1px solid #dedede; color: #dedede; text-transform: uppercase; font: 700 18px/100% hind; padding: 4px 14px; }.dwo3 h3:first-letter { color: navy; border-bottom: 2px solid navy; }.dwo3 b { text-transform: uppercase; font: 700 7px/100% montserrat; text-transform: uppercase; color: navy; letter-spacing: 1px; margin-right: 4px; }.dwo3 ul { list-style-type: circle; }.dwo3 w { display: block; text-align: right; color: black; font: 700 7px/100% montserrat; letter-spacing: 1px; text-transform: uppercase; padding: 0; border-bottom: 1px solid #dedede; margin: 0 0 8px 0; }.dwo3 w:after { content: '"'; font: 34px/1 lily script one; width: 20px; display: inline-block; color: #dedede; text-align: center; margin-left: 2px; position: relative; top: 10px; }#dwo1 input[type=radio] { display: none; }#dwo1 input[type=radio]:checked ~ label { background: #2C8DFD; color: white; }#dwo1 input[type=radio]:checked ~ label ~ .dwo3 { z-index: 3; }.dwoult { display: block; }.dwoult label { display: block; width: 30px; height: 22px; padding-top: 8px; color: navy; background: white; z-index: 2; left: 90px; top: 10px; margin: 0 0 4px 0; border-radius: 50%; text-align: center; font: 14px/100% courier; }#dwo1:hover { background-position: -70px -60px; transition: 1.2s; background-color: #CE4E6C; }#dwo1:hover #dwo2 c { width: 320px; transition: 1s; }#dwo1:hover .nahdwo { opacity: 1; transition: 1s .8s; }#didcred1 { position: absolute; bottom: -4px; left: 0; margin: 0; font-size: 9px; text-decoration: none; color: navy; }.dwo3::-webkit-scrollbar { width: 5px; height: 5px; }.dwo3::-webkit-scrollbar-track { background: white; }.dwo3::-webkit-scrollbar-thumb { background: navy; border: 2px solid white; }</style>

0

15

Код:
<!--HTML-->


<center>
 <div class="jhappc">
 <img src="SQUAREGIFICON">
 <h1>firstname lastname</h1>
 <h2><i class="fa fa-quote-left" aria-hidden="true"></i> LYRICS OR QUOTES GO HERE. DON'T MAKE IT TOO LONG</h2>

<div class="jhcolorborder1"></div>
<div class="jhcolorborder2"></div>
 
   <div class="tabs">

<div class="jhatab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1" style="margin-top: -135px;" title="profile"><i class="fa fa-id-badge" aria-hidden="true"></i></label>
<div class="jhacontent">

<div class="jhacontent2">

 <div class="jhapphti"><i class="fa fa-angle-double-right" aria-hidden="true"></i> use this tab for questionnaires</div>
 <div class="jhapptf">
 <b>FULL NAME</b> ANSWER<br>
 <b>NICKNAME(S)</b> ANSWER<br>
 <b>AGE</b> ANSWER<br>
 <b>THINGS AKIN</b> ANSWER<br>
   <b>QUESTION</b> ANSWER
 </div>
 
 <div class="jhapphti"><i class="fa fa-angle-double-right" aria-hidden="true"></i> header here</div>
 <div class="jhapptf">
 <b>FULL NAME</b> ANSWER<br>
 <b>NICKNAME(S)</b> ANSWER<br>
 <b>AGE</b> ANSWER<br>
 <b>THINGS AKIN</b> ANSWER<br>
   <b>QUESTION</b> ANSWER
 </div>
 
 <div class="jhapphti"><i class="fa fa-angle-double-right" aria-hidden="true"></i> header here</div>
 <div class="jhapptf">
 <b>FULL NAME</b> ANSWER<br>
 <b>NICKNAME(S)</b> ANSWER<br>
 <b>AGE</b> ANSWER<br>
 <b>THINGS AKIN</b> ANSWER<br>
   <b>QUESTION</b> ANSWER
 </div>
 
</div>

</div>
</div>

<div class="jhatab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2" style="margin-top: -60px;" title="freeform"><i class="fa fa-coffee" aria-hidden="true"></i></label>
<div class="jhacontent">

<div class="jhacontent2">

 <div class="jhapphti"><i class="fa fa-angle-double-right" aria-hidden="true"></i> 
 freeform history</div>
 <div class="jhapptf2">
 history stuffs here. <b>bolded text</b>. <i>italic text</i>.
 </div>
 
 <div class="jhapphti"><i class="fa fa-angle-double-right" aria-hidden="true"></i> 
 freeform history</div>
 <div class="jhapptf2">
 history stuffs here. <b>bolded text</b>. <i>italic text</i>.
 </div>
 
</div>

</div>
</div>

<div class="jhatab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3" style="margin-top: 20px;" title="shipper"><i class="fa fa-ship" aria-hidden="true"></i></label>
<div class="jhacontent">
<div class="jhacontent2">

 <div class="jhapphti"><i class="fa fa-angle-double-right" aria-hidden="true"></i> 
 friends</div>
 <div class="jhapptf2">
 history stuffs here. <b>bolded text</b>. <i>italic text</i>.
 </div>
 
 <div class="jhapphti"><i class="fa fa-angle-double-right" aria-hidden="true"></i> 
 enemies</div>
 <div class="jhapptf2">
 history stuffs here. <b>bolded text</b>. <i>italic text</i>.
 </div>
 
 <div class="jhapphti"><i class="fa fa-angle-double-right" aria-hidden="true"></i> 
 lovers</div>
 <div class="jhapptf2">
 history stuffs here. <b>bolded text</b>. <i>italic text</i>.
 </div>
 
</div>
</div>
</div>

</div>
<div class="jhappooc">authored by ooc <i class="fa fa-star" aria-hidden="true"></i> 00 years old <i class="fa fa-star" aria-hidden="true"></i> timezone </div>
 </div>
 <a href="http://shine.jcink.net/index.php?showuser=12501" class="jhappcre">credit to spica of shine</a>
</center>

<link href="https://fonts.googleapis.com/css?family=Raleway:800|Montserrat:400,800|Poppins:400" rel="stylesheet">
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

<style type="text/css">
.jhappcre {
 font: 7px/100% raleway;
 font-weight: 800;
 padding: 6px;
 text-transform: uppercase;
 color: #757575;
 margin: 0px auto;
 display: block;
 text-decoration: none;
}

.jhapptf2 i {
 font-size: 11px!important;
 color: #79B5AC!important;
}

.jhapptf2 b {
 font-weight: 900!important;
 font: 11px/100% montserrat!important;
 color: #79B5AC!important;
}

.jhapptf2 {
 border-radius: 6px;
 font: 9px/100% poppins;
 text-align: justify;
 font-weight: 400;
 padding: 12px;
 color: #454545;
 background: #FCFCFC;
 border: 1px solid #F1F1F1;
 min-height: 30px!important;
 margin-left: 0px;
}

::-MOZkit-SCROLLBAR { 
 width: 9px;
 border-left: 4px solid #fff;
 border-right: 4px solid #fff; 
 background: #E2E1E1; 
 }
 
::-MOZkit-SCROLLBAR-THUMB { 
 border: 2px solid #fcfcfc;  
 background: #E3E3E3;
 }
 
::-webkit-scrollbar {
 width: 9px; 
 border-left: 4px solid #fff;
 border-right: 4px solid #fff; 
 background: #E2E1E1;
 }
 
::-webkit-scrollbar-thumb { 
 border: 2px solid #fcfcfc; 
 background: #E3E3E3;
 }


.jhacontent2 b {
 font: 7px/100% raleway;
 font-weight: 900;
 color: #79B5AC;
}

.jhacontent2 {
 padding: 5px; 
 height: 240px;
 overflow: auto;
}

.jhapptf {
 border-radius: 6px;
 font: 7.2px/100% montserrat;
 text-align: justify;
 font-weight: 400;
 padding: 12px;
 color: #454545;
 background: #FCFCFC;
 border: 1px solid #F1F1F1;
 min-height: 30px!important;
 margin-left: 0px;
}

.jhacontent2 i {
 color: #79B5AC;
  text-shadow: 1px 1px #F4DD51;
}

.jhapphti {
 padding: 6px;
 margin: 6px;
 text-align: right;
 letter-spacing: -1px;
 font: 20px/70% montserrat;
 color: #F4DD51; 
 text-transform: lowercase;
  text-shadow: 1px 1px #79B5AC;
  font-weight: 800;
 
}

.jhappooc i {
 color: #F4DD51;
 text-shadow: 1px 1px #79B5AC;
}

.jhappooc {
 z-index: 1;
 background: #454545;
 padding: 6px;
 color: #FFF;
 text-align: left;
 position: absolute;
 left: 0px;
 bottom: 0px;
 width: 97.2%;
 font: 9px/100% raleway;
 font-weight: 800;
 text-transform: uppercase;
}

.jhcolorborder1 {
height: 4px;
background: #444;
border-right: 140px solid #79B5AC;
margin-top: 0px;
margin-bottom: 5px;
}

.jhcolorborder2 {
height: 4px;
background: #444;
border-left: 140px solid #79B5AC;
margin-top: 105px;
}

.jhappc h2 i {
 float: left;
 padding: 5px;
 margin: 3px;
 font-size: 12px;
 color: #79B5AC;
 text-shadow: 1px 1px #F4DD51;
}

.jhappc h2 {
  font: 7.4px/100% poppins;
  text-transform: uppercase;
  float: left;
  text-align: justify;
  border-right: 1px dotted #EDEDED; 
  width: 130px;
  padding: 7px;
  overflow: hidden;
  color: #484848;
  height: 89px;
  position: absolute;
  top: 13px;
}

.jhappc h1 {
  color: #F4DD51; 
  text-shadow: 1px 1px #79B5AC;
  font: 24px/100% montserrat;
  font-weight: 800;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: -1px;
  text-align: right;
  padding: 5px;
  float: right;
  width: 140px;
  height: 75px;
}

.jhappc img {
 width: 70px;
 height: 70px;
 border-radius: 100%;
 float: right;
 margin: 10px;
 border: 5px solid #FCFCFC;
 box-shadow: 2px 2px #EDEDED;
}

.jhappc {
 overflow: hidden;
 padding: 13px;
 border: 1px solid #DFDFDF;
 border-radius: 5px;
 width: 400px;
 height: 450px;
 background: #FCFCFC;
 position: relative;
}

.tabs {
 padding: 1px;
position: relative;  
width: 400px;
height:  300px;
margin-top: 200px;
}

.jhatab {
float: left;
}

.jhatab label {
 color: #F4DD51; 
  text-shadow: 1px 1px #79B5AC;
background: #F9F9F9;
line-height: 100%;
font-size: 18px;
border-radius: 100%;
padding: 10px;
border: 1px solid #DFDFDF;
width: 20px;
height: 20px;
margin: 10px;
position: relative;
left: 1px;
float: left;
}

.jhatab [type=radio] {
display: none;  
}

.jhacontent {
position: absolute;
height: 250px;
width: 280px;
-webkit-transition-duration: .9s; 
-moz-transition-duration: .9s;
-o-transition-duration: .9s; 
overflow: hidden;
top: 480px; 
bottom: 0px;
left: 0px; 
right: 0px;
background: #FEFEFE;
padding: 20px;
border: 1px solid #DFDFDF;
}

[type=radio]:checked ~ label {
background: white;
border: 1px solid #DFDFDF;
z-index: 2;
}

[type=radio]:checked ~ label ~ .jhacontent {
z-index: 1;
top: -180px;
left: 70px;
}
</style>

0


Вы здесь » Pilot. » приемная » твиттер


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC