QueenHorror VF Profile Layout

<style>
.main_content_title, #user_default_image, #main-navbar, .top_commentbox img, .footer_links, .navbar-nav, #user_profile_info, .btn-primary, .top_commentbox textarea, .panel-heading, .friends-list, .top_commentbox, .newsfeed, #right_profile, #user_rating, .panel-footer { display: none; }

.panel, .panel-primary, .user_profile_box, .dark_highlight, #maincontent, .user_profile_box, {
background: transparent;
border: none;
}

body, html {
background: url('https://i.imgur.com/B1uZ1OA.png') no-repeat left top;
background-position: 0px 0px!important;
background-attachment: fixed!important;
background-size: auto!important;
background-color: #17161c!important;
}

body, div, table {
color: #dae39b;
font-weight: lighter;
font: 10px calibri, sans-serif;
 }

b, bold {
color: #5fc86e;
font-weight: bold;
}

i, italic {
color: #5fc86e;
font-style: italic;
}

u, underline {
color: #5fc86e;
text-decoration-style: dashed;
}

a:link, a:visited, a:active {
color: #5fc86e;
}

a:hover {
color: #55ad62;
-webkit-transition: ease-in 0.6s;
-moz-transition: ease-in 0.6s;
-o-transition: ease-in 0.6s;
transition: ease-in 0.6s;
}

h1 {
background: #303030;
background-image: url('https://i.imgur.com/GoI7Apg.png')!important;
color: #55ad62;
font: 16px calibri, serif;
text-transform: uppercase;
font-weight: lighter;
font-style: italic;
letter-spacing: 2px;
text-align: center;
border-radius: 0px;
margin-top: 6px;
margin-bottom: 2px;
text-shadow: 1px 2px 0px #1a331a;
display: block;
line-height: 24px;
margin-bottom: 4px;
}

#navi {
position: absolute;
top: 10px;
right: 10px;
width: 120px;
height: 175px;
padding: 0px;
margin-left: 5px;
background: #4e1065!important;
border-radius: 10px;
text-align: center;
z-index: 99;
transition: 2s;
display: block;
overflow: hidden;
border: 2px dotted #8f9564;
}


#navi a {
display: block;
padding: 4px;
background: #8a4d66;
border-radius: 10px;
margin: 2px;
border: none;
color: #5fc86e;
font-weight: lighter;
font-style: italic!important;
text-transform: uppercase;
font: 9px helvetica, sans-serif;
letter-spacing: 2px;
line-height: 10px;
margin-bottom: 4px;
}

#navi a:hover{
color: #55ad62;
-webkit-transition: ease-in 0.5s;
-moz-transition: ease-in 0.5s;
-o-transition: ease-in 0.5s;
transition: ease-in 0.5s;
}

#main {
width: 680px;
height: 395px;
background-color: #4e1065!important;
position: relative;
top: 10px!important;
left: 150px;
border-radius: 10px;
border: 2px dotted #8f9564;
}

#basics {
background: #8a4d66;
position: absolute;
height: 165px;
width: 293px;
top: 10px;
left: 10px;
border-radius: 10px;
padding: 8px;
}

.basics img {
width: 145px;
height: 150px;
border: 2px solid #5fc86e;
border-radius: 5px;
background: transparent;
margin-bottom: 10px;
}

.basics img:hover {
border: 2px solid #55ad62;
-webkit-transition: ease-in 0.5s;
-moz-transition: ease-in 0.5s;
-o-transition: ease-in 0.5s;
transition: ease-in 0.5s;
}

#about {
background: #8a4d66;
position: absolute;
height: 165px;
width: 355px;
top: 10px;
left: 310px;
border-radius: 10px;
border: none;
padding: 0px;
overflow: hidden;
}


#cults {
background: #8a4d66;
position: absolute;
width: 293px;
height: 185px;
top: 180px;
left: 10px;
border-radius: 10px;
border: none;
padding: 0px;
overflow: hidden;
}

.cults img {
width: 90px;
height: 44px;
margin-top: 2px;
margin-left: 2px;
margin-right: 2px;
margin-bottom: 2px;
border: 2px solid #5fc86e;
border-radius: 5px;
background: transparent;
display: inline-block;
}

