CODES;

<html><head>
<script type="text/javascript">document.ondragstart = function () { return false; }; </script><base target='_blank'/>
<link href='http://media.tumblr.com/tumblr_lthc8eAYT11qhwcy0.gif' rel='icon' type='image/x-icon'/>

<title>Te amo</title>
<style type="text/css">

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

body{
background:#F9F9F9;
font-size: 11px;
font-family:arial;
letter-spacing: 1px; color:#999;
}

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

a:hover{
text-decoration:underline;}

.post-footer{
border:1px solid #f0f0f0;margin-bottom:5px;
padding:1px;
font-size:10px;
text-align:left;
background:url(http://subtlepatterns.com/patterns/subtlenet2.png);
}

img{
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
opacity:0.8}
img:hover{
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
opacity:0.8}

.h1{
color:#666;
border:1px solid #F0F0F0;margin-bottom:5px;
padding:3px;text-align:right;
background:url(http://subtlepatterns.com/patterns/subtlenet2.png);}

.post-body{
margin-top:5px;
margin-bottom:5px;}

#comments {
margin:10px 13px 0;
border-width:0 1px 1px;

}

#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 {
font-weight:bold;
}

.comment-body {
margin:0 0 1.25em;
padding:0 0 0 20px;
}

.comment-body p {
background:url(http://i55.tinypic.com/v3d7ps.jpg);
border:1px dotted #e9e7e7 ;
border-radius:5px;
margin:0 0 .5em;
padding:5px;
color:#808080;
}

.comment-timestamp {
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#666;
}

.comment-timestamp a:link {
color:#666;
}

blockquote{
padding:5px;
background:url(http://24.media.tumblr.com/tumblr_m6cqhjCrpP1rxrqnyo6_250.png);
border:1px solid #eee;
}

.deleted-comment {
font-style:italic;
color:gray;
}

#card {
cursor:crosshair;
-webkit-transform-style: preserve-3d;
-webkit-perspective: 1000;
width: 100px;
height: 100px;
position: relative;
}
.back, .front {
position: absolute;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.3s ease-in;
width: 100%;
height: 100%;
font-family: Helvetica, Arial, sans-serif;
color: #fff;
font-weight: bold;
}
.back {
-webkit-transform: rotateY(180deg);
overflow: hidden;
}

#card-container {
cursor:crosshair;
display: inline-block;
text-align: justify;
}
#card-container:hover .back {
-webkit-transform: rotateY(0deg);
}
#card-container:hover .front {
-webkit-transform: rotateY(-180deg);
}

a.navigateu {
display:inline-block;
padding-top:40px;
width:100px;
height:60px;
color: #999;
background:url(http://subtlepatterns.com/patterns/subtlenet2.png);
text-align:center;
margin-bottom:10px;

}

@font-face {
font-family: cs;
src: url('http://static.tumblr.com/dep4vzc/Kybm6b18t/clarks_summit.otf');
}

.comment{
background:url(http://subtlepatterns.com/patterns/subtlenet2.png);
width:100px;
position:absolute;
display:inline-block;
padding:3px;
margin-left:580px;
border:1px solid #EBEBEB;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
}

</style>

<div style="width:205px;background:#fff; padding:5px;border:1px solid #EBEBEB;top:50px;color:#666; left:150px; position:fixed;">

<div id="card-container">
<div id="card">
<div class="back"><a class="navigateu" onClick="document.getElementById('main').innerHTML=document.getElementById('one').innerHTML" title="">about</a></div>
<div class="front"><img src="http://i53.tinypic.com/5aqsu8.jpg"></div>
</div>
</div>

<div id="card-container">
<div id="card">
<div class="back"><a class="navigateu" onClick="document.getElementById('main').innerHTML=document.getElementById('two').innerHTML" title="">etc</a></div>
<div class="front"><img src="http://i56.tinypic.com/dhejwp.jpg"></div>
</div>
</div><br/>

<div id="card-container">
<div id="card">
<div class="back"><a class="navigateu" onClick="document.getElementById('main').innerHTML=document.getElementById('three').innerHTML" title="">entry</a></div>
<div class="front"><img src="http://i54.tinypic.com/dz79mr.jpg"></div>
</div>
</div>

<div id="card-container">
<div id="card">
<div class="back"><a class="navigateu" href="http://www.blogger.com/follow-blog.g?blogID=<$BlogId$>" title="">follow</a>
</div>
<div class="front"><img src="http://i54.tinypic.com/6dwnrp.jpg"></div>
</div>
</div><center>trying to put a plain and simple concept in this skin. Am I doing a right thing? your description here.
</div></div>

<div style="left:400px; position:absolute;">
<blogger><div style="background:#fff;width:550px; padding:10px;border:1px solid #EBEBEB; margin-top:10px; margin-bottom:5px;"><div id="main">

<div class="h1"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div><div class="comment"> <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled> <BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader></div>

<div class="post-body"><$BlogItemBody$></div>
<div class="post-footer">
<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> cares</a></BlogItemCommentsEnabled> | <BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader><$BlogItemDateTime$>
</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/>
</div>
</ItemPage>
</div></div></Blogger></div>


<div id="one" style="display: none;">
<div class="h1">about me</div>
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.I'm using the same base as 'cotton' , just sidebar and some light codes are changed. Kick in your bio here

<br/><br/><center>
<a href="http://facebook.com/">facebook</a>
<a href="http://twitter.com/">twitter</a>
<a href="LINK">tumblr</a>
<a href="LINK">formspring</a></center><br/>

<div class="h1">wishlist</div>
<ul>
<li>Good result</li>
<li><s>Ukiss 0330 photobook</s></li>
<li>buy this buy that</li>
<li>Put your wislist here or just replace it with something else</li>
<li>or just remove this section</li></ul>
</div></div>


<div id="two" style="display: none;">
<div class="h1">archieve</div>
<div style="text-align:left;">
<ul><BloggerPreviousItems>
<a href="<$BlogItemPermalinkURL$>">
<li><$BlogPreviousItemTitle$></li>
</a>
</BloggerPreviousItems>
</div></ul>

<div class="h1">exchange links</div>
<div style="width:280px; float:left;margin-right:20px;">
<a href="">friend</a>
<a href="">friend</a>
<a href="">friend</a>
<a href="">friend</a>
<a href="">friend</a>
<a href="">friend</a>
<a href="">friend</a>
<a href="">friend</a>
<a href="">friend</a>
<a href="">friend</a>
<a href="">friend</a>
<a href="">friend</a><br/><br/>

<div class="h1">skin by <a href="http://wanaseoby.blogspot.com"> wana</a><a href="http://www.blogskins.com/me/wana_jeonn">seoby </a> icons by <a href="http://thefadingnight.blogspot.com">thefadingnight</a></div>
</div>
<div style="width:250px; float:left;">
cbox codes here. Edit your cbox width if something goes wrong.
</div><div style="clear: both;"></div>
</div>



<div id="three" style="display: none;">
<Blogger>
<div class="h1"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div><div class="comment"> <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled> <BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader></div>

<div class="post-body"><$BlogItemBody$></div>
<div class="post-footer">
<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> cares</a></BlogItemCommentsEnabled> | <BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader><$BlogItemDateTime$>
</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/>
</div>
</ItemPage>
</div></div></Blogger></div>
</html>

Labels: codes