Hoot code

<style>

.pfor {display: none;}
#profile{ background-color: transparent; border: 0px;}

body {
    font-family: 'Raleway', sans-serif;
    font-size: 11pt;
    color: #5f5d5d;
      background: #ffffff url("http://assets.tumblr.com/images/x.gif") repeat;
}

#whole{
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

a.linkses, a {
    text-decoration:none;
    outline:none;
    -moz-outline-style:none;
    color: #5f5d5d;
}

a:hover {
-webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
color: black;}

a.linkses:hover {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    letter-spacing: 10px;
    color: black;
    }


#maindiv{
  position: absolute;
  top: 120px;
  left: 650px;
  height: 200px;
  width: 300px;
  border: 0px solid black;
  background: white;}


#vanishdiv{
  position: absolute;
  height: 20px;
  width: 200px;
  border: 0px solid green;
  top: 50px;
  right: 35px;
  z-index: 1;
  opacity: 1;
  background:white;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  text-align: center;
}

#behindvanishdiv {
  position: absolute;
  height: 20px;
  width: 200px;
  border: 0px solid blue;
  top: 50px;
  right: 35px;
  z-index: 2;
  opacity: 0;
  text-align: center;
  word-spacing: 2px;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  background: white;
}

#mainarea{
  position: absolute;
  top: 65px;
  height: 95px;
  width: 240px;
  right: 0px;
  overflow: hidden;
  padding-top: 10px;
  box-sizing: border-box;
  }

#polediv{
  position: absolute;
  width: 1px;
  height: 110px;
  background: #dddddd;
  top: 63px;
  left: 53px;
  z-index: 1;}

#maincontent{
  height: 80px;
  width: 200px;
  border: 0px solid green;
  font-size: 11px;
overflow-y: auto;
text-align: left;}

#maindrop{
  position: absolute;
  top: 160px;
  bottom: 37px;
  border-bottom: 1px solid #dddddd;
  width: 260px;
  left: 40px;
  overflow: hidden;
  box-sizing: border-box;
  -webkit-transition: bottom 1s;
  transition: bottom 1s;
}

#mainarea:hover + #maindrop,#maindrop:hover{
  bottom: -150px;}

#maindiv:hover > #behindvanishdiv,#behindvanishdiv:hover{
  opacity:1;}


#dotdiv{position:absolute;
position: absolute;
right: 250px;
top: 60px;
height: 95px;
width: 100px;
border: 0px solid black;
box-sizing: border-box;
padding-top: 20px;
}

#dotspace{
  height: 20px;
  width: 100%;
  border: 0px solid red;
  padding-top: 10px;
  box-sizing: border-box;
}

#dots{
  position: absolute;
  height: 7px;
  width: 7px;
  right: 4px;
  border-radius: 90px 90px 90px 90px;
  border: 1px solid gray;
  background: gray;
  z-index: 1;
  -webkit-transition: background 1s;
  transition: background 1s;
}

#dots:hover{
  background: #dddddd;}

#ejectionspace{
  position: absolute;
  left: 90px;
  right: 6px;
  height: 8px;
  border: 0px solid black;
  z-index: 0;
  -webkit-transition: left 1s, opacity 1s;
  transition: left .8s, opacity 1s;
  font-size: 7pt;
  overflow: hidden;
  opacity: 0;
}

.puffy:hover + #ejectionspace,#ejectionspace:hover{
  opacity: 1;
  left: 30px;}

#linkingdiv{
  height: 30px;
  width: 190px;
  border-bottom: 1px solid #dddddd;
  box-sizing: border-box;
  padding-top: 10px;
  text-align: center;
  font-size: 11px;
margin-left: -40px;
}

#leftdiv{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 372px;
height: 722px;
background-image: url(http://i.picpar.com/wUx.png);
background-size:contain;
overflow-y: hidden;
overflow-x: hidden;
z-index: -5;
}

#Yin{
position: absolute;
left:80px;
top:120px;
height: 410px;
width: 410px;
padding:5px;
-moz-border-radius: 250px 250px 250px 250px;
-webkit-border-radius: 250px 250px 250px 250px;
border-radius: 250px 250px 250px 250px;
background-image:url(http://static.tumblr.com/94ac0aa45d83f5f91815021e56230331/nyr6guj/btWmlb1rz/tumblr_static_drop_12.gif);
-moz-opacity:0.80;opacity:0.80;
z-index:-20;}


#update{
    opacity:0.8;
    position:fixed;
    top:0px;
    left:170px;
    width:150px;
    height:auto;
    text-align: center;
    font-family: Garamond;
    font-size:12px;
    word-wrap:break-word;
    border-top:1px solid #d8d8d8;
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}

#update img{
    width:130px;

}

#update:hover{
    top:170px;
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}

.words{
    position:fixed;
    top:-170px;
    width:130px;
    height:150px;
    padding:10px;
    background:#ffffff;
    text-align:left;
    line-height:110%;
    overflow:auto;
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;

}

#update:hover .words{
    top:0px;
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
}


</style>

<div id="whole">

<div id="leftdiv">
</div>
<div id="Yin">
</div>

<div id="maindiv">

<div id="vanishdiv">please don't say you love me
</div>

<div id="behindvanishdiv">
<a href="http://www.thiscrush.com/~ihootyou" target="_blank" class="norm">| ♥ }</a>
</div>

<div id="mainarea">
<div id="maincontent" style="overflow: hidden; margin-left: -40px;">
<a name="content1"></a>
<div id="maincontent">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

<a name="content2"></a>
<div id="maincontent">
2.<br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

<a name="content3"></a>
<div id="maincontent">
3.<br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>



<div id="maindrop">
<a href="" class="linkses"><div id="linkingdiv" >
link 1
</div></a>
<a href=""class="linkses"><div id="linkingdiv" >
link 2
</div></a>
<a href="" class="linkses"><div id="linkingdiv" >
link 3
</div></a>
<a href="" class="linkses"><div id="linkingdiv" >
link 4
</div></a>
<a href=""class="linkses"><div id="linkingdiv" >
link 5
</div></a>
<a href="" class="linkses"><div id="linkingdiv">
link 6
</div></a>
</div>

<div id="dotdiv">
<div id="dotspace">
<a href=#content1 class="puffy"><div id="dots">
</div></a>
<div id="ejectionspace">
001
</div>
</div>
<div id="dotspace">
<a href=#content2 class="puffy"><div id="dots">
</div></a>
<div id="ejectionspace">
002
</div>
</div>
<div id="dotspace">
<a href=#content3 class="puffy"><div id="dots">
</div></a>
<div id="ejectionspace">
003
</div>
</div>
</div>

<div id="polediv">
</div>
</div>

<div id="update"><img width="130px" src="http://i.picpar.com/4Ux.png">
<div class="words">

<center><h2> Updates  </h2></center><br>


Currently I am busy coding / writing a character background. PM me about anything you'd like to see added to my profile.
<i><font color="#000">-- Hoot~</font></i> <br> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. <i>italics</i> <b>bolds</b> <u>underline</u> <a href="link" target="_blank">link</a> <strike>strikethrough</strike>


</div>
</div>

</div>