.cults img:hover {
border: 2px solid #55ad62;
-webkit-transition: ease-in 0.5s;
-moz-transition: ease-in 0.5s;
-o-transition: ease-in 0.5s;
transition: ease-in 0.5s;
}

#loves {
background: #8a4d66;
position: absolute;
height: 185px;
width: 175px;
top: 180px;
left: 310px;
border-radius: 10px;
border: none;
padding: 0px;
overflow: hidden;
}

#loathes {
background: #8a4d66;
position: absolute;
height: 185px;
width: 175px;
top: 180px;
left: 490px;
border-radius: 10px;
border: none;
padding: 0px;
overflow: hidden;
}



#credit {
background: #250840;
position: absolute;
width: 655px;
top: 370px;
left: 10px;
border-radius: 5px;
border: none;
font: 10px calibri, serif!important;
padding: 0px;
text-transform: uppercase;
color: #55ad62;
height: 15px;
letter-spacing: 1px;
}


</style>

<center>

<div id="navi">
<h1>Navigation</h1>
<a href="https://vampirefreaks.com/">VF HOME</a>
<a href="http://vampirefreaks.com/profile_action.php?user=USERNAME&friendslist=1">ADD ME</a>
<a href="http://vampirefreaks.com/user_comment.php?user=USERNAME&rate=1">CONTACT ME</a>
<a href="http://vampirefreaks.com/gallery/USERNAME">GALLERY</a>
<a href="http://vampirefreaks.com/journal/USERNAME">JOURNAL</a>
<a href="https://vampirefreaks.com/cult/PD">CREDIT</a>
</div>

<div id="main">

<div id="basics">
<a href="http://vampirefreaks.com/gallery/USERNAME" class="basics" ><img src="https://i.imgur.com/o6JBv47.png" title="Gallery" align="left"></a>
<div style="width: 125px; height: 16px; background: #250840!important; display: inline-block; margin: 1px; padding: 2px; font: 10px Arial, serif; text-transform: uppercase;  letter-spacing: 2px; text-align: center; border-radius: 8px; font-weight: bold; margin-bottom: 2px; color: #55ad62; margin-left: 2px;">NAME</div>
<div style="width: 125px; height: 16px; background: #470a66!important; display: inline-block; margin: 1px; padding: 2px; font: 10px Arial, serif; text-transform: uppercase;  letter-spacing: 1px; text-align: center; border-radius: 8px; font-style: italic; margin-bottom: 2px; margin-left: 2px;">XXX</div>
<div style="width: 125px; height: 16px; background: #250840!important; display: inline-block; margin: 1px; padding: 2px; font: 10px Arial, serif; text-transform: uppercase;  letter-spacing: 2px; text-align: center; border-radius: 8px;  font-weight: bold; margin-bottom: 2px; color: #55ad62; margin-left: 2px;">AGE</div>
<div style="width: 125px; height: 16px; background: #470a66!important; display: inline-block; margin: 1px; padding: 2px; font: 10px Arial, serif; text-transform: uppercase;  letter-spacing: 1px; text-align: center; border-radius: 8px; font-style: italic; margin-bottom: 2px; margin-left: 2px;">XXX</div>
<div style="width: 125px; height: 16px; background: #250840!important; display: inline-block; margin: 1px; padding: 2px; font: 10px Arial, serif; text-transform: uppercase;  letter-spacing: 2px; text-align: center; border-radius: 8px; font-weight: bold; margin-bottom: 2px; color: #55ad62; margin-left: 2px;">STATUS</div>
<div style="width: 125px; height: 16px; background: #470a66!important; display: inline-block; margin: 1px; padding: 2px; font: 10px Arial, serif; text-transform: uppercase;  letter-spacing: 1px; text-align: center; border-radius: 8px; font-style: italic; margin-bottom: 2px; margin-left: 2px;">XXX</div>
<div style="width: 125px; height: 16px; background: #250840!important; display: inline-block; margin: 1px; padding: 2px; font: 10px Arial, serif; text-transform: uppercase;  letter-spacing: 2px; text-align: center; border-radius: 8px; font-weight: bold; margin-bottom: 2px; color: #55ad62; margin-left: 2px;">ACCOUNT</div>
<div style="width: 125px; height: 16px; background: #470a66!important; display: inline-block; margin: 1px; padding: 2px; font: 10px Arial, serif; text-transform: uppercase;  letter-spacing: 1px; text-align: center; border-radius: 8px; font-style: italic; margin-bottom: 2px; margin-left: 2px;">XXX</div>
</div>



