Companions v.2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--
THIS THEME WAS CREATED BY: NATALIE (FALLENVVINGSTHEMES)
You can edit this theme as much as you want.
Please DO NOT remove the credit.
Please like or reblog the post if you use this theme.
THANKS! Enjoy!
-->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
<script>
   (function($){
       $(document).ready(function(){
           $("[title]").style_my_tooltips({
               tip_follows_cursor:true,
               tip_delay_time:200,
               tip_fade_speed:300
           }
               );
       });
   })(jQuery);
</script>

<style type="text/css">

#s-m-t-tooltip{
max-width:300px;
margin:15px;
padding:2px 8px;
border:1px solid #DDD;
border-radius:4px;
background:#FFF;
color:#AAA;
z-index:999999;
font-size:8px;
font-style:italic;
text-transform:lowercase;
}

::-webkit-scrollbar {width: 7px;height: 5px;}
/*change both "white" to the color of the #contain background color*/
/*change #523843 to the background color of #top*/
::-webkit-scrollbar-track-piece {background-color: white; color:#523843;}
::-webkit-scrollbar-thumb:vertical {height: 3px; background-color: #523843; border:2px solid white;}


    /*page background color \/*/
body {background-color:#EBDEE1;}

#contain {
background-color:white; /*background color behind images*/
width:505px;
padding:0px 5px 10px 0px;
height:440px;
position:fixed;
overflow:auto;
left:530px;
top:120px;
}

#side {
width:200px;
height:450px;
position:fixed;
left:329px;
top:120px;
background-image:url('http://s9.favim.com/orig/131116/amazing-background-colorful-cute-Favim.com-1065697.png'); /*paste a URL of an image between ''*/
/*it looks best if it's a pattern*/
}

#top {
background-color:#523843; /*the color of the top bar*/
width:700px;
position:fixed;
top:70px;
left:330px;
height:40px;
padding:5px;
}

.ti {
color:#e8b6d4; /*the color of the title*/
font-family:corbel; /*the font of the title*/
font-size:25px;
margin-top:4px;
margin-left:5px;
}

.link {
color:#faf0f6; /*the color of the // between links*/
padding:3px;
text-align:right;
font-family:corbel;
margin-top:-35px;
width:485px;
height:30px;
margin-left:206px;
}

a .links {
display:inline-block;
color:#e8b6d4; /*color of links*/
padding:5px;
     -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

a .links:hover {
color:#faf0f6; /*color of links when you hover over them*/
z-index:0;
font-style:italic;
     -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.pers img {
width:150px;
height:150px;
z-index:0;
}

.pers {
display:block;
margin-left:13px;
z-index:0;
margin-top:10px;
}

.int {
font-family:calibri; /*font of description*/
text-align:center;
background-color:rgba(255,255,255,0.8);
height:150px;
width:305px;
padding:5px;
margin-left:170px;
overflow:auto;
font-size:13px;
margin-top:-150px;
position: relative;
     -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}
                /*color of url*/
.int a {font-size:18px; color:#523843; text-decoration:none;}

</style></head><body><div id="side"></div>

                <!--title in top bar \/-->
<div id="top"><div class="ti">Companions</div><div class="link">
<!--put entire link between ""
for example: "http://tumblr.com"-->
<a href="/"><div class="links">link</div></a> //
                <!--put the name of the link where it says link-->
<a href="/"><div class="links">link</div></a> //
<a href="/"><div class="links">link</div></a> //
<a href="/"><div class="links">link</div></a>
</div></div>

<div id="contain">

<!--PERSON ONE-->
<div class="pers"><img src="https://31.media.tumblr.com/avatar_102877b83a4f_128.png"><!--add an image URL between ""--><div class="int">
<!--change both URL to the persons URL-->
                                    <!--put your description where it says to-->
<a href="http://URL.tumblr.com/">URL</a></br>here's where your description goes. it can generally be as long as you want it to tbh. so i'm going to keep talking into a random box just to prove to you that this description can be hella long. honestly idk why i'm doing this. just talking to a web page nbd don't mine me, ya know? i mean the font is so small that you shouldn't really need a description this big but if it happens that you have a lot to tell about yourself, a handy little scrollbar will appear, just like that.</div></div>
<!--END OF PERSON ONE (to add more, copy from PERSON ONE to END PERSON ONE-->

<div class="pers"><img src="https://31.media.tumblr.com/avatar_77cd68fd9160_128.png"><div class="int">
<a href="http://URL.tumblr.com/">URL</a></br> here's where your description goes</div></div>

<div class="pers"><img src="https://38.media.tumblr.com/avatar_a65f2676586f_128.png"><div class="int">
<a href="http://URL.tumblr.com/">URL</a></br> here's where your description goes</div></div>

</div>
 <!--THAT'S IT!!! Please do not remove credit.-->
<div style="position:fixed;bottom:2px; right:3px;"><a title="fvvthemes" href="http://fallenvvingsthemes.tumblr.com"><img width="60px;" src="http://static.tumblr.com/nuxi7mr/94Rnqk1a2/tumblr_mh9l7xhvq11s0c2c9o1_500.png"></a></div>
</body></html>