Advanced Layout 01

Please pay attention to how you copy and paste things. I'm not going to make 3-4 different bins for one layout.

Javascript :

$(document).ready(function(){
  $(".one").click(function(){
    $(".stats").fadeIn("slow");
    $(".bio, .rules, .bro").fadeOut("slow");
  });
  $(".two").click(function(){
    $(".bio").fadeIn("slow");
    $(".stats, .rules, .bro").fadeOut("slow");
  });
    $(".three").click(function(){
    $(".bro").fadeIn("slow");
    $(".stats, .bio, .rules").fadeOut("slow");
  });
    $(".four").click(function(){
    $(".rules").fadeIn("slow");
    $(".stats, .bio, .bro").fadeOut("slow");
  });
    });



CSS :

/*Do NOT remove any credits. This profile has been created for the purpose of those for who are lazy and those who wish to learn coding. You may fall anywhere between, we do not really care. This profile requires to be edit within HTML section. Credit for creating goes to Atomos.*/
#profile-container {background:none;}
*, body, a {cursor: url(http://i.imgur.com/qbJdqhI.png), progress !important;}
/*links*/
a:link, a:visited, a:active{
  color: inherit;
  text-decoration: none;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
}
a:hover, .one:hover, .two:hover, .three:hover, .four:hover {
  cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress !important;
}
.links {
display: inline-block;
position: relative;
}
.links:after {
display: block;
content: "";
margin: auto;
width: 0;
background: transparent;
border-bottom: 1px solid transparent;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
.links:hover:after {
width: 100%;
border-bottom: 1px solid #1B1D29;
}
/*font*/
@font-face {
src: url(https://dl.dropboxusercontent.com/u/62876172/basictitlefont.ttf);
font-family: basic;
}
p {
font-family: calibri;
color: #1B1D29;
font-size: 11px;
line-height: 10.5px;
}
b, strong {
font-family: courier;
font-size: 10px;
text-transform: uppercase;
color: #6A6971;
font-weight: 100;
}
#box {
position: absolute;
margin-top: 100px; right: 0;
width: 400px; height: 450px;
background: #D1CED6;
border: 3px solid #1B1D29;
}
.pic {
position: absolute;
top: 0; right: 0;
width: 100%; height: 200px;
background: url(https://40.media.tumblr.com/750547d9e2f1743c3c22f4b1e245c236/tumblr_nhv5u9pEJG1qe8u8qo1_540.png);
background-position: /*horizonal position*/ 30% /*vertical position*/ 10%;
background-size: /*edit this to your liking; use cover instead of percent should you want it to be fitted*/ 110%;
border-bottom: 1px solid #1B1D29;
z-index: 2;
}
/*hover*/
.cover {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
opacity: 0;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
}
.cover:hover {
opacity: 1;
}
.one, .two, .three, .four {
position: relative;
top: 5px; left: 90px;
margin-bottom: 10px;
width: 200px; height: 20px;
font-family: basic;
font-size: 20px;
background: #EDE9ED;
text-align: center;
color: #1B1D29;
border: 5px double #1B1D29;
padding: 5px;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
}
.one:hover, .two:hover, .three:hover, .four:hover {
background: #1B1D29;
color: #EDE9ED;
}
/*profile*/
.box {
position: absolute;
bottom: 25px; left: 30px;
width: 338px; height: 198px;
background: rgba(255,255,255,.9);
border: 1px solid #1B1D29;
z-index: 5;
}
.stats {
position: absolute;
top: 5%; left: 5%;
width: 90%; height: 90%;
text-align: center;
display: none;
}
.bio, .bro, .rules {
position: absolute;
top: 5%; left: 5%;
height: 90%; width: 90%;
text-align: justify;
overflow: auto;
display: none;
}
.bio::first-letter {
float: left;
font-family: basic;
color: #fff;
font-size: 30px;
background: #1B1D29;
padding: 10px 10px 5px 10px;
border: 10px double #E1ECF5;
margin-right: 4px;
margin-bottom: 4px;
}
.bro img {
float: left;
width: 40px; height: 100px;
border: 1px solid #1B1D29;
margin-right: 4px;
margin-bottom: 4px;
}
/*Scrollbar*/
::-webkit-scrollbar-thumb:vertical {
    background-color: #1B1D29;
    height: 30px;
    border-right:  7px solid #EDE9ED;
    border-left:  8px solid #EDE9ED;
    }
::-webkit-scrollbar-thumb:horizontal {
    background-color: #1B1D29;
    height: 7px!important;
    }
::-webkit-scrollbar {
    background: #1B1D29;
    border-left: 9px solid #EDE9ED;
    border-right: 8px solid #EDE9ED;
    height:7px;
    width:  18px;
    }
/*paint dribbles. only edit the color.*/
.paint {
position: absolute;
top: 200px; left: 0;
width: 100%; height: 250px;
z-index: 0;
}
.p1 {
left: 0;
width: 50px; height: 50px;
background: #1B1D29;
border-radius: 0 0 100% 100%;
-webkit-animation: move 10s ease forwards;
-moz-animation: move 10s ease forwards;
-o-animation: move 10s ease forwards;
z-index: 0;
}
.p2 {
position: absolute;
left: 10%; top: 0;
width: 10px; height: 10px;
background: #6A6971;
border-radius: 0 0 100% 100%;
-webkit-animation: move 1s ease forwards;
-moz-animation: move 1s ease forwards;
-o-animation: move 1s ease forwards;
z-index: 1;
}
.p3 {
position: absolute;
left: 8%; top: 0;
width: 80px; height: 30px;
background: #1F2F40;
border-radius: 0 0 100% 100%;
-webkit-animation: move 7s ease forwards;
-moz-animation: move 7s ease forwards;
-o-animation: move 7s ease forwards;
z-index: 0;
}
.p4 {
position: absolute;
left: 28%; top: 0;
width: 20px; height: 70px;
background: #89888E;
border-radius: 0 0 100% 100%;
-webkit-animation: move 2s ease forwards;
-moz-animation: move 2s ease forwards;
-o-animation: move 2s ease forwards;
z-index: 0;
}
.p5 {
position: absolute;
left: 35%; top: 0;
width: 5px; height: 5px;
background: #455058;
border-radius: 0 0 100% 100%;
-webkit-animation: move 4s ease forwards;
-moz-animation: move 4s ease forwards;
-o-animation: move 4s ease forwards;
z-index: 1;
}
.p6 {
position: absolute;
left: 31%; top: 0;
width: 80px; height: 30px;
background: #EDE9ED;
border-radius: 0 0 100% 100%;
-webkit-animation: move 12s ease forwards;
-moz-animation: move 12s ease forwards;
-o-animation: move 12s ease forwards;
z-index: 0;
}
.p7 {
position: absolute;
left: 50%; top: 0;
width: 10px; height: 80px;
background: #455058;
border-radius: 0 0 100% 100%;
-webkit-animation: move 4s ease forwards;
-moz-animation: move 4s ease forwards;
-o-animation: move 4s ease forwards;
z-index: 0;
}
.p8 {
position: absolute;
right: 10%; top: 0;
width: 80px; height: 10px;
background: #455058;
border-radius: 0 0 100% 100%;
-webkit-animation: move 6s ease forwards;
-moz-animation: move 6s ease forwards;
-o-animation: move 6s ease forwards;
z-index: 1;
}
.p9 {
position: absolute;
right: 30%; top: 0;
width: 20px; height: 30px;
background: #89888E;
border-radius: 0 0 100% 100%;
-webkit-animation: move 10s ease forwards;
-moz-animation: move 10s ease forwards;
-o-animation: move 10s ease forwards;
z-index: 0;
}
.p10 {
position: absolute;
right: 0; top: 0;
width: 40px; height: 0px;
background: #1B1D29;
border-radius: 0 0 100% 100%;
-webkit-animation: move 12s ease forwards;
-moz-animation: move 12s ease forwards;
-o-animation: move 12s ease forwards;
z-index: 1;
}
@-webkit-keyframes move {
0% {
top: 0%;
}
100% {
height: 100%;
border-radius: 0;
}
@-moz-keyframes move {
0% {
top: 0%;
}
100% {
height: 100%;
border-radius: 0;
}
}
@-o-keyframes move {
0% {
top: 0%;
}
100% {
height: 100%;
border-radius: 0;
}
}
}
.HAVEN {
position: absolute;
bottom: -30px;
width: 100%;
text-align: center;
}


Profile Width: 406

HTML :

<div id="box">
<div class="pic">
<div class="cover">
<div class="one">Stats</div>
<div class="two">Bio</div>
<div class="three">Friends</div>
<div class="four">OOC</div>
</div>
</div>
<div class="box">
<div class="stats">
<p><strong>Name</strong> Alex.</p>
<p><strong>Age</strong> Seventeen.</p>
<p><strong>height</strong> 5'4".</p>
<p><strong>Weight</strong> 120lbs.</p>
<p><strong>hair color</strong> Raven.</p>
<p><strong>eye color</strong>&nbsp;Sapphire.</p>
<p><strong>occupation</strong> Student.</p>
<p><strong>Year</strong> 2nd.</p>
<p><strong>title</strong> Mage.</p>
<p><strong>Dream carrer</strong> Musician.</p>
<p><strong>Orientation</strong> Heterosexual.</p>
<p><strong>Status</strong> Single.</p>
<p><strong>interest</strong> None.</p>
<p><strong>Theme Song</strong>&nbsp;<a class="links" href="https://www.youtube.com/watch?v=c7xq1mON-Dw" target="_blank">アシタカとサン</a></p>
<p><strong>Theme Song II&nbsp;<a class="links" href="https://www.youtube.com/watch?v=aDAKPHScin0" target="_blank">The Universe</a></strong></p>
</div>
<div class="bio">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>&nbsp;</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>&nbsp;</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="bro">
<p><img src="http://i.imgur.com/Rmk9oQb.png" alt="" /> <strong>Friend Name.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img src="http://i.imgur.com/Rmk9oQb.png" alt="" /> <strong>Friend Name.</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="rules">
<p>This can be a list for rules or something OOC. Whatever you wish for it to be.</p>
</div>
</div>
<div class="paint">
<div class="p1">&nbsp;</div>
<div class="p2">&nbsp;</div>
<div class="p3">&nbsp;</div>
<div class="p4">&nbsp;</div>
<div class="p5">&nbsp;</div>
<div class="p6">&nbsp;</div>
<div class="p7">&nbsp;</div>
<div class="p8">&nbsp;</div>
<div class="p9">&nbsp;</div>
<div class="p10">&nbsp;</div>
<div class="p11">&nbsp;</div>
</div>
<div class="HAVEN">
<p>Profile provided by HAVEN</p>
</div>
</div>