Код:
<!--HTML-->
<style type='text/css'>
#appholder {
width: 400px;
position: relative;
margin: 10px auto;
}
#application {
width: 350px;
height: auto;
padding: 25px;
background: #fff;
border: 4px solid #000;
font: normal normal 12px/15px calibri;
text-align: justify;
overflow: hidden;
}
.appextra {
padding: 5px 30px 5px 30px;
background-color: #000;
color: #fff;
font-family: calibri;
font-size: 9px;
text-transform: uppercase;
width: 65px;
margin: -12px 10px;
}
.appinfo {
padding: 10px;
height: 150px;
width: 380px;
background: url('http://noatest005.b1.jcink.com/uploads/noatest005/bg.jpg');
background-size: cover;
margin-left: -25px;
margin-top: -25px;
margin-bottom: 25px;
position: relative;
}
.appline {
width: 240px;
border-top: 1px solid #fff;
position: absolute;
top: 90px;
left: 146px;
}
.appname {
font: normal bold 20px/25 calibri;
color: #fff;
position: absolute;
left: 170px;
top: -170px;
}
.apptablabels {
color: #fff;
font: normal normal 9px/22px calibri;
text-transform: uppercase;
position: absolute;
top: 90px;
left: 300px;
}
#application ul, #application ul li {
list-style: none;
padding: 0;
}
#application ul.auto-tabs {
width: 100%;
position: relative;
}
#application ul.auto-tabs li {
display: none;
overflow: hidden;
}
#application ul.tabs {
text-align: center;
margin: 0 0 4px;
overflow: hidden;
padding: 10px;
box-sizing: border-box;
}
#application ul.tabs li {
color: #fff;
font: normal normal 9px/22px calibri;
text-transform: uppercase;
float: left;
box-sizing: border-box;
}
.tabs a:link, .tabs a:visited, .tabs a:active, .tabs a:hover {
color: #fff;
font: normal normal 9px/22px calibri;
text-transform: uppercase;
text-decoration: none;
margin-top: -105px;
margin-left: 280px;
position: absolute;
z-index: 9999;
; }
</style>
<script type='text/javascript'>
//Application tabs
$(document).ready(function(){
$('.tabs li').click(function(event) {
event.preventDefault();
var index = $(this).parent().children().index(this);
var newTab = $(this).parent('.tabs').next('.auto-tabs').children('li').eq(index);
if ($(newTab).is(':visible')) {
} else {
$(newTab).css({'display': 'block'});
var autoHeight = $(newTab).height();
$(newTab).css({'display': 'none'});
$(newTab).siblings('li').fadeOut(600);
$(newTab).parent('.auto-tabs').delay(600).animate({'height': autoHeight}, 500);
$(newTab).delay(1200).fadeIn(500);
}
});
});
</script>
<div id='appholder'>
<div id='application'>
<div class='appinfo'><div class='appname'>FIRST M. LAST</div><div class='appline'></div> <img src='http://placehold.it/125' style='border-radius: 100px; padding: 5px; border: 1px solid #fff; margin-top: 7px;'>
</div>
<ul class="tabs" style='width: 400px; margin-top: -10px;'>
<li><a href="linkone">info</a></li>
<li><a href="linktwo" style='margin-left: 310px;'>shipper</a></li>
</ul>
<ul class="auto-tabs" style="margin-top: -10px">
<li style="display: block;">
<b>FULL NAME:</b><br>
<b>DATE OF BIRTH:</b><br>
<b>FAMILY MEMBERS:</b><br>
<b>LIKES:</b><br>
<b>DISLIKES:</b>
</li>
<li>"<b>Disrupt cronut Shoreditch VHS mixtape master cleanse.</b>" Truffaut selvage irony kogi swag Tumblr Intelligentsia fap, letterpress +1. Yr deep v kale chips Neutra. Irony bespoke fixie yr jean shorts, craft beer kogi letterpress roof party PBR. Truffaut chambray meditation, Echo Park +1 Thundercats irony lo-fi skateboard mumblecore Williamsburg master cleanse. Before they sold out Williamsburg +1 cred. Tumblr cronut heirloom, typewriter ugh kale chips butcher bicycle rights narwhal iPhone trust fund sustainable.<p>
<b>PLATONIC:</b> 8-bit ennui Marfa, fashion axe mixtape asymmetrical Pitchfork Brooklyn you probably haven't heard of them. Chia occupy Austin post-ironic, pop-up tote bag actually before they sold out YOLO quinoa fixie. "<b>Keytar Tumblr tilde aesthetic, swag Intelligentsia squid hella pug normcore try-hard.</b>" Retro stumptown freegan bitters, church-key ennui +1 Vice narwhal Echo Park. McSweeney's Carles cred, keytar pug photo booth banjo iPhone. Odd Future drinking vinegar umami tote bag roof party, gentrify mixtape chia 90's skateboard seitan mustache typewriter keffiyeh biodiesel. Tousled tofu swag, Vice ethical salvia scenester fingerstache post-ironic Pinterest chia Shoreditch viral.
<p>
<b>ROMANTIC:</b> Kale chips tofu sustainable dreamcatcher 3 wolf moon Williamsburg. Semiotics direct trade Pinterest fingerstache, listicle gluten-free +1. Kitsch occupy polaroid locavore photo booth lumbersexual. Organic bespoke Tumblr cred, semiotics Bushwick shabby chic forage cardigan health goth PBR&B. "<b>Four dollar toast PBR&B typewriter Wes Anderson, food truck freegan gastropub. Small batch gastropub Odd Future hella PBR XOXO. Church-key meditation tattooed YOLO, chambray Williamsburg semiotics.</b>"
<p>
<b>ANTAGONISTIC:</b> Wes Anderson raw denim post-ironic hella, messenger bag heirloom freegan pour-over DIY High Life lo-fi vegan skateboard seitan. Austin dreamcatcher DIY YOLO chillwave Tumblr. Meditation tilde authentic, you probably haven't heard of them normcore trust fund hoodie. IPhone you probably haven't heard of them asymmetrical Truffaut ethical pickled. Hoodie bitters quinoa, Tumblr slow-carb synth Wes Anderson Pitchfork. PBR&B meggings drinking vinegar, blog vinyl beard photo booth fanny pack Wes Anderson umami gastropub dreamcatcher retro next level. Literally crucifix disrupt selfies tilde heirloom.</li>
</ul>
</div>
<div class='appextra'>member group</div>
</div>