BrkenDreams VF Profile Layout

<style>
.maintop, .leftnav, .profilename, .profilepages, .topbar, .defaultpic, .thumbnail, .gallery, .videos, .userinfo, .journal_entry, .profile_title, .likes_title, .dislikes_title, .music_title, .buttons1, .buttons2, .buttons3, .friends, .rate, .comment_title, .comments, .tagline, .menu2, .profilepages, .footer_links { display: none; }

body, html{
background: url('http://i.imgur.com/PogGXlZ.jpg'); background-attachment: fixed;
}

body, table, .rate b {
text-decoration: none;
text-transform: none;
font: 10pt geneva;
letter-spacing: 1px;
color: #31B01D;
}

b {
text-decoration: bold;
text-transform: uppercase;
text-shadow: -1px 1px 0px #C0C0C0;
font: 10pt geneva;
letter-spacing: 1px;
color: #F10302;
}

i {
text-decoration: italic;
text-shadow: none;
font: 10pt geneva;
color: #FF19EA;
font-style: italic;
}

u {
border-bottom: 1px dashed #1200C9;
font: 11pt geneva;
color: #F10302;
}

s {
text-decoration: strike;
text-transform: lowercase;
font: 9pt geneva;
letter-spacing: 2px;
color: #FF7D28;
}
h2 {
display: block;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
border-radius: 15px 15px 0px 0px;
border: 1px solid #050505;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 5px;
font: 10pt geneva;
color: #050505;
background: #F2B424;
}

h3 {
display: block;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
border-radius: 0px 0px 15px 15px ;
border: 1px solid #050505;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 3px;
font: 9pt geneva;
color: #050505;
background: #F2B424;
}

h1 {
display: block;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
border-radius: 5px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 5px;
font: 11pt geneva;
color: #000;
background: #31B01D;
}

h1:first-letter {
font-size: 200%;
color: #212120;
}

a:link, a:visited {
font: 10pt geneva;
color: #000;
font-weight: bold;
}
a:hover {
font: 10pt geneva;
color: #fff;
font-weight: bold;
background: transparent;
}
.navilink {
display: inline;
font: 9pt geneva;
color: #000;
margin: 3px;
padding: 3px;
background: #F10302;
border: 1px solid #000;
border-radius: 10px;
text-align: right;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.navilink:hover {
display: inline;
font: 9pt geneva;
color: #fff;
border: 1px solid #fff;
text-align: left;
background: #FF19EA;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.galleryp {
height: 120px;
width: 120px;
border: 2px dashed #F10302;
border-radius: 10px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.galleryp:hover {
border: 2px dashed #31B01D;
border-radius: 100px;
background: transparent;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.navibutton1 {
display: block;
font: 9pt geneva;
color: #000;
background: #F10302;
border: 1px solid #000;
text-align: right;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.navibutton2 {
display: block;
font: 9pt geneva;
color: #000;
background: #FF7D28;
border: 1px solid #000;
text-align: right;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.navibutton3 {
display: block;
font: 9pt geneva;
color: #000;
background: #31B01D;
border: 1px solid #000;
text-align: right;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.navibutton4 {
display: block;
font: 9pt geneva;
color: #000;
background: #1200C9;
border: 1px solid #000;
text-align: right;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.navibutton1:hover {
display: block;
color: #fff;
border: 1px solid #fff;
text-align: left;
background: #FF19EA;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.navibutton2:hover {
display: block;
color: #fff;
border: 1px solid #fff;
text-align: left;
background: #FF19EA;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.navibutton3:hover {
display: block;
color: #fff;
border: 1px solid #fff;
text-align: left;
background: #FF19EA;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.navibutton4:hover {
display: block;
color: #fff;
border: 1px solid #fff;
text-align: left;
background: #FF19EA;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.mbtsdlink {
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
-webkit-transition: all 1.5s ease;
-moz-transition: all 1.5s ease;
-ms-transition: all 1.5s ease;
-o-transition: all 1.5s ease;
transition: all 1.5s ease;
}
.mbtsdlink:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}

#navi {
margin: 0px;
top: 100px;
position: absolute;
left: 0px;
height: 15px;
width: 800px;
position: relative;
text-align: center;
line-height: 10px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 10px;
border: 1px solid #F10302;
background: #000;
}
.base{
top: 120px;
width: 800px;
height: 700px;
position: relative;
background: #000 url('http://i.imgur.com/XUQxpFh.png');
border-radius: 5px;
border: 1px solid #F10302;
border-radius: 10px;
}
#navi2 {
top: 200px;
left: 640px;
height: 200px;
width: 150px;
position: absolute;
background: transparent;
border-radius: 10px;
border: 0px solid #fff;
text-align: right;
overflow: hidden;
}
#basics{
top: 10px;
left: 370px;
height: 130px;
width: 250px;
position: absolute;
background: transparent;
border-radius: 10px;
border: 1px solid #fff;
text-align: center;
overflow: hidden;
}
#content {
top: 150px;
left: 260px;
height: 530px;
width: 360px;
position: absolute;
background: transparent;
border-radius: 10px;
border: 1px solid #fff;
text-align: center;
overflow: hidden;
}
#galleryicon{
top: 10px;
left: 650px;
height: 130px;
width: 130px;
position: absolute;
background: transparent;
border-radius: 10px;
overflow: hidden;
border: 0px;
text-align: center;
}
#mbtsd {
top: 450px;
left: 650px;
height: 130px;
width: 130px;
position: absolute;
background: transparent;
border-radius: 10px;
overflow: hidden;
border: 0px;
text-align: center;
}
.container {
width: 370px;
height: 530px;
overflow: auto;
overflow-y: hidden;
border-radius: 5px;
background: transparent;
}
.section {
height: 530px;
overflow: auto;
border-radius: 5px;
background: transparent;
}

