1019 lines
25 KiB
Plaintext
1019 lines
25 KiB
Plaintext
<!-----------------------------------------------------------------------
|
|
About Page [10]: Statice
|
|
Made by glenthemes
|
|
|
|
Initial release: 2019/02/16
|
|
Last updated: 2023/10/05
|
|
|
|
What's new:
|
|
✱ fixed squashed play/pause buttons
|
|
✱ rehosted some images
|
|
|
|
TERMS OF USE:
|
|
1) Do not remove the page 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 Terms! Thank you ^-^
|
|
Here is the help guide!
|
|
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
|
|
docs.google.com/document/d/10qXOhdwPVxS15snK7ExmN-mDPqga_GnLpeLynkLojLs/edit?usp=sharing
|
|
|
|
Credits at: glenthemes.tumblr.com/leo-crd
|
|
------------------------------------------------------------------------>
|
|
|
|
<!DOCTYPE html lang="en">
|
|
|
|
<head>
|
|
|
|
<title>{Title}</title>
|
|
|
|
<link rel="shortcut icon" href="{Favicon}">
|
|
|
|
<!--------------------SCRIPTS-------------------->
|
|
<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:50,
|
|
tip_fade_speed:0,
|
|
attribute:"title"
|
|
});
|
|
});
|
|
})(jQuery);
|
|
</script>
|
|
|
|
<script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
|
|
|
|
<script src="//static.tumblr.com/gtjt4bo/ZGYpn0axc/statice.js"></script>
|
|
|
|
<link rel="stylesheet" href="//static.tumblr.com/2pnwama/8HIpn1bpf/statice.css">
|
|
|
|
<!-------------------------------------------------------------------->
|
|
|
|
<style type="text/css">
|
|
|
|
@font-face { font-family: "pixeloperator8"; src: url('//glen-assets.github.io/fonts/PixelOperator8.ttf'); }
|
|
|
|
@font-face { font-family: "silkscreen"; src: url('//glen-assets.github.io/fonts/silkscreen.ttf'); }
|
|
|
|
@font-face { font-family: "consolas-alt"; src: url('//glen-assets.github.io/fonts/consolas.TTF'); }
|
|
|
|
/*--------------------TOOLTIPS--------------------*/
|
|
#s-m-t-tooltip {
|
|
margin:20px;
|
|
max-width:400px;
|
|
padding:4px 9px;
|
|
background-color:#fefefe; /* tooltip background color */
|
|
border:1px solid #DCDBE6; /* tooltip border color */
|
|
box-shadow:4px 4px #EBEAF0; /* tooltip box shadow */
|
|
font-family:silkscreen;
|
|
font-size:9px;
|
|
letter-spacing:-1px;
|
|
color:#999; /* tooltip text color */
|
|
}
|
|
|
|
/*--------------------TUMBLR CONTROLS--------------------*/
|
|
#control-ico {
|
|
position:fixed;
|
|
bottom:0;margin-bottom:16px;
|
|
right:0;margin-right:16px;
|
|
}
|
|
|
|
/* bottom right 'plus' icon */
|
|
#control-ico svg {
|
|
width:16px;
|
|
height:16px;
|
|
color:#a39fbb; /* 'plus' icon color */
|
|
}
|
|
|
|
iframe#tumblr_controls, .iframe-controls--desktop {
|
|
top:auto!important;
|
|
bottom:-10px!important;
|
|
right:5px!important;
|
|
position:fixed!important;
|
|
padding-right:43px!important;
|
|
|
|
transform:scale(0.7,0.7);
|
|
-webkit-transform:scale(0.7,0.7);
|
|
|
|
opacity:0;
|
|
transform-origin:100% 0;
|
|
z-index:999999!important;
|
|
-webkit-transition: all 0.3s ease-in-out;
|
|
-moz-transition: all 0.3s ease-in-out;
|
|
-o-transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
#iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {opacity:1;}
|
|
|
|
/*--------------------TEXT HIGHLIGHT--------------------*/
|
|
::selection {
|
|
background:#fafafa;
|
|
color:#555;
|
|
}
|
|
|
|
::-moz-selection {
|
|
background:#fafafa;
|
|
color:#555;
|
|
}
|
|
|
|
/*--------------------BASICS--------------------*/
|
|
body {
|
|
background:#fcfcfc; /* background color */
|
|
background-image:url('//66.media.tumblr.com/e9eccce5b5cd2c1eb27592f6ce3bd933/tumblr_pkn7h6rARh1qg2f5co2_r1_400.png'); /* background image */
|
|
background-attachment:fixed;
|
|
background-repeat:repeat;
|
|
color:#888; /* general text color */
|
|
cursor:normal;
|
|
font-family:consolas-alt;
|
|
line-height:1.6em;
|
|
font-size:12px;
|
|
text-align:left;
|
|
}
|
|
|
|
blockquote {
|
|
padding-left:10px;
|
|
margin-left:5px;
|
|
border-left:1px solid;
|
|
border-color:#aaa;
|
|
margin:10px;
|
|
}
|
|
|
|
a {
|
|
color:#BDB3E1;
|
|
text-decoration:none;
|
|
-webkit-transition: all 0.05s ease-in-out;
|
|
-moz-transition: all 0.05s ease-in-out;
|
|
-o-transition: all 0.05s ease-in-out;
|
|
}
|
|
|
|
b, strong {
|
|
filter:brightness(80%);
|
|
-webkit-filter:brightness(80%);
|
|
-ms-filter:brightness(80%);
|
|
-moz-:brightness(80%);
|
|
-o-filter:brightness(80%);
|
|
}
|
|
|
|
pre, code {
|
|
white-space:pre-wrap;
|
|
display:block;
|
|
}
|
|
|
|
hr {
|
|
width:70%;
|
|
border-width:0px;
|
|
height:1px;
|
|
background-color:#bbb;
|
|
}
|
|
|
|
/*--------------------HEART / HEALTH STATS UI--------------------*/
|
|
#health-widget {
|
|
position:fixed;
|
|
top:0;margin-top:20px;
|
|
left:0;margin-left:20px;
|
|
z-index:2;
|
|
}
|
|
|
|
/* heart container */
|
|
#heart-cont {
|
|
padding:12px;
|
|
background:#fefefe; /* heart container background color */
|
|
border-radius:100%;
|
|
border:1px solid #dcdbe6; /* heart container border */
|
|
box-shadow:4px 4px #ebeaf0; /* heart container box shadow */
|
|
}
|
|
|
|
/* actual heart */
|
|
.gt-fill {background:#BDB3E1;} /* heart color */
|
|
|
|
/* health percentage bar */
|
|
.health-bar {
|
|
margin-left:17px;
|
|
width:250px;
|
|
height:14px;
|
|
background:#fefefe; /* EMPTY color */
|
|
border:1px solid #dcdbe6; /* bar border */
|
|
border-radius:3px;
|
|
box-shadow:4px 4px #ebeaf0; /* bar box shadow */
|
|
overflow:hidden;
|
|
cursor:crosshair;
|
|
}
|
|
|
|
.health-fill {
|
|
height:inherit;
|
|
background:#dcdbe6; /* FILL color */
|
|
/* fill width/amount is done in the html */
|
|
}
|
|
|
|
/*----------------LEVEL / SECONDARY STAT----------------*/
|
|
#secondary-stat {margin-top:15px;}
|
|
|
|
/* level icon image */
|
|
.quoi {
|
|
margin-left:10px;
|
|
width:25px;
|
|
}
|
|
|
|
/* level text */
|
|
.quoi-txt {
|
|
margin-left:25px;
|
|
padding:10px 12px;
|
|
background:#fefefe; /* level background color */
|
|
border:1px solid #DCDBE6; /* level border */
|
|
box-shadow:6px 6px #EBEAF0; /* level box shadow */
|
|
font-family:silkscreen;
|
|
font-size:9px;
|
|
letter-spacing:-1px;
|
|
line-height:1em;
|
|
color:#a39fbb; /* level text color */
|
|
}
|
|
|
|
/*-----------------TOP RIGHT BUTTONS UI-----------------*/
|
|
#milkshake {
|
|
position:fixed;
|
|
top:0;margin-top:20px;
|
|
right:0;margin-right:20px;
|
|
z-index:2;
|
|
}
|
|
|
|
/* biggest icon */
|
|
#brioche, .bun {
|
|
width:25px;
|
|
height:25px;
|
|
}
|
|
|
|
#brioche {
|
|
width:25px;
|
|
height:25px;
|
|
padding:15px;
|
|
background:#fefefe; /* biggest icon background color */
|
|
border:1px solid #DCDBE6; /* biggest icon border */
|
|
border-radius:100%;
|
|
box-shadow:6px 6px #EBEAF0; /* biggest icon box-shadow */
|
|
}
|
|
|
|
/* home button */
|
|
#straw, .berry {
|
|
width:15px;
|
|
height:15px;
|
|
}
|
|
|
|
#straw {
|
|
position:absolute;
|
|
margin-top:-35px;
|
|
margin-left:-48px;
|
|
padding:10px;
|
|
background:#fefefe; /* home button background color */
|
|
border:1px solid #DCDBE6; /* home button border */
|
|
border-radius:100%;
|
|
box-shadow:3px 3px #EBEAF0; /* home button box shadow */
|
|
}
|
|
|
|
/* home button tooltip */
|
|
.home-tt, .home-tt:after {
|
|
position:absolute;
|
|
background:#fefefe; /* home button tooltip background color */
|
|
}
|
|
|
|
.home-tt {
|
|
display:none;
|
|
margin-top:-30px;
|
|
right:calc(100% + 65px);
|
|
padding:10px 12px;
|
|
border:1px solid #DCDBE6; /* home button tooltip border */
|
|
box-shadow:3px 3px #EBEAF0; /* home button tooltip box shadow */
|
|
font-family:silkscreen;
|
|
font-size:9px;
|
|
letter-spacing:-1px;
|
|
line-height:1em;
|
|
color:#a39fbb; /* home button tooltip text color */
|
|
}
|
|
|
|
.home-tt:after {
|
|
content:"";
|
|
margin-top:-1px;
|
|
left:calc(100% - 5px);
|
|
width:10px;
|
|
height:10px;
|
|
border-right:1px solid #DCDBE6; /* home button tooltip arrow border */
|
|
border-bottom:1px solid #DCDBE6; /* home button tooltip arrow border */
|
|
box-shadow:0px 3px #EBEAF0; /* home button tooltip arrow box shadow */
|
|
transform:rotate(-45deg);
|
|
-webkit-transform:rotate(-45deg);
|
|
-ms-transform:rotate(-45deg);
|
|
-moz-transform:rotate(-45deg);
|
|
-o-transform:rotate(-45deg);
|
|
}
|
|
|
|
/* ask button */
|
|
#marsh, .mallow {
|
|
width:15px;
|
|
height:15px;
|
|
}
|
|
|
|
#marsh {
|
|
position:absolute;
|
|
margin-top:7px;
|
|
margin-left:-13px;
|
|
padding:10px;
|
|
background:#fefefe; /* ask button background color */
|
|
border:1px solid #DCDBE6; /* ask button border */
|
|
border-radius:100%;
|
|
box-shadow:3px 3px #EBEAF0; /* ask button box shadow */
|
|
}
|
|
|
|
/* ask button tooltip */
|
|
.ask-tt, .ask-tt:before {
|
|
position:absolute;
|
|
background:#fefefe; /* ask button tooltip background color */
|
|
}
|
|
|
|
.ask-tt {
|
|
display:none;
|
|
margin-top:65px;
|
|
margin-left:calc(-50% - 1px);
|
|
padding:10px 12px;
|
|
border:1px solid #DCDBE6; /* ask button tooltip border */
|
|
box-shadow:3px 3px #EBEAF0; /* ask button tooltip box shadow */
|
|
font-family:silkscreen;
|
|
font-size:9px;
|
|
letter-spacing:-1px;
|
|
line-height:1em;
|
|
color:#a39fbb; /* ask button text color */
|
|
}
|
|
|
|
.ask-tt:before {
|
|
content:"";
|
|
bottom:calc(100% - 5px);
|
|
left:calc(50% - 5px);
|
|
width:10px;
|
|
height:10px;
|
|
border-top:1px solid #DCDBE6; /* ask button tooltip border */
|
|
border-right:1px solid #DCDBE6; /* ask button tooltip border */
|
|
transform:rotate(-45deg);
|
|
-webkit-transform:rotate(-45deg);
|
|
-ms-transform:rotate(-45deg);
|
|
-moz-transform:rotate(-45deg);
|
|
-o-transform:rotate(-45deg);
|
|
}
|
|
|
|
/*--------------------MAIN CONTAINER--------------------*/
|
|
#beef {
|
|
position:fixed;
|
|
top:0;left:0;right:0;
|
|
margin:0 auto;
|
|
width:650px;
|
|
height:100vh;
|
|
display:table;
|
|
}
|
|
|
|
#salmon {
|
|
display:table-cell;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
#boxie {
|
|
margin-top:30px;
|
|
height:350px;
|
|
padding:24px;
|
|
background:#fefefe; /* main about background color */
|
|
border:1px solid #dcdbe6; /* main about border */
|
|
border-radius:3px 3px 0 3px;
|
|
box-shadow:17px 17px #ebeaf0; /* main about box shadow */
|
|
}
|
|
|
|
#verdiv {
|
|
margin:-24px 24px 0 24px;
|
|
width:1px;
|
|
height:calc(100% + 48px);
|
|
background:#dcdbe6; /* main about border */
|
|
}
|
|
|
|
/*--------------------ABOUT : LEFT--------------------*/
|
|
#leftbread {
|
|
position:relative;
|
|
width:calc(50% - 24px);
|
|
}
|
|
|
|
/*--------------------LEFT TITLE--------------------*/
|
|
.left-title {
|
|
padding:7px 12px;
|
|
background:#fcfcfc; /* left title background color */
|
|
border:1px solid #f2f2f2; /* left title border */
|
|
border-radius:3px;
|
|
font-family:silkscreen;
|
|
font-size:9px;
|
|
color:#777; /* left title text color */
|
|
text-align:center;
|
|
}
|
|
|
|
.left-mid-cont {
|
|
margin-top:16px;
|
|
width:100%;
|
|
height:198px;
|
|
display:table;
|
|
}
|
|
|
|
.left-mid-m {display:table-cell;vertical-align:middle;}
|
|
|
|
/*--------------------LEFT INFO STATS--------------------*/
|
|
.left-stats {
|
|
font-family:silkscreen;
|
|
font-size:9px;
|
|
letter-spacing:-1px;
|
|
}
|
|
|
|
.left-stats table {
|
|
margin:0 8px 0 -10px;
|
|
border-collapse:separate;
|
|
border-spacing:10px 4px;
|
|
}
|
|
|
|
/* first column styling */
|
|
.left-stats td:first-of-type {
|
|
color:#b1aec6;
|
|
}
|
|
|
|
.left-stats td:first-of-type:before {
|
|
content:"»"; /* arrow that appears before each stat */
|
|
margin-right:11px;
|
|
}
|
|
|
|
/* second column styling */
|
|
.left-stats td:last-of-type {
|
|
color:#888;
|
|
}
|
|
|
|
/*------------------LEFT MAIN IMAGE------------------*/
|
|
.left-image {
|
|
display:block;
|
|
margin:auto;
|
|
}
|
|
|
|
/*---------------BOTTOM LEFT PERCENTAGE BARS---------------*/
|
|
.bot-left-bars {
|
|
position:absolute;
|
|
bottom:2px;
|
|
width:100%;
|
|
}
|
|
|
|
.one-row {margin-bottom:15px;}
|
|
|
|
/* percentage bar display icon image */
|
|
.stat-icon {
|
|
width:25px;
|
|
cursor:crosshair;
|
|
}
|
|
|
|
/* percentage bar */
|
|
.stat-bar {
|
|
margin-left:20px;
|
|
width:calc(100% - 2px);
|
|
height:5px;
|
|
background:transparent; /* EMPTY color */
|
|
border:1px solid #DCDBE6; /* percentage bar border */
|
|
border-radius:5px;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.stat-fill {
|
|
height:inherit;
|
|
background-color:#DCDBE6; /* FILL color */
|
|
}
|
|
|
|
/* percentage bar display text */
|
|
.percentage {
|
|
margin-left:20px;
|
|
min-width:5ch;
|
|
font-family:pixeloperator8;
|
|
text-transform:uppercase;
|
|
font-size:7px;
|
|
letter-spacing:0.3px;
|
|
text-align:center;
|
|
color:#888; /* percentage bar display text color */
|
|
}
|
|
|
|
/*--------------------ABOUT : RIGHT--------------------*/
|
|
#rightbread {
|
|
position:relative;
|
|
width:calc(50% - 24px);
|
|
}
|
|
|
|
/*------------------TOP RIGHT TITLE------------------*/
|
|
.right-title {margin-top:8px;}
|
|
|
|
/* first part */
|
|
.right-title-a {
|
|
font-family:pixeloperator8;
|
|
text-transform:uppercase;
|
|
font-size:8px;
|
|
letter-spacing:0.5px;
|
|
color:#a39fbb;
|
|
}
|
|
|
|
/* second part */
|
|
.right-title-b {
|
|
font-family:pixeloperator8;
|
|
text-transform:uppercase;
|
|
font-size:8px;
|
|
letter-spacing:0.5px;
|
|
color:#a39fbb;
|
|
}
|
|
|
|
.right-tit-div {
|
|
margin:0 24px;
|
|
-webkit-flex:1;
|
|
-ms-flex:1;
|
|
-moz-flex:1;
|
|
flex:1;
|
|
height:1px;
|
|
background:#dcdbe6; /* title horizontal divider color */
|
|
}
|
|
|
|
/*------------------INFO TABS------------------*/
|
|
.right-mid {margin-top:20px;}
|
|
|
|
.image-icons {
|
|
width:calc(20px + (10px * 2) + 2px);
|
|
}
|
|
|
|
.image-icons a {
|
|
display:inline-block;
|
|
margin:5px auto;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.image-icons img {
|
|
width:20px;
|
|
padding:10px;
|
|
border:1px solid #f2f2f2; /* image icons border */
|
|
border-radius:3px;
|
|
}
|
|
|
|
/* image icons styling on-click (when selected) */
|
|
.click-d {
|
|
padding:11px!important;
|
|
background-color:#ebeaf0!important;
|
|
border:0px solid transparent!important;
|
|
}
|
|
|
|
.right-info {
|
|
margin-left:18px;
|
|
width:100%;
|
|
}
|
|
|
|
.b2, .b3, .b4 {display:none;}
|
|
|
|
/* info tabs title */
|
|
.box-title {
|
|
padding:5px 10px;
|
|
background:#fcfcfc; /* info tab title background color */
|
|
border:1px solid #f2f2f2; /* info tab title border */
|
|
border-radius:3px;
|
|
font-family:silkscreen;
|
|
font-size:9px;
|
|
color:#777; /* info tab title color */
|
|
text-align:center;
|
|
}
|
|
|
|
/* info tab content text */
|
|
.box-content {
|
|
margin-top:8px;
|
|
height:138px;
|
|
padding:10px;
|
|
border:1px solid #f2f2f2; /* info tab text border */
|
|
border-radius:3px;
|
|
}
|
|
|
|
.box-content-text {
|
|
height:100%;
|
|
font-family:consolas-alt;
|
|
font-size:10px;
|
|
line-height:1.8em;
|
|
color:#999; /* info tab text color */
|
|
text-align:justify;
|
|
overflow:auto;
|
|
}
|
|
|
|
/* info tab context links styling */
|
|
.box-content-text a {
|
|
color:#BDB3E1;
|
|
padding-bottom:1px;
|
|
border-bottom:1px solid #eee;
|
|
}
|
|
|
|
.box-content-text a:hover {color:#333;}
|
|
|
|
.box-content-text p:last-child {margin-bottom:0px;}
|
|
|
|
.box-content-text::-webkit-scrollbar {
|
|
background-color:#fefefe; /* scrollbar background color */
|
|
height:13px;
|
|
width:13px;
|
|
}
|
|
|
|
.box-content-text::-webkit-scrollbar-thumb {
|
|
background-color:#dcdbe6; /* actual scrollbar color */
|
|
border-left:10px solid #fefefe; /* scrollbar background color */
|
|
border-right:2px solid #fefefe; /* scrollbar background color */
|
|
}
|
|
|
|
.box-content-text::-webkit-scrollbar-track {
|
|
background-color:#fefefe; /* scrollbar background color */
|
|
}
|
|
|
|
/* quote / short description */
|
|
.quote {
|
|
position:absolute;
|
|
bottom:0;
|
|
width:calc(100% - 24px - 2px);
|
|
border:1px solid #f2f2f2; /* quote box border */
|
|
padding:10px 12px;
|
|
background:#fcfcfc; /* quote box background color */
|
|
border-radius:3px;
|
|
font-family:consolas-alt;
|
|
font-size:10px;
|
|
line-height:1.8em;
|
|
color:#777; /* quote text color */
|
|
}
|
|
|
|
/* quote links styling */
|
|
.quote a {
|
|
color:#BDB3E1;
|
|
padding-bottom:1px;
|
|
border-bottom:1px solid #eee;
|
|
}
|
|
|
|
.quote a:hover {color:#333;}
|
|
|
|
/*--------------------CUSTOM LINKS--------------------*/
|
|
#customlinks {
|
|
margin-top:calc(17px + 20px);
|
|
width:inherit;
|
|
text-align:center;
|
|
}
|
|
|
|
#customlinks a {
|
|
display:inline-block;
|
|
margin:0 calc(3px + 6px);
|
|
min-width:60px;
|
|
padding:10px 12px;
|
|
background:#fefefe; /* custom links background color */
|
|
border:1px solid #DCDBE6; /* custom links border */
|
|
box-shadow:6px 6px #EBEAF0; /* custom links box shadow */
|
|
font-family:silkscreen;
|
|
font-size:9px;
|
|
letter-spacing:-1px;
|
|
line-height:1em;
|
|
color:#a39fbb; /* custom links color */
|
|
}
|
|
|
|
#customlinks a:hover {
|
|
background:#DCDBE6;
|
|
color:#fff;
|
|
}
|
|
|
|
/*--------------------MUSIC PLAYER--------------------*/
|
|
.aloe {
|
|
position:fixed;
|
|
bottom:0;margin-bottom:20px;
|
|
left:0;margin-left:20px;
|
|
}
|
|
|
|
.on-cont {
|
|
width:22px;
|
|
height:22px;
|
|
background:#fefefe; /* music button background color */
|
|
border:1px solid #DCDBE6; /* music button border */
|
|
box-shadow:4px 4px #EBEAF0; /* music button box shadow */
|
|
cursor:pointer;
|
|
}
|
|
|
|
.playy, .pausee {
|
|
color:#BDB3E1; /* music button color */
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
margin-top:-1px;
|
|
}
|
|
|
|
.on-cont svg {
|
|
display:block;
|
|
width:11px;
|
|
fill:currentColor;
|
|
transform-origin:center;
|
|
transform:scale(1.15,1);
|
|
}
|
|
|
|
.playy {
|
|
margin-left:1px;
|
|
}
|
|
|
|
.pausee {
|
|
display:none;
|
|
}
|
|
|
|
.playy[style*="display: block"],
|
|
.pausee[style*="display: block"]{
|
|
display:flex!important;
|
|
}
|
|
|
|
/* music text label */
|
|
.ensou {
|
|
margin-left:12px;
|
|
padding:6px 8px;
|
|
background:#fefefe; /* music text background color */
|
|
border:1px solid #DCDBE6; /* music text border */
|
|
box-shadow:4px 4px #EBEAF0; /* music text box shadow */
|
|
font-family:silkscreen;
|
|
font-size:9px;
|
|
color:#a39fbb; /* music text color */
|
|
line-height:1em;
|
|
max-height:1em;
|
|
}
|
|
|
|
.ensou a {
|
|
color:#a39fbb;
|
|
padding-bottom:1px;
|
|
border-bottom:1px solid #eee;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="control-ico">
|
|
<i data-feather="plus"></i>
|
|
</div>
|
|
|
|
<!----TOP LEFT: HEART / HEALTH WIDGET---->
|
|
<div id="health-widget">
|
|
<div id="health">
|
|
<div id="heart-cont">
|
|
<div class="kokoro">
|
|
<div class="raw">
|
|
<div class="gt-fill f2" style="margin-left:2px"></div>
|
|
<div class="gt-fill f2" style="margin-left:8px"></div></div>
|
|
<div class="raw">
|
|
<div class="gt-fill f5" style="margin-left:1px"></div>
|
|
<div class="gt-fill f5" style="margin-left:4px"></div></div>
|
|
<div class="raw">
|
|
<div class="gt-fill f7 gtwo"></div>
|
|
<div class="gt-fill f7 gtwo" style="margin-left:2px"></div></div>
|
|
<div class="gt-fill f16" style="top:4px;"></div>
|
|
<div class="gt-fill f12 gtwo" style="margin-left:2px"></div>
|
|
<div class="gt-fill f8 gtwo" style="margin-left:4px"></div>
|
|
<div class="gt-fill f4 gtwo" style="margin-left:6px"></div>
|
|
</div><!--kokoro-->
|
|
</div><!--heart-cont-->
|
|
|
|
<!--HEALTH PERCENTAGE BAR-->
|
|
<a title="72/100"> <!--health percentage tooltip text-->
|
|
<div class="health-bar">
|
|
<div class="health-fill" style="width:72%"> <!--set fill width %-->
|
|
</div></div></a><!--do not delete this line-->
|
|
</div><!--health--><!--do not delete this line-->
|
|
|
|
|
|
<!----TOP LEFT: LEVEL WIDGET---->
|
|
<div id="secondary-stat">
|
|
<img class="quoi" src="https://glen-themes.gitlab.io/abt-pages/10/imgs/S_Bow08.png"> <!--level image icon-->
|
|
<div class="quoi-txt">Level 104</div> <!--level display text-->
|
|
</div><!--level-->
|
|
</div><!--health-widget--><!--do not delete this line-->
|
|
|
|
|
|
|
|
|
|
<!----TOP RIGHT: HOME & ASK BUTTONS---->
|
|
<div id="milkshake">
|
|
<div id="brioche">
|
|
<!--BIGGEST ICON IMAGE-->
|
|
<img class="bun" src="https://glen-themes.gitlab.io/abt-pages/10/imgs/I_Feather01.png">
|
|
</div></a><!--do not delete this line-->
|
|
|
|
<!--HOME BUTTON-->
|
|
<a href="/"><div id="straw">
|
|
<img class="berry" src="//66.media.tumblr.com/1bcb749aaba9067c9a5499a338cfcdf7/tumblr_pmzhslPXEP1qg2f5co6_r1_75sq.png"> <!--home button image-->
|
|
</div></a>
|
|
<div class="home-tt">home</div>
|
|
|
|
<!--ASK BUTTON-->
|
|
<a href="/ask"><div id="marsh">
|
|
<img class="mallow" src="//66.media.tumblr.com/3ed987a245007771944526fa837151bf/tumblr_pmzhslPXEP1qg2f5co5_r1_75sq.png"> <!--ask button image-->
|
|
</div></a>
|
|
<div class="ask-tt">message</div>
|
|
</div><!--milkshake--><!--do not delete this line-->
|
|
|
|
|
|
|
|
|
|
<!----MAIN CONTAINER---->
|
|
<div id="beef">
|
|
<div id="salmon">
|
|
|
|
<div id="boxie">
|
|
|
|
<!--ABOUT : LEFT-->
|
|
<div id="leftbread">
|
|
<div class="left-title">about the user</div> <!--top left title-->
|
|
|
|
<div class="left-mid-cont">
|
|
<div class="left-mid-m">
|
|
<div class="left-holder">
|
|
<div class="left-stats">
|
|
|
|
<!--LEFT INFO STATS-->
|
|
<!--everything between <tr> and </tr> is ONE ROW-->
|
|
<table><tbody><!--table starts here-->
|
|
<tr>
|
|
<td>Stat 1:</td>
|
|
<td>Stat 1 info</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Stat 2:</td>
|
|
<td>Stat 2 info</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>Stat 3:</td>
|
|
<td>Stat 3 info</td>
|
|
</tr>
|
|
</tbody></table><!--table ends here-->
|
|
</div><!--left-stats--><!--do not delete this line-->
|
|
|
|
<!--LEFT MAIN IMAGE-->
|
|
<!--max. height: 198px-->
|
|
<img class="left-image" src="//orig00.deviantart.net/21bd/f/2012/104/f/5/leo_animation_by_wavewhisper-d4w4ybv.gif">
|
|
|
|
</div><!--left-holder--->
|
|
</div><!--left-mid-m-->
|
|
</div><!--left-mid-cont-->
|
|
|
|
|
|
|
|
|
|
|
|
<!--BOTTOM LEFT PERCENTAGE BARS-->
|
|
<div class="bot-left-bars">
|
|
|
|
<div class="one-row">
|
|
<!--display icon tooltip text-->
|
|
<a title="sample text">
|
|
|
|
<!--display icon image-->
|
|
<img class="stat-icon" src="https://glen-themes.gitlab.io/abt-pages/10/imgs/P_White01.png"></a>
|
|
|
|
<div class="stat-bar">
|
|
<div class="stat-fill" style="width:30%"> <!--set fill width %-->
|
|
</div></div><!--do not delete this line-->
|
|
|
|
<!--bar display text-->
|
|
<div class="percentage">30%</div>
|
|
</div><!--end one-row-->
|
|
|
|
|
|
<div class="one-row">
|
|
<!--display icon tooltip text-->
|
|
<a title="sample text">
|
|
|
|
<!--display icon image-->
|
|
<img class="stat-icon" src="https://glen-themes.gitlab.io/abt-pages/10/imgs/I_Amethist.png"></a>
|
|
|
|
<div class="stat-bar">
|
|
<div class="stat-fill" style="width:52%"> <!--set fill width %-->
|
|
</div></div><!--do not delete this line-->
|
|
|
|
<!--bar display text-->
|
|
<div class="percentage">52%</div>
|
|
</div><!--end one-row-->
|
|
|
|
|
|
</div><!--bot-left--bars--><!--do not delete this line-->
|
|
</div><!--left-bread--><!--do not delete this line-->
|
|
|
|
|
|
|
|
|
|
|
|
<!----ABOUT : RIGHT---->
|
|
<div id="verdiv"></div>
|
|
<div id="rightbread">
|
|
<div class="right-title">
|
|
<div class="right-title-a">name 1</div> <!--top right title part 1-->
|
|
<div class="right-tit-div"></div>
|
|
<div class="right-title-b">name 2</div> <!--top right title part 2-->
|
|
</div><!--right-title-->
|
|
|
|
<div class="right-mid">
|
|
<div class="image-icons">
|
|
<!--INFO TAB IMAGE ICONS-->
|
|
<!--put image url between the quotation marks of src=""-->
|
|
<a class="clickbox1"><img class="boximg1" src="https://glen-themes.gitlab.io/abt-pages/10/imgs/W_Gun002.png"></a>
|
|
|
|
<a class="clickbox2"><img class="boximg2" src="https://glen-themes.gitlab.io/abt-pages/10/imgs/I_Book.png"></a>
|
|
|
|
<a class="clickbox3"><img class="boximg3" src="https://glen-themes.gitlab.io/abt-pages/10/imgs/S_Holy07.png"></a>
|
|
|
|
<a class="clickbox4"><img class="boximg4" src="https://glen-themes.gitlab.io/abt-pages/10/imgs/I_Key02.png"></a>
|
|
</div><!--image-icons-->
|
|
|
|
|
|
<!----INFO TABS----> <!--maximum of 4. please do not add more-->
|
|
<!--info tab 1-->
|
|
<div class="right-info b1">
|
|
<div class="box-title">info tab #01</div>
|
|
<div class="box-content">
|
|
<div class="box-content-text">info tab 1 text</div>
|
|
</div><!--box-content-->
|
|
</div><!--right-info-->
|
|
|
|
<!--info tab 2-->
|
|
<div class="right-info b2">
|
|
<div class="box-title">info tab #02</div>
|
|
<div class="box-content">
|
|
<div class="box-content-text">info tab 2 text</div>
|
|
</div><!--box-content-->
|
|
</div><!--right-info-->
|
|
|
|
<!--info tab 3-->
|
|
<div class="right-info b3">
|
|
<div class="box-title">info tab #03</div>
|
|
<div class="box-content">
|
|
<div class="box-content-text">info tab 3 text</div>
|
|
</div><!--box-content-->
|
|
</div><!--right-info-->
|
|
|
|
<!--info tab 4-->
|
|
<div class="right-info b4">
|
|
<div class="box-title">info tab #04</div>
|
|
<div class="box-content">
|
|
<div class="box-content-text">info tab 4 text</div>
|
|
</div><!--box-content-->
|
|
</div><!--right-info-->
|
|
|
|
</div><!--right-mid--><!--do not delete this line-->
|
|
|
|
|
|
|
|
<!----QUOTE / SHORT DESCRIPTION---->
|
|
<div class="quote">Looks best<br>with<br>3 lines</div>
|
|
|
|
|
|
</div><!--rightbread--><!--do not delete this line-->
|
|
</div><!--boxie--><!--do not delete this line-->
|
|
|
|
|
|
|
|
|
|
|
|
<!----CUSTOM LINKS---->
|
|
<div id="customlinks">
|
|
<a href="/">a custom link</a>
|
|
<a href="/">a custom link</a>
|
|
<a href="/">a custom link</a>
|
|
<a href="//tumblr.com/dashboard">dashboard</a>
|
|
<!--PLEASE DO NOT REMOVE THE CREDIT! THANK YOU X-->
|
|
<a href="//glenthemes.tumblr.com" title="page by glenthemes">credit</a>
|
|
</div><!--customlinks-->
|
|
</div><!--salmon-->
|
|
</div><!--beef-->
|
|
|
|
|
|
|
|
|
|
<!----MUSIC PLAYER---->
|
|
<div class="aloe">
|
|
<div class="on-cont m-o">
|
|
<div class="playy">
|
|
<i data-feather="play"></i>
|
|
</div>
|
|
|
|
<div class="pausee">
|
|
<i data-feather="pause"></i>
|
|
</div>
|
|
</div><!--on-cont-->
|
|
|
|
<!--music text-->
|
|
<div class="ensou">Sound of the End [<a href="//www.youtube.com/watch?v=IR9EMpitzHg" target="_blank" title="chiptune cover by emily music">+</a>]</div><!--ensou-->
|
|
|
|
<!-- audio file URL -->
|
|
<!-- tutorial: -->
|
|
<!-- linktr.ee/direct_file_links -->
|
|
<audio id="tune" src="https://rhizo.gitlab.io/nier/Sound_of_the_End__Chiptune_cover_.mp3" type="audio"></audio>
|
|
</div><!--aloe-->
|
|
|
|
<script>feather.replace()</script>
|
|
</body>
|
|
|
|
</html> |