BS ; 15 // LA GRÂCE
<!---------------------------------------------------------------------------
Don't COPY Any Code From This Template ! 101% Made & Create By Elaine0211 !
Designed By; Elaine0211
Designer's Blog; https://elaine0211.blogspot.com/
Date Of Design; 03.03.18 -- 09.03.18
---------------------------------------------------------------------------!>
<HTML><head>
<link rel="shortcut icon" href=""/><title>; LA GRÂCE</title>
<style type="text/css"/>
#navbar-iframe {display: none;}
body{
background: linear-gradient(180deg, #fff 30%, #dbe3e3 190%)no-repeat fixed;
font: 12px arial;
line-height:1.3;
color:#a9a9a9;
cursor: url(https://i.imgur.com/2dj2AKZ.png), progress;}
::-moz-selection {
background:#a9a9a9;
color:#fff;}
::selection {
background:#a9a9a9;
color:#fff;}
::-webkit-scrollbar {width:5px;}
::-webkit-scrollbar-button:start:decrement{height:5px; display:block; background:none;}
::-webkit-scrollbar-button:end:increment{height:5px; display: block; background:none;}
::-webkit-scrollbar-track-piece {background-color:#fff;}
::-webkit-scrollbar-thumb{ background:#d1dadf;}
a:link,a:visited {
color:#808080;
text-decoration:none;
-webkit-transition: .3s;
-moz-transition: .3s;}
a:hover {
cursor: url(https://i.imgur.com/2dj2AKZ.png), progress;
color:#d3d3d3;
-webkit-transition: .3s;
-moz-transition: .3s;}
/* blockquote
----------------------------------------------- */
blockquote {
padding: 5px 15px;
border:4px solid #d3d3d3;}
/* post
----------------------------------------------- */
.content{
width:610px;
background:#fff;
border:1px solid #bad4e1;
border-radius:3px;
padding:10px;
padding-bottom:20px;
margin-top:40px;
margin-bottom:40px;
margin-left:120px;}
#main{
width:570px;
height:auto;
padding:15px;
margin-top:-45px;
overflow-x:hidden;}
#title{
line-height: 15px;
padding:2px 4px;
padding-left:15px;
height: 15px;
margin: 5px auto;
text-align:left;
border-radius:3px;
border:1px solid #bad4e1;}
.date{
border-left:3px double #bad4e1;
padding:2px 4px;
height: 13px;
width:210px;
margin-top: -24px;
float:right;
text-align:center;}
.on{text-align:center;}
/* sidebar
----------------------------------------------- */
#sidebar{
position:absolute;
width:260px;
height:250px;
border-radius:5px;
padding:10px;
background:#fff;
border:1px solid #c5dae5;
overflow: hidden; }
.banner{
position:relative;
background:#bad4e1;
width:240px;
height:10px;
border-radius:0 5px 0 0;
padding:5px;
text-align:center;
color:#fff;
margin:-12px 40px;
text-align:center;
LINE-HEIGHT:1.1;}
.banner::before {
top: 100%;
left:0%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
border-left-color: #fff;
border-width: 10px;
margin-top:-20px;}
#tri{
position:absolute;
margin-top:8px;
margin-left:282px;
border-top: 8px solid #aec5d1;
border-right: 8px solid transparent;}
#desc{
margin-top:10px;
margin-left:5px;
background:#fff;
width:210px;
text-align:right;
z-index:10;}
/* navi
----------------------------------------------- */
#navi{
position:absolute;
top:-60px;
right:0px;
width:35px;
height:calc(100% - 0px);
padding:0px 5px;
margin-top:60px;
margin-left:30px;
border-top-right-radius:5px;
border-bottom-right-radius:5px;
background: #d1dadf;}
a.sheart:before, a.sheart:after {
position: absolute;
display:block;
margin-top:60px;
margin-left:14px;
content: "";
left: 4px;
top: 10px;
width:4px;
height: 8px;
background:#fff;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-46deg);
-moz-transform: rotate(-46deg);
-ms-transform: rotate(-46deg);
-o-transform: rotate(-46deg);
transform: rotate(-46deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;}
a.sheart:after {
left: 0;
-webkit-transform: rotate(46deg);
-moz-transform: rotate(46deg);
-ms-transform: rotate(46deg);
-o-transform: rotate(46deg);
transform: rotate(46deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;}
/* searchbox
----------------------------------------------- */
.search {
overflow: hidden;
position: relative;
margin-top: 16px;
margin-left:15px;
width: 190px;
border: 1px solid #c5dae5;
border-radius:3px;
background: #fff;}
.search input {
padding: 0;
outline: 0;
border: 0px;
color: #aeb4b2;
background-color: #ffffff;}
.search input::placeholder { color: #abb1b4; }
::-moz-placeholder { opacity: 1; }
#sbn {
position: absolute;
top: 4px;
right: 0;
font-size:10px;
line-height:1.3;
padding-left:8px;
padding-right:8px;
border-left: 1px solid rgba(171,177,180,0.3);}
#searchbar {
position: relative;
float: left;
padding: 0 10px;
width: calc(100% - 23px);
height: 22px;
font-size: 8px;
letter-spacing: 1px;
word-spacing: 1px;
text-transform: uppercase;}
</style>
<script language="JavaScript">
document.ondragstart = function () { return false; };
</script>
<!-------------------Sidebar----------------------->
<div style="position:fixed;top:130px;left:830px;">
<div id="sidebar">
<!----------NAVI------------->
<div id="navi">
<a class="sheart" style="position:absolute; top:-10px;" onClick="document.getElementById('main').innerHTML=document.getElementById('post').innerHTML" title="HOMEPAGE"></a>
<a class="sheart" style="position:absolute; top:20px;" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title="ABOUT"></a>
<a class="sheart" style="position:absolute; top:50px;" onClick="document.getElementById('main').innerHTML=document.getElementById('stuff').innerHTML" title="STUFF"></a>
<a class="sheart" style="position:absolute; top:80px;" onClick="document.getElementById('main').innerHTML=document.getElementById('link').innerHTML" title="LINK"></a>
<a class="sheart" style="position:absolute; top:110px;" href="https://www.blogger.com/follow-blog.g?blogID=YOUR BLOG ID" title="FOLLOW"></a>
<a class="sheart" style="position:absolute; top:140px;" href="CBOX URL" title="CHAT"></a></div>
<div id="desc">
If in the heart will feel sad, <br/>
then please smile to let go.<br/>
<b>**Please dont remove the credit,<br/>
thank you.</b></div>
<img src="https://i.imgur.com/7fPlt8Y.gif" style="width:240px; height:auto; margin-left:-10px; margin-top:5px;"/>
<form action="/search" method="get" class="search round4"><input type="text" name="q" value="" placeholder="enter..." id="searchbar"/><a class="fa fa-search" aria-hidden="true" id="sbn"/></a></form></div>
<div id="tri"></div><div class="banner">LA GRÂCE</div></div>
<!-------------------Main----------------------->
<div class="content">
<div id="main"><br/>
<blogger>
<div id="title">▶ <BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="date"><BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader><$BlogItemDateTime$> ★ <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$>comment</a></BlogItemCommentsEnabled></div>
<br/><div class="post-body"><p><$BlogItemBody$></p></div>
</blogger></div>
<div class="on" style="float:left;"><a href=<$NewerPosts$>> ◁ NEWER </a></div>
<div class="on" style="float:right;"><a href=<$OlderPosts$>> OLDER ▷ </a></div>
<div class="on"><center>© 2018 Designed By <a href="https://elaine0211.blogspot.my/">Elaine0211</a>.</center></div>
</div>
<!-------------------diary----------------------->
<div id="post" style="display: none;"><br/>
<blogger>
<div id="title">▶ <BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="date"><BlogDateHeader><$BlogDateHeaderDate$> </BlogDateHeader><$BlogItemDateTime$> ★ <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comment</a></BlogItemCommentsEnabled></div>
<br/><div class="post-body"><p><$BlogItemBody$></p></div>
</Blogger>
</div>
<!-------------------PAGE2----------------------->
<div id="about" style="display: none;"><br/>
<div id="title">▶ About me</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;"><br/>
<div id="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 id="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 ----------->