[html]
<style>.maryjane{width:500px;height:500px;}
.maryjane .tops{width:460px;position:relative;top:20px;border:3px double white;height:460px;-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;}
.maryjane .boxes{font-family: 'VT323';font-size:52px;padding:50px;background:white;color:#171c26;width:80px;position:relative;top:170px;-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;-ms-transform: skew(10deg,10deg); /* IE 9 */
-webkit-transform: skew(10deg,10deg); /* Chrome, Safari, Opera */
transform: skew(10deg,10deg);}
.maryjane:hover .tops, .maryjane:hover .boxes{opacity:0;-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;}
.maryjane .beastieboys{background:white;opacity:0;-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;position:relative;top:-450px;width:460px;position:relative;height:460px}
.maryjane:hover .beastieboys{opacity:1;-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;transition-delay: 1s;
-webkit-transition-delay: 1s;}
@import url(http://fonts.googleapis.com/css?family= … ns:400,700);
.beastieboys input, .beastieboys section {
clear: both;
padding-top: 10px;
display: none;
}
.beastieboys label {
font-weight: bold;
font-size: 14px;
display: block;
float: left;
padding: 10px 30px;
background:#15121b;font-family: 'VT323';font-size:12px;color:white;
}
.beastieboys label:hover {
cursor: pointer;
text-decoration: underline;
}
#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 {
display: block;font:9px arial;text-align:justify;padding:50px;overflow:auto;height:300px;
}
.beastieboys input:checked + label {
border-top-color: #d54c29;
text-decoration: none;margin-top:-5px;box-shadow:0px 0px 3px #15121b;
}
.curves{
font-size: 14px;
display: block;
float: left;
padding: 10px 30px;
background:#15121b;font-family: 'VT323';font-size:12px;color:#32925e;width:106px;margin-top:-8px;height:19px;}
.curves span{color:#d54c29;font-weight:bold;font-size:12px;}
.basicshey h1{float:left;padding:50px;color:#d54c29;text-shadow:1px 1px 0px white, 2px 2px 0px #d54c29;width:100px;font:30px "raleway";text-transform:uppercase;text-align:justify;margin-top:-10px;margin-left:-10px;}
.chip{font-size:20px;float:right;font-family:"raleway";margin-top:-80px;position:relative;top:-40px;position:relative;left:180px;}
.age{font-size:100px;float:left;position:relative;top:-100px;left:-100px;word-spacing:-5px;}
.basicshey table{width:300px;position:relative;left:-150px;top:-100px;}
.basicshey td{background:#15121b;padding:5px;margin:5px;font-family: 'VT323';font-size:12px;color:white;}
.quiz{font:30px "raleway";text-align:right;border-bottom:2px solid #15121b;}
.question{background:#d54c29;color:white;padding:10px;font-family: 'VT323';font-size:12px;text-align:center;text-transform:uppercase;opacity:0.8;}
.credit{width:495px;padding-top:5px;text-align:right;padding-right:5px;font:8px courier;text-transform:uppercase;}
.credit a{color:black;text-decoration:none;padding:2px;border:1px solid black;}
</style>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=VT323' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://callmenick.com/lab-demos/14-tabbed-content/css/style.css" />
<center><div class=maryjane style="background:url(http://placehold.it/500x500/)"><div class=tops><div class=boxes>SM</div></div>
<div class=beastieboys>
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">BASICS</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">FREESTYLE</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">QUIZ</label>
<hr><div class=curves>FLIGHTLESS<B>BIRD</B><span>❞</span></div>
<section id="content1" style="height:440px;overflow:hidden;">
<div class=basicshey>
<div style="width:460px;margin-left:-50px;margin-top:-50px;background:url(http://37.media.tumblr.com/1f2b79e093e4 … 3_1280.jpg);height:100px;opacity:0.7;"></div>
<h1>BASICS</h1><div class=chip><span style="color:#32925e;font-size:40px;">❝</span><BR><div style="position:relative;top:-20px;">I'm a <B>adjective noun</b><p style="text-indent:48px;margin-top:-5px;"><B>adjective noun</b></p><p style="text-indent:48px;margin-top:-25px;"><B>adjective noun</b></p></div>
<div class=age>## <span style="font-size:8px;text-transform:uppercase;font-style:italic;background:#15121b;padding:5px;color:white;margin-top:-100px;">years old</span></div>
<table><Tr><td>OCCUPATION/GRADE</td> <td>HOMETOWN, COUNTRY</td></tr>
<tr><td>ETHNICITY</td><td>LANGUAGES</td></tr>
<tr><td>SEXUAL ORIENTATION</td><td>MARITAL STATUS</td></tr>
<tr><td>FACE CLAIM</td><td><span style="color:#d54c29;"><B>OOC//+</b></span></td></tr>
<tr><td>ALIAS</td><td>CONTACT INFO</td></tr></table>
</div>
</section>
<section id="content2">
<h3>Header</h3>
<p><span style="color:#d54c29;"><B>Feel free to stylize this section but don't mess up the code! Don't be afraid to ask for help from your admins and fellow members.</b></span> Aliquam condimentum hendrerit nisi, nec vestibulum mi feugiat ut. Donec lobortis nisi neque, in egestas eros venenatis eu. Vestibulum nulla nisi, venenatis at pretium id, fermentum quis risus. Quisque porta suscipit neque eu placerat. Etiam scelerisque, quam in sodales iaculis, velit velit mattis nunc, quis dapibus massa elit nec enim. Vivamus quis libero aliquam, volutpat nisl sed, consectetur ante. Donec aliquam semper felis, in placerat leo blandit in. Integer interdum elit quis felis tempor venenatis. In faucibus ac mauris id commodo. Proin in sapien tincidunt, luctus mi id, bibendum dui. Nunc tincidunt libero ut purus vehicula, sit amet tincidunt mi sollicitudin. Donec varius erat magna, sed convallis purus adipiscing ut. Duis sagittis ut leo ut auctor. Ut convallis nisl nec purus sollicitudin, nec iaculis felis rutrum. </p>
</section>
<section id="content3">
<div class=quiz>QUIZ</div><p>
<p><div class=question>PROMPT HERE</div><p>
ANSWER WILL GO HERE, WRITE IN FIRST PERSON PLEASE.
<p><div class=question>PROMPT HERE</div><p>
ANSWER WILL GO HERE, WRITE IN FIRST PERSON PLEASE
<p><div class=question>PROMPT HERE</div><p>
ANSWER WILL GO HERE, WRITE IN FIRST PERSON PLEASE </section>
</div></div></div>
<div class=credit><a href="http://wecode.jcink.net/index.php?showuser=1069">FLORAL BONES @ WECODE</a></div></center>
[/html]
