CODE.FOREST
</*-----------------------------------------------
Designer Blog: https://karren-yeoh.blogspot.com
Designer: Karrenyeoh
Date: 2026.07.01
----------------------------------------------- */>
<html>
<head></head>
<link rel="shortcut icon" href="https://64.media.tumblr.com/fb3089aff5f59db1d9b33e93e02a7036/604dedb4d790a38c-98/s540x810/c49f608cb29ff356aae9cf69bd58645c19e89224.pnj">
<title>livepreview-forest</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=Share+Tech&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Geist+Pixel&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montenegrin+Gothic+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
<style typ0e="text/css">
#navbar-iframe {
display: none;
}
/* Body
----------------------------------------------- */
body {
overflow: hidden;
cursor: url(https://64.media.tumblr.com/417ad14b514d7409d7fc2be06f0a3f16/a5610dff1ac81a46-f7/s75x75_c1/659eecba1133ef4b7f908adbeab0935b6d4c5f79.pnj), progress;
background: #aba;
font-family: Share Tech, Yuanti;
color: #333;
font-size: normal;
}
@media all {
.archive {
background: transparent;
width: 100%;
margin-top: 5%;
}
#main {
overflow: auto;
float: left;
background: #FFF;
height: 75%;
width: 45%;
font-size: 100%;
padding: 20px;
margin-left: 5%;
border: 10px double #006030;
}
.sider {
float: right;
width: 35%;
margin-right: 1%;
}
.menu {
float: left;
width: 25%;
font-family: Montenegrin Gothic One;
margin-top: 45px;
margin-left: -5px;
}
}
.img1 {
position: fixed;
background: url(https://64.media.tumblr.com/b47267d6b5af7b5e49433849c48896bc/1d0ddf0a94b7928d-4a/s640x960/7b6adf3805b67be4f4b5eee3ec07b0106bf61cdf.gifv) no-repeat left bottom;
background-size: 100%;
height: 20%;
width: 10%;
left: -2%;
bottom: -2%;
z-index: 99;
}
.img2 {
position: fixed;
background: url(https://64.media.tumblr.com/6a93d31b64d0f0ddfd70ff9574aa2039/604dedb4d790a38c-ca/s1280x1920/40cf2803502fcfdbc26fd6839058ca34d727cbe1.gif) no-repeat right bottom;
background-size: 100%;
height: 30%;
width: 10%;
right: 0%;
bottom: 0%;
z-index: 99;
}
/* Posts
----------------------------------------------- */
.post {
background: #FFF;
height: 90%;
font-size: 90%;
padding: 10px;
margin-bottom: 10px;
}
.post-title {
background: url(https://64.media.tumblr.com/0592f4fbca4f956bf1fd064229bbbf97/70beea8222d9a199-18/s1280x1920/1a5481988033fbe75f25783c539b8be097ef4872.gifv) no-repeat right;
background-size: 5%;
color: #ccdfd5;
width: 91%;
font-family: Montenegrin Gothic One, Yuanti;
font-size: 40px;
text-transform: uppercase;
text-shadow: 5px 2px 1px #001c0e;
letter-spacing: 3px;
border-bottom: 5px solid #99bfac;
transition: all .6s;
}
.post-title-img {
float: right;
position: static;
background: url(https://images.stockcake.com/public/1/3/5/1351977b-04db-4660-a66b-f084499d4ed8_large/enchanted-forest-glow-stockcake.jpg) no-repeat right;
background-size: 110%;
height: 100px;
width: 100px;
border: 5px solid #99bfac;
border-radius: 50%;
}
.date {
background: #FFF;
color: #006030;
font-family: Geist Pixel;
font-size: 80%;
text-align: left;
text-transform: uppercase;
margin-top: 10px;
margin-bottom: 5%;
}
.about-img {
float: right;
position: static;
background: url(https://png.pngtree.com/thumb_back/fh260/background/20240821/pngtree-an-anime-style-stone-bridge-over-small-stream-in-forest-image_16171822.jpg) no-repeat right;
background-size: 180%;
height: 100px;
width: 100px;
border: 5px solid #99bfac;
border-radius: 50%;
}
.link-img {
float: right;
position: static;
background: url(https://pics.craiyon.com/2023-07-14/5c2e9351bcd4425a9f0e3cadbcb8c4ea.webp) no-repeat right;
background-size: 110%;
height: 100px;
width: 100px;
border: 5px solid #99bfac;
border-radius: 50%;
}
.cbox-img {
float: right;
position: static;
background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTsV_dg2zpskDuWA-wCfuUKUx9y13rYIZOvtcmVGbY9jRM46IoYiKtubZY&s=10) no-repeat right;
background-size: 180%;
height: 100px;
width: 100px;
border: 5px solid #99bfac;
border-radius: 50%;
}
/* Sidebar
----------------------------------------------- */
@media all {
.sidebar {
position: relative;
display: inline-block;
float: left;
background: #FFF;
color: #666;
width: 55%;
padding: 20px;
margin-left: 5%;
border: 10px double #006030;
z-index: 9;
}
}
h1 {
color: #FFF;
font-family: Orbitron;
font-size: 350%;
text-align: center;
text-transform: uppercase;
letter-spacing: 5px;
line-height: 0px;
margin-top: -25px;
text-shadow: 6px 3px 0px #002613, -6px 2px 0px #D26900;
transition: all .9s;
}
h1:hover {
text-align: center;
text-shadow: 6px 3px 0px #FFC78E, -6px 2px 0px #004c26;
transition: all .9s;
}
.imagebar {
background: url(https://64.media.tumblr.com/4a62b25340413279fbd73e3e442b97aa/70beea8222d9a199-bc/s1280x1920/e335d97a7d9c44ecef4d0d0b51cee6d39d670205.webp) center;
background-size: 100%;
height: 50%;
width: 100%;
margin-top: -5px;
margin-bottom: 10px;
border: 3px solid #BB5E00;
}
.creditbox {
display: inline-block;
background: url(https://64.media.tumblr.com/9d0c6e8130846ca6498e0b0cf7759992/70beea8222d9a199-8b/s1280x1920/fcae6bad1b136f0f7e31e59354900ada1be0c773.gifv) no-repeat;
background-size: 15%;
width: 98%;
text-align: center;
padding: 5px;
border: 3px solid #006030;
}
/* Navigator Menu
----------------------------------------------- */
.menu a.navi {
display: inline-block;
background-color: #FFF;
color: #FF9224;
height: 15px;
width: 60%;
font-size: 70%;
text-transform: uppercase;
letter-spacing: 2px;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 10px;
border: 3px solid #006030;
transition: all 0.5s ease-out;
}
.menu a.navi:hover {
padding-left: 20px;
padding-right: 20px;
transition: all 0.5s ease-out;
}
.menu a.navi2 {
display: inline-block;
background-color: #FFF;
color: #4c8f6e;
height: 15px;
width: 80%;
font-size: 70%;
text-transform: uppercase;
letter-spacing: 2px;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 10px;
border: 3px solid #BB5E00;
transition: all 0.5s ease-out;
}
.menu a.navi2:hover {
padding-left: 20px;
padding-right: 20px;
transition: all 0.5s ease-out;
}
/* Scrollbar
----------------------------------------------- */
::-webkit-scrollbar {
background: #FFF;
width: 5px;
}
::-webkit-scrollbar-thumb {
background: #006030;
width: 5px;
border: 1px solid #FFF;
}
/* Tooltip
----------------------------------------------- */
#s-m-t-tooltip {
background-color: #001c0e;
color: #FFF;
font-family: ZCOOL KuaiLe;
padding: 10px;
margin: 20px;
z-index: 999;
}
/* Music
----------------------------------------------- */
#player {
position: fixed;
overflow: hidden;
background: #006030;
color: #FFF;
top: 0%;
right: 130px;
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 #006030;
transition: all 0.5s ease-out;
z-index: 99;
}
#mp3:hover {
transition: all 0.5s ease-out;
}
/* Links
----------------------------------------------- */
a:link,a:visited {
text-decoration: none;
color: #000;
transition: all 0.5s ease-out;
}
a:hover {
cursor: url(https://64.media.tumblr.com/ad62104250e9ee8c1fa668f293b77164/a5610dff1ac81a46-3a/s75x75_c1/58f954af7d991877c4aa56c8e68e6831f667f54b.pnj), progress;
color: #BB5E00;
text-shadow: 2px 2px 5px #006030;
transition: all 0.5s ease-out;
}
a img {
border-width: 0;
}
a.link2 {
display: inline-block;
background: #FFF;
color: #006030;
width: 20%;
font-family: Oswald;
font-size: 80%;
line-height: 250%;
letter-spacing: 5%;
text-align: center;
text-transform: uppercase;
margin-bottom: 5px;
border: 2px solid #006030;
transition-duration: .3s;
}
a.link2:hover {
background: #BB5E00;
color: #FFF;
border: 2px solid #FFF;
}
/* Text Effects
----------------------------------------------- */
b {
text-decoration: none;
font-weight: bold;
font-size: 120%;
}
u {
font-weight: bold;
text-decoration: none;
border-bottom: 2px solid #006030;
}
::selection {
background: #D26900;
color: #FFF;
}
blockquote {
padding: 10px;
border: 2px solid #006030;
box-shadow: inset 0px 0 0px 0 #D26900;
transition: all 0.9s ease-out;
}
blockquote:hover {
color: #FFF;
border: 2px solid #FFF;
box-shadow: inset 1000px 0 0px 0 #99bfac;
transition: all 0.7s ease-out;
}
textarea {
background: #FFF;
border: 2px solid #006030;
}
h2 {
color: #006030;
font-weight: bold;
font-size: 150%;
text-align: center;
}
</style>
<body>
<Blogger>
<!-----------------------------------Music-----------------------------------!>
<div id="player">music here
<div id="mp3">
// 夜, 萤火虫和你
<audio controls autoplay src="https://mp3tourl.com/audio/1782951297086-a1033d6a-760f-49bb-ac40-afec21970570.mp3"></audio>
</div></div>
<!--------------------------------------Blog-Body--------------------------------------!>
<div class="img1"></div>
<div class="img2"></div>
<div class="archive">
<div id="main">
<div class="post">
<div class="post-title-img"></div>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></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$></div>
<span style='float:left;'><NewerPosts><a href='<$NewerPosts$>'><i class="fa fa-arrow-circle-left"></i> NewerPosts</a></NewerPosts></span>
<span style='float:right;'><OlderPosts><a href='<$OlderPosts$>'>OlderPosts <i class="fa fa-arrow-circle-right"></i></a></OlderPosts></span>
</div></div>
<!--------------------------------------Sidebar--------------------------------------!>
<div class="archive">
<div class="sider">
<div class="sidebar-side">
<div class="sidebar">
<h1>Forest</h1>
<div class="imagebar"></div>
<div class="creditbox">
Template made by <a href="https://karren-yeoh.blogspot.com/" target="_blank">Karrenyeoh</a>.<br>
Redesigned by <a href="">Your Name</a>.<br>
Best viewed in Google.<br>
</div>
</div>
</div>
</* Menu>
<div class="menu">
<div class="navi"><a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('entry').innerHTML" title="主页">diary</a></div>
<div class="navi2"><a class="navi2" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title="博主">about</a></div>
<div class="navi"><a class="navi" onClick="document.getElementById('main').innerHTML=document.getElementById('link').innerHTML" title="链接">link</a></div>
<div class="navi2"><a class="navi2" onClick="document.getElementById('main').innerHTML=document.getElementById('cbox').innerHTML" title="聊天">chatbox</a></div>
<div class="navi"><a class="navi" href="https://www.blogger.com/home" target="_blank" title="主页">home</a></div>
<div class="navi2"><a class="navi2" href="http://www.blogger.com/follow-blog.g?blogID=<$blogID$>" target="_blank" title="关注">follow</a></div>
</div></div></div>
<!--------------------------------------Page-Entry--------------------------------------!>
<div id="entry" style="display: none;">
<div class="post">
<div class="post-title-img"></div>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></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$></div>
<span style='float:left;'><NewerPosts><a href='<$NewerPosts$>'><i class="fa fa-arrow-circle-left"></i> NewerPosts</a></NewerPosts></span>
<span style='float:right;'><OlderPosts><a href='<$OlderPosts$>'>OlderPosts <i class="fa fa-arrow-circle-right"></i></a></OlderPosts></span>
</div></div>
<!--------------------------------------Page-About--------------------------------------!>
<div id="about" style="display: none;">
<div class="post">
<div class="about-img"></div>
<div class="post-title">owner . 版主</div>
<div class="date">over here can know more about me <i class="fa fa-heart"></i></div>
<center><img src="https://i.pinimg.com/originals/67/a7/a6/67a7a6b19a15ab1b9df8a83599583d8c.gif" width="40%"></center>
write down your things
</div></div>
<!--------------------------------------Page-Link--------------------------------------!>
<div id="link" style="display: none;">
<div class="post">
<div class="link-img"></div>
<div class="post-title">link . 链接</div>
<div class="date">you can know more friends over here <i class="fa fa-heart"></i></div>
<center><img src="https://i.pinimg.com/originals/2d/41/ef/2d41ef4c38646cd6a053d7f12a010453.gif" width="40%"></center>
<h2>Tutorial and Material</h2>
<center>
<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>
</cetner>
</div></div>
<!--------------------------------------Page-CBox--------------------------------------!>
<div id="cbox" style="display: none;">
<div class="post">
<div class="cbox-img"></div>
<div class="post-title">chatbox . 聊天箱</div>
<div class="date">write down the things that you want to share with me <i class="fa fa-heart"></i></div>
<center><img src="https://i.pinimg.com/originals/20/8a/d6/208ad6bd702b65662ceb29fc8afd51db.gif" width="40%"></center>
put your chatbox here
</div></div>
<!--------------------------------------End--------------------------------------!>
</Blogger>
</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>
