karrenyeoh-code

CODE.ELIZABETH

</*-----------------------------------------------
Designer Blog: https://karren-yeoh.blogspot.com
Designer: Karrenyeoh
Date: 2026.05.25
----------------------------------------------- */>
<html>
<head>
<link rel="shortcut icon" href="https://pbs.twimg.com/media/HJcq5acbYAAY6sg?format=png&name=small">
<title>livepreview-elizabeth</title></head>


</* 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/css?family=Nunito" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Marck+Script" rel="stylesheet">

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


/* Body
----------------------------------------------- */
body {
cursor: url(https://64.media.tumblr.com/4bfe7a22099b0e228ef289428d719902/f2a586d59d4bc3ca-fb/s75x75_c1/a5f7a1e7a5c8dfc3c70502695dd4969baefc9215.pnj), progress;
background: url(https://pbs.twimg.com/media/HLIKIxha4AA2LAJ?format=jpg&name=4096x4096) no-repeat;
color: #6C6C6C;
font-family: Nunito;
font-size: normal;
letter-spacing: 1px;
text-align: justify;
margin: 0px;
}

.blog-archive {
background: transparent;
width: 70%;
padding: 1%;
}


/* Header
----------------------------------------------- */
.header {
background: url(https://pbs.twimg.com/media/HLGf3Eea0AACDmt?format=jpg&name=4096x4096) no-repeat;
background-size: 100%;
background-position: 80% 10%;
width: 70%;
text-align: center;
margin-top: -4%;
}

.header-text{
color: #bd5567;
width: 70%;
font-family: Marck Script;
font-size: 100px;
line-height: 50px;
text-align: center;
text-transform: lowercase;
padding: 5%;
margin-top: 100px;
border: 0px solid #FFF;
}


/* Post
----------------------------------------------- */
.post-body {
float: left;
overflow: auto;
background: #FFF;
height: 55%;
width: 70%;
text-align: justify;
padding: 2%;
margin-bottom: 2%;
border: 2px solid #ebb3b8;
}

.post {
color: #6C6C6C;
font-family: Nunito;
font-size: 80%;
letter-spacing: 1px;
margin-top: 20px;
margin-bottom: 40px;
}

.title {
background: #FFF;
color: #c98b91;
font-size: 200%;
text-align: center;
margin-bottom: 5px;
border-bottom: 2px solid #ebb3b8;
}

.label {
position: absolute;
background: #ffdbde;
color: #6C6C6C;
top: 300px;
left: 10%;
font-size: 80%;
text-transform: uppercase;
padding: 5px;
border: 1px solid #ebb3b8;
transition-duration: .7s;
opacity: 0;
}
.post-body:hover .label {
position: absolute;
left: 55%;
transition-duration: .7s;
opacity: 1;
}


/* Comments
----------------------------------------------- */
#comments {
background: #ebb3b8;
padding: 2%;
}

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

#comments-block {
margin: 2%;
}

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

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


/* Sidebar
----------------------------------------------- */
.sidebar {
float: right;
background: #FFF;
width: 20%;
font-size: 70%;
text-align: justify;
padding: 2%;
margin-bottom: 2%;
border: 2px solid #ebb3b8;
}

#contact {
background: #ebb3b8;
color: #FFF;
width: 10%;
font-size: 100%;
text-align: center;
text-decoration: none;
padding-top: 4%;
padding-bottom: 4%;
margin: 1%;
border: 1px solid #FFF;
border-radius: 50%;
}


/* Navigation
---------------------------------------------*/
a.navi {
display: inline-block;
background: #FFF;
color: #c98b91;
width: 40%;
font-family: Nunito;
font-size: 90%;
text-transform: uppercase;
padding: 1%;
margin: 1%;
border: 1px solid #f5c9cd;
transition: all 0.3s ease-in-out;
}

a.navi:hover {
background: #f5c9cd;
color: #FFF;
}

.navi {
display: inline-block;
background: #FFF;
color: #c98b91;
width: 40%;
font-family: Nunito;
font-size: 90%;
text-transform: uppercase;
padding: 1%;
margin: 1%;
border: 1px solid #f5c9cd;
transition: all 0.3s ease-in-out;
}
.navi:hover {
background: #f5c9cd;
color: #FFF;
}


