CODES;

<html>
<head><base target='_blank'/><link href='http://media.tumblr.com/tumblr_m89t0uY6311qdlkyg.gif' rel='icon' type='image/x-icon'/>
<title>wonderland</title>

<style type="text/css">
body{
background:#000; color:#aaa;
font: 10px arial;letter-spacing: 1px;
}

a:link,a:visited{
text-decoration:none;
color:#aaa;-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

a:hover{
color:#fff;
background:#000;
}

#navbar-iframe {
display: none !important;
}

.h1 {
line-height:15px;text-transform:lowercase;
color:#fff;-webkit-transition: 1.0s;
-moz-transition: 1.0s;
font-family:calibri;
margin-bottom:5px;
font-size:20px;background:#111;
text-align:right;
padding-right:0px;

}

.post{
width:440px;
padding:10px;
background:#fff;
position:absolute;
top:20px;color:#999;
left:170px;}

.h1 {
line-height:15px;text-transform:uppercase;
color:#F2DFC7;-webkit-transition: 1.0s;
-moz-transition: 1.0s;
font-family:calibri;
margin-bottom:5px;
font-size:28px;
text-align:right;
padding-right:0px;

}

.h2{
font-family:tt;
font-size:8px;
background:#1C1C1C;
margin-bottom:10px;
}

@font-face {
font-family:tt;
src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}

#main img{max-width:500px;padding:3px;margin-bottom:5px;

}

a.you{
background:#fff;
width:23px;}

.post-footer{
text-align:right;
color:#fff;
height:5px;
font-size:13px;
margin:15px 0px 15px;
line-height:2px;
background:#111;
}

.wtv{
background:url(http://i.imgur.com/jaFDN.png);
position:fixed;
top:220px;
left:100px;
width:300px;
padding:10px;

}

.ghj{
background:url(http://i.imgur.com/jaFDN.png);
position:fixed;top:260px;left:200px;width:190px;
padding:10px;-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#ert{
background:transparent;
position:fixed;
top:260px;left:320px;width:80px; padding:10px;opacity:0;-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.ghj:hover #ert{
opacity:1;top:290px;
}
#wtvw{
background:url(http://i.imgur.com/jaFDN.png);
position:fixed;
top:200px;left:100px;width:300px; padding:10px;opacity:0;-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;}

.wtv:hover #wtvw{opacity:1;top:100px;left:100px;width:300px;}

a.option{
color:#555;
background:#111;
-webkit-transition: 1.0s; padding:2px;
-moz-transition: 1.0s;
font-family:consolas;
display:inline-block;
width:40px;
margin:2px;
text-align:center;
}

a.option:hover{
color:#111;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
background:#fff;
}

blockquote{
padding:10px;
color:#666;
border-left:5px solid #111;
}
a.navigaty {
margin-top:1px;
cursor:crosshair;
background:url(http://i.imgur.com/jaFDN.png);
color:#fff;
display:inline-block;
padding:2px;
margin-bottom:2px;
width: 60px;
text-align: center;
-webkit-transition:All 0.6s ease;
-moz-transition:All 0.6s ease;
-o-transition:All 0.6s ease;
}

a.navigaty:hover{
color: #003366;
}

a.navi1{
background:0f0f0f;
padding:5px;
width:50px;
color:#888;
padding:1px;
font-size: 10px;
-webkit-center; text-decoration: none;
text-transform: uppercase;
display:inline-block;
width:60px;
margin:2px;
}
</style>
<div style="background:#0c0c0c;width:300px;padding:5px;position:fixed;top:100px;left:100px;-webkit-border-radius: 3333px;-webkit-border-bottom-right-radius: 0;-moz-border-radius: 3333px;
-moz-border-radius-bottomright: 0;border-radius: 3333px;border-bottom-right-radius: 0;"><img src="http://24.media.tumblr.com/tumblr_m86ue4wXMB1r4ujddo1_500.jpg" width="300px" style="-webkit-border-radius: 3333px;-webkit-border-bottom-right-radius: 0;-moz-border-radius: 3333px;-moz-border-radius-bottomright: 0;border-radius: 3333px; border-bottom-right-radius: 0;"></div>

<div style="background:#0c0c0c;width:500px;padding:10px;position:absolute;top:60px;left:450px;"><div id="main"><blogger>
<div class="h1"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader><$BlogItemDateTime$> | Written by your name <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div><$BlogItemBody$>
<div class="post-footer"></div>
</blogger>
<div style="float:left;"><a class="option" href=<$NewerPosts$>>◀</a></NewerPosts></div><div style="float:right"><OlderPosts><a class="option" href=<$OlderPosts$>>▶</a> </OlderPosts></div>
</div></div> </div>
<div class="wtv"><center>WONDERLAND <div id="wtvw">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar lobortis luctus. Donec posuere sollicitudin diam, non semper metus vulputate nec. Curabitur lobortis porttitor convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. description here. </div></div>

<div class="ghj"><div style="text-align:right;">NAVI //</div><div id="ert">
<a class="navigaty" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title="">about</a>
<a class="navigaty" onClick="document.getElementById('main').innerHTML=document.getElementById('post').innerHTML" title="">entry </A>
<a class="navigaty" onClick="document.getElementById('main').innerHTML=document.getElementById('links').innerHTML" title="">links</a>

<a class="navigaty" href="http://cboxurl.cbox.ws/" title="">cbox</a>
<a class="navigaty" href="http://www.blogger.com/follow-blog.g?blogID=<$BlogID$>" >Follow</A></div></div>


<div id="about" style="display: none; " ><div class="h1">About meh</div>
<div class="h2">Perfection never exist</di>
</div><center>
<img src="http://25.media.tumblr.com/tumblr_m8e4xmsxzN1qfqm2lo1_1280.jpg" /></center>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar lobortis luctus. Donec posuere sollicitudin diam, non semper metus vulputate nec. Curabitur lobortis porttitor convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Kick in you bio here.

</div></div>


<div id="post" style="display: none; " ><blogger>
<div class="h1"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader><$BlogItemDateTime$> | Written by your name <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></div><$BlogItemBody$>
<div class="post-footer"></div></blogger>

<div style="float:left;"><a class="option" href=>◀</a></NewerPosts></div><div style="float:right"><a class="option" href=http://wanaliopink.blogspot.com/search?updated-max=2012-04-14T02:40:00-07:00&max-results=1>▶</a> </div>


<div id="links" style="display: none; " ><div class="h1">Linkies</div>
<div class="h2">they rob my heart</div>
<center>
<img src="http://24.media.tumblr.com/tumblr_m894fsagnj1rd1szwo1_500.jpg" /><br/>

<a class="navi1" href="Link">friends</a>
<a class="navi1" href="Link">friends</a>
<a class="navi1" href="Link">friends</a>
<a class="navi1" href="Link">friends</a>
<a class="navi1" href="Link">friends</a>
<a class="navi1" href="Link">friends</a>
<a class="navi1" href="Link">friends</a>
<a class="navi1" href="Link">friends</a>
<a class="navi1" href="Link">friends</a>
<a class="navi1" href="Link">friends</a>
<a class="navi1" href="Link">friends</a>
<a class="navi1" href="Link">friends</a>
<a class="navi1" href="Link">friends</a>
<a class="navi1" href="Link">friends</a>

<br/><br/>
</center>
<div style="background:#0f0f0f;
padding:5px;width:120px;">Skin by <a href="http://wanaseoby.blogspot.com/">Wanaseoby</a>

</div></div>
</html>

Labels: codes