</style>
<center>
<div id="navi">
<a href="http://vampirefreaks.com/profiles/home.php" class="navilink">vf home</a>

<a href="http://vampirefreaks.com/user_comment.php?user=BrkenDreams&amp;uid=5034505&amp;rate=1" class="navilink">rate&amp;comment</a>

<a href="http://vampirefreaks.com/profile_action.php?user=BrkenDreams&amp;uid=4028465&amp;friendslist=1" class="navilink">befriend</a>

<a href="http://vampirefreaks.com/journal/BrkenDreams" class="navilink">journal</a>

<a href="http://vampirefreaks.com/gallery/BrkenDreams" class="navilink">gallery</a>

<a href="http://maddened-by-the-stars.tk/" target="_blank" class="navilink">©MbtSD</a>
</div>

<div class="base">
<div id="navi2">
<h2>Page Naviagation</h2>
<a href="#about" class="navibutton1">About</a>
<a href="#music" class="navibutton2">Music</a>
<a href="#likes" class="navibutton3">Likes</a>
<a href="#dislikes" class="navibutton4">Dislikes</a>
<h3>BrkenDreams</h3>
</div>

<div id="galleryicon">
<a href="/gallery/BrkenDreams"><img src="http://i.imgur.com/PogGXlZ.jpg" class="galleryp" title="Photo Gallery" /></a>
</div>

<div id="basics">
<h1>basics</h1>
<b>Name;</b> Shann<br />
<b>Age;</b> AGE-HERE<br />
<b>Location;</b> LOCATION-HERE<br />
<b>Relationship Status;</b> RELATIONSHIP-HERE<br />
<b>Account Status;</b> Premium Account<br />
</div>

<div id="content">
<div class="container">

<a name="about"></a>
<div class="section">
<h1>about</h1>

ABOUT YOU GOES HERE

<b>bold text</b> <i>italic text</i> <u>underline text</u> <s>strikethrough</s>

</div>

<a name="music"></a>
<div class="section">
<h1>music</h1>

MUSIC GOES HERE

</div>

<a name="likes"></a>
<div class="section">
<h1>likes</h1>

LIKES GOES HERE

</div>

<a name="dislikes"></a>
<div class="section">
<h1>dislikes</h1>

DISLIKES GOES HERE

</div>


</div>
</div>
<div id="mbtsd">
<a href="http://maddened-by-the-stars.tk/" target="_blank"><img src="http://fc05.deviantart.net/fs37/f/2008/287/e/8/Rainbow_Cat_by_ChibiTaryn.gif" title="© Maddened by the Stars Designs" class="mbtsdlink" /></a>
</div>
</div>