karrenyeoh-code

CODE.HAYAO MIYAZAKI

</*-----------------------------------------------
BLOG OF OWNER : http://angelbii.blogspot.com/
DESIGNER: BII
DATE OF DESIGN: 01.03.15
----------------------------------------------- */>
<html>
<head></head>
<link rel="shortcut icon" href="https://cdn-icons-png.flaticon.com/512/740/740909.png">
<title>Hayao Miyazaki</title>

</* Social Media Icon>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</* Font Family>
<link href="https://fonts.googleapis.com/css2?family=WDXL+Lubrifont+SC&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Yuyu&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">

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

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


/* Body
----------------------------------------------- */
body {
cursor: url(https://64.media.tumblr.com/417ad14b514d7409d7fc2be06f0a3f16/a5610dff1ac81a46-f7/s75x75_c1/659eecba1133ef4b7f908adbeab0935b6d4c5f79.pnj), progress;
color: #333;
font-family: Oswald, ZCOOL KuaiLe;
font-size: normal;
}

#content {
float: right;
background: #FFF;
height: 70%;
width: 45%;
padding: 2%;
margin-top: 2%;
margin-right: 5%;
border: 3px solid #ccc;
box-shadow: 5px 5px 3px #4c8f6e;
}

.sider {
float: left;
place-items: center;
width: 30%;
margin-left: 5%;
}


/* Entry
----------------------------------------------- */
.entry-title {
font-family: Dancing Script;
font-size: 250%;
text-align: center;
text-decoration: 3px underline #4c8f6e;
text-underline-offset: 15px;
margin-bottom: 5%;
}

