Code 4; 1 img, 5 text, tabs

<!DOCTYPE html>

<style type="text/css">

/* Preview: http://i.picpar.com/vm5c.png */

/* Profile was created by Alcyone, for anyone to use freely. If you are interested in commissioning a profile, go ahead and leave her some mail. */

::-webkit-scrollbar {progress; width: 0px;}
::-webkit-scrollbar-thumb:vertical {
   background-color: transparent;
   border: 1px solid transparent;
   -webkit-border-radius: 1px;
   box-shadow: 0 0 3px transparent, inset 0 0 6px transparent;
   -moz-transition:all 0.3s ease-in-out;
   -webkit-transition:all 0.3s ease-in-out;}

::-webkit-scrollbar-thumb:vertical:hover, ::-webkit-scrollbar-button:start:decrement:hover, ::-webkit-scrollbar-button:end:increment:hover {border-color:transparent;box-shadow: 0 0 12px transparent, inset 0 0 16px transparent;}

.bg {position: fixed;
margin: auto;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: none url('')
center center repeat;
width: 900px;
height: 520px;
text-align: center;
border: 1px solid #000;}


/* ------------------------------------------ */
/* ------------------------------------------ */
/* ------------------------------------------ */

/* Start editing your stuff below. */

/* Background */
body { background-color: #9f66a4;}

/* Paragraph Color, etc.  */

p {background: none;
font-size:12px;
font-family: Arial;
text-align: justify;
color:#442232;
padding:1px 5px 5px 5px;}

/* Link */

a {color: #e7a9f0;
text-shadow:
#000 -1px 0px,
#000 0px 1px,
#000 1px 0px,
#000 0px -1px;
text-decoration: none;}

/* Bold */
b {color:#d3a1d7;
text-decoration: none;
text-shadow:
#000 -1px 0px,
#000 0px 1px,
#000 1px 0px,
#000 0px -1px;}

/* Italics */
i {color:#631969;}

/* Underline */
u {color:#631969;}

.img1 {background: none;
background:url('http://i.picpar.com/tm5c.png')
center center no-repeat;
position: absolute;
text-align: center;
width: 320px;
height: 500px;
top: 10px;
left: 570px;
border: 0px solid #000;
overflow: auto;}

.title {font-size: 55px;
left: 10px;
top: 10px;
width: 550px;
text-align: center;
position: absolute;
padding:5px 5px 5px 5px;
color: #d3a1d7;
border: 0px solid #000;
text-shadow:
#000 -1px 1px,
#000 1px 1px,
#000 1px 1px,
#000 1px -1px;}

.boxout {background: #552659;
position: absolute;
text-align: center;
width: 900px;
height: 520px;
top: 0px;
left: 0px;
border: 0px solid #000;
 overflow: auto;}

.boxin {background: #ccc;
position: absolute;
text-align: center;
width: 880px;
height: 500px;
top: 10px;
left: 10px;
border: 0px solid #000000;
overflow: auto;}

.stats {background: none;
position: absolute;
text-align: center;
width: 555px;
height: 120px;
left: 30px;
top: 80px;
border: 0px solid #000;
overflow: auto;}

.info1 {background: #ccc;
position: absolute;
text-align: center;
width: 530px;
height: 315px;
left: 40px;
top: 185px;
border: 0px solid #442232;
overflow: auto;}

#navi1 { position: absolute;
top: 170px;
left: 160px;
background: url('');
text-align: center;}

a.navi, a.navi:visited, a.navi:hover {
  text-decoration: none;
  display: inline-block;
  width: 70px;
  height: 3px;
  background-color: #d3a1d7;
  text-align: center;
  border: 1px solid #442232;

#box1 {background:
none; position: fixed;
font-family:BatangChe;
font-size: 11px;
text-align: center;
width: 530px;
height: 315px;
left: 0px;
top: 0px;
border: 0px solid #cccccc;
overflow: auto;}

</style>

<div class="bg">
<div class="boxout"></div>
<div class="boxin"></div>
<div class="img1"></div>
<div class="title">Character Name</div>

<div class="stats">
<p style="font-size: 15px; text-align: center; font-family: Arial; font-variant: small-caps; margin: 5px;">
<b>Stat</b>: Info ● <b>Stat</b>: Info ● <b>Stat</b>: Info<br>
<b>Stat</b>: Info ● <b>Stat</b>: Info ● <b>Stat</b>: Info<br>
<b>Stat</b>: Info ● <b>Stat</b>: Info ● <b>Stat</b>: Info<br>
<b>Stat</b>: Info ● <b>Stat</b>: Info ● <b>Stat</b>: Info<br>
</div>

<div id="navi1">
<a href="#one"class="navi"> </a>
<a href="#two"class="navi"> </a>
<a href="#three"class="navi"> </a>
<a href="#four"class="navi"> </a>
</div>

<div class="info1">

<div id="box1">
<div style="background: none; position: absolute; font-family:Ariel; font-size: 11px; text-align: center;  width: 530px; height: 315px;  left: 0px; top: 0px; border: 0px solid #000; overflow-y: hidden;">

<a name="one"></a><div style=" width: 530px; height: 315px; overflow: auto;">
<p>

<b>00</b>. Profile was created by <a target="_blank" href="https://roleplay.chat/profile.php?user=Alcyone" title="">Alcyone</a>, for anyone to use freely. If you are interested in commissioning a profile, go ahead and leave her some mail.<br>
<b>01</b>. OOC Rule here.<br>
<b>02</b>. OOC Rule here.<br>
<b>03</b>. OOC Rule here.<br>
<b>04</b>. OOC Rule here.<br><br>
Tab 1: OOC<br>
Tab 2: Words<br>
Tab 3: Words<br>
Tab 4: Friends List<br><br>
<b>bold</b>, <i>italics</i>, <u>underline</u>, <a target="_blank" href="https://roleplay.chat/profile.php?user=" title="">Link</a>

</p>
</div>

<a name="two"></a><div style=" width: 530px; height: 315px; overflow: auto;">
<p>

Tab 2

</p>
</div>

<a name="three"></a><div style=" width: 530px; height: 315px; overflow: auto;">
<p>

Tab 3

</p>
</div>

<a name="four"></a><div style=" width: 530px; height: 315px; overflow: auto;">
<p style="text-align: center;">

<a href="https://roleplay.chat/profile.php?user=" target="_blank"title="Description"><img src="tinypic.com" alt="" width="75" height="75" /></a>
<a href="https://roleplay.chat/profile.php?user=" target="_blank"title="Description"><img src="tinypic.com" alt="" width="75" height="75" /></a>
<a href="https://roleplay.chat/profile.php?user=" target="_blank"title="Description"><img src="tinypic.com" alt="" width="75" height="75" /></a>
<a href="https://roleplay.chat/profile.php?user=" target="_blank"title="Description"><img src="tinypic.com" alt="" width="75" height="75" /></a>

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


</div>