<div id="about"><h1>About Her</h1>
<b>bold</b> <i>italic</i> <u>underline</u> <a href="">link</a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ut sapien vitae placerat. Phasellus est lectus, sagittis eu pharetra auctor, vehicula id tellus. Morbi ultricies enim vitae tortor imperdiet ultricies. Nunc eu fringilla ipsum. Curabitur mollis pulvinar diam, non tincidunt purus sagittis non. In ullamcorper nulla sit amet laoreet egestas. Proin hendrerit suscipit magna a mollis.

Fusce eu nisl lorem. Donec id leo nec risus porttitor tincidunt ut laoreet velit. Praesent pulvinar libero velit, vitae euismod sapien laoreet quis. In nec enim et nulla rutrum porta. Nullam id purus pretium, ornare orci ac, blandit mi. Mauris consectetur arcu tellus, in interdum felis eleifend eget. Mauris et quam feugiat, gravida neque mollis, molestie risus. Vivamus tempus vehicula ex in sagittis.
</div>



<div id="cults"><h1>My Hangouts</h1>
<a href="https://vampirefreaks.com/cult/" class="cults"><img src="https://i.imgur.com/zTVaxWZ.png" title="CULT"></a>
<a href="https://vampirefreaks.com/cult/" class="cults"><img src="https://i.imgur.com/zTVaxWZ.png" title="CULT"></a>
<a href="https://vampirefreaks.com/cult/" class="cults"><img src="https://i.imgur.com/zTVaxWZ.png" title="CULT"></a>
<a href="https://vampirefreaks.com/cult/" class="cults"><img src="https://i.imgur.com/zTVaxWZ.png" title="CULT"></a>
<a href="https://vampirefreaks.com/cult/" class="cults"><img src="https://i.imgur.com/zTVaxWZ.png" title="CULT"></a>
<a href="https://vampirefreaks.com/cult/" class="cults"><img src="https://i.imgur.com/zTVaxWZ.png" title="CULT"></a>
<a href="https://vampirefreaks.com/cult/" class="cults"><img src="https://i.imgur.com/zTVaxWZ.png" title="CULT"></a>
<a href="https://vampirefreaks.com/cult/" class="cults"><img src="https://i.imgur.com/zTVaxWZ.png" title="CULT"></a>
<a href="https://vampirefreaks.com/cult/" class="cults"><img src="https://i.imgur.com/zTVaxWZ.png" title="CULT"></a>
</div>

<div id="loves"><h1>Loves</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ut sapien vitae placerat. Phasellus est lectus, sagittis eu pharetra auctor, vehicula id tellus. Morbi ultricies enim vitae tortor imperdiet ultricies. Nunc eu fringilla ipsum. Curabitur mollis pulvinar diam, non tincidunt purus sagittis non. In ullamcorper nulla sit amet laoreet egestas. Proin hendrerit suscipit magna a mollis. Fusce eu nisl lorem. Donec id leo nec risus porttitor tincidunt.
</div>

<div id="loathes"><h1>Loathes</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ut sapien vitae placerat. Phasellus est lectus, sagittis eu pharetra auctor, vehicula id tellus. Morbi ultricies enim vitae tortor imperdiet ultricies. Nunc eu fringilla ipsum. Curabitur mollis pulvinar diam, non tincidunt purus sagittis non. In ullamcorper nulla sit amet laoreet egestas. Proin hendrerit suscipit magna a mollis. Fusce eu nisl lorem. Donec id leo nec risus porttitor tincidunt.
</div>





<div id="credit">Layout designed by PD for QueenHorror only. Best viewed in Chrome with 1920 x 1080 screen resolution. ©2018</div>

</div>