<!--------------------------------------
The Author : https://thesimplywhite-tsw.blogspot.com/
Design Credits : Elizabeteh.tsw
Date Created : 01 July 2026
--------------------------------------!>
<html>
<head>
<link rel="shortcut icon" href="https://64.media.tumblr.com/a058d06a02bef895d8323c5739d435cf/bdb3b85e2d9e762f-ca/s1280x1920/e80371a644b8c42650bd078e354a6a1522b2ebfd.pnj">
<title>the simply white.</title>
<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Prata' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Inter' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Shadows Into Light' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500&display=swap" rel="stylesheet">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
</head>
<style type='text/css'>
#navbar-iframe {
display: none;
}
/*==================================================
01. THEME VARIABLES
==================================================*/
:root{
--sky-blue:#6E99B8;
--cloud-blue:#DAEAF5;
--cloud-border:#A4D0F3;
--cloud-white:#FFFFFF;
}
/*==================================================
02. CUSTOM FONTS
==================================================*/
@font-face{
font-family: b-only;
src:url(https://dl.dropbox.com/s/wfzl0oqqi4g9k4z/TheOnlyException.ttf);
}
@font-face{
font-family: tinytots;
src:url(https://dl.dropbox.com/s/ddjib2ocemkfc73/04B_03_.TTF);
}
/*==================================================
03. GLOBAL
==================================================*/
body {
overflow-y: auto;
font-family: Quicksand;
font-size: 12px;
background:#fff;
}
img {
opacity: .8;
}
a:link, a:visited {
text-decoration: none;
color: #6E99B8;
-webkit-transition-duration: .5s;
}
a:hover {
text-decoration: none;
color: #6E99B8;
-webkit-transition-duration: .5s;
}
b {
text-shadow: 1px 1px 1px #AAA;
}
u {
text-decoration: none;
border-bottom: 1px solid #AAA;
-webkit-transition-duration: 1.5s;
}
u:hover {
color: #888;
text-decoration: none;
border-bottom: 1px solid #fff;
-webkit-transition-duration: 1.5s;
}
strike {
opacity: 1;
-webkit-transition-duration: 1.5s;
}
strike:hover {
opacity: 0;
-webkit-transition-duration: 1.5s
}
/*==================================================
04. TYPOGRAPHY
==================================================*/
.cloud-title {
position: absolute;
top: 120px;
left: 580px;
font-family:'Caveat', cursive;
font-size:70px;
color:var(--sky-blue);
}
.page-title {
color:var(--sky-blue);
text-align: center;
font-family:'Prata', serif;
font-size: 18px;
border-bottom:1px solid var(--cloud-border);
}
.date {
position: absolute;
top: 45px;
right: 600px;
padding-left: 5px;
padding-right: 5px;
opacity: 0;
font-family: Quicksand;
border: 1px solid #fff;
background:#fff;
font-size: 8px;
color: #fff;
text-transform: uppercase;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
-webkit-transition-duration: .7s;
}
.post {
color: #AAA;
line-height: 1.6;
padding: 15px;
letter-spacing: 1px;
}
/*==================================================
05. LAYOUT
==================================================*/
.pic{
height: 190px;
width: 900px;
z-index: -1;
-webkit-transition:0.6s;
}
.header-image{
height:250px;
width:920px;
object-fit:cover;
}
#content {
background: #fff;
font-family: Inter;
display: block;
border: 1px solid transparent;
-moz-border-image: -moz-linear-gradient(top,#A4D0F3);
-webkit-border-image: -webkit-linear-gradient(top, #A4D0F3);
border-image: linear-gradient(bottom,#A4D0F3);
border-image-slice: 1;
width: 625px;
padding: 10px;
position: absolute;
left: 250px;
top: 325px;
height: 600px;
overflow-y: auto;
}
#content:hover .date {
position: absolute;
top: 45px;
right: 25px;
padding-left: 5px;
padding-right: 5px;
opacity: 1;
border: 1px solid #DAEAF5;
background:#DAEAF5;
font-family: Quicksand;
font-size: 8px;
color: #6E99B8;
text-transform: uppercase;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
-webkit-transition-duration: .7s;
}
#post-nav {
width: 625px;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 980px;
}
#post-nav a {
color:var(--sky-blue);
font-size: 9px;
text-decoration: none;
padding: 4px 10px;
border: 1px solid #C6DFF5;
transition: 0.3s;
}
#post-nav a:hover {
background: #DAEAF5;
}
.nav-left {
transform: translateX(250px);
}
.nav-right {
transform: translateX(275px);
}
/*==================================================
06. SIDEBAR
==================================================*/
.cloud-menu-column {
position: absolute;
top: 325px;
left: 935px;
background: #fff;
padding: 5px;
border:1px solid var(--cloud-border);
font-family: Inter;
font-size: 12px;
color: #AAA;
}
.cloud-menu {
font-family: Quicksand;
font-size: 8px;
color:var(--sky-blue);
letter-spacing: 1px;
display: inline-block;
width: 60px;
border: 1px solid #C6DFF5;
padding: 3px;
margin: 10px;
}
.cloud-menu:hover {
background:var(--cloud-blue);
color: #6E99B8;
box-shadow: inset 800px 0 0px 0 #DAEAF5;
-webkit-transition-duration: 1.5s;
}
/*==================================================
07. MUSIC PLAYER
==================================================*/
.music-player {
position: fixed;
top: 0px;
left:50px;
background: #afcbe3;
color: #fff;
font-family: Quicksand;
font-size: 10px;
letter-spacing: 1px;
padding: 5px;
-webkit-transition-duration: .7s;
}
.music-player:hover {
margin-top: 0px;
-webkit-transition-duration: .7s;
}
.music-player:hover .playbox {
top: 0px;
-webkit-transition-duration: .7s;
}
.playbox {
position: fixed;
top: -300px;
left: 0px;
width: 400px;
height: 65px;
padding: 3px;
border: 1px solid #fff;
background: white;
overflow-x: hidden;
z-index: 1000;
-webkit-transition-duration: .7s;
}
/*==================================================
08. COMPONENTS
==================================================*/
a.blog-link {
display: inline-block;
width: 100px;
padding: 3px;
padding-top: 1.5px;
padding-bottom: 1.5px;
margin-bottom: 5px;
font-family: Quicksand;
color: #6E99B8;
text-transform: lowercase;
text-align: center;
border: 1px solid #C6DFF5;
-webkit-transition-duration: .5s;
}
a.blog-link:hover {
background: #DAEAF5;
color: #6E99B8;
box-shadow: inset 800px 0 0px 0 #DAEAF5;
-webkit-transition-duration: .5s;
}
blockquote {
font-size: 11px;
padding: 10px;
border: 1px solid #A4D0F3;
-webkit-transition-duration: 1.5s;
}
blockquote:hover {
border: 1px solid #fff;
background: #DAEAF5;
color: #6E99B8;
box-shadow: inset 800px 0 0px 0 #DAEAF5;
-webkit-transition-duration: 1.5s;
}
/*==================================================
09. EFFECTS
==================================================*/
::-moz-selection {
background: #A4D0F3;
color: #A4D0F3;
}
::selection {
background: #A4D0F3;
color: #A4D0F3;
}
::-webkit-scrollbar {
width: 14px;
height: 7px;
}
::-webkit-scrollbar-track-piece {
background-color: #fff;
border: 0px solid #fff;
}
::-webkit-scrollbar-thumb:vertical,
::-webkit-scrollbar-thumb:horizontal {
background-color: #E6F1FA;
border: 5px solid #fff;
}
/*==================================================
10. CLOUD DECORATION
==================================================*/
.cloud1 {
position: absolute;
top: 200px;
left: -100px;
width: 900px;
opacity: 0.5;
}
.cloud2 {
position: absolute;
top: 350px;
left: 650px;
width: 1000px;
opacity: 0.5;
}
/*==================================================
11. CUSTOM LAYOUT
==================================================*/
.cloud-header{
position:absolute;
top:40px;
left:250px;
}
.profile-sidebar{
top:325px;
width:205px;
padding:15px;
height:270px;
}
.navigation-sidebar{
top:660px;
width:225px;
}
/*==================================================
12. PROFILE COMPONENTS
==================================================*/
.profile-text{
font-size:10px;
font-family:Quicksand;
}
.profile-social{
text-align:center;
padding:20px;
}
.profile-label{
font-size:10px;
color:#999;
}
.profile-value{
color:var(--sky-blue);
}
.profile-credit{
font-size:8px;
line-height:1.6;
}
</style>
<body>
<blogger>
<!----------------------------------
BACKGROUND CLOUD
----------------------------------->
<img src="https://i.pinimg.com/webp85/736x/0d/09/6e/0d096edcfbcc0b54a3aa6d11db5a2a9c.webp" class="cloud1">
<img src="https://i.pinimg.com/webp85/736x/0d/09/6e/0d096edcfbcc0b54a3aa6d11db5a2a9c.webp" class="cloud2">
<!----------------------------------
HEADER
----------------------------------->
<center>
<div class="cloud-header">
<div class="pic"><img src="https://64.media.tumblr.com/c5d7fc031fc79e2ca0814008f4f3eb73/a29b44ae471f60e1-ca/s2048x3072/c144f49316abc41247b20e9bbe259dc89668a142.jpg" class="header-image">
</center>
<div class='cloud-title'>cloudscape.</div>
</div>
<!----------------------------------
PROFILE SIDEBAR
----------------------------------->
<div class="cloud-menu-column profile-sidebar">
<center>
<br>
<img src="https://i.pinimg.com/originals/94/99/34/949934d8ca8691dda0201aa1b6504233.gif" width="180" />
<br>
<br>
<div class="profile-text">
“留言板：目前的心态”
<br>
<br>
日期
</div>
<div class="profile-social">
<a href="https://www.facebook.com/ElizabethTengShinwei/" target="_blank">
<img src="https://64.media.tumblr.com/db88db6d55ac09b07e14e81d90f71214/295d90a2b82664b2-bb/s1280x1920/2bd4e57acbbaee80612bf7b91c73753b88edc7c0.png" width="20" />
</a>
<a href="https://www.instagram.com/elizabeth.tsw/?hl=zh-cnD" target="_blank">
<img src="https://64.media.tumblr.com/632a04992af0a9877bce4784935fcc07/295d90a2b82664b2-00/s1280x1920/f160d3e5b271e40d1f2f4e2a238e4662dbd21535.png" width="20" />
</a>
<a href="https://www.tumblr.com/blog/thesimplywhite" target="_blank">
<img src="https://64.media.tumblr.com/f039e318e9ce6abb1b00b75bbf23d5a2/295d90a2b82664b2-6c/s1280x1920/74b68cc043a83e45273d778a03f5624911503817.pnj" width="20" />
</a>
<a href="https://www.xiaohongshu.com/user/profile/5cf354620000000016011d5c?xhsshare=CopyLink&appuid=5cf354620000000016011d5c&apptime=1627533166" target="_blank">
<img src="https://64.media.tumblr.com/d44db3e93e2c959398d0bf1e0d8d901f/295d90a2b82664b2-83/s1280x1920/c286d616cfdbfb561529d84a8c4a3f77d7c46730.png" width="20" />
</a>
<br>
<br>
<div class="profile-credit">
© Cloud Scape Theme v1.0
<br>
Designed & Coded by <a href="http://thesimplywhite-tsw.blogspot.com/">Elizabeth.tsw</a>
</div>
</div>
</div>
<!----------------------------------
NAVIGATION
----------------------------------->
<div class="cloud-menu-column navigation-sidebar">
<br>
<center>
<div class='cloud-menu' onClick="document.getElementById('content').innerHTML=document.getElementById('posts').innerHTML" title=""> HOME</div>
<div class='cloud-menu' onClick="document.getElementById('content').innerHTML=document.getElementById('profile').innerHTML" title="">PROFILE</div>
<br>
<div class='cloud-menu' onClick="document.getElementById('content').innerHTML=document.getElementById('links').innerHTML" title="">LINK</div>
<div class='cloud-menu' onClick="document.getElementById('content').innerHTML=document.getElementById('cbox').innerHTML" title="">CBOX</div>
<br>
<div class='cloud-menu'><a href='https://www.blogger.com/home'>DASHBOARD</a></div>
<div class='cloud-menu'><a href='http://www.blogger.com/follow-blog.g?blogID=2891868761963301317'>FOLLOW</a></div>
<br>
<br>
</center>
</div>
<!----------------------------------
MUSIC PLAYER
----------------------------------->
<div class='music-player'> PLAY MUSIC HERE
<div class='playbox'>
<center>
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-e55b53f6-6886-4d6f-9dcf-c242d41b39dd"></div>
</center>
</div>
</div>
<!----------------------------------
MAIN CONTENT
----------------------------------->
<div id='content'>
<div class='post'>
<div class='page-title'><$BlogItemTitle$>.</div>
<br>
<br>
<BlogItemBody><$BlogItemBody$></BlogItemBody>
<div class='date'>
<BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div>
<br>
<br>
</div>
</div>
<!----------------------------------
POST
----------------------------------->
<div id="posts" style="display: none;">
<div class='post'>
<center>
<div class='page-title'><$BlogItemTitle$>.</div></center>
<br>
<br>
<BlogItemBody><$BlogItemBody$></BlogItemBody>
<div class='date'>
<BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div>
</div>
</div>
<div id="post-nav">
<div class="nav-left">
<OlderPosts><a href='<$OlderPosts$>'>← OLDER POSTS</a></OlderPosts>
</div>
<div class="nav-right">
<NewerPosts><a href='<$NewerPosts$>'>NEWER POSTS →</a></NewerPosts>
</div>
</div>
<!----------------------------------
HIDDEN PAGES : PROFILE
----------------------------------->
<div id="profile" style="display: none;">
<div class='post'>
<div class='page-title'>About Me.</div>
</div>
</div>
<!----------------------------------
HIDDEN PAGES : CBOX
----------------------------------->
<div id="cbox" style="display: none;">
<div class='post'>
<div class='page-title'>Messages.</div>
</div>
</div>
<!----------------------------------
HIDDEN PAGES : LINK
----------------------------------->
<div id="links" style="display: none;">
<div class='post'>
<div class='page-title'>Resources.</div>
<br>
<br>
<center>
<span style="color: #6e99b8; font-family: Prata; font-size: small;">
<span style="text-align: left;">TURORIALS & MATERIALS :</span>
</span>
</center>
<br/>
<center>
<a class='blog-link' href=''>LINK</a>
<a class='blog-link' href=''>LINK</a>
<a class='blog-link' href=''>LINK</a>
<a class='blog-link' href=''>LINK</a>
<br>
<a class='blog-link' href=''>LINK</a>
<a class='blog-link' href=''>LINK</a>
<a class='blog-link' href=''>LINK</a>
<a class='blog-link' href=''>LINK</a>
<br>
<br>
<br>
<br>
</center>
<center>
<span style="color: #6e99b8; font-family: Prata; font-size: small;">
<span style="text-align: left;">DAIRY & STORY :</span>
</span>
</center>
<br/>
<center>
<a class='blog-link' href=''>LINK</a>
<a class='blog-link' href=''>LINK</a>
<a class='blog-link' href=''>LINK</a>
<a class='blog-link' href=''>LINK</a>
<br>
<a class='blog-link' href=''>LINK</a>
<a class='blog-link' href=''>LINK</a>
<a class='blog-link' href=''>LINK</a>
<a class='blog-link' href=''>LINK</a>
<br>
<br>
<br>
<br>
</center>
</div>
</div>
</div>
</blogger>
</body>
</html>