CODE #1 - VINTAGE

<html><head>
<base target='_blank'/>

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7qSejuT8QPhgSFDvVJoKowtVn9R4GRTv0q68sVkh1euQ_MPJTdBxYdHTpykDsXCYff_08MB8hm0xYtUXzvnFn4u_jP49TS0VsjLlz9j6VmkRxG7eEBdYIw_SjsWdQupgg7BZbnpN_jHY/s1600/rose9_2.gif' rel='shortcut icon' type='image/x-icon'/>

<link href='http://fonts.googleapis.com/css?family=Inder' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fresca' rel='stylesheet' type='text/css'>

<title>CODE #1 - VINTAGE</title>

<style type="text/css">

#navbar-iframe {
display: none;
}

body {
background: #FFF;
text-spacing: 1px;
font: 12px Gulim, 'Fresca', sans-serif;
color:#808080;
overflow: auto;
}

#main {
opacity: 0;
position:absolute;
top:100px;
left:720px;
background: #fff;
width:550px;
padding:30px;
border-radius: 10px;
border:1px solid #FFFFDF;
}

#main:hover{
-webkit-transition-duration: .7s;
opacity: 10;}

.post-title{
background:url(http://i1259.photobucket.com/albums/ii546/Cecelia2620/IMG35.jpg)120% 45%;
color: #fff;
margin:0px 0px 2px;
font-family: 'Inder', cursive;
font-size:150%;
padding:2px;
text-align:left;
-webkit-transition:1s;
-webkit-filter: contrast(3);
-moz-filter: contrast(3);
}

a:link, a:visited {
text-decoration: none;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(http://i1259.photobucket.com/albums/ii546/Cecelia2620/IMG221.jpg) ;
background-position:10% 20%;
-webkit-transition-duration: .7s;
}

a:hover {
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(http://i1259.photobucket.com/albums/ii546/Cecelia2620/b8c902fa513d26970866832957fbb2fb4316d836.jpg) ;
background-position:10% 20%;
-webkit-transition-duration: .7s;
text-decoration: none;
cursor: hand;
}

blockquote{
padding: 10px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6J2BBGjeolDbaosNmUpAG5mSK79sRQSV7tvsAVBdHxjCS-aCGASj2QbFV7T5kI9SDnDcU8s_oiILdfVlGXVZErmThNxKy7D_Q_BZCrKJ54ohE3ZyapH9Tm32QDrXeTOYPzzTkTmFkj8E/s1600/smallpattern-7.png);
padding:10px;
color: #666666;
font-size: 12px;
font-family: 'Pontano Sans';
letter-spacing:1px;
margin-left:30px;
margin-right:30px;
border:3px solid #DCDCDC;
-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;
}

b {
font-size: 15px;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(http://i1259.photobucket.com/albums/ii546/Cecelia2620/f3dd104c510fd9f9245d5853272dd42a2834a463.jpg) ;
background-position:50% 70%;
-webkit-transition-duration: .7s;
}

b:hover {
font-size: 15px;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(http://i1259.photobucket.com/albums/ii546/Cecelia2620/f3dd104c510fd9f9245d5853272dd42a2834a463.jpg) ;
background-position:80% 70%;
-webkit-transition-duration: .7s;
opacity: .7;
}

u {
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(http://i1259.photobucket.com/albums/ii546/Cecelia2620/f3dd104c510fd9f9245d5853272dd42a2834a463.jpg) ;
background-position:80% 70%;
text-decoration: none;
border-bottom: 2px solid #E1ECEE;
}

#labelList {}
ul#label-list {
text-align:justify;
margin-left:-38px;
margin-top: -10px;
}
ul#label-list li {
display:inline;
}
ul, li {
list-style-type: hangul;
}
::-webkit-scrollbar {
width: 9px;
height: 7px;
}
::-webkit-scrollbar-track-piece {
background-color: #999;
border: 4px solid #fff;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background: url(http://i1259.photobucket.com/albums/ii546/Cecelia2620/nature-republic-exo-l-folder.jpg);
background-position: 50% 75%;
border: 1px solid #fff;
border-radius: 10px;
opacity: .5;
}

.navi3 {
background-color: #ffffff;
font-size: 12px;
font-style: bold;
color:#000;
border:1px solid #FFC1E0;
padding: 3px;
width:80px;
display:inline-block;
background:#DFE0DF;
margin:1px;
text-align: center;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
}

#comments {
margin:5px 13px 0;
border-width:0 1px 1px;
padding:20px 0 15px 0;
}

#comments-block {
margin:0 15px 0 9px;

}
.comment-data {
background:url("http://www.blogblog.com/rounders2/icon_comment.gif") no-repeat 2px .3em;
margin:.5em 0;
padding:0 0 0 20px;
color:#666;
}
.comment-poster {

}
.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}
.comment-body p {
border:1px dashed #808080;
margin:0 0 .5em;background: #FFBD9D;
opacity:0.4;padding:5px;
margin:0px 0px 2px;

color:#000000;
}
.comment-timestamp {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#fff;
}
.comment-timestamp a:link {
color:#666;
}
.deleted-comment {
font-style:italic;
color:gray;
}
.paging-control-container {
float: right;
margin: 0px 6px 0px 0px;
font-size: 80%;
}
.unneeded-paging-control {
visibility: hidden;
}