/* Music Player
----------------------------------------------- */
#player {
position: fixed;
overflow: hidden;
background: #ebb3b8;
color: #FFF;
top: 0%;
right: 130px;
font-size: 70%;
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: #bd5567;
width: 300px;
top: -30%;
right: 10px;
font-size: 110%;
text-align: center;
text-transform: uppercase;
padding: 10px;
border: 2px solid #FFC9C9;
transition: all 0.5s ease-out;
z-index: 99;
}
#mp3:hover {
transition: all 0.5s ease-out;
}


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

::-webkit-scrollbar-thumb {
background: #fad2d3;
width: 5px;
border: 1px solid #FFF;
border-radius: 10px;
-moz-border-radius: 10px;
}


/* Tooltip
----------------------------------------------- */
#s-m-t-tooltip {
display: block;
background: #fcebec;
color: #6C6C6C;
font-size: 70%;
line-height: 1px;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
padding: 15px;
margin: 20px;
border: 1px solid #ebb3b8;
z-index: 999;
}


/* Link
----------------------------------------------- */
a:link,a:visited {
color: #000;
text-decoration: none;
padding: 2px;
transition: all 0.5s ease-in-out;
}
a:hover {
cursor: url(https://64.media.tumblr.com/aff47b0bb34857049d27fa7e631ffa23/f2a586d59d4bc3ca-0d/s75x75_c1/dc9a40e879183d0c4b11848c7048b7d99a8955b7.pnj), progress;
color: #ccc;
}

a.link2 {
display: inline-block;
background: #FFF;
color: #c98b91;
width: 20%;
font-family: Oswald;
font-size: 70%;
line-height: 250%;
letter-spacing: 5%;
text-align: center;
text-transform: uppercase;
margin-bottom: 5px;
border: 1px solid #f5c9cd;
-webkit-transition-duration: .3s;
}
a.link2:hover {
background: #f5c9cd;
color: #FFF;
}


/* Image Effect
----------------------------------------------- */
img {
margin: 2%;
}


/* Text Effect
----------------------------------------------- */
h2 {
background: #FFF;
color: #c98b91;
font-size: 150%;
text-align: center;
margin: 2%;
}

b {
color: #ebb3b8;
font-size: 110%;
font-weight: 900;
}

u {
text-decoration: none;
border-bottom: 1px solid #ebb3b8;
}

blockquote {
padding: 6px;
border: 1px solid #ebb3b8;
-webkit-transition-duration: 1.5s;
}
blockquote:hover {
color: #bd5567;
border: 1px solid #FFF;
box-shadow: inset 1300px 0 0 0 #ffdbde;
-webkit-transition-duration: 1.5s;
}

table {
background: #FFF;
width: 52%;
font-size: 10px;
text-align:center;
text-transform:uppercase;
margin-right: 18%;
}

th, td {
width: 20%;
font-size: 100%;
text-decoration: none;
padding: 1%;
border: 2px solid #ebb3b8;
}

::-moz-selection {
background: #FFB5B5;
color: #FFF;
}
::selection {
background: #FFB5B5;
color: #FFF;
}


</style>
<blogger>
<body>
<!--------------------------------------Music Player--------------------------------------!>
<div id="player">music here
<div id="mp3">
// 好きだから (Suki Dakara)
<audio controls autoplay src="https://mp3tourl.com/audio/1783558531934-ac8f7825-ff9c-4785-afb8-12f24f772100.mp3"></audio>
</div></div>

<!--------------------------------------Header--------------------------------------!>
<center>
<div class="header">
<div class="header-text">Happiness</div></center>
</div>

<!--------------------------------------Post--------------------------------------!>
<center><blogger>
<div class="blog-archive">
<div id="main" class="post-body">
<div class="title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="label"><i class="fa fa-calendar-check-o"></i> <$BlogItemDateTime$> - <i class="fa fa-comments"></i> comments: <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$></a></div>
<div class="post">
<$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>
</blogger>
</div>

<!--------------------------------------Sidebar--------------------------------------!>
</* Sidebar-1>
<div class="sidebar">

<center>
<img src="https://media.tenor.com/PLQKgxP9bhAAAAAd/sad-kawai.gif" width="100%" title="啾咪">

<a href="" id="contact" class="fa fa-facebook-f" title="facebook"></a>
<a href="" id="contact" class="fa fa-instagram" title="instagram"></a>
<a href="" id="contact" class="fa fa-twitter" title="twitter"></a>
<a href="" id="contact" class="fa fa-tumblr" title="tumblr"></a>
<a href="" id="contact" class="fa fa-google-plus" title="google"></a>
<a href="" id="contact" class="fa fa-pinterest-p" title="pinterest"></a></center><br>

Template by <a href="https://karren-yeoh.blogspot.com/2026/06/elizabeth.html" target="_blank">Elizabeth</a>.<br>
Designed by <a href="https://karren-yeoh.blogspot.com/" target="_blank">KARREN</a>.<br>
Resigned by <a href="" target="_blank">YourNamne</a>.<br>
Best viewed in Google Chrome.</div>

</* Sidebar-2>
<div class="sidebar">

<center>
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('home').innerHTML" title="文章">entry</a>
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title="博主">about</a>
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('link').innerHTML" title="链接">link</a>
<a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('cbox').innerHTML" title="聊天">cbox</a>
<div class="navi"><a href="https://www.blogger.com/home" target="_blank" title="主页">dashboard</a></div>
<div class="navi"><a href="http://www.blogger.com/follow-blog.g?blogID=<$blogID$>" target="_blank" title="关注">follow</a></div>

</div>
</div></div>

<!--------------------------------------Footer--------------------------------------!>
<table>
<tr>
<td><span><newerposts><a href=<$NewerPosts$>><span class="fa fa-long-arrow-left"></span> Newer Posts</a></NewerPosts></span></td>
<td><a href="">refresh blog</a></td>
<td><span><olderposts><a href=<$OlderPosts$>>Older Posts <span class="fa fa-long-arrow-right"></span></a></OlderPosts></span></td>
</tr>
</table>

<!--------------------------------------Page-Entry--------------------------------------!>
<div id="home" style="display: none;"><blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="label"><span class="fa fa-calendar"></span> <$BlogItemDateTime$></div>
<div class="post"><$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>
</blogger>
</div>

<!--------------------------------------Page-About--------------------------------------!>
<div id="about" style="display: none;">
<div class="post-title">About The Owner</div>
<div class="label"><span class="fa fa-cloud"></span> i'm the boss</div>
<center><img src="https://pbs.twimg.com/media/HLaPHquaoAAC-Rz?format=jpg&name=large" width="75%"></center>

<center><blockquote><b>Basic</b> Insert your about content here.</blockquote></center>
</div>

<!--------------------------------------Page-Link--------------------------------------!>
<div id="link" style="display: none;">
<div class="post-title">Other Blogger</div>
<div class="label"><span class="fa fa-moon-o"></span> know more friends</div>
<center><img src="https://pbs.twimg.com/media/HLaPHqwbgAAH01Y?format=jpg&name=large" width="75%">

<h2>Tutorials & Materials</h2>
<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></center>
</div>

<!--------------------------------------Page-CBox--------------------------------------!>
<div id="cbox" style="display: none;">
<div class="post-title">Leave Your Message</div>
<div class="label"><span class="fa fa-star"></span> left your footprint</div>
<center><img src="https://pbs.twimg.com/media/HLbNhIobEAAxl-u?format=jpg&name=medium" width="75%"></center>
<b>Chatbox</b> Insert here
</div>

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

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

</* Falling Flower>
<style>
.flower-drop {
position: fixed;
top: -10%;
pointer-events: none;
animation: fall linear infinite;
z-index: 9999;
}
@keyframes fall {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(110vh) rotate(360deg);
opacity: 0.2;
}
}
</style>

<script>
function createFlower() {
const flower = document.createElement('div');
flower.classList.add('flower-drop');
flower.innerHTML = '🌸'; // You can change this to any flower emoji or character
flower.style.left = Math.random() * 100 + 'vw';
flower.style.animationDuration = Math.random() * 3 + 3 + 's';
flower.style.fontSize = Math.random() * 15 + 15 + 'px';
document.body.appendChild(flower);
setTimeout(() => {
flower.remove();
}, 6000);
}
setInterval(createFlower, 300);
</script>