glenthemes/pages
glenthemes
/
pages
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
pages/chara-pages/04-Re:volution

1073 lines
28 KiB
Plaintext
Raw Permalink Blame History

<!-----------------------------------------------------------------------
Character Page [04]: Re:volution
Made by glenthemes
Initial release: 2018/04/28
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.
For customization help, please visit:
glenthemes.tumblr.com/blackwatch
Please respect theme makers and stick to my Terms. Enjoy.
------------------------------------------------------------------------>
<!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:25,
attribute:"title"
});
});
})(jQuery);
</script>
<script src="//static.tumblr.com/2pnwama/uKLp7w9l4/koe.js"></script>
<script src="//static.tumblr.com/2pnwama/FGap8lweb/snipe.js"></script>
<link href="//static.tumblr.com/2pnwama/aBSp7wpz7/herbal.css" rel="stylesheet">
<link href="//static.tumblr.com/gtjt4bo/WBJp40bor/library.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Karla|Muli|Montserrat:300,400,500|Quicksand" rel="stylesheet">
<link rel="stylesheet" href="//cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<!-------------------------------------------------------------------->
<style type="text/css">
@font-face { font-family: "big noodle"; src: url('//glen-assets.github.io/fonts/big_noodle_titling_oblique.ttf'); }
@font-face { font-family: "motor oil"; src: url('//glen-assets.github.io/fonts/Motor Oil 1937 M54.ttf'); }
@font-face { font-family: "consolas-alt"; src: url('//glen-assets.github.io/fonts/consolas.TTF'); }
/*--------------------TOOLTIPS--------------------*/
#s-m-t-tooltip {
padding:5px 10px;
margin:26px 9px 0px 15px;
background-color:#222; /* tooltip background color */
border-radius:5px; /* rounded tooltip */
font-family:Quicksand;font-weight:bold;
font-size:9px;
letter-spacing:1.3px;
text-transform:uppercase;
color:#ccc; /* 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:3px!important;
right:3px!important;
position:fixed!important;
transition:0.5s ease-in-out;
opacity:0.6;
z-index:99999999;
}
iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
opacity:0.8;
}
/*--------------------SCROLLBAR--------------------*/
::-webkit-scrollbar {
width:5px;
height:5px;
}
::-webkit-scrollbar-thumb {
background-color:#742936; /* color of scrollbar thumb */
border-radius:10px; /* roundness of scrollbar ends */
}
::-webkit-scrollbar-track {
background-color:#222; /* color of scrollbar track */
border-radius:10px; /* roundness of scrollbar track */
}
/*-----------------TEXT HIGHLIGHT-----------------*/
::selection {
background:#333; /* text highlight background color */
color:#ddd; /* text highlight color */
}
::-moz-selection {
background:#333; /* text highlight background color */
color:#ddd; /* text highlight color */
}
/*--------------------BASICS--------------------*/
body {
background:#000 url('//78.media.tumblr.com/f88ca3448f0758865fd73fa63964579b/tumblr_p7wf47IuPm1qg2f5co3_r1_1280.png'); /* background color & image */
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
color:#999;
font-family:karla;
line-height:1.6em;
font-size:12px;
}
a {
color:#fff;
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;
}
a:hover {
text-decoration:none;
color:#777;
}
img {
opacity:1;
text-decoration:none;
}
/*--------------------LEFT SIDEBAR--------------------*/
#alliance {
position:fixed;
top:50%;left:50%;
transform:translate(-50%, -50%);
margin-left:-400px;
width:300px;
}
/* outmost red circle */
.red-a1 {
position:absolute;
width:300px;
height:300px;
border-radius:100%;
background-color:rgba(0,0,0,0.6);
border:2px solid #9c3042;
}
/* 2nd outmost red circle */
.red-a2 {
position:absolute;
margin-top:10px;
margin-left:10px;
width:280px;
height:280px;
border-radius:100%;
border:2px solid #9c3042;
}
/* rotating red tab */
.red-a3 {
position:absolute;
margin-left:77px;
margin-top:252px;
width:113px;
height:30px;
border-radius:100%;
border:10px solid #9c3042;
border-top-color:transparent;
border-left-color:transparent;
border-right-color:transparent;
transform-origin:50% 50%;
transform:rotate(4deg);
}
/*------------------------------*/
.load-red {
position:absolute;
width:304px;
height:304px;
transform-origin:50% 50%;
background-color:transparent;
-webkit-animation:spinred linear 3s infinite;
-moz-animation:spinred linear 3s infinite;
animation:spinred linear 3s infinite;
}
@keyframes spinred {
0% {transform:rotate(360deg);}
100% {transform:rotate(0deg);}
}
@-webkit-keyframes spinred {
0% {transform:rotate(360deg);}
100% {transform:rotate(0deg);}
}
@-moz-keyframes spinred {
0% {transform:rotate(360deg);}
100% {transform:rotate(0deg);}
}
/*------------------------------*/
/* gray circle */
.gray-a1 {
position:absolute;
width:230px;
height:230px;
border-radius:100%;
background-color:transparent;
border:1px solid #444;
}
/* rotating gray tab*/
.gray-a2 {
position:absolute;
width:105px;
height:44px;
margin-left:calc(50% - 61px);
margin-top:-4px;
border-radius:50%;
border:8px solid #444;
border-left-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
}
/*------------------------------*/
.load-gray {
position:absolute;
width:232px;
height:232px;
margin-left:36px;
margin-top:36px;
transform-origin:50% 50%;
background-color:transparent;
-webkit-animation:spingray linear 1.8s infinite;
-moz-animation:spingray linear 1.8s infinite;
animation:spingray linear 1.8s infinite;
}
@keyframes spingray {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
@-webkit-keyframes spingray {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
@-moz-keyframes spingray {
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
/*------------------------------*/
/* thick red circle */
.center-a1 {
position:absolute;
margin-left:62px;
margin-top:62px;
width:124px;
height:124px;
border-radius:100%;
background-color:rgba(0,0,0,0.4);
border:28px solid #5d1c27;
}
/* innermost red circle */
.center-a2 {
position:absolute;
margin-left:99px;
margin-top:99px;
width:104px;
height:104px;
border-radius:100%;
background-color:transparent;
border:1px solid #9c3042;
}
/* thick top white bar */
.white-bar {
position:absolute;
margin-left:62px;
margin-top:62px;
width:124px;
height:124px;
border-radius:100%;
background-color:transparent;
border:28px solid #ddd;
border-left-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
}
/* image in the very center */
/* change positioning as necessary */
.picture {
position:absolute;
margin-top:114px;
margin-left:119px;
width:70px;
height:auto;
}
.basket {
margin-top:calc(100% + 25px);
margin-left:-18px;
width:345px;
}
/* member icons */
.agent {
margin:10px;
width:64px;
height:64px;
border-radius:100%;
cursor:pointer;
-webkit-transition: all 0.15s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
}
.agent:hover {transform:scale(1.1,1.1);}
/* bottom member title */
.affiliation {
margin-top:11px;
font-family:motor oil;
font-size:10px;
text-transform:uppercase;letter-spacing:3px;
text-align:center;
color:#ca5165;
}
/* bottom member title left line */
.affiliation::before {
content:"";
position:absolute;
margin-top:9px;
margin-left:-110px;
width:90px;
height:1px;
background:-webkit-linear-gradient(left,
transparent 0%,
#ba394f 80%);
}
/* bottom member title left right */
.affiliation::after {
content:"";
position:absolute;
margin-top:9px;
margin-left:20px;
width:90px;
height:1px;
background:-webkit-linear-gradient(right,
transparent 0%,
#ba394f 80%);
}
/*-----------------RIGHT INFO CONTAINER-----------------*/
#classified {
position:fixed;
top:50%;left:50%;
transform:translate(-50%, -50%);
margin-left:200px;
width:640px;
height:405px;
padding:20px;
background-color:#151515;
border-radius:10px;
}
.dots {
position:absolute;
margin-top:8px;
left:100%;
margin-left:-66px;
width:50px;
}
.dots a {
display:inline-block;
margin:0px 2px;
}
.dot1, .dot2, .dot3 {
width:10px;
height:10px;
border-radius:100%;
-webkit-transition: all 0.15s ease-in-out;
-moz-transition: all 0.15s ease-in-out;
-o-transition: all 0.15s ease-in-out;
}
/* color of dots */
.dot1 {background-color:#9c3042;}
.dot1:hover {background-color:#ef6642;}
.dot2 {background-color:#C13B51;}
.dot2:hover {background-color:#ef6642;}
.dot3 {background-color:#CE5E71;}
.dot3:hover {background-color:#ef6642;}
/* fake filepath bar background */
.mockbar {
width:580px;
height:30px;max-height:30px;
overflow:hidden;
background-color:#222;
border-radius:10px;
border:1px solid #000;
cursor:text;
}
.mockwrap {display:flex;}
/* fake filepath bar text */
.mocktext {
padding:0px 10px;
font-family:consolas-alt;
text-transform:uppercase;
letter-spacing:2.5px;
line-height:30px;
font-size:8px;
color:#ccc;
}
.mocktext::after {content:" >";}
.bartext1 {display:block;}
/* flashing text input underline */
.input {
margin-top:20px;
margin-left:-6px;
width:10px;
height:2px;
background-color:#fff;
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;}
}
.portrait {float:left;margin-right:20px;}
/* vertical portrait image */
.visage {
margin-top:20px;
width:200px;
height:355px;
border-radius:0px 0px 0px 10px;
}
.chara1 {display:block;}
/* vertical portrait image label */
.label {
position:absolute;
margin-top:-50px;
width:180px;
padding:10px;
background-color:rgba(0,0,0,0.8);
line-height:1em;
font-family:montserrat;
text-transform:uppercase;
letter-spacing:1px;
font-size:10px;
color:#ccc;
text-align:center;
z-index:5;
}
.strip1 {display:block;}
/* vertical portrait image label font icons */
.label .lnr {margin:0px 2px;}
/* star font-icon */
.label .lnr-star {color:#ff9a67;}
/* empty star font-icon */
.label .lnr-star-empty {color:#9f9f9f;}
/* top title */
.name {
margin-top:32px;
font-family:big noodle;
letter-spacing:1.5px;
font-size:28px;
color:#b0364a;
}
.name::first-letter {color:#dd4953;}
.n1 {display:block;}
/* top right text */
.number {
float:right;
margin-top:-18px;
text-align:right;
}
/* top right text: top text */
.numbertop {
font-family:big noodle;
letter-spacing:1.5px;
font-size:28px;
color:#d94343;
}
.no1 {display:block;}
/* top right text: bottom text */
.numberbot {
margin-top:6px;
font-family:big noodle;
letter-spacing:1.5px;
font-size:15px;
color:#c3455a;
}
.bot1 {display:block;}
/* separator line */
.separator {
margin:15px 0px;
margin-left:220px;
width:calc(100% - 360px);
height:1px;
background:-webkit-linear-gradient(left,
transparent 0%,
#ba394f 80% );
}
/* information list */
.details {
font-family:montserrat;
text-transform:uppercase;
letter-spacing:1px;
font-size:11px;
}
.details b {color:#d94343;}
.listo1 {display:block;}
/* small image on the right */
.smallimage {
position:absolute;
margin-top:-65px;
margin-left:233px;
width:130px;
}
.tiny1 {display:block;}
/* biography text space */
.biospace {
margin-top:15px;
max-height:143px;
overflow:auto;
padding-right:15px;
font-family:Muli;
text-align:justify;
}
.biospace p:last-child {margin-bottom:0px;}
.bio1 {display:block;}
/*----------------------VOICE LINE----------------------*/
.quorn {
display:flex;
margin-top:15px;
margin-left:220px;
width:calc(100% - 220px);
}
/* voice line mic icon */
.quorn .lnr {
align-self:center;
-webkit-align-self:center;
font-size:20px;
background-color:#111;
padding:9px;
border-radius:100%;
border:3px solid #9c3042;
color:#aaa;
cursor:pointer;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
}
.quorn .lnr:hover {color:#DC6478;}
/* voice line horizontal line */
.qline {
align-self:center;
-webkit-align-self:center;
width:15px;
height:3px;
background-color:#9c3042;
}
/* voice line dialogue text */
.quote {
border-left:3px solid #9c3042;
width:100%;
padding:12px;
background-color:#222;
border-radius:0px 0px 10px 0px;
font-family:motor oil;
text-transform:uppercase;
letter-spacing:1.5px;
font-size:9px;
color:#bbb;
}
.sound1 {display:block;}
/*--------------CREDIT - PLEASE DO NOT REMOVE--------------*/
#please-respect-theme-makers a {
position:fixed;
bottom:0;margin-bottom:15px;
right:0;margin-right:15px;
padding:9px;
background-color:#222;
border-radius:5px;
font-family:karla;
text-transform:uppercase;
line-height:1em;
text-align:center;
font-size:9px;
letter-spacing:1.3px;
color:#ccc;
z-index:999999;
}
</style>
</head>
<body>
<!----PLEASE DO NOT REMOVE THE THEME CREDIT---->
<div id="please-respect-theme-makers"><a href="//glenthemes.tumblr.com" title="page by glenthemes">glenthemes</a></div>
<!----------------LEFT SIDEBAR---------------->
<div id="lettuce">
<div id="alliance">
<div class="load-red">
<div class="red-a1"></div>
<div class="red-a2"></div>
<div class="red-a3"></div>
</div><!--loadred-->
<div class="load-gray">
<div class="gray-a1"></div>
<div class="gray-a2"></div>
</div><!--loadgray-->
<div class="center-a1"></div>
<div class="center-a2"></div>
<div class="white-bar"></div>
<!-- IMAGE INSIDE THE CIRCLES -->
<img class="picture" src="//78.media.tumblr.com/adbafcdd49475a0a7225bb3b6c82886f/tumblr_p7thy7UVQI1qg2f5co1_250.png" ondragstart="return false">
<div class="basket">
<!-- MEMBER ICONS -->
<!-- start copy -->
<a class="avatar1" title="genji"><img class="agent" src="//78.media.tumblr.com/a4003e28c75362644873da7bd4d90e5d/tumblr_p7v4udjp0N1qg2f5co4_250.png"></a>
<!--end copy-->
<a class="avatar2" title="reaper"><img class="agent" src="//78.media.tumblr.com/9bd84ca86dd08f5aa3c0efe3fca67413/tumblr_p7v4udjp0N1qg2f5co2_250.png"></a>
<a class="avatar3" title="mccree"><img class="agent" src="//78.media.tumblr.com/47ff5f586aeaf04d1bfdda6d698c9889/tumblr_p7v4udjp0N1qg2f5co1_250.png"></a>
<a class="avatar4" title="moira"><img class="agent" src="//78.media.tumblr.com/89ec087869112b23243f30d6d7825fa9/tumblr_p7v4udjp0N1qg2f5co3_250.png"></a>
<!-- BOTTOM TITLE -->
<div class="affiliation">blackwatch</div>
</div><!--basket-->
</div><!--alliance-->
<!----------------RIGHT CONTENT---------------->
<div id="classified">
<div class="dots">
<a href="/" title="index"><div class="dot1"></div></a>
<a href="/ask" title="message"><div class="dot2"></div></a>
<a href="/archive" title="archive"><div class="dot3"></div></a>
</div><!--dots-->
<div class="mockbar">
<div class="mockwrap">
<div class="path">
<!-- FAKE FILEPATH BAR -->
<!-- rmb to change the number in bartext1 to your chara no. -->
<!-- i.e. change it to bartext5 if on your 5th character -->
<!-- start copy -->
<div class="bartext1">
<div class="mocktext">
Blackwatch:\Archives\Agents > character 1 bar text</div>
</div>
<!-- end copy -->
<div class="bartext2">
<div class="mocktext">
Blackwatch:\Archives\Agents > character 2 bar text</div>
</div>
<div class="bartext3">
<div class="mocktext">
Blackwatch:\Archives\Agents > character 3 bar text</div>
</div>
<div class="bartext4">
<div class="mocktext">
Blackwatch:\Archives\Agents > character 4 bar text</div>
</div>
</div><!--path-->
<div class="input"></div>
</div><!--mockwrap-->
</div><!--mockbar-->
<div class="portrait">
<div class="mirror">
<!-- RIGHT CONTAINER PORTRAIT IMAGE -->
<!-- rmb to change the number in chara1 to your chara no. -->
<!-- i.e. change it to chara5 if on your 5th character -->
<!-- start copy -->
<a class="chara1"><img class="visage" src="//78.media.tumblr.com/267851976887145fa1bb18b710fa0a2a/tumblr_p7v2snKzWB1qg2f5co2_1280.png"></a>
<!--end copy-->
<a class="chara2"><img class="visage" src="//78.media.tumblr.com/9f9afc80ffa2fa8fa35287887f5db2b4/tumblr_p7v3m7krJA1qg2f5co2_1280.png"></a>
<a class="chara3"><img class="visage" src="//78.media.tumblr.com/8591821534bae1204bb5cf721e6e5228/tumblr_p7v3m7krJA1qg2f5co1_1280.png"></a>
<a class="chara4"><img class="visage" src="//78.media.tumblr.com/b30753a784b5e8c3263631aa5a2b8b8d/tumblr_p7v2snKzWB1qg2f5co1_r1_400.png"></a>
</div><!--mirror-->
<div class="label">
<!-- rmb to change the number in strip1 to your chara no. -->
<!-- i.e. change it to strip5 if on your 5th character -->
<div class="strip1">
<!-- PORTRAIT IMAGE LABEL TEXT-->
difficulty:
<!-- PORTRAIT IMAGE LABEL STAR RATING -->
<span class="lnr lnr-star"></span>
<span class="lnr lnr-star"></span>
<span class="lnr lnr-star"></span>
</div><!--strip1-->
<div class="strip2">
<!-- PORTRAIT IMAGE LABEL TEXT-->
difficulty:
<!-- PORTRAIT IMAGE LABEL STAR RATING -->
<span class="lnr lnr-star"></span>
<span class="lnr lnr-star-empty"></span>
<span class="lnr lnr-star-empty"></span>
</div><!--strip2-->
<div class="strip3">
<!-- PORTRAIT IMAGE LABEL TEXT-->
difficulty:
<!-- PORTRAIT IMAGE LABEL STAR RATING -->
<span class="lnr lnr-star"></span>
<span class="lnr lnr-star"></span>
<span class="lnr lnr-star-empty"></span>
</div><!--strip3-->
<div class="strip4">
<!-- PORTRAIT IMAGE LABEL TEXT-->
difficulty:
<!-- PORTRAIT IMAGE LABEL STAR RATING -->
<span class="lnr lnr-star"></span>
<span class="lnr lnr-star"></span>
<span class="lnr lnr-star-empty"></span>
</div><!--strip4-->
</div><!--label-->
</div><!--portrait-->
<!-- TOP-LEFT TITLE -->
<!-- rmb to change the number in n11 to your chara no. -->
<!-- i.e. change it to n5 if on your 5th character -->
<div class="name">
<div class="n1">character 1 name</div>
<div class="n2">character 2 name</div>
<div class="n3">character 3 name</div>
<div class="n4">character 4 name</div>
</div><!--name-->
<div class="number">
<!-- TOP-RIGHT NUMBER AND SUBTITLE -->
<!-- rmb to change the number in no1 to your chara no. -->
<!-- i.e. change it to no5 if on your 5th character -->
<div class="numbertop">
<div class="no1">character 1 top text</div>
<div class="no2">character 2 top text</div>
<div class="no3">character 3 top text</div>
<div class="no4">character 4 top text</div>
</div><!--numbertop-->
<!-- rmb to change the number in bot1 to your chara no. -->
<!-- i.e. change it to bot5 if on your 5th character -->
<div class="numberbot">
<div class="bot1">character 1 bottom text</div>
<div class="bot2">character 2 bottom text</div>
<div class="bot3">character 3 bottom text</div>
<div class="bot4">character 4 bottom text</div>
</div><!--numberbot-->
</div><!--number-->
<div class="separator"></div>
<div class="details">
<!-- INFORMATION LIST -->
<!-- rmb to change the number in listo1 to your chara no. -->
<!-- i.e. change it to listo5 if on your 5th character -->
<!--start copy-->
<div class="listo1">
<b>stat name:</b> stat detail
<br>
<b>stat name:</b> stat detail
<br>
<b>stat name:</b> stat detail
<br>
<b>stat name:</b> stat detail
</div><!--listo1-->
<!--end copy-->
<div class="listo2">
<b>stat name:</b> stat detail
<br>
<b>stat name:</b> stat detail
<br>
<b>stat name:</b> stat detail
<br>
<b>stat name:</b> stat detail
</div><!--listo2-->
<div class="listo3">
<b>stat name:</b> stat detail
<br>
<b>stat name:</b> stat detail
<br>
<b>stat name:</b> stat detail
<br>
<b>stat name:</b> stat detail
</div><!--listo3-->
<div class="listo4">
<b>stat name:</b> stat detail
<br>
<b>stat name:</b> stat detail
<br>
<b>stat name:</b> stat detail
<br>
<b>stat name:</b> stat detail
</div><!--listo4-->
</div><!--details-->
<div class="imgs">
<!-- RIGHT SMALL IMAGE-->
<!-- rmb to change the number in tiny1 to your chara no. -->
<!-- i.e. change it to tiny5 if on your 5th character -->
<!--start copy-->
<div class="tiny1"><img class="smallimage" src="//78.media.tumblr.com/fd989ca0ab79a8495a9026b76e4dcb5f/tumblr_p7wh9p9G0g1qg2f5co2_r1_400.png"></div>
<!-- end copy -->
<div class="tiny2"><img class="smallimage" src="//78.media.tumblr.com/c74e5e51bfaa6262f1e99737383b62c6/tumblr_p7wh9p9G0g1qg2f5co1_r1_400.png"></div>
<div class="tiny3"><img class="smallimage" src="//78.media.tumblr.com/24c52ee7d1595ea1844fc0bd8a3a87a1/tumblr_p7wh9p9G0g1qg2f5co3_r1_400.png"></div>
<div class="tiny4"><img class="smallimage" src="//78.media.tumblr.com/6f94e9412403252eef78981a5a409981/tumblr_p7wh9p9G0g1qg2f5co4_r1_400.png"></div>
</div><!--imgs-->
<div class="biospace">
<!-- BIOGRAPHY TEXT SPACE -->
<!-- rmb to change the number in bio1 to your chara no. -->
<!-- i.e. change it to bio5 if on your 5th character -->
<!--start copy-->
<div class="bio1">
Character 1 biography text.
</div><!--bio1-->
<!--end copy-->
<div class="bio2">
Character 2 biography text.
</div><!--bio1-->
<div class="bio3">
Character 3 biography text.
</div><!--bio1-->
<div class="bio4">
Character 4 biography text.
</div><!--bio1-->
</div><!--biospace-->
<div class="echo">
<!-- BOTTOM AUDIO FILE -->
<!-- rmb to change the number in toggleSound1() to your chara no. -->
<!-- i.e. change it to toggleSound5() if on your 5th character -->
<!-- the same rule applies for sound1 -->
<!--start copy-->
<div class="sound1">
<div class="quorn">
<span class="lnr lnr-mic" onclick="toggleSound1();"></span>
<div class="qline"></div>
<!-- AUDIO DESCRIPTION -->
<div class="quote">Character 1 dialogue text</div>
</div><!--quorn-->
</div><!--sound1-->
<!-- end copy-->
<div class="sound2">
<div class="quorn">
<span class="lnr lnr-mic" onclick="toggleSound2();"></span>
<div class="qline"></div>
<!-- AUDIO DESCRIPTION -->
<div class="quote">Character 2 dialogue text</div>
</div><!--quorn-->
</div><!--sound2-->
<div class="sound3">
<div class="quorn">
<span class="lnr lnr-mic" onclick="toggleSound3();"></span>
<div class="qline"></div>
<!-- AUDIO DESCRIPTION -->
<div class="quote">Character 3 dialogue text</div>
</div><!--quorn-->
</div><!--sound3-->
<div class="sound4">
<div class="quorn">
<span class="lnr lnr-mic" onclick="toggleSound4();"></span>
<div class="qline"></div>
<!-- AUDIO DESCRIPTION -->
<div class="quote">Character 1 dialogue text</div>
</div><!--quorn-->
</div><!--sound4-->
</div><!--echo-->
<!-- ACTUAL AUDIO FILES -->
<!-- rmb to change the number in member1 to your chara no. -->
<!-- i.e. change it to member5 if on your 5th character -->
<!-- start copy -->
<audio id="member1" src="https://rhizo.gitlab.io/vf/I_was_hoping_for_a_challenge.ogg" type="audio"></audio>
<!-- end copy -->
<audio id="member2" src="https://rhizo.gitlab.io/vf/I_dont_take_lessons_from_you.ogg" type="audio"></audio>
<audio id="member3" src="https://rhizo.gitlab.io/vf/time_to_ride_off_into_the_sunset.ogg" type="audio"></audio>
<audio id="member4" src="https://rhizo.gitlab.io/vf/I_will_allow_none_to_stand_in_the_way_of_progress.ogg" type="audio"></audio>
</div><!--classified-->
</div><!--lettuce-->
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink