CODE.SIMPLE PINK
</*-----------------------------------------------
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-simplepink</title><style></head>
<!-- Social Media Icon --!>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google Fonts --!>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Alegreya" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Marck+Script" rel="stylesheet">
<style type="text/css">
#navbar-iframe {
display: none;
}
/* Body
----------------------------------------------- */
body {
background: #FFF;
color: #000;
font-family: Playfair Display;
font-size: 12px;
letter-spacing: 1px;
text-align: justify;
margin: 0px;
}
/* Header
----------------------------------------------- */
.header {
background: url(https://pbs.twimg.com/media/HJUlJ_haQAEGpX9?format=jpg&name=4096x4096) no-repeat;
background-position: 100% 65%;
background-size: 100%;
height: 150px;
width: 100%;
text-align: center;
padding-top: 160px;
}
.header-text {
color: #FF4070;
width: 40%;
font-family: Marck Script;
font-size: 90px;
line-height: 65px;
text-align: center;
text-transform: lowercase;
margin-top: -50px;
margin-left: 400px;
border: 2px solid #000;
}
/* Navigator
---------------------------------------------*/
.navigation-box {
width: 100%;
text-align: center;
margin-top: 100px;
}
.navigation-box a.navi {
display: inline-block;
background: #FFC9C9;
width: 10%;
font-size: 12px;
text-transform: uppercase;
padding: 5px;
margin: 5px;
}
.navigation-box a:hover {
background: #FFF;
color: #FFC9C9;
}
/* Blog
----------------------------------------------- */
.blog-body {
background: #fff;
padding: 30px;
margin-top: 100px;
}
.post {
float: left;
width: 60%;
margin-left: 5%;
margin-bottom: 30px;
}
.post-title {
background: #FF9E9E;
font-size: 20px;
line-height: 25px;
text-align: center;
text-transform: uppercase;
padding: 5px;
}
.small-title {
font-size: 10px;
text-align: center;
text-transform: uppercase;
margin-bottom: 50px;
}
.post-content {
letter-spacing: 1px;
text-align: justify;
margin-top: 20px;
margin-bottom: 40px;
}
.blogger-labels{
background: #FFDEDE;
font-size: 10px;
text-align: center;
text-transform: uppercase;
padding: 2px;
margin-top: 20px;
}
/* Sidebar
----------------------------------------------- */
.sidebar {
float:right;
width: 25%;
text-align: justify;
margin-right: 5%;
}
/*--Sidebar Title--*/
h2 {
background: #FF9E9E;
font-size: 20px;
font-weight: normal;
line-height: 25px;
text-align: center;
text-transform: uppercase;
padding: 5px;
margin-top: 0px;
}
#contact{
height: 40px;
width: 25%;
font-size: 20px;
padding-top: 30px;
margin-bottom: 5px;
}
/* Music Player
----------------------------------------------- */
.b-musicbox {
position: fixed;
background: #FFF;
width: 100px;
top: -1px;
right: 100px;
font-size: 12px;
text-align: center;
letter-spacing: 1px;
padding: 10px;
border: 1px solid #FFC9C9;
-webkit-transition-duration: .7s;
}
.b-musicbox:hover {
margin-top: -50px;
-webkit-transition-duration: .7s;
}
.b-musicbox:hover .playbox {
top: 5px;
-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;
}
/* Link
---------------------------------------------*/
a:link,a:visited {
text-decoration: none;
color: #000;
padding: 4px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
a:hover {
color: #ccc;
}
.link2 {
display: inline-block;
background: #FFF;
color: #FFF;
width: 20%;
font-size: 11px;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
padding: 10px;
margin: 3px;
border: 2px solid #FFDEDE;
-webkit-transition-duration: 3.5s;
}
.link2:hover {
background: #FFC9C9;
color: #FFF;
box-shadow: unset 0px 0px 20px 10px #FF9E9E;
-webkit-transition-duration: .7s;
}
/* Scrollbar
----------------------------------------------- */
::-webkit-scrollbar {
background: #FFF;
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #FFC9C9;
border: 1px solid #FFF;
border-radius: 10px;
-moz-border-radius: 10px;
}
/* Tooltip
----------------------------------------------- */
#s-m-t-tooltip {
display: block;
background: #FFF;
color: #000;
font-size: 12px;
line-height: 2px;
text-transform: uppercase;
padding: 15px;
margin: 20px;
border: 2px solid #FFC9C9;
box-shadow: #E0E0E0;
z-index: 999;
}
/* Text Effect
----------------------------------------------- */
u {
text-decoration: none;
border-bottom: 2px solid #FFC9C9;
}
::-moz-selection {
background: #FFB5B5;
color: #FFF;
}
::selection {
background: #FFB5B5;
color: #FFF;
}
blockquote {
padding: 6px;
border: 1px solid #000;
-webkit-transition-duration: 0.8s;
}
blockquote:hover {
border: 1px solid #FFF;
box-shadow: inset 2000px 0 0px 0 #FFC9C9;
-webkit-transition-duration: 1.5s;
}
</style>
<body>
<!--------------------------------------Music Player--------------------------------------!>
<div class='b-musicbox'>Music Here
<div class='playbox'>
<iframe width="260" height="160" src="https://www.youtube.com/embed/shT_5n3uJd0?si=H4yr80d1eqUy4oS9" 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--------------------------------------!>
<div class="header">
<div class="header-text">pink<br>
<div style="font-family: Alegreya; font-size: 55px; text-transform:uppercase; color: #000; ">girl</div></div>
<div class="navigation-box">
<a class="navi" onClick="document.getElementById('content').innerHTML=document.getElementById('entry').innerHTML" title="页面文章">entry</a>
<a class="navi" onClick="document.getElementById('content').innerHTML=document.getElementById('about').innerHTML" title="个人简介">about</a>
<a class="navi" onClick="document.getElementById('content').innerHTML=document.getElementById('link').innerHTML" title="朋友链接">link</a>
<a class="navi" onClick="document.getElementById('content').innerHTML=document.getElementById('chatbox').innerHTML" title="留言箱">chatbox</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>
<!--------------------------------------Post--------------------------------------!>
<div class="blog-body"><div id="content" class="post"><blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<center><span class="small-title"><span class="fa fa-calendar"></span> <$BlogItemDateTime$> | <span class="fa fa-comments"></span> comments-<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$></a></span></center>
<div class="post-content"><$BlogItemBody$></div></blogger>
<span style="float:right;"><olderposts><a href=<$OlderPosts$>><span class="fa fa-arrow-right"></span></a></a> </OlderPosts></span>
<span style="float:rleft;"><newerposts><a href=<$NewerPosts$>> <span class="fa fa-arrow-left"></span></a></NewerPosts></span></div>
<!--------------------------------------Sidebar--------------------------------------!>
<div class="sidebar">
<h2>the author</h2>
<img src="https://capthathinh.com/wp-content/uploads/2026/03/anh-anime-girl-1.jpg" width="100%" title="啾咪"><br><br>
<h2>contact</h2>
<center>
<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><br></div>
<!-------------------Entry------------------!>
<div id="entry" style="display: none;"><blogger>
<div class="post-title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<center><span class="small-title"><span class="fa fa-calendar"></span> <$BlogItemDateTime$> | <span class="fa fa-comments"></span> comments-<a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$></a></span></center>
<div class="post-content"><$BlogItemBody$></div></blogger>
<span style="float:right;"><olderposts><a href=<$OlderPosts$>><span class="fa fa-arrow-right"></span></a></a> </OlderPosts></span>
<span style="float:rleft;"><newerposts><a href=<$NewerPosts$>> <span class="fa fa-arrow-left"></span></a></NewerPosts></span></div>
<!-------------------About------------------!>
<div id="about" style="display: none;">
<div class="post-title">About The Owner</div>
<div class="small-title"><i class="fa fa-heart" aria-hidden="true"></i> The Only Boss At Here</div><br>
Write your things here
</div>
<!-------------------Link------------------!>
<div id="link" style="display: none;">
<div class="post-title">Other Blogger</div>
<div class="small-title"><i class="fa fa-link" aria-hidden="true"></i> You Can Knew More Friends</div><br>
<b>FRIENDS . 朋友</b><br><br>
<center>
<a class='link2' a.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>
<a class='link2' href="" target="_blank">link2</a>
<a class='link2' href="" target="_blank">link2</a>
</center>
</div>
<!-------------------Chatbox------------------!>
<div id="chatbox" style="display: none;">
<div class="post-title">Comment</div>
<div class="small-title"><i class="fa fa-commenting-o" aria-hidden="true"></i> Write Down What You Wanna Say</div><br>
<b>Credit</b><br><br>
Template made by <a href="https://karren-yeoh.blogspot.com" target="_blank">Karrenyeoh</a>.<br>
Redesigned by <a href="" target="_blank">Your Name</a>.<br>
Best viewed in <a href="https://www.google.com" target="_blank">Google</a>.<br><br><br>
<b>Chatbox</b><br><br>
<u>Put your chatbox here<u/>
</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>