.entry-img {
background: url(https://pbs.twimg.com/media/HMbZyGXa4AAt4Yq?format=jpg&name=900x900) no-repeat;
background-size: 100%;
height: 70%;
width: 40%;
margin-top: 2%;
margin-bottom: 2%;
border: 5px solid #4c8f6e;
}


/* Content
----------------------------------------------- */
.post-content {
overflow: auto;
background: url(https://pbs.twimg.com/media/HMawMDyaAAA25nx?format=jpg&name=medium) no-repeat bottom;
background-size: 100%;
height: 90%;
margin-bottom: 3%;
border-bottom: 5px solid #FFBB77;
}

.post-img {
float: left;
position: static;
background: url(https://pbs.twimg.com/media/HMbZyFXbIAAfRZv?format=jpg&name=medium) no-repeat;
background-size: 100%;
height: 130px;
width: 130px;
border: 5px solid #327f59;
border-radius: 50%;
}

.title {
background: #FFF;
color: #006030;
width: 100%;
font-family: Dancing Script;
font-size: 200%;
text-transform: uppercase;
letter-spacing: 2px;
border-bottom: 5px solid #327f59;
}
.title:first-letter {
font-family: Great Vibes;
font-size: 150%;
}

.date {
background: #FFF;
color: #4c8f6e;
font-family: Yuyu;
font-size: 90%;
text-transform: uppercase;
letter-spacing: 1px;
padding: 2%;
padding-bottom: 5%;
margin-bottom: 2%;
}

.profile-content {
overflow: auto;
background: url(https://pbs.twimg.com/media/HMaz0QXaYAAKCKg?format=jpg&name=medium) no-repeat;
background-size: 100%;
height: 90%;
border-bottom: 5px solid #FFC78E;
}

.profile-img {
float: left;
position: static;
background: url(https://media.craiyon.com/2025-07-09/9qH7AziCRSe9f_pobjnK5Q.webp) no-repeat;
background-size: 100%;
height: 130px;
width: 130px;
border: 5px solid #327f59;
border-radius: 50%;
}

.link-content {
overflow: auto;
background: url(https://pbs.twimg.com/media/HMawlkQakAAr8sJ?format=jpg&name=medium) no-repeat;
background-size: 100%;
height: 90%;
border-bottom: 5px solid #327f59;
}

.link-img {
float: left;
position: static;
background: url(https://pbs.twimg.com/media/HMbgxB_aoAAFi6s?format=jpg&name=medium) no-repeat;
background-size: 100%;
height: 130px;
width: 130px;
border: 5px solid #327f59;
border-radius: 50%;
}

.chatbox-content {
overflow: auto;
background: url(https://pbs.twimg.com/media/HMazKf6bsAA8bg2?format=jpg&name=medium) no-repeat;
background-size: 100%;
height: 90%;
border-bottom: 5px solid #73BF00;
}

.chatbox-img {
float: left;
position: static;
background: url(https://pbs.twimg.com/media/HMbgxB7aMAA-VXe?format=jpg&name=900x900) no-repeat;
background-size: 100%;
height: 130px;
width: 130px;
border: 5px solid #327f59;
border-radius: 50%;
}


/* Comments
----------------------------------------------- */
#comments {
background: #FFF;
padding: 2%;
border-top: 3px solid #4c8f6e;
}

h4 {
font-size: 120%;
text-decoration: 3px underline #4c8f6e;
text-underline-offset: 15px;
text-transform: uppercase;
margin-bottom: 5%;
}

#comments-block {
margin: 2%;
}

.comment-data {
margin-bottom: 1%;
}

.comment-body {
background: #7faf97;
color: #FFF;
padding: 1%;
}


/* Navigator
----------------------------------------------- */
h1 {
background: url(https://pbs.twimg.com/media/HMbcpZtaoAAqgjv?format=jpg&name=small);
background-position: 60% 70%;
color: #FFF;
font-family: Dancing Script;
font-size: 500%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.view {
float: left;
position: relative;
overflow: hidden;
background: #FFF url(../images/bgimg.jpg) no-repeat center center;
height: 15%;
width: 45%;
text-align: center;
margin: 1%;
border: 5px solid #FFF;
box-shadow: 5px 5px 3px #4c8f6e;
}
.view .mask, .view .content {
overflow: hidden;
position: absolute;
height: 100%;
width: 100%;
top: 0%;
left: 0%;
text-align: center;
}
.view img {
position: relative;
display: block;
}
.view h2 {
position: relative;
background: transparent;
color: #FFF;
font-size: 150%;
text-align: center;
text-transform: uppercase;
}
.view p {
position: relative;
color: #FFF;
height: 45%;
font-family: Georgia;
font-size: 90%;
font-style: italic;
text-align: center;
}
.view a.info {
display: inline-block;
background: #467500;
color: #FFF;
text-decoration: none;
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: #FFF;
transition: all 0.5s linear;
opacity: 0;
}
.view-tenth h2{
color: #333;
border-bottom: 1px solid #000;
transition: all 0.5s linear;
transform: scale(0);
opacity: 0;
}
.view-tenth p {
color: #333;
text-transform: uppercase;
letter-spacing: 80%;
transition: all 0.5s linear;
transform: scale(0);
opacity: 0;
}
.view-tenth a.info {
transition: all 0.5s linear;
transform: scale(0);
opacity: 0;
}

.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;
}


/* Dots
----------------------------------------------- */
.dotstyle ul {
position: relative;
display: inline-block;
width: 100%;
margin-top: 5%;
}

.dotstyle li {
float: left;
position: relative;
display: block;
height: 20px;
width: 20px;
margin: 5px;
}

.dotstyle li a {
position: absolute;
background: #000;
height: 100%;
width: 100%;
}

.dotstyle li a:focus {
background: transparent;
}

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

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

.dotstyle-flip li a::before, .dotstyle-flip li a::after {
position: absolute;
background: #006030;
height: 100%;
width: 100%;
border-radius: 50%;
content: '';
backface-visibility: hidden;
}

.dotstyle-flip li a::after {
background: #0066CC;
transform: rotateY(180deg);
}

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

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


/* Credit Box
----------------------------------------------- */
#box {
overflow: hidden;
background: url(https://pbs.twimg.com/media/HMbhDixbQAANemo?format=jpg&name=medium) no-repeat;
background-size: 100%;
color: #FFF;
height: 13%;
width: 50%;
font-size: 80%;
padding: 1%;
border: 5px solid #FFF;
box-shadow: 1px 5px 5px 3px #4c8f6e;
}

h3 {
font-size: 110%;
text-decoration: 2px underline #FFF;
text-underline-offset: 6px;
}


/* Scrollbar
----------------------------------------------- */
::-webkit-scrollbar {
background: #FFF;
width: 5px;
}

::-webkit-scrollbar-thumb {
background: #327f59;
border: 1px solid #FFF;
}


/* Tooltip
----------------------------------------------- */
#s-m-t-tooltip {
background-color: #7faf97;
color: #FFF;
font-family: ZCOOL KuaiLe;
font-size: 90%;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
padding: 10px;
margin: 20px;
z-index: 999;
}


/* Music
----------------------------------------------- */
#player {
position: fixed;
overflow: hidden;
background: #327f59;
color: #FFF;
top: 0%;
right: 130px;
font-size: 80%;
text-align: center;
text-transform: uppercase;
padding: 10px;
transition: all .5s ease-in-out;
z-index: 99;
}
#player:hover #mp3 {
top: 0%;
}

#mp3 {
position: fixed;
background: #FFF;
color: #006030;
width: 300px;
top: -30%;
right: 10px;
font-size: 80%;
text-align: center;
text-transform: uppercase;
padding: 10px;
border: 2px solid #327f59;
transition: all 0.5s ease-out;
z-index: 99;
}
#mp3:hover {
transition: all 0.5s ease-out;
}


/* Links
----------------------------------------------- */
a:link, a:visited {
color: #AD5A5A;
text-decoration: none;
transition-duration: .8s;
}
a:hover {
cursor: url(https://64.media.tumblr.com/ad62104250e9ee8c1fa668f293b77164/a5610dff1ac81a46-3a/s75x75_c1/58f954af7d991877c4aa56c8e68e6831f667f54b.pnj), progress;
color: #6B9596;
text-shadow: 2px 0px 0px #CDDCCF;
transition-duration: .8s;
}

a.link2 {
display: inline-block;
background: url(https://64.media.tumblr.com/74b51f26d8206d431ae7a6f392665f01/26104daa0289cb79-49/s640x960/5139a84877ec16ed7751db1a5e40919dac4a340b.gifv) no-repeat left;
background-size: 10%;
color: #930000;
width: 40%;
padding: 8px;
padding-left: 5%;
transition-duration: .8s;
}
a.link2:hover {
background: url(https://64.media.tumblr.com/c15c11dbd6b7eb3210b14ebc3eda8f58/26104daa0289cb79-0a/s640x960/8fd24d5e3bd5aa38cd0177760e2a1dcf4958b8c6.gifv) no-repeat left;
background-size: 10%;
color: #FF9224;
text-decoration: 2px underline #4c8f6e;
text-underline-offset: 6px;
transition-duration: .8s;
}


/* Text Effects
----------------------------------------------- */
b {
font-size: 120%;
font-weight: bold;
}

u {
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid #006030;
transition-duration: .8s;
}

i {
letter-spacing: 2px;
}

li {
list-style-image: url(https://64.media.tumblr.com/e740b9f70283e35ad317d2976dfa5095/26104daa0289cb79-12/s75x75_c1/2464d047fc103bef44667fc9af05d3af5a3ff6c4.gifv);
font-size: 110%;
}

::selection {
background: #006030;
color: #FFF;
}

blockquote {
background: #e5efea;
padding: 6px;
border: 2px solid #FFF;
transition: all 0.9s ease-out;
}

blockquote:hover {
color: #006030;
border: 2px solid #FFF;
box-shadow: inset 1300px 0 0 0 #FFF;
transition: all 0.7s ease-out;
}


</style>
<body>
<blogger>
<!-----------------------------------Music-----------------------------------!>
<div id="player">music here
<div id="mp3">
// 風の通り道（Path of The Wind）
<audio controls autoplay src="https://mp3tourl.com/audio/1783162489342-753dec4e-8b63-4a36-8da6-30fd0967b3ac.mp3"></audio>
</div></div>

<!---------------------------------Sidebar--------------------------------!>
<div class="sider">
<h1>Hayao Miyazaki</h1>

<div class="view view-tenth">
<img src="https://pbs.twimg.com/media/HMbh5aaaAAAoYMC?format=png&name=medium" height="100%" width="100%">
<div class="mask"></div>
<div class="content">
<h2>I</h2>
<p><a onClick="document.getElementById('content').innerHTML=document.getElementById('post').innerHTML" title="日记">diaries</a></p>
</div>
</div>

<div class="view view-tenth">
<img src="https://pbs.twimg.com/media/HMbh8vJaIAAz07N?format=jpg&name=900x900" height="100%" width="100%">
<div class="mask"></div>
<div class="content">
<h2>LOVE</h2>
<p><a onClick="document.getElementById('content').innerHTML=document.getElementById('profile').innerHTML" title="博主">profile</a></p>
</div>
</div>

<div class="view view-tenth">
<img src="https://pbs.twimg.com/media/HMbh8vFacAAaz4T?format=jpg&name=small" height="100%" width="100%">
<div class="mask"></div>
<div class="content">
<h2>YOU</h2>
<p><a onClick="document.getElementById('content').innerHTML=document.getElementById('link').innerHTML" title="链接">links</a></p>
</div>
</div>

<div class="view view-tenth">
<img src="https://pbs.twimg.com/media/HMbh5aTasAAesxw?format=jpg&name=large" height="100%" width="100%">
<div class="mask"></div>
<div class="content">
<h2>SO</h2>
<p><a onClick="document.getElementById('content').innerHTML=document.getElementById('chatbox').innerHTML" title="聊天">messages</a></p>
</div>
</div>

<span style="float:left;"><a href="https://www.blogger.com/home" target="_blank" title="Home">Dashboard</a></span>
<span style="float:right;"><a href="http://www.blogger.com/follow-blog.g?blogID=<$blogID$>" target="_blank" title="Home">Follow</a></span>
<div class="dotstyle dotstyle-flip">
<ul>
<li class="current"><a onClick="document.getElementById('box').innerHTML=document.getElementById('status').innerHTML" title="状态"></a></li>
<li><a onClick="document.getElementById('box').innerHTML=document.getElementById('credit').innerHTML" title="归功于"></a></li>
</ul>
</div>

</*--Box Entry>
<div id="box">
<h3>Status</h3>

Write down your things here

</div>

</*--Status Content>
<div id="status" style="display: none;">
<h3>Status</h3>

Write down your things here

</div>

</*--Credit Content>
<div id="credit" style="display: none;">
<h3>Credits</h3>
Template by - <a href="https://angelbii.blogspot.com/2015/03/life-is-simple.html" target="_blank">Life is Simple</a><br>
Redisigned by - <a href="">YourName</a><br>
Best view in - Google Chrome<br>
Material from - <a href="https://www.google.com/">Google</a><br>
</div></div></*--one is sider>

<!------------------------------------Content Entry------------------------------------!>
<div id="content">
<center>
<div class="entry-title">Welcome To My Blog</div>
<div class="entry-img"></div>

Write down your things here

</center>
</div>

<!-------------------------------------Post-------------------------------------!>
<div id="post" style="display: none;">
<div class="post-content">
<div class="post-img"></div>
<div class="title"><$BlogItemTitle$></div>
<div class="date"><i class="fa fa-calendar-check-o"></i> <BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <i class="fa fa-comments"></i> comments: <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$></a></div>
<BlogItemBody><$BlogItemBody$></BlogItemBody>

<ItemPage>
<div id="comments">
<BlogItemCommentsEnabled><a name="comments"></a>
<h4><$I18NNumComments$>:</h4>

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

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

<$BlogItemCreate$>
</div></*--one is comments>
</ItemPage>
</div></*--one is post content>
<span style='float:left;'><NewerPosts><a href='<$NewerPosts$>'><i class="fa fa-caret-left"></i> NewerPosts</a></NewerPosts></span>
<span style='float:right;'><OlderPosts><a href='<$OlderPosts$>'>OlderPosts <i class="fa fa-caret-right"></i></a></OlderPosts></span>
</div>

<!------------------------------------Profile------------------------------------!>
<div id="profile" style="display: none;">
<div class="profile-content">
<div class="profile-img"></div>
<div class="title">profile</div>
<div class="date">Is a cool thing to be yourself</div>

Write down your things here

</div>
</div>

<!-------------------------------------Links-------------------------------------!>
<div id="link" style="display: none;">
<div class="link-content">
<div class="link-img"></div>
<div class="title">friends</div>
<div class="date">Know more friends might let you feel more happy</div>

<a class="link2" href="" target="_blank">link2</a>
<a class="link2" href="" target="_blank">link2</a>
<a class="link2" href="" target="_blank">link2</a>
<a class="link2" href="" target="_blank">link2</a>
<a class="link2" href="" target="_blank">link2</a>
<a class="link2" href="" target="_blank">link2</a>
<a class="link2" href="" target="_blank">link2</a>
<a class="link2" href="" target="_blank">link2</a>
<a class="link2" href="" target="_blank">link2</a>
<a class="link2" href="" target="_blank">link2</a>
<a class="link2" href="" target="_blank">link2</a>
<a class="link2" href="" target="_blank">link2</a>
<a class="link2" href="" target="_blank">link2</a>
<a class="link2" href="" target="_blank">link2</a>
<a class="link2" href="" target="_blank">link2</a>
<a class="link2" href="" target="_blank">link2</a>
<a class="link2" href="" target="_blank">link2</a>
<a class="link2" href="" target="_blank">link2</a>
<a class="link2" href="" target="_blank">link2</a>
<a class="link2" href="" target="_blank">link2</a>

<blockquote><center>Replace with your friends' links :)</center></blockquote>

</div>
</div>

<!-------------------------------------Chatbox-------------------------------------!>
<div id="chatbox" style="display: none;">
<div class="chatbox-content">
<div class="chatbox-img"></div>
<div class="title">messages</div>
<div class="date">Leave your footprint here and let me know you</div>

<li>Write down your things here</li>

</div>
</div>

<!-------------------------------------End-------------------------------------!>
</blogger>
</body>

</*--Dots>
<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>

</* Tooltip>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips();
});
})(jQuery);
</script>

</html>