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: 12px;
letter-spacing: 1px;
text-align: justify;
margin: 0px;
}
/* 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;
}
/* Blog
----------------------------------------------- */
.blog-archive {
background: transparent;
width: 70%;
padding: 1%;
}
.post-body {
float: left;
overflow: auto;
background: #FFF;
height: 55%;
width: 70%;
text-align: justify;
padding: 2%;
margin-bottom: 2%;
border: 2px solid #ebb3b8;
}
.label {
position: absolute;
background: #ffdbde;
color: #6C6C6C;
top: 300px;
left: 10%;
font-size: 100%;
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;
}
.post {
color: #6C6C6C;
font-family: Nunito;
font-size: 12px;
letter-spacing: 1px;
margin-top: 20px;
margin-bottom: 40px;
}
.post-title {
background: #FFF;
color: #c98b91;
font-size: 30px;
text-align: center;
margin-bottom: 5px;
border-bottom: 2px solid #ebb3b8;
}
.small-title {
background: #FFF;
color: #c98b91;
font-size: 200%;
text-align: center;
margin: 2%;
}
/* Link
----------------------------------------------- */
a:link,a:visited {
text-decoration: none;
color: #000;
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: 80%;
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;
}
/* sidebar
----------------------------------------------- */
.sidebar {
float: right;
background: #FFF;
width: 20%;
text-align: justify;
padding: 2%;
margin-bottom: 2%;
border: 2px solid #ebb3b8;
}
#contact {
text-decoration: none;
background: #ebb3b8;
color: #FFF;
width: 10%;
font-size: 100%;
text-align: center;
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: 80%;
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;
}
/* Music Player
----------------------------------------------- */
.b-musicbox {
position: fixed;
background: #ebb3b8;
color: #FFF;
width: 100px;
top: -1px;
right: 100px;
font-size: 12px;
text-align: center;
letter-spacing: 1px;
padding: 5px;
border: 1px solid #FFC9C9;
-webkit-transition-duration: .7s;
}
.b-musicbox:hover {
-webkit-transition-duration: .7s;
}
.b-musicbox:hover .playbox {
top: 0px;
-webkit-transition-duration: .7s;
}
.playbox {
position: fixed;
overflow-x: hidden;
background: #FFF;
width: 300px;
top: -200px;
right: 10px;
padding: 5px;
border: 2px solid #FFC9C9;
-webkit-transition-duration: .7s;
z-index: 1000;
}
/* 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: 12px;
line-height: 1px;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
padding: 15px;
margin: 20px;
border: 1px solid #ebb3b8;
z-index: 999;
}
/* Image Effect
----------------------------------------------- */
img {
margin: 2%;
}
/* Text Effect
----------------------------------------------- */
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 {
text-decoration: none;
width: 20%;
font-size: 100%;
padding: 1%;
border: 2px solid #ebb3b8;
}
::-moz-selection {
background: #FFB5B5;
color: #FFF;
}
::selection {
background: #FFB5B5;
color: #FFF;
}
</style>
<blogger>
<body>
<!--------------------------------------Music Player--------------------------------------!>
<div class='b-musicbox'>Music Here
<div class='playbox'>
<iframe width="260" height="160" src="https://www.youtube.com/embed/NMioMylYlbg?si=iRdev3Ml6cqkwOSN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div></div>
<!--------------------------------------Header--------------------------------------!>
<center>
<div class="header">
<div class="header-text">Happiness</div></center>
</div>
<!--------------------------------------Blog-Post--------------------------------------!>
<center><blogger>
<div class="blog-archive">
<div id="main" class="post-body">
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="label"><span class="fa fa-calendar"></span> <$BlogItemDateTime$></div>
<div class="post">
<$BlogItemBody$></div>
</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>
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>
<a class="navi" href="https://www.blogger.com/" target="_blank" title="主页">dashboard</a>
<a class="navi" href="http://www.blogger.com/follow-blog.g?blogID=<$blogID$>" target="_blank" title="关注">follow</a>
</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$></div>
</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%">
<div class="small-title">Tutorials & Materials</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></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>