.footer{
background: #FFAF60;
opacity:0.2;
margin:0px 0px 2px;
padding:2px;
text-align:right;
}

a.footer{
color:#FFF;
}

img{
opacity: .70;
-webkit-transition: 7;
-moz-transition: 7s;}

img:hover{
-webkit-transition: 7;
-moz-transition: 7s;
opacity: 5.100; }
</style>

<style>
.sideleft{
top:10px;
left:0px;
position:fixed;
height:100 ;
width:625px;
background:#FFEEDD;
padding:50px 5px 5px 10px;
}
.description {
height: 80px;
overflow: hidden;
text-align: center;
font-size:11px;
font-family:century gothic;
margin-left:10px;
margin-right:10px;
position:relative;
color:#ffffff;
}

#status {
padding: 3px;
font-size: 16px;
background-color: #FFF8D7;
color: #aaa;
float: right;
position: fixed;
width: 135px;
height: 16px;
overflow: hidden;
-webkit-transition: opacity 1s linear;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;}
#status:hover {
height: 100px;
width: 261px;
-moz-border-radius: 0px 0px 20px 20px;
border-radius: 0px 0px 20px 20px;}
.statustt {
font-size: 16px;
text-align: center;
padding-top: 1px;
height: 14px;
-webkit-transition: opacity 1s linear;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;}

</style>
<div class="sideleft">


<div style="top:30px; position: fixed; left: 330px;">
CBOX HERE</center>

<br><br>
MUSIC CODES</div>

<div id="status" style="position:fixed; top: 20px; left:39px;">
<div class="statustt">STATUS</div>
<div class="status">
<center><br>
STATUS HERE.
</center>
</div></div></div>


</div>

