607 lines
14 KiB
Plaintext
607 lines
14 KiB
Plaintext
<!-----------------------------------------------------------------------
|
|
About Page [05]: Deceit
|
|
Made by glenthemes
|
|
|
|
Initial release: 2018/08/11
|
|
Last updated: 2022/09/14
|
|
|
|
TERMS OF USE:
|
|
1) Do not remove the theme credit.
|
|
2) Do not repost/redistribute my themes.
|
|
3) Do not take parts of the code and use it as your own.
|
|
4) Do not use my themes as a base code.
|
|
5) Do not mix my themes together.
|
|
|
|
Please stick to the TOU! Make 9S proud.
|
|
------------------------------------------------------------------------>
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
|
|
<head>
|
|
|
|
<title>{Title}</title>
|
|
|
|
<link rel="shortcut icon" href="{Favicon}">
|
|
|
|
<!--------------------JAVASCRIPTS-------------------->
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
|
|
<script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
|
|
<script>
|
|
(function($){
|
|
$(document).ready(function(){
|
|
$("a[title]").style_my_tooltips({
|
|
tip_follows_cursor:true,
|
|
tip_delay_time:0,
|
|
tip_fade_speed:250,
|
|
attribute:"title"
|
|
});
|
|
});
|
|
})(jQuery);
|
|
</script>
|
|
|
|
<script src ="//static.tumblr.com/2pnwama/HGEpacv22/hearts.js"></script>
|
|
|
|
<link href="//fonts.googleapis.com/css?family=Inconsolata|Quicksand:400,500|Source+Code+Pro|Unica+One" rel="stylesheet">
|
|
|
|
<!-------------------------------------------------------------------->
|
|
|
|
<style type="text/css">
|
|
|
|
/*-------------------TOOLTIPS--------------------*/
|
|
#s-m-t-tooltip {
|
|
padding: 3.5px 9px;
|
|
margin: 26px 9px 0px 15px;
|
|
background-color: #333; /* tooltip background color */
|
|
font-family: quicksand;
|
|
font-size: 9px;
|
|
text-transform: uppercase;
|
|
letter-spacing:1px;
|
|
color: #eee; /* tooltip text color */
|
|
z-index:99999999999999999999999999998!important;
|
|
max-width: 40vw;
|
|
-webkit-transition: all 0.3s ease-in-out;
|
|
-moz-transition: all 0.3s ease-in-out;
|
|
-o-transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
/*--------------------TUMBLR CONTROLS--------------------*/
|
|
iframe#tumblr_controls, .iframe-controls--desktop {
|
|
top:7px!important;
|
|
right:7px!important;
|
|
position:fixed!important;
|
|
|
|
/* delete the next 2 lines to have white tumblr controls */
|
|
filter:invert(100%) hue-rotate(180deg);
|
|
-webkit-filter:invert(100%) hue-rotate(180deg);
|
|
|
|
transform:scale(0.7,0.7);
|
|
-webkit-transform:scale(0.7,0.7);
|
|
|
|
transform-origin:100% 0;
|
|
z-index:999999!important;
|
|
}
|
|
|
|
/*--------------------TEXT HIGHLIGHT--------------------*/
|
|
::selection {
|
|
background:#fafafa;
|
|
color:#555;
|
|
}
|
|
|
|
::-moz-selection {
|
|
background:#fafafa;
|
|
color:#555;
|
|
}
|
|
|
|
/*--------------------BASICS--------------------*/
|
|
body {
|
|
background-color:#fdfdfd; /* background color */
|
|
background-image:url(''); /* background image URL */
|
|
background-attachment:fixed;
|
|
background-repeat:repeat;
|
|
color:#888; /* body text color */
|
|
cursor:normal;
|
|
font-family:source code pro;
|
|
line-height:1.6em;
|
|
font-size:12px;
|
|
text-align:left;
|
|
overflow:hidden;
|
|
}
|
|
|
|
blockquote {
|
|
padding-left:10px;
|
|
margin-left:5px;
|
|
border-left:1px solid;
|
|
border-color:#aaa;
|
|
margin:10px;
|
|
}
|
|
|
|
a {
|
|
color:#000;
|
|
text-decoration:none;
|
|
-webkit-transition: all 0.4s ease-in-out;
|
|
-moz-transition: all 0.4s ease-in-out;
|
|
-o-transition: all 0.4s ease-in-out;
|
|
}
|
|
|
|
b, strong {
|
|
font-weight:bold;
|
|
color:#555;
|
|
}
|
|
|
|
pre, code {
|
|
white-space:pre-wrap;
|
|
display:block;
|
|
}
|
|
|
|
hr {
|
|
width:70%;
|
|
border-width:0px;
|
|
height:1px;
|
|
background-color:#bbb;
|
|
}
|
|
|
|
/*--------------------EVERYTHING--------------------*/
|
|
/* best not to touch this section */
|
|
#wrappy {
|
|
position:fixed;
|
|
top:50%;left:50%;
|
|
transform:translate(-50%,-50%);
|
|
|
|
width:calc(200px + 40px + 200px + 100px + 500px);
|
|
/* yorha icon + gap1 + bars + gap2 + bio box */
|
|
|
|
display:flex;
|
|
}
|
|
|
|
|
|
/*--------------------LEFT CONTENT--------------------*/
|
|
#left {
|
|
-webkit-align-self:center;
|
|
align-self:center;
|
|
}
|
|
|
|
#topwrap1 {display:flex;}
|
|
|
|
/*----LEFT IMAGE----*/
|
|
#yorha {
|
|
vertical-align:middle;
|
|
-webkit-align-self:center;
|
|
align-self:center;
|
|
width:200px; /* please do not make it larger */
|
|
}
|
|
|
|
#sbstats {
|
|
-webkit-align-self:center;
|
|
align-self:center;
|
|
margin-left:40px;
|
|
}
|
|
|
|
/*----STATISTICS BARS----*/
|
|
.statbar {
|
|
margin-top:15px;
|
|
width:calc(200px - 1px);
|
|
height:8px;
|
|
background-color:#fbfbfb; /* empty color */
|
|
border:0.5px solid #222; /* whole bar border */
|
|
overflow:hidden;
|
|
}
|
|
|
|
.statbar:first-child {margin-top:0px;}
|
|
|
|
.statfill {
|
|
margin-top:0px;
|
|
margin-left:0px;
|
|
height:inherit;
|
|
background-color:#222; /* fill color */
|
|
}
|
|
|
|
.bar-label {
|
|
margin-top:8px;
|
|
font-family:source code pro;
|
|
font-size:8px;
|
|
text-transform:uppercase;
|
|
color:#999; /* bar label text color */
|
|
line-height:1em;
|
|
}
|
|
|
|
/*----STATISTICS TABLE----*/
|
|
#stat-table {
|
|
margin-top:20px;
|
|
font-family:source code pro;
|
|
font-size:9px;
|
|
text-transform:uppercase;
|
|
letter-spacing:0.5px;
|
|
color:#999; /* statistics table text color */
|
|
line-height:1.5em;
|
|
}
|
|
|
|
#stat-table table {
|
|
margin:-6px -17px;
|
|
border-spacing:17px 6px;
|
|
}
|
|
|
|
#stat-table tr {
|
|
vertical-align:top;
|
|
}
|
|
|
|
/*----CUSTOM LINKS----*/
|
|
#c-title {
|
|
/* best not to touch the next 2/3 lines */
|
|
margin-top:30px;
|
|
width:calc((200px + 40px + 200px) - 24px);
|
|
/* leftwidth - leftright padding - border */
|
|
|
|
background-color:#f9f9f9; /* custom links title background color */
|
|
padding:12px;
|
|
font-family:quicksand;
|
|
text-transform:uppercase;
|
|
letter-spacing:2px;
|
|
font-weight:500;
|
|
font-size:11px;
|
|
color:#aaa6ac; /* custom links title color */
|
|
line-height:1em;
|
|
text-align:center;
|
|
}
|
|
|
|
/* best not to touch this section */
|
|
#c-links {
|
|
margin-top:12px;
|
|
margin-left:-2px;
|
|
width:calc(100% + 6px);
|
|
}
|
|
|
|
#c-links a {
|
|
/* best not to touch the next 3 lines */
|
|
display:inline-block;
|
|
margin:5px 2px;
|
|
width:calc(25% - 6px - (4px * 6));
|
|
|
|
background-color:#f9f9f9; /* custom links background color */
|
|
padding:6px 10px;
|
|
font-family:quicksand;
|
|
text-transform:uppercase;
|
|
letter-spacing:2px;
|
|
font-weight:500;
|
|
font-size:9px;
|
|
color:#aaa6ac; /* custom links text color */
|
|
text-align:center;
|
|
}
|
|
|
|
#c-links a:hover {
|
|
background-color:#f4f4f4; /* custom links background hover color */
|
|
}
|
|
|
|
/*--------------------RIGHT--------------------*/
|
|
/* best not to touch the first 3 sections */
|
|
#right {
|
|
-webkit-align-self:center;
|
|
align-self:center;
|
|
}
|
|
|
|
#righteo {
|
|
margin-left:100px;
|
|
width:500px;
|
|
}
|
|
|
|
#titlewrap {
|
|
display:flex;
|
|
line-height:1em;
|
|
margin-bottom:-1px;
|
|
}
|
|
|
|
/*----BIOGRAPHY TITLE----*/
|
|
#maintitle {
|
|
font-family:unica one;
|
|
text-transform:uppercase;
|
|
letter-spacing:2px;
|
|
font-weight:500;
|
|
font-size:20px;
|
|
color:#555; /* biography box title color */
|
|
text-align:left;
|
|
}
|
|
|
|
/* flashing text input underline */
|
|
.input {
|
|
margin-top:1em;
|
|
margin-left:0.5ch;
|
|
width:10px;
|
|
height:1.5px;
|
|
background-color:#555; /* flashing input line color */
|
|
animation: flashing 1s step-start 0s infinite;
|
|
-webkit-animation: flashing 1s step-start 0s infinite;
|
|
-moz-animation: flashing 1s step-start 0s infinite;
|
|
}
|
|
|
|
@keyframes flashing {
|
|
50% {opacity:0;}
|
|
}
|
|
|
|
@-webkit-keyframes flashing {
|
|
50% {opacity:0;}
|
|
}
|
|
|
|
@-moz-keyframes flashing {
|
|
50% {opacity:0;}
|
|
}
|
|
|
|
/*----BIOGRAPHY BOX----*/
|
|
#mainbox {
|
|
margin-top:20px;
|
|
height:400px; /* box height */
|
|
padding:25px;
|
|
background-color:#fafafa; /* box background color */
|
|
border:1px solid #f2f2f2; /* box border */
|
|
}
|
|
|
|
.sbimage {
|
|
float:right;
|
|
margin-left:25px;
|
|
height:100%;
|
|
}
|
|
|
|
.bio {
|
|
max-height:100%;
|
|
padding-right:10px;
|
|
overflow:auto;
|
|
font-family:inconsolata;
|
|
font-size:12px;
|
|
color:#aaa; /* biography text color */
|
|
line-height:1.9em;
|
|
text-align:justify;
|
|
}
|
|
|
|
.bio a {
|
|
padding-bottom:1px;
|
|
border-bottom:1px solid #ddd; /* biography links bottom border */
|
|
color:#333; /* biography links color */
|
|
}
|
|
|
|
/*----BIOGRAPHY BULLET POINTS----*/
|
|
.bullet-line {
|
|
display:flex;
|
|
margin-bottom:5px;
|
|
}
|
|
|
|
.bullet-line:last-of-type {margin-bottom:0px;}
|
|
|
|
.bio .cursor {
|
|
-webkit-align-self:center;
|
|
align-self:center;
|
|
width:22px; /* width of bullet point icon */
|
|
}
|
|
|
|
.bullet-text {
|
|
margin-left:12px;
|
|
}
|
|
|
|
.bullet-text name {
|
|
text-transform:uppercase;
|
|
letter-spacing:1px;
|
|
color:#222; /* bullet point label color */
|
|
}
|
|
|
|
.bio::-webkit-scrollbar {
|
|
background-color:#fafafa; /* biography scrollbar background color */
|
|
height:13px;
|
|
width:13px;
|
|
}
|
|
|
|
.bio::-webkit-scrollbar-thumb {
|
|
background-color:#ccc; /* biography scrollbar color */
|
|
border:6px solid #fafafa; /* biography scrollbar background color */
|
|
}
|
|
|
|
.bio::-webkit-scrollbar-track {
|
|
background-color:#fafafa; /* biography scrollbar background color */
|
|
}
|
|
|
|
.bio p:last-child {margin-bottom:0px;}
|
|
|
|
/*--------------------MUSIC PLAYER--------------------*/
|
|
#glenjamin {
|
|
position:fixed;
|
|
bottom:0;margin-bottom:20px;
|
|
left:0;margin-left:20px;
|
|
display:flex;
|
|
z-index:2;
|
|
}
|
|
|
|
.buttoms {cursor:pointer;}
|
|
|
|
.playy, .pausee {
|
|
font-size:13px;
|
|
color:#111; /* audio buttons color */
|
|
}
|
|
|
|
.pausee {
|
|
display:none;
|
|
margin-right:1.5px;
|
|
}
|
|
|
|
.sonata {
|
|
margin-left:10px;
|
|
color:#111; /* music icon color */
|
|
}
|
|
|
|
.labeltext {
|
|
margin-left:8px;
|
|
font-family:courier new;
|
|
font-size:9px;
|
|
color:#111; /* music text color */
|
|
}
|
|
|
|
/*---------------CREDIT. PLEASE DO NOT REMOVE---------------*/
|
|
#glencred {
|
|
position:fixed;
|
|
bottom:0;margin-bottom:20px;
|
|
right:0;margin-right:20px;
|
|
font-family:quicksand;
|
|
text-transform:uppercase;
|
|
letter-spacing:2px;
|
|
font-weight:500;
|
|
font-size:8px;
|
|
color:#999; /* credit link color */
|
|
z-index:10;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!---- CREDIT. PLESAE DO NOT REMOVE! THANKS! ---->
|
|
<a id="glencred" href="//glenthemes.tumblr.com" title="page by glenthemes">glenthemes</a>
|
|
|
|
<!---- MUSIC PLAYER ---->
|
|
<div id="glenjamin">
|
|
<div class="buttoms" onclick="kaishi();">
|
|
<a title="play music"><div class="playy">►</div></a>
|
|
<a title="pause music"><div class="pausee">❚❚</div></a>
|
|
</div><!--please do not delete this line-->
|
|
|
|
<div class="sonata">♫</div>
|
|
|
|
<!--music name-->
|
|
<div class="labeltext">Fortress of Lies</div>
|
|
</div><!--please do not delete this line-->
|
|
|
|
|
|
<!-- music track URL -->
|
|
<!-- put the music link between "" of src="" -->
|
|
<!-- tutorial: linktr.ee/direct_file_links -->
|
|
<audio id="tune" src="https://rhizo.gitlab.io/nier/Fortress_of_Lies.mp3" onended="restart();" type="audio"></audio>
|
|
|
|
<div id="wrappy">
|
|
|
|
<div id="left">
|
|
<div id="topwrap1">
|
|
|
|
<!---- LEFT SIDEBAR IMAGE ---->
|
|
<img id="yorha" src="//78.media.tumblr.com/3da643846a21e88a3860ed0998436e02/tumblr_pd5bleZa0f1qg2f5co4_r1_540.png">
|
|
|
|
|
|
<!---- STATISTICS BARS ---->
|
|
<div id="sbstats">
|
|
<!---- ONE BAR ---->
|
|
<div class="statbar">
|
|
<div class="statfill" style="width:70%"></div>
|
|
</div>
|
|
|
|
<div class="bar-label">> Lv. 99</div>
|
|
|
|
<!---- ONE BAR ---->
|
|
<div class="statbar">
|
|
<div class="statfill" style="width:30%"></div>
|
|
</div>
|
|
|
|
<div class="bar-label">> 999,999 EXP</div>
|
|
|
|
|
|
<!---- STATISTICS BARS ---->
|
|
<div id="stat-table">
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>Vitals:</td>
|
|
<td>Green</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Black Box Temp.:</td>
|
|
<td>Normal</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Remaining Energy:</td>
|
|
<td>100%</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>System Check:</td>
|
|
<td>Complete</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div><!--stat-table-->
|
|
|
|
</div><!--sbstats--><!--please do not delete this line-->
|
|
</div><!--topwrap1--><!--please do not delete this line-->
|
|
|
|
|
|
<!---- CUSTOM LINKS TITLE ---->
|
|
<div id="c-title">systems directory</div>
|
|
|
|
|
|
<!---- CUSTOM LINKS ---->
|
|
<div id="c-links">
|
|
<a href="/">link one</a>
|
|
<a href="/">link two</a>
|
|
<a href="/">link three</a>
|
|
<a href="/">link four</a>
|
|
<a href="/">link five</a>
|
|
<a href="/">link six</a>
|
|
<a href="/">link seven</a>
|
|
<a href="/">link eight</a>
|
|
</div>
|
|
</div><!--left--><!--please do not delete this line-->
|
|
|
|
|
|
|
|
<div id="right">
|
|
<div id="righteo">
|
|
<div id="titlewrap">
|
|
|
|
<!-- biography box title -->
|
|
<div id="maintitle">YoRHa No.9 Type S</div>
|
|
|
|
<div class="input"></div>
|
|
</div><!--please do not delete this line-->
|
|
|
|
<div id="mainbox">
|
|
|
|
<!--biography box sidebar image-->
|
|
<img class="sbimage" src="//78.media.tumblr.com/09c8bc923af499dcf667365c738d9981/tumblr_pd5bleZa0f1qg2f5co5_r1_400.png">
|
|
|
|
<div class="bio">
|
|
here lies your text
|
|
|
|
<p>
|
|
|
|
<!---- ONE BULLET POINT ---->
|
|
<div class="bullet-line">
|
|
<img class="cursor" src="https://static.tumblr.com/snld4jp/3Dsri7q7g/select_cursor_svg.svg">
|
|
<div class="bullet-text">
|
|
<name>Age:</name> 2-3 years
|
|
</div><!--please do not delete this line-->
|
|
</div><!--please do not delete this line-->
|
|
|
|
<!---- ONE BULLET POINT ---->
|
|
<div class="bullet-line">
|
|
<img class="cursor" src="https://static.tumblr.com/snld4jp/3Dsri7q7g/select_cursor_svg.svg">
|
|
<div class="bullet-text">
|
|
<name>Race:</name> YoRHa Android
|
|
</div><!--please do not delete this line-->
|
|
</div><!--please do not delete this line-->
|
|
|
|
<!---- ONE BULLET POINT ---->
|
|
<div class="bullet-line">
|
|
<img class="cursor" src="https://static.tumblr.com/snld4jp/3Dsri7q7g/select_cursor_svg.svg">
|
|
<div class="bullet-text">
|
|
<name>Occupation:</name> YoRHa Scanning Unit
|
|
</div><!--please do not delete this line-->
|
|
</div><!--please do not delete this line-->
|
|
|
|
<p>
|
|
|
|
Your biography text goes here!
|
|
</div><!--bio->
|
|
</div><!--mainbox-->
|
|
</div><!--righteo--><!--please do not delete this line-->
|
|
</div><!--right--><!--please do not delete this line-->
|
|
|
|
</div><!--wrappy--><!--please do not delete this line-->
|
|
</body>
|
|
|
|
</html> |