₊⁺✿˚
This commit is contained in:
parent
796b0f38a9
commit
22baaaef61
|
@ -0,0 +1,607 @@
|
|||
<!-----------------------------------------------------------------------
|
||||
About Page [05]: Deceit
|
||||
Made by glenthemes
|
||||
|
||||
Initial release: 2018/08/11
|
||||
Last updated: 2021/10/21
|
||||
|
||||
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://cdn.discordapp.com/attachments/900670626774265886/900686954683858944/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://cdn.discordapp.com/attachments/900687444435947571/900687468087635968/nier_cursor.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://cdn.discordapp.com/attachments/900687444435947571/900687468087635968/nier_cursor.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://cdn.discordapp.com/attachments/900687444435947571/900687468087635968/nier_cursor.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>
|
Loading…
Reference in New Issue