Codes | Life is Simple ;


<!---------------------------------------------------------------------------
THIS SKIN IS TOTALLY MADE BY ME, BII. PLEASE DO NOT REMOVE THE CREDITS WHEN YOU ARE USING MY BLOGSKIN. THANKS FOR YOUR CO-OPERATION. DO EDIT THE EDITABLE PART.

BLOG OF OWNER : http://angelbii.blogspot.com/

DESIGNER: BII
DATE OF DESIGN: 01.03.15
---------------------------------------------------------------------------!>

<html>
<head>
<link rel="shortcut icon" href="http://media.tumblr.com/tumblr_m9sq8ddeoB1qdlkyg.gif">
<title>Life is Simple ;</title>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>

<script src='js/dots.js'></script>
<script src='modernizr.min.js'></script>
<script language="JavaScript">
document.ondragstart = function () { return false; };
</script>

</head>

<style type='text/css'>
#navbar-iframe {
display: none;
}

body {
overflow-y: auto;
}

/* Navigator
----------------------------------------------- */
.view {
    width: 225px;
    height: 150px;
    margin: 10px;
    float: left;
    border: 7px solid #fff;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff url(../images/bgimg.jpg) no-repeat center center
}
.view .mask, .view .content {
    width: 225px;
    height: 150px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}
.view img {
    display: block;
    position: relative
}
.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 17px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 0 0
}
.view p {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    position: relative;
    color: #fff;
    padding: 10px 20px 20px;
    text-align: center
}
.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 7px 14px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000;
}
.view a.info:hover {
    box-shadow: 0 0 5px #000;
}

.view-tenth img {
    transform: scaleY(1);
    transition: all 0.7s ease-in-out;
}
.view-tenth .mask {
    background: url(http://i1198.photobucket.com/albums/aa448/shehjing/281214%20design-diary%20blog/artistic-13_zps53653a13.jpg);
    transition: all 0.5s linear;
    opacity: 0;
}
.view-tenth h2{
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: transparent;
    margin: 20px 40px 0px 40px;
    transform: scale(0);
    color: #333;
    transition: all 0.5s linear;
    opacity: 0;
}
.view-tenth p {
    color: #333;
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}
.view-tenth a.info {
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s linear;
}

.view-tenth:hover img {
    transform: scale(10);
    opacity: 0;
}
.view-tenth:hover .mask {
    opacity: 1;
}                                                                          
.view-tenth:hover h2,
.view-tenth:hover p,
.view-tenth:hover a.info{
    transform: scale(1);
    opacity: 1;
}

/* Content
----------------------------------------------- */
#content {
font-family: 'Ubuntu Condensed', sans-serif;
font-size: 13px;
width: 550px;
height: auto;
position: absolute;
top: 110px;
left: 600px;
border: 3px double #ccc;
padding: 10px;
}

.b-content {
font-family: 'Ubuntu Condensed', sans-serif;
font-size: 13px;
line-height: 1.7;
background: #FFF;
opacity: .5;
}