<style>
.tabs {position: fixed;top: 120px;margin-left:-40px;list-style: none;}
#buttons {margin-left: 5px; }
.button { float:left;margin-right:2px;height:425px;width:163px;}
#button1 {-moz-border-radius: 10px 0px 0px 10px;border-radius: 10px 0px 0px 10px;background-image:url(http://i1259.photobucket.com/albums/ii546/Cecelia2620/B1A4.png);}
#button2 {background-image:url(http://i1259.photobucket.com/albums/ii546/Cecelia2620/B1A42.png);}
#button3 {background-image:url(http://i1259.photobucket.com/albums/ii546/Cecelia2620/B1A43.png);}
#button4 {-moz-border-radius: 0px 10px 10px 0px;border-radius: 0px 10px 10px 0px;background-image:url(http://i1259.photobucket.com/albums/ii546/Cecelia2620/B1A45.png);}
.nav {width:163px;padding-top:3px;padding-bottom:3px;margin-top:0px;font-size:8px;font-family:tinytots;letter-spacing:1px;text-align:center;opacity:0;overflow:hidden;color:#fff;background:#000000;4-webkit-transition: opacity 1s linear;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;}
.button:hover .nav {opacity:0.8; margin-top:60px;}
</style>

<ul class="tabs" >
<br><br><br><br><br><br>
<a onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title=""><div class="button" id="button1">
<div class="nav">ABOUT</div></div></a>
<a onClick="document.getElementById('main').innerHTML=document.getElementById('post').innerHTML" title=""><div class="button" id="button2">
<div class="nav">DIARY</div></div></a>
<a onClick="document.getElementById('main').innerHTML=document.getElementById('shout').innerHTML" title=""><div class="button" id="button3">
<div class="nav">STUFFIES</div></div></a>
<a onClick="document.getElementById('main').innerHTML=document.getElementById('here').innerHTML" title=""><div class="button" id="button4">
<div class="nav">CHINGGU</div></div></a>

</ul>
</div>

<div id="main"><blogger>
<div class="post-title"><span class="PostTitle">
<a href="<$BlogItemPermalinkURL$>">
<$BlogItemTitle$></a></span>
</div>
<div style="text-align: left;">
<div class="post-body">

<p>
<$BlogItemBody$>
</p>

</div>
<div style="text-align:right;"><div class="footer">
<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> love(s)</a></BlogItemCommentsEnabled>
</div></div>

<ItemPage>
<div id="comments">
<BlogItemCommentsEnabled><a name="comments"></a>

<dl id="comments-block">
<$CommentPager$>
<BlogItemComments>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>

<$I18NCommentAuthorSaid$>
</dt>
<dd class="comment-body">
<p><$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments><br/><br/><br/>
<$CommentPager$>
</dl>

<p class="comment-timestamp">
<$BlogItemCreate$>
</p>
<br/><br/>

</div>

</ItemPage>

</Blogger>
<center><OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center>
</div></div></div>
</Blogger>


<div id="about" style="display: none;">
<div class="post-title">Only Me</div><br>
ABOUT YOU

</div>


<div id="post" style="display: none;">
<Blogger>
<div class="post-title"><span class="PostTitle">
<a href="<$BlogItemPermalinkURL$>">
<$BlogItemTitle$></a></span>
</div>
<div style="text-align: left;">

<div class="post-body">

<p>
<$BlogItemBody$>
</p>

</div><div class="footer">
<div style="text-align:right;">
<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> love(s)</a></BlogItemCommentsEnabled>
</div></div>

<ItemPage>
<div id="comments">

<BlogItemCommentsEnabled><a name="comments"></a>

<dl id="comments-block">
<$CommentPager$>
<BlogItemComments>
<dt class="comment-data" id="<$BlogCommentAnchorName$>"><a name="<$BlogCommentAnchorName$>"></a>

<$I18NCommentAuthorSaid$>
</dt>
<dd class="comment-body">
<p><$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
<$CommentPager$>
</dl>

<p class="comment-timestamp">
<$BlogItemCreate$>
</p>
<br/><br/>
<p style="padding-left:20px;">
<a href="<$BlogURL$>"><< home ?</a>
</p>
</div>

</ItemPage>



</Blogger>
<center><OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center>
</div></div></div>
</div>
</div>


<div id="shout" style="display: none;">
<div class="post-title">STUFFIES</div><br>
THINGS HERE.

</div>



<div id="here" style="display: none;">
<div class="post-title">BESTIES</div><br>
<br><br><br>
<span style="background-color: yellow;">CHINGGU</span><br />
<a class="navi3" href="http://www.blogger.com/LINK">Spectrum</a>
<a class="navi3" href="http://www.blogger.com/LINK">Spectrum</a><br>
<a class="navi3" href="http://www.blogger.com/LINK">Spectrum</a>
<a class="navi3" href="http://www.blogger.com/LINK">Spectrum</a>
<a class="navi3" href="http://www.blogger.com/LINK">Spectrum</a>
<a class="navi3" href="http://www.blogger.com/LINK">Spectrum</a>
<br><br><br><br>
</center>

</div>