code: Rain Mode

<html>
<head>
<title> Rain Mode. </title>

<style type="text/css">

#navbar-iframe { display: none; }

::selection { background-color: #fff; }
::moz-selection { background-color: #fff; }

body {
background-color:#fff;
background-image:url('http://24.media.tumblr.com/7610ca553f32cb7245b06f78350981c6/tumblr_movdbcThVO1ru3nbdo2_250.png');
background-attachment:fixed;
font-family:consolas;
font-size:10px;
color:#000;
cursor: url(http://media.tumblr.com/tumblr_lqcmexUvFW1qfc7qm.png), progress !important;
}

a:link, a:visited, a:active {
color: #777777;
text-decoration: none;
}

a:hover {
color: #333333;
}

a.one:link, a.one:visited, a.one:active {
display: block;
background-color: #f0f0f0;
padding: 3px;
text-align: center;
letter-spacing: 2px;
}

a.one:hover {
background-color: #e5e5e5;
}

#header {
position: fixed;
padding:20px;
background: url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3648/3648321.png);
width: 100%;
font-family: georgia;
font-size: 40px;
color: #ffffff;
font-style: italic;
text-align: center;
top: -10px;
left:-2px;
z-index: 4;
border-bottom:8px solid #fff;
box-shadow:0 0 6px #ccc;
}

#footer {
position: fixed;
background:url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3648/3648321.png);
border:3px solid #fff;
padding: 10px;
width: 350px;
color: #ffffff;
text-align: center;
bottom: 0px;
left: 33%;
-webkit-border-radius: 20px 20px 0px 0px;
z-index: 3;
}

#holder{
width:120px;
background-color:#EFE7DA;
opacity:1;
height:60px;
position:fixed;
left:490px;
top:110px;
-webkit-border-top-left-radius:110px;
-webkit-border-top-right-radius:110px;
}

.extra{
width:7px;
position:absolute;
left:25px;
top:60px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-transition:all 0.7s ease-out;
-moz-transition:all 0.7s ease-out;
transition:all 0.7s ease-out;
}

#link1{
height:50px;
background-color:#FF9476;
}

#link2{
height:80px;
left:35px;
background-color:#fcb065;
}

#link3{
height:65px;
left:45px;
background-color:#f5de5d;
}

#link4{
height:100px;
left:55px;
background-color:#BCE48E;
}

#link5{
height:65px;
left:65px;
background-color:#bddfd9;
}

#link6{
height:80px;
left:75px;
background-color:#83BEBB;
}

#link7{
height:50px;
left:85px;
background-color:#D0C2CD;
}

#link1:hover, #link2:hover, #link3:hover, #link4:hover, #link5:hover, #link6:hover, #link7:hover{
padding-bottom:30px;
}

#t1{
position:fixed;
opacity:0;
width:70px;
height:auto;
font-family:pf mill;
text-transform:lowercase;
font-size:8px;
text-align:center;
color:#aaa;
top:308px;
left:1005px;
}

.extra:hover #t1{
opacity:1;
-webkit-transition:all 0.7s ease-out;
-moz-transition:all 0.7s ease-out;
transition:all 0.7s ease-out;
}

#marshmallow{
position:fixed;
width:290px;
height:auto;
top:290px;
left:400px;
}

#narsha{
font-size:45px;
font-weight:bold;
font-family:dk;
text-align:center;
letter-spacing:5px;
text-transform:lowercase;
color:#E08E79;
}

#luhanforevar{
height:auto;
width:220px;
padding:5px;
font-family:consolas;
line-height:12px;
font-size:9px;
letter-spacing:1px;
margin-left:30px;
background:#fff;
border:1px solid #f1f1f1;
color:#777;
}

@font-face {font-family: "dk";src: url('http://static.tumblr.com/iuggpng/XaZm5hhme/dk_pimpernel.ttf');}

</style>

<script type="text/javascript">
function changeNavigation(id)
{document.getElementById('main').innerHTML=document.getElementById(id).innerHTML}
</script>

</head>

<div id="holder">

<a href="URL" id="link1" class="extra"><div class="extra" id="t1">link</div></a>

<a href="URL" id="link2" class="extra"><div class="extra" id="t1">link</div></a>

<a href="URL" id="link3" class="extra">
<div class="extra" id="t1">link</div></a>

<a href="URL" id="link4" class="extra"><div class="extra" id="t1">link</div></a>

<a href="URL" id="link5" class="extra"><div class="extra" id="t1">link</div></a>

<a href="URL" id="link6" class="extra"><div class="extra" id="t1">link</div></a>

<a href="URL" id="link7" class="extra"><div class="extra" id="t1">link</div></a>

</div>

<div id="marshmallow">
<div id="narsha">
Hiatus
</div>
<div id="luhanforevar">
On hiatus mood..
<p>-Aina</p>
</div>
</div>

<body>
<div id="footer">
Template by <a href="http://sweet-littlebear.blogspot.com/">AinaNajihah</a> <a href="http://flavors.me/ainachocobear">Rito;</a>,
help from <a href="http://www.colourlovers.com/">colour</a>.
</div>
</body>
</html>