.profile-content {
background: url(http://i1198.photobucket.com/albums/aa448/shehjing/281214%20design-diary%20blog/op-handdraw-9_zps4090f533.gif) bottom no-repeat;
background-size: 550px;
line-height: 1.7;
color: #545454;
}

.post-content {
background: url() top right no-repeat;
background-size: 550px;
line-height: 1.7;
color: #545454;
}

.link-content {
background: url(http://i1198.photobucket.com/albums/aa448/shehjing/281214%20design-diary%20blog/op-handdraw-26_zps1b7d3d54.gif) bottom no-repeat;
background-size: 550px;
line-height: 1.7;
color: #545454;
}

.tag-content {
background: url(http://i1198.photobucket.com/albums/aa448/shehjing/281214%20design-diary%20blog/op-handdraw-36_zpsb167ebfa.gif) bottom no-repeat;
background-size: 550px;
line-height: 1.7;
color: #545454;
}

.entry-title {
font-family: b-only;
font-size: 17px;
text-align: center;
margin-top: 15px;
}

.page-title {
background: #F7F7F7;
padding: 3px;
text-shadow: 2px 2px 2px #FFF;
text-transform: uppercase;
letter-spacing: 4px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
}

.post-title {
font-family: b-only;
font-size: 15px;
color: #000;
text-align: center;
}

.post-title:first-letter {
font-size: 20px;
text-decoration: bold;
}

.date {
width: 50%;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 3px;
background: #F7F7F7;
font-family: e-minny;
text-align: center;
padding: 3px;
margin-bottom: 5px;
font-size: 16px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
border-top-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
border-top-right-radius: 20px;
}

/* Dots
----------------------------------------------- */
.dotstyle ul {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
list-style: none;
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.dotstyle li {
position: relative;
display: block;
float: left;
margin: 0 16px;
width: 16px;
height: 16px;
cursor: pointer;
}

.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 */
cursor: pointer;
position: absolute;
}

.dotstyle li a:focus {
outline: none;
}

.dotstyle-flip li {
-webkit-perspective: 1000px;
perspective: 1000px;
}

.dotstyle-flip li a {
background-color: transparent;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
transition: transform 0.3s ease, opacity 0.3s ease;
}

.dotstyle-flip li a::before, .dotstyle-flip li a::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #CDDCCF;
content: '';
text-indent: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.dotstyle-flip li a::after {
background-color: #CDD3DC;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.dotstyle-flip li a:hover, .dotstyle-flip li a:focus {
opacity: 0.8;
}

.dotstyle-flip li.current a {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

/* Sidebar
----------------------------------------------- */
#noti {
width: 250px;
height: 100px;
padding: 5px;
top: 510px;
left: 160px;
background: url(http://i1198.photobucket.com/albums/aa448/shehjing/281214%20design-diary%20blog/op-handdraw-6_zps37ce11e7.gif) no-repeat top right;
background-size: 190px;
position: fixed;
font-size: 13px;
font-family: 'Ubuntu Condensed', sans-serif;
color: #888;
border: 1px solid transparent;
-moz-border-image: -moz-linear-gradient(left, #ccc, #ffffff, #ccc);
-webkit-border-image: -webkit-linear-gradient(left, #ccc, #ffffff, #ccc);
border-image: linear-gradient(to bottom right, #ccc, #ffffff, #ccc);
border-image-slice: 1;
}

.prof {
background: url(http://i1198.photobucket.com/albums/aa448/shehjing/281214%20design-diary%20blog/bii-symbols-1-8_zpstfd4s7xs.gif) no-repeat left;
padding-top: 4px;
padding-left: 25px;
padding-bottom: 4px;
-webkit-transition-duration: .5s;
}

.prof:hover {
background: url(http://i1198.photobucket.com/albums/aa448/shehjing/281214%20design-diary%20blog/bii-symbols-1-9_zpsatuom9gv.gif) no-repeat left;
padding-top: 4px;
padding-left: 25px;
padding-bottom: 4px;
-webkit-transition-duration: .5s;
}

b {
text-shadow: 1px 0px 0px #FFDEDB;
}

u {
color: #ccc;
text-decoration: none;
border-bottom: 1px solid #FFDEDB;
-webkit-transition-duration: .8s;
}

u:hover {
color: #888;
text-decoration: none;
border-bottom: 2px solid #FFDEDB;
-webkit-transition-duration: .8s;
}

i {
letter-spacing: 2px;
}

blockquote {
box-shadow: inset 0 0 10px 0 rgba(205,220,207,.8);
text-shadow: 2px 0px 0px #FFF;
padding: 5px;
-webkit-transition-duration: .8s;
}

blockquote:hover {
box-shadow: inset 0 0 50px 0 rgba(205,220,207,.8);
text-shadow: 2px 0px 0px #FFF;
padding: 5px;
-webkit-transition-duration: .8s;
}

a:link, a:visited {
text-decoration: none;
color: #966C6B;
-webkit-transition-duration: .8s;
}

a:hover {
text-decoration: none;
color: #6B9596;
text-shadow: 2px 0px 0px #CDDCCF;
-webkit-transition-duration: .8s;
}

a.b-out {
background: url(http://media.tumblr.com/392190bf66b6886c97ff91968f4eb93d/tumblr_inline_mjrxg5p40Z1qdlkyg.gif) no-repeat;
padding: 5px;
padding-left: 25px;
border-left: 0px solid #FFF;
-webkit-transition-duration: .8s;
}

a.b-out:hover {
background: url(http://media.tumblr.com/cc9866ca15809d0c2e2087a0beab26f8/tumblr_inline_mjrxj0nQXY1qdlkyg.gif) no-repeat;
padding: 5px;
padding-left: 25px;
-webkit-transition-duration: .8s;
}

@font-face{
font-family: b-only;
src:url(https://dl.dropbox.com/s/wfzl0oqqi4g9k4z/TheOnlyException.ttf);
}

@font-face{
font-family: e-15;
src:url(https://dl.dropbox.com/s/ap9zpxt8uc5zyrn/15.ttf);
}

@font-face{
font-family: e-minny;
src:url(https://dl.dropbox.com/s/l58a4ygryq224ve/minny.ttf);
}

</style>

<body>
<blogger>

<div style='position:fixed; top:55px; left:170px; font-family:e-15; font-size:50px; color:#FFF; -webkit-background-clip:text; -webkit-text-fill-color: transparent;
background-image:url(http://i1198.photobucket.com/albums/aa448/shehjing/281214%20design-diary%20blog/artistic-6_zpsc463a44f.jpg); background-position:60% 70%;'>Life is Simple ;</div>

<!---------------------------------Navigator--------------------------------!>
<div style='position:fixed; top:100px; left:30px;'>
<div class="view view-tenth">
    <img src="http://i1198.photobucket.com/albums/aa448/shehjing/281214%20design-diary%20blog/artistic-18_zpsc9be7059.jpg" width='225'/>
    <div class="mask"></div>
    <div class="content">
        <h2>THE</h2>
        <p><a onClick="document.getElementById('content').innerHTML=document.getElementById('profile').innerHTML" title="">P R O F I L E</a></p>
    </div>
</div>

<div class="view view-tenth">
    <img src="http://i1198.photobucket.com/albums/aa448/shehjing/281214%20design-diary%20blog/artistic-14_zps2f7c1c82.jpg" width='225'/>
    <div class="mask"></div>
    <div class="content">
        <h2>LIFE</h2>
        <p><a onClick="document.getElementById('content').innerHTML=document.getElementById('post').innerHTML" title="">D I A R I E S</a></p>
    </div>
</div>
<br><br><br><br><br><br><br><br><br><br><br>
<div class="view view-tenth">
    <img src="http://i1198.photobucket.com/albums/aa448/shehjing/281214%20design-diary%20blog/artistic-15_zps50bf3684.jpg" width='225'/>
    <div class="mask"></div>
    <div class="content">
        <h2>OF</h2>
        <p><a onClick="document.getElementById('content').innerHTML=document.getElementById('link').innerHTML" title="">L I N K S</a></p>
    </div>
</div>

<div class="view view-tenth">
    <img src="http://i1198.photobucket.com/albums/aa448/shehjing/281214%20design-diary%20blog/artistic-16_zps5302149f.jpg" width='225'/>
    <div class="mask"></div>
    <div class="content">
        <h2>97's</h2>
        <p><a onClick="document.getElementById('content').innerHTML=document.getElementById('tag').innerHTML" title="">M E S S A G E S</a></p>
    </div>
</div>
</div>

<div id='content'>
<div class='entry-title' style='margin-bottom:-5px;'>“ Entry ”</div>
<center><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7p7rAyzOQs8ANeHe_CA6rHGjgXrXopOh7Svg_oW3fzHe0kthyi1hLs3FN9HfTgR7v2MEhJR-PRnoIUCsrxJbu86TPURFVEmOqwdw5fbLdmiS-DSta7IDzotW93qKD0i-R7CGvXOxiLvng/s1600/floral-4.gif' style='width:85px; height:5px;'></center>
<br>
<center>
<img src='http://i1198.photobucket.com/albums/aa448/shehjing/281214%20design-diary%20blog/nature-12_zps3aaa6e79.jpg' width='250'><br><br>
HARLO :) Welcome to my blog.<br>
Feel free to look around but <span style='text-shadow:1px 1px 2px #888;'>no ripping and spamming</span>.<br>
Do leave a lovely message to me in tagboard :)<br>
Best viewed in <span style='color:#998060; border-bottom:2px solid #FFDEDB;'>Google Chrome</span>.<br><br>
</center>
</div>

<!------------------------------------Profile------------------------------------!>
<div id="profile" style="display: none;">
<div class='profile-content'>
<img src='http://data3.whicdn.com/images/154201751/large.jpg' width='65' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRFJncx29C3NgoN4pXNarzA18NslUTXzBlkFHwQJNwKF7zpgP9PDQnwCNo8EDAwR_2zA3xQc8ELSfTKQpArliqzA6E6lSzcXP_NSG89d6a8VUJYz1Z1U12Dqhyphenhypheni644Hn4t-zB3Ct5HTTnE/s1600/878483402314104120.jpg); border-radius:50px; padding:5px;' align='left'><br>
<div class='page-title' style='width:145px; padding-left:20px;'>Profile ;</div><br><br>
<center>
<img src='http://i.imgur.com/NmnL5QF.jpg' width='250'><br>
Replace with your beautiful picha :D
</center><br>
Add your details here :)
<br>
<br>
</div>
</div>

<!-------------------------------------Diary-------------------------------------!>
<div id="post" style="display: none;">
<div class='post-content'>
<img src='http://i1198.photobucket.com/albums/aa448/shehjing/281214%20design-diary%20blog/flower-1_zps5a3f6631.gif' width='65' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRFJncx29C3NgoN4pXNarzA18NslUTXzBlkFHwQJNwKF7zpgP9PDQnwCNo8EDAwR_2zA3xQc8ELSfTKQpArliqzA6E6lSzcXP_NSG89d6a8VUJYz1Z1U12Dqhyphenhypheni644Hn4t-zB3Ct5HTTnE/s1600/878483402314104120.jpg); border-radius:50px; padding:5px;' align='right'><br>
<div align='right'><div class='page-title' style='width:155px; padding-right:20px;'>DIARIES ;</div></div><br><br>
<div class='post-title'><$BlogItemTitle$></div>
<center>
<div class='date'><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div></center>
<br>
<BlogItemBody><$BlogItemBody$></BlogItemBody>
<center>
<OlderPosts><a href='<$OlderPosts$>'>◀ Older Posts</a></OlderPosts> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> Letter(s)</a></BlogItemCommentsEnabled> | <NewerPosts><a href='<$NewerPosts$>'>Newer Posts ▶</a></NewerPosts>
</center>

</div>
</div>

<!-------------------------------------Links-------------------------------------!>
<div id="link" style="display: none;">
<div class='link-content'>
<img src='http://data3.whicdn.com/images/154370828/large.jpg' width='65' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRFJncx29C3NgoN4pXNarzA18NslUTXzBlkFHwQJNwKF7zpgP9PDQnwCNo8EDAwR_2zA3xQc8ELSfTKQpArliqzA6E6lSzcXP_NSG89d6a8VUJYz1Z1U12Dqhyphenhypheni644Hn4t-zB3Ct5HTTnE/s1600/878483402314104120.jpg); border-radius:50px; padding:5px;' align='left'><br>
<div class='page-title' style='width:145px; padding-left:20px;'>Friends ;</div><br><br>
<center>
<div style='padding:5px; border:1px dashed #ccc; width:300px; text-align:center;'>
<img src='http://media.tumblr.com/tumblr_me93yq4oxU1qdlkyg.gif'><br>
Do visit them if you have free time :)
</div>
</center>
<br>
<a class='b-out' href=''>You</a><br>
<a class='b-out' href=''>You</a><br>
<a class='b-out' href=''>You</a><br>
<a class='b-out' href=''>You</a><br>
<a class='b-out' href=''>You</a><br>
<a class='b-out' href=''>You</a><br>
<a class='b-out' href=''>You</a><br>
<a class='b-out' href=''>You</a><br>
<a class='b-out' href=''>You</a><br>
<br>
<blockquote><center>Replace with your friends' links :)</center></blockquote>
</div>
</div>

<!-------------------------------------Tagboard-------------------------------------!>
<div id="tag" style="display: none;">
<div class='tag-content'>
<img src='http://data1.whicdn.com/images/154364115/large.jpg' width='65' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRFJncx29C3NgoN4pXNarzA18NslUTXzBlkFHwQJNwKF7zpgP9PDQnwCNo8EDAwR_2zA3xQc8ELSfTKQpArliqzA6E6lSzcXP_NSG89d6a8VUJYz1Z1U12Dqhyphenhypheni644Hn4t-zB3Ct5HTTnE/s1600/878483402314104120.jpg); border-radius:50px; padding:5px;' align='right'><br>
<div align='right'><div class='page-title' style='width:165px; padding-right:20px;'>MESSAGES ;</div></div><br><br>
<center>
Replace with your Cbox Code :)
</center><br>
<center><img src='http://media.tumblr.com/2eda98d0c6a9a907aee771f89f987db0/tumblr_inline_mfnkfuHikt1qdlkyg.gif'></center>
<br>
<img src='http://media.tumblr.com/tumblr_mdpf6gWWZM1qdlkyg.gif' align='left'> Do leave me a message before you leave <br>
<img src='http://media.tumblr.com/tumblr_mdpf6gWWZM1qdlkyg.gif' align='left'> Please leave your website together with your message so that I can reply you <br>
<img src='http://media.tumblr.com/tumblr_mdpf6gWWZM1qdlkyg.gif' align='left'> Leave along your comment about my new design <br>
<img src='http://media.tumblr.com/tumblr_mdpf6gWWZM1qdlkyg.gif' align='left'> 100% for sure I will visit you back :D <br>
<img src='http://media.tumblr.com/tumblr_mdpf6gWWZM1qdlkyg.gif' align='left'> 'Enter' once is enough to prevent spamming <br>
<img src='http://media.tumblr.com/tumblr_mdpf57jAYl1qdlkyg.gif' align='left'> Harsh word is not allowed <br><br>
<center><img src='http://media.tumblr.com/tumblr_mdpf72BeWH1qdlkyg.gif'> Please come again next time! Ciao~ </center>
</div>
</div>

<!-------------------------------------sidebar-------------------------------------!>
<div style='position:fixed; top:485px; left:240px;'>
<div class="dotstyle dotstyle-flip">
    <ul>
        <li class="current"><a onClick="document.getElementById('noti').innerHTML=document.getElementById('status').innerHTML" title=""></a></li>
        <li><a onClick="document.getElementById('noti').innerHTML=document.getElementById('credit').innerHTML" title=""></a></li>
    </ul>
</div>
</div>

<div id='noti'>
<center>
<u>Status</u><br><br>
Replace your status here :)
</center>
</div>

<div id="status" style="display: none;">
<center>
<u>Status</u><br><br>
Replace your status here :)
</center>
</div>

<div id="credit" style="display: none;">
<u>Thanks to:</u><br><br>
Template by - <a href='http://angelbii.blogspot.com/'>B.Babey</a><br>
Redisigned by - Your Name<br>
Tuto & Sozai from - <a href='http://elaine0211.blogspot.com/'>Elaine</a> & <a href='http://tympanus.net/codrops/category/tutorials/'>Tympanus</a> & <a href='https://www.google.com.my'>Google</a><br>
Support by - <a href='https://www.google.com.my'>Google</a> & <a href='http://www.cbox.ws/'>Cbox</a> & <a href='https://www.youtube.com/'>YouTube</a><br>
</div>

<script src="http://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>

<div style='position:fixed; bottom:0px; left:0px;'>
Put your music here :D
</div>

<div style='position:fixed; top:487px; left:160px; font-size:13px; font-family:Ubuntu Condensed;'>
<a href='https://www.blogger.com/home' title='Home'>DASHBOARD</a>
</div>

<div style='position:fixed; top:487px; left:370px; font-size:13px; font-family:Ubuntu Condensed;'>
<a href='http://www.blogger.com/follow-blog.g?blogID=5222993684700133944' title='+ Follow'>+ FOLLOW</a>
</div>

</blogger>
</body>

</html>