BS ; 05 // Paris Lovee
<!---------------------------------------------------------------------------
Don't COPY Any Code From This Template ! 101% Made & Create By Elaine0211 !
Designed By; Elaine0211
Designer's Blog; https://elaine0211.blogspot.com/
---------------------------------------------------------------------------!>
<HTML><head>
<link href='https://fonts.googleapis.com/css?family=Snippet' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Megrim' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Patrick+Hand+SC' rel='stylesheet' type='text/css'>
<base target='_blank'/><title>; Paris - Lovee </title>
<style type="text/css">
#navbar-iframe {
display: none;
}
body {
background: #fff;
cursor:url(https://i1245.photobucket.com/albums/gg581/elaine960211/cur-Eiffel_zpsd22978a5.png), progress;
font-family:Snippet;
font-size:13px;
color:#6ad9d5;}
::-moz-selection {
background:#fff;
color:#fff;
text-shadow: 0.1em 0.1em #6ad9d5;}
::selection {
background:#fff;
color:#fff;
text-shadow: 0.1em 0.1em #6ad9d5;}
::-webkit-scrollbar { width: 6px;}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment { height:0px; display: block; background-color: #fff;}
::-webkit-scrollbar-track-piece { background-color:#fff; }
::-webkit-scrollbar-thumb{ background:url(https://i1245.photobucket.com/albums/gg581/elaine960211/12592879001253_zps7cfd483a.jpg)center;border:1px solid #c0fafc;box-shadow:inset 0 0 10px #fff;}
::webkit-scrollbar-thumb:vertical {background:#fff;border: 0px solid #ffffff;border-right:none;}
::webkit-scrollbar-thumb:horizontal {background:#fff;border: 0px solid #ffffff;border-bottom:none;}
a:link,a:visited {
color:#73ecf0;
text-decoration:none;
padding:2px;}
a:hover {
cursor:url(https://i1245.photobucket.com/albums/gg581/elaine960211/cur-Eiffel2_zps8f483d84.png), progress;}
u {
text-decoration:underline;
filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
u:hover {
text-decoration:none;
filter: blur(1px);
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
b {
text-decoration:bold;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/12592879001253_zps7cfd483a.jpg) ;
background-position:30% 80%;
-webkit-transition: .8s;
-moz-transition: .8s;}
b:hover {
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/12592879001253_zps7cfd483a.jpg) ;
background-position:82% 43%;
-webkit-transition: .8s;
-moz-transition: .8s;}
i {
-webkit-transition: .2s;
-moz-transition: .2s;}
i:hover {
letter-spacing:2px;
-webkit-transition: .2s;
-moz-transition:.2s;}
.post-title{
font-family: 'Megrim';
padding:0 0 3px 5px;
text-align:left;
background:url(https://i1245.photobucket.com/albums/gg581/elaine960211/line_zps4b1ee952.png) repeat-x;
background-position:bottom left;
}
.page-title{
font-family: 'Megrim';
font-size:20px;
padding:0 0 5px 5px;
text-align:left;
background:url(https://i1245.photobucket.com/albums/gg581/elaine960211/line_zps4b1ee952.png) repeat-x;
background-position:bottom left;}
/* Comment
----------------------------------------------- */
#comments {
margin:5px 13px 0;
border-width:0 1px 1px;
padding:20px 0 5px 0;}
#comments-block { margin:0 10px 0 9px;}
span.comment-icon{ display:none;}
.comment-icon blogger-comment-icon{ display:none;}
.comment-poster {}
.comment-data {
width:420px;
margin: 1em .4em 0 0.4em;
text-align:left;
padding:4px;
border:1px solid #c0fafc;
border-radius:5px;}
.comment-body p{
width:420px;
text-align:left;
margin:-1px 5px 2px -2.7em;
padding:4px;
border:1px solid #c0fafc;
border-radius:5px;}
.comment-timestamp { margin:0 0 .5em; padding:0 0 0 10px; float:center;}
.comment-timestamp a:link { color:#c7a189;}
.deleted-comment { font-style:italic;color:gray;}
.paging-control-container { float:center;margin: 0px 6px 0px 0px;font-size: 80%;}
.unneeded-paging-control { visibility: hidden;}
/* Other
----------------------------------------------- */
blockquote {
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
text-align:center;
border:1px dashed #73ecf0;
padding:5px;
background:url(https://i1245.photobucket.com/albums/gg581/elaine960211/paris_zps47a1c347.png) no-repeat bottom right;
border-radius:10px 10px 0 0;}
a.li {
border:1px solid #c0fafc;
padding: 3px;
display:inline-block;
width:100px;
margin: 2px;
background: #fff;
-webkit-background-clip: none;
-webkit-text-fill-color: #c0fafc;
background: url(https://media.tumblr.com/3d809ea394d216f969151466f7b06999/tumblr_inline_n2pje39gH11qdlkyg.gif) no-repeat bottom left;
-webkit-transition: .6s;}
/* Navi bar
----------------------------------------------- */
nav a {
position: relative;
display: inline-block;
margin-left: 5px;
margin-right:5px;
outline: none;
font-family:Megrim;
color: #fff;
letter-spacing: 1px;
font-size: 18px;}
nav a:hover,nav a:focus {outline: none;}
.navi a {
padding:2px;
color:#8ae3e1;}
.navi a::before {
position: absolute;
bottom: 0;
left: 0;
padding:2px;
overflow: hidden;
max-width: 0;
color: #f0fffe;
content: attr(data-hover);
-webkit-transition: max-width 0.5s;
-moz-transition: max-width 0.5s;
transition: max-width 0.5s;}
.navi a:hover::before,.navi a:focus::before {max-width: 100%;}
/* Top
----------------------------------------------- */
#paris {
z-index: 9999;
position: fixed;
height: 80px;
top: 0;
left: 0;
width:100%;
padding:15px;
background: url(https://i.imgur.com/Ek0RDXM.jpg) repeat top center;
border-bottom: 6px solid rgba(202,250,248,0.9);
overflow: hidden; }
.icon {
background: rgba(255,255,255,0.75);
float: left;
margin-left: 100px;
padding: 5px;
-moz-border-radius: 50px;
border-radius: 50%;
width: 80px;}
.icon img {
display: inline-block;
-moz-border-radius: 50px;
border-radius: 50%; width:80px; }
.bar {
position: absolute;
padding: 1px 18px 1px 20px;
border-radius: 0 20px 20px 0 ;
margin-left: -10px;
margin-right: 10px;
top: 44px;
background: rgba(255, 255, 255, 0.9);
z-index: -20;}
/* Side Navi
----------------------------------------------- */
.dotstyle ul {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;}
.dotstyle li {
position: relative;
display: block;
float: left;
margin: 0 20px;
width: 18px;
height: 18px;}
.dotstyle li a {
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: none;
border-radius: 50%;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.3);
text-indent: -999em; /* make the text accessible to screen readers */
position: absolute;}
.dotstyle li a:focus {outline: none;}
.dotstyle-hop li a {border: 2px solid #c5ecfc; background:rgba(255,255,255,0.5);}
.dotstyle-hop li a::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
border-radius: 50%;
visibility: hidden;
background: rgba(209 , 243 , 255 , 0.6);
opacity: 0;
-webkit-transform: rotate(-100deg);
transform: rotate(-100deg);
-webkit-transform-origin: -200% 50%;
transform-origin: -200% 50%;
-webkit-transition: -webkit-transform 0.4s ease 0.4s, opacity 0.4s ease, visibility 0s 0.4s ease;
transition: transform 0.4s ease 0.4s, opacity 0.4s ease, visibility 0s 0.4s ease;}
.dotstyle-hop li a:focus {background: rgba(255, 255, 255, 0.2);}
.dotstyle-hop li.current-from-right a::after {
-webkit-transition: none;
transition: none;
-webkit-transform: rotate(100deg);
transform: rotate(100deg);
-webkit-transform-origin: 300% 50%;
transform-origin: 300% 50%;}
.dotstyle-hop li.current a::after {
visibility: visible;
opacity: 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.4s ease, opacity 0.4s ease;
transition: transform 0.4s ease, opacity 0.4s ease;}
#side{
padding:5px;
height:249px;
line-height:1;
background:rgba(255,255,255,.7);
}
#s-m-t-tooltip {
background: #FFF;
font-size: 12px;
font-family:Patrick Hand SC;
line-height:.5;
color: #73ecf0;
text-align: center;
padding: 2px 5px 5px 5px;
display: block;
border: 1px solid #73ecf0;
margin-left:20px;
margin-top:5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips();
});
})(jQuery);
</script>
<script language="JavaScript">
document.ondragstart = function () { return false; };
</script>
<!-------------------Navigation----------------------->
<div id="paris">
<div class="icon"><img src="https://i.imgur.com/6nmMMDN.jpg"></div>
<span class="bar">
<nav class="navi" id="navi">
<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('post').innerHTML" title="" data-hover="Diary">Diary</a> //
<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title="" data-hover="Owner">Owner</a> //
<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('link').innerHTML" title="" data-hover="Links">Links</a> //
<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('stuff').innerHTML" title="" data-hover="Stuff">Stuff</a> //
<a class="" href="https://www.blogger.com/" data-hover="Home">Home</a> //
<a class="" href="https://www.blogger.com/follow-blog.g?blogID=YOUR BLOG ID" data-hover="Follow">Follow</a>
</nav></span></div>
<!-------------------Side----------------------->
<div style="position: absolute; top:180px; left:800px;width:300px; border:2px solid #c5ecfc; background:url(https://i.imgur.com/E7iwROL.jpg) no-repeat top right; background-size:447px 280px; padding:5px;height:260px; overflow:hidden;">
<div id="side"><br>
<center><img src="https://i1245.photobucket.com/albums/gg581/elaine960211/Parispic/p6.jpg?t=1348753692" style="width:147px; height:120px; padding:2px;border:1px solid #c5ecfc;"/></center>
<br>Life is not always what we want it to be.
<br>We fight. We cry. And sometimes, we give up.
<br>But in our hearts, we know it’s still love.<br>
</div></div>
<!-------------------Description----------------------->
<div id="des" style="display: none;"><br>
<center><img src="https://i1245.photobucket.com/albums/gg581/elaine960211/Parispic/p13.jpg?t=1348753718" style="width:147px; height:120px; padding:2px;border:1px solid #c5ecfc;"/></center>
<br><br>yr own text here :)
<br><br> MISIC PLAYER</center>
</div>
<!-------------------Credit----------------------->
<div id="credit" style="display: none;"><br>
<center><img src="https://i1245.photobucket.com/albums/gg581/elaine960211/Parispic/p21.jpg?t=1348753739" style="width:147px; height:120px; padding:2px;border:1px solid #c5ecfc;"/></center>
<br> • Template Design by ; <a href="https://elaine0211.blogspot.com/">BabeX e.ling</a>
<br> • Redesign by : <a href="URL">Yr Name</a>
<br> • Tutorials ; <a href="https://tympanus.net/codrops/category/tutorials/">Tympanus</a> * <a href="https://yoursweetestlullaby.blogspot.com//">Lullaby</a> * <a href="https://chocollyheart.blogspot.com/">Afiqah</a>
<br> • Materials ; <a href="https://www.google.com/">Google</a> * <a href="https://pixel-diary.tumblr.com/">Pixel-diary</a> * Jophy
<br> • Thank to ; <a href="https://pixlr.com/editor/?loc=zh-cn">Pixlr</a> * <a href="https://photobucket.com/">Photobucket</a></cre4>
<br><br>
<center>- Best Viewed In <a href="https://www.google.com/">Google Chrome</a> -</center>
</div>
<!-------------------Cbox----------------------->
<div id="cbox" style="display: none;"><br>
<center><img src="https://i1245.photobucket.com/albums/gg581/elaine960211/Parispic/p15.jpg?t=1348753724" style="width:147px; height:120px; padding:2px;border:1px solid #c5ecfc;"/>
<br><br>
- YOUR CBOX CODE HERE -
</center>
</div>
<!-------------------Dot Navi----------------------->
<div class="dotstyle dotstyle-hop" style="position:fixed; top:173px; left:810px;"><ul>
<li class="current"><a class="" onClick="document.getElementById('side').innerHTML=document.getElementById('des').innerHTML" title="description">Rules</a></li>
<li><a class="" onClick="document.getElementById('side').innerHTML=document.getElementById('credit').innerHTML" title="credit">Credit</a></li>
<li><a class="" onClick="document.getElementById('side').innerHTML=document.getElementById('cbox').innerHTML" title="chatbox">Chat</a></li>
</ul></div>
<script src="https://tympanus.net/Development/DotNavigationStyles/js/dots.js"></script>
<script>
[].slice.call( document.querySelectorAll( '.dotstyle > ul' ) ).forEach( function( nav ) {
new DotNav( nav, {
callback : function( idx ) {
//console.log( idx )
}
} );
} );
</script>
<!-------------------Post----------------------->
<div style="padding:10px; position:absolute; left:120px; top:145px; width:520px; height:470px; background:url(https://i.imgur.com/fghv7Nr.jpg) no-repeat bottom right; background-size:655px; border-radius: 20px; border:1px solid rgba(202,250,248,0.8);">
<div style="padding:10px; opacity:0.8; float:left; width:500px; overflow-x: hidden; overflow-y: scroll;height:450px;background:#fff;">
<div id="main"><blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
• <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> Paris</a></BlogItemCommentsEnabled>
<div class="post-body">
<p>
<$BlogItemBody$>
</p></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><NewerPosts><a href=<$NewerPosts$>>←← Newer</a></NewerPosts> // <OlderPosts><a href=<$OlderPosts$>>Older →→</a></OlderPosts></center>
</div></div></div>
</Blogger>
<!-------------------PAGE1----------------------->
<div id="post" style="display: none;">
<Blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
• <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> Paris</a></BlogItemCommentsEnabled>
<div class="post-body">
<p>
<$BlogItemBody$>
</p></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><NewerPosts><a href=<$NewerPosts$>>←← Newer</a></NewerPosts> // <OlderPosts><a href=<$OlderPosts$>>Older →→</a></OlderPosts></center>
</div></div></div>
</Blogger>
</div></div>
<!-------------------PAGE2----------------------->
<div id="about" style="display: none;">
<div class="page-title">Da' Owner</div>
<br>
<center>
<br># Name :
<br># Age :
<br># Birthday :
<br># Tumblr :
<br># Blog :
<br># Facebook :
<br>--- Replace with your profile ---
</center>
</div>
<!-------------------PAGE3----------------------->
<div id="link" style="display: none;">
<div class="page-title">Beloved Bloggie</div>
<br>
<center>
<br><br>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<br>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<br><br><br><br>
</center>
</div>
<!-------------------PAGE4----------------------->
<div id="stuff" style="display: none;">
<div class="page-title"> Stuff </div>
<br>
<b> Tutorial ; </b>
<br><br>
> <a href="URL">List 1</a><br>
> <a href="URL">List 2</a><br>
> <a href="URL">List 3</a><br>
> <a href="URL">List 4</a><br>
> <a href="URL">List 5</a><br>
<br><br>
<b> Material ;</b>
<br><br>
> <a href="URL">List 1</a><br>
> <a href="URL">List 2</a><br>
> <a href="URL">List 3</a><br>
> <a href="URL">List 4</a><br>
> <a href="URL">List 5</a><br>
<br><br>
<blockquote class="tr_bq">Coming Soon..</blockquote>
</div>
<!-------------------------- END ----------->
Don't COPY Any Code From This Template ! 101% Made & Create By Elaine0211 !
Designed By; Elaine0211
Designer's Blog; https://elaine0211.blogspot.com/
---------------------------------------------------------------------------!>
<HTML><head>
<link href='https://fonts.googleapis.com/css?family=Snippet' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Megrim' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Patrick+Hand+SC' rel='stylesheet' type='text/css'>
<base target='_blank'/><title>; Paris - Lovee </title>
<style type="text/css">
#navbar-iframe {
display: none;
}
body {
background: #fff;
cursor:url(https://i1245.photobucket.com/albums/gg581/elaine960211/cur-Eiffel_zpsd22978a5.png), progress;
font-family:Snippet;
font-size:13px;
color:#6ad9d5;}
::-moz-selection {
background:#fff;
color:#fff;
text-shadow: 0.1em 0.1em #6ad9d5;}
::selection {
background:#fff;
color:#fff;
text-shadow: 0.1em 0.1em #6ad9d5;}
::-webkit-scrollbar { width: 6px;}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment { height:0px; display: block; background-color: #fff;}
::-webkit-scrollbar-track-piece { background-color:#fff; }
::-webkit-scrollbar-thumb{ background:url(https://i1245.photobucket.com/albums/gg581/elaine960211/12592879001253_zps7cfd483a.jpg)center;border:1px solid #c0fafc;box-shadow:inset 0 0 10px #fff;}
::webkit-scrollbar-thumb:vertical {background:#fff;border: 0px solid #ffffff;border-right:none;}
::webkit-scrollbar-thumb:horizontal {background:#fff;border: 0px solid #ffffff;border-bottom:none;}
a:link,a:visited {
color:#73ecf0;
text-decoration:none;
padding:2px;}
a:hover {
cursor:url(https://i1245.photobucket.com/albums/gg581/elaine960211/cur-Eiffel2_zps8f483d84.png), progress;}
u {
text-decoration:underline;
filter: blur(0px);
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
u:hover {
text-decoration:none;
filter: blur(1px);
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-webkit-transition: 0.6s;
-moz-transition: 0.6s;}
b {
text-decoration:bold;
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/12592879001253_zps7cfd483a.jpg) ;
background-position:30% 80%;
-webkit-transition: .8s;
-moz-transition: .8s;}
b:hover {
-webkit-background-clip:text;
-webkit-text-fill-color: transparent;
background-image:url(https://i1245.photobucket.com/albums/gg581/elaine960211/12592879001253_zps7cfd483a.jpg) ;
background-position:82% 43%;
-webkit-transition: .8s;
-moz-transition: .8s;}
i {
-webkit-transition: .2s;
-moz-transition: .2s;}
i:hover {
letter-spacing:2px;
-webkit-transition: .2s;
-moz-transition:.2s;}
.post-title{
font-family: 'Megrim';
padding:0 0 3px 5px;
text-align:left;
background:url(https://i1245.photobucket.com/albums/gg581/elaine960211/line_zps4b1ee952.png) repeat-x;
background-position:bottom left;
}
.page-title{
font-family: 'Megrim';
font-size:20px;
padding:0 0 5px 5px;
text-align:left;
background:url(https://i1245.photobucket.com/albums/gg581/elaine960211/line_zps4b1ee952.png) repeat-x;
background-position:bottom left;}
/* Comment
----------------------------------------------- */
#comments {
margin:5px 13px 0;
border-width:0 1px 1px;
padding:20px 0 5px 0;}
#comments-block { margin:0 10px 0 9px;}
span.comment-icon{ display:none;}
.comment-icon blogger-comment-icon{ display:none;}
.comment-poster {}
.comment-data {
width:420px;
margin: 1em .4em 0 0.4em;
text-align:left;
padding:4px;
border:1px solid #c0fafc;
border-radius:5px;}
.comment-body p{
width:420px;
text-align:left;
margin:-1px 5px 2px -2.7em;
padding:4px;
border:1px solid #c0fafc;
border-radius:5px;}
.comment-timestamp { margin:0 0 .5em; padding:0 0 0 10px; float:center;}
.comment-timestamp a:link { color:#c7a189;}
.deleted-comment { font-style:italic;color:gray;}
.paging-control-container { float:center;margin: 0px 6px 0px 0px;font-size: 80%;}
.unneeded-paging-control { visibility: hidden;}
/* Other
----------------------------------------------- */
blockquote {
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
text-align:center;
border:1px dashed #73ecf0;
padding:5px;
background:url(https://i1245.photobucket.com/albums/gg581/elaine960211/paris_zps47a1c347.png) no-repeat bottom right;
border-radius:10px 10px 0 0;}
a.li {
border:1px solid #c0fafc;
padding: 3px;
display:inline-block;
width:100px;
margin: 2px;
background: #fff;
-webkit-background-clip: none;
-webkit-text-fill-color: #c0fafc;
background: url(https://media.tumblr.com/3d809ea394d216f969151466f7b06999/tumblr_inline_n2pje39gH11qdlkyg.gif) no-repeat bottom left;
-webkit-transition: .6s;}
/* Navi bar
----------------------------------------------- */
nav a {
position: relative;
display: inline-block;
margin-left: 5px;
margin-right:5px;
outline: none;
font-family:Megrim;
color: #fff;
letter-spacing: 1px;
font-size: 18px;}
nav a:hover,nav a:focus {outline: none;}
.navi a {
padding:2px;
color:#8ae3e1;}
.navi a::before {
position: absolute;
bottom: 0;
left: 0;
padding:2px;
overflow: hidden;
max-width: 0;
color: #f0fffe;
content: attr(data-hover);
-webkit-transition: max-width 0.5s;
-moz-transition: max-width 0.5s;
transition: max-width 0.5s;}
.navi a:hover::before,.navi a:focus::before {max-width: 100%;}
/* Top
----------------------------------------------- */
#paris {
z-index: 9999;
position: fixed;
height: 80px;
top: 0;
left: 0;
width:100%;
padding:15px;
background: url(https://i.imgur.com/Ek0RDXM.jpg) repeat top center;
border-bottom: 6px solid rgba(202,250,248,0.9);
overflow: hidden; }
.icon {
background: rgba(255,255,255,0.75);
float: left;
margin-left: 100px;
padding: 5px;
-moz-border-radius: 50px;
border-radius: 50%;
width: 80px;}
.icon img {
display: inline-block;
-moz-border-radius: 50px;
border-radius: 50%; width:80px; }
.bar {
position: absolute;
padding: 1px 18px 1px 20px;
border-radius: 0 20px 20px 0 ;
margin-left: -10px;
margin-right: 10px;
top: 44px;
background: rgba(255, 255, 255, 0.9);
z-index: -20;}
/* Side Navi
----------------------------------------------- */
.dotstyle ul {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;}
.dotstyle li {
position: relative;
display: block;
float: left;
margin: 0 20px;
width: 18px;
height: 18px;}
.dotstyle li a {
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: none;
border-radius: 50%;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.3);
text-indent: -999em; /* make the text accessible to screen readers */
position: absolute;}
.dotstyle li a:focus {outline: none;}
.dotstyle-hop li a {border: 2px solid #c5ecfc; background:rgba(255,255,255,0.5);}
.dotstyle-hop li a::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
border-radius: 50%;
visibility: hidden;
background: rgba(209 , 243 , 255 , 0.6);
opacity: 0;
-webkit-transform: rotate(-100deg);
transform: rotate(-100deg);
-webkit-transform-origin: -200% 50%;
transform-origin: -200% 50%;
-webkit-transition: -webkit-transform 0.4s ease 0.4s, opacity 0.4s ease, visibility 0s 0.4s ease;
transition: transform 0.4s ease 0.4s, opacity 0.4s ease, visibility 0s 0.4s ease;}
.dotstyle-hop li a:focus {background: rgba(255, 255, 255, 0.2);}
.dotstyle-hop li.current-from-right a::after {
-webkit-transition: none;
transition: none;
-webkit-transform: rotate(100deg);
transform: rotate(100deg);
-webkit-transform-origin: 300% 50%;
transform-origin: 300% 50%;}
.dotstyle-hop li.current a::after {
visibility: visible;
opacity: 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform 0.4s ease, opacity 0.4s ease;
transition: transform 0.4s ease, opacity 0.4s ease;}
#side{
padding:5px;
height:249px;
line-height:1;
background:rgba(255,255,255,.7);
}
#s-m-t-tooltip {
background: #FFF;
font-size: 12px;
font-family:Patrick Hand SC;
line-height:.5;
color: #73ecf0;
text-align: center;
padding: 2px 5px 5px 5px;
display: block;
border: 1px solid #73ecf0;
margin-left:20px;
margin-top:5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips();
});
})(jQuery);
</script>
<script language="JavaScript">
document.ondragstart = function () { return false; };
</script>
<!-------------------Navigation----------------------->
<div id="paris">
<div class="icon"><img src="https://i.imgur.com/6nmMMDN.jpg"></div>
<span class="bar">
<nav class="navi" id="navi">
<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('post').innerHTML" title="" data-hover="Diary">Diary</a> //
<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title="" data-hover="Owner">Owner</a> //
<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('link').innerHTML" title="" data-hover="Links">Links</a> //
<a class="" onClick="document.getElementById('main').innerHTML=document.getElementById('stuff').innerHTML" title="" data-hover="Stuff">Stuff</a> //
<a class="" href="https://www.blogger.com/" data-hover="Home">Home</a> //
<a class="" href="https://www.blogger.com/follow-blog.g?blogID=YOUR BLOG ID" data-hover="Follow">Follow</a>
</nav></span></div>
<!-------------------Side----------------------->
<div style="position: absolute; top:180px; left:800px;width:300px; border:2px solid #c5ecfc; background:url(https://i.imgur.com/E7iwROL.jpg) no-repeat top right; background-size:447px 280px; padding:5px;height:260px; overflow:hidden;">
<div id="side"><br>
<center><img src="https://i1245.photobucket.com/albums/gg581/elaine960211/Parispic/p6.jpg?t=1348753692" style="width:147px; height:120px; padding:2px;border:1px solid #c5ecfc;"/></center>
<br>Life is not always what we want it to be.
<br>We fight. We cry. And sometimes, we give up.
<br>But in our hearts, we know it’s still love.<br>
</div></div>
<!-------------------Description----------------------->
<div id="des" style="display: none;"><br>
<center><img src="https://i1245.photobucket.com/albums/gg581/elaine960211/Parispic/p13.jpg?t=1348753718" style="width:147px; height:120px; padding:2px;border:1px solid #c5ecfc;"/></center>
<br><br>yr own text here :)
<br><br> MISIC PLAYER</center>
</div>
<!-------------------Credit----------------------->
<div id="credit" style="display: none;"><br>
<center><img src="https://i1245.photobucket.com/albums/gg581/elaine960211/Parispic/p21.jpg?t=1348753739" style="width:147px; height:120px; padding:2px;border:1px solid #c5ecfc;"/></center>
<br> • Template Design by ; <a href="https://elaine0211.blogspot.com/">BabeX e.ling</a>
<br> • Redesign by : <a href="URL">Yr Name</a>
<br> • Tutorials ; <a href="https://tympanus.net/codrops/category/tutorials/">Tympanus</a> * <a href="https://yoursweetestlullaby.blogspot.com//">Lullaby</a> * <a href="https://chocollyheart.blogspot.com/">Afiqah</a>
<br> • Materials ; <a href="https://www.google.com/">Google</a> * <a href="https://pixel-diary.tumblr.com/">Pixel-diary</a> * Jophy
<br> • Thank to ; <a href="https://pixlr.com/editor/?loc=zh-cn">Pixlr</a> * <a href="https://photobucket.com/">Photobucket</a></cre4>
<br><br>
<center>- Best Viewed In <a href="https://www.google.com/">Google Chrome</a> -</center>
</div>
<!-------------------Cbox----------------------->
<div id="cbox" style="display: none;"><br>
<center><img src="https://i1245.photobucket.com/albums/gg581/elaine960211/Parispic/p15.jpg?t=1348753724" style="width:147px; height:120px; padding:2px;border:1px solid #c5ecfc;"/>
<br><br>
- YOUR CBOX CODE HERE -
</center>
</div>
<!-------------------Dot Navi----------------------->
<div class="dotstyle dotstyle-hop" style="position:fixed; top:173px; left:810px;"><ul>
<li class="current"><a class="" onClick="document.getElementById('side').innerHTML=document.getElementById('des').innerHTML" title="description">Rules</a></li>
<li><a class="" onClick="document.getElementById('side').innerHTML=document.getElementById('credit').innerHTML" title="credit">Credit</a></li>
<li><a class="" onClick="document.getElementById('side').innerHTML=document.getElementById('cbox').innerHTML" title="chatbox">Chat</a></li>
</ul></div>
<script src="https://tympanus.net/Development/DotNavigationStyles/js/dots.js"></script>
<script>
[].slice.call( document.querySelectorAll( '.dotstyle > ul' ) ).forEach( function( nav ) {
new DotNav( nav, {
callback : function( idx ) {
//console.log( idx )
}
} );
} );
</script>
<!-------------------Post----------------------->
<div style="padding:10px; position:absolute; left:120px; top:145px; width:520px; height:470px; background:url(https://i.imgur.com/fghv7Nr.jpg) no-repeat bottom right; background-size:655px; border-radius: 20px; border:1px solid rgba(202,250,248,0.8);">
<div style="padding:10px; opacity:0.8; float:left; width:500px; overflow-x: hidden; overflow-y: scroll;height:450px;background:#fff;">
<div id="main"><blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
• <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> Paris</a></BlogItemCommentsEnabled>
<div class="post-body">
<p>
<$BlogItemBody$>
</p></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><NewerPosts><a href=<$NewerPosts$>>←← Newer</a></NewerPosts> // <OlderPosts><a href=<$OlderPosts$>>Older →→</a></OlderPosts></center>
</div></div></div>
</Blogger>
<!-------------------PAGE1----------------------->
<div id="post" style="display: none;">
<Blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
• <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> Paris</a></BlogItemCommentsEnabled>
<div class="post-body">
<p>
<$BlogItemBody$>
</p></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><NewerPosts><a href=<$NewerPosts$>>←← Newer</a></NewerPosts> // <OlderPosts><a href=<$OlderPosts$>>Older →→</a></OlderPosts></center>
</div></div></div>
</Blogger>
</div></div>
<!-------------------PAGE2----------------------->
<div id="about" style="display: none;">
<div class="page-title">Da' Owner</div>
<br>
<center>
<br># Name :
<br># Age :
<br># Birthday :
<br># Tumblr :
<br># Blog :
<br># Facebook :
<br>--- Replace with your profile ---
</center>
</div>
<!-------------------PAGE3----------------------->
<div id="link" style="display: none;">
<div class="page-title">Beloved Bloggie</div>
<br>
<center>
<br><br>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<br>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<a class="li"href="URL">NAME</a>
<br><br><br><br>
</center>
</div>
<!-------------------PAGE4----------------------->
<div id="stuff" style="display: none;">
<div class="page-title"> Stuff </div>
<br>
<b> Tutorial ; </b>
<br><br>
> <a href="URL">List 1</a><br>
> <a href="URL">List 2</a><br>
> <a href="URL">List 3</a><br>
> <a href="URL">List 4</a><br>
> <a href="URL">List 5</a><br>
<br><br>
<b> Material ;</b>
<br><br>
> <a href="URL">List 1</a><br>
> <a href="URL">List 2</a><br>
> <a href="URL">List 3</a><br>
> <a href="URL">List 4</a><br>
> <a href="URL">List 5</a><br>
<br><br>
<blockquote class="tr_bq">Coming Soon..</blockquote>
</div>
<!-------------------------- END ----------->