Deprecated: The each() function is deprecated. This message will be suppressed on further calls in /home/zhenxiangba/zhenxiangba.com/public_html/phproxy-improved-master/index.php on line 456
Character Page [04]: Re:volution - Pastebin.com
[go: Go Back, main page]
API tools faq
paste
glenthemes

Character Page [04]: Re:volution

glenthemes
Apr 28th, 2018 (edited)
3,925
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 28.86 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. Character Page [04]: Re:volution
  3. Made by glenthemes
  4.  
  5. Initial release: 2018/04/28
  6. Last updated: 2022/09/14
  7.  
  8. TERMS OF USE:
  9. 1) Do not remove the credit.
  10. 2) Do not remove parts of the code without my permission.
  11. 3) Do not claim my codes as your own.
  12. 4) Do not use my works as base codes.
  13. 5) You may add widgets to my themes and pages.
  14.  
  15. For customization help, please visit:
  16. glenthemes.tumblr.com/blackwatch
  17.  
  18. Please respect theme makers and stick to my Terms. Enjoy.
  19. ------------------------------------------------------------------------>
  20.  
  21. <!DOCTYPE html>
  22. <html lang="en">
  23.  
  24. <head>
  25.  
  26. <title>{Title}</title>
  27.  
  28. <link rel="shortcut icon" href="{Favicon}">
  29.  
  30. <!--------------------JAVASCRIPTS-------------------->
  31. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  32. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  33. <script>
  34. (function($){
  35. $(document).ready(function(){
  36. $("a[title]").style_my_tooltips({
  37. tip_follows_cursor:true,
  38. tip_delay_time:0,
  39. tip_fade_speed:25,
  40. attribute:"title"
  41. });
  42. });
  43. })(jQuery);
  44. </script>
  45.  
  46. <script src="//static.tumblr.com/2pnwama/uKLp7w9l4/koe.js"></script>
  47.  
  48. <script src="//static.tumblr.com/2pnwama/FGap8lweb/snipe.js"></script>
  49.  
  50. <link href="//static.tumblr.com/2pnwama/aBSp7wpz7/herbal.css" rel="stylesheet">
  51.  
  52. <link href="//static.tumblr.com/gtjt4bo/WBJp40bor/library.css" rel="stylesheet">
  53.  
  54. <link href="//fonts.googleapis.com/css?family=Karla|Muli|Montserrat:300,400,500|Quicksand" rel="stylesheet">
  55.  
  56. <link rel="stylesheet" href="//cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  57.  
  58. <!-------------------------------------------------------------------->
  59.  
  60. <style type="text/css">
  61.  
  62. @font-face { font-family: "big noodle"; src: url('//glen-assets.github.io/fonts/big_noodle_titling_oblique.ttf'); }
  63.  
  64. @font-face { font-family: "motor oil"; src: url('//glen-assets.github.io/fonts/Motor Oil 1937 M54.ttf'); }
  65.  
  66. @font-face { font-family: "consolas-alt"; src: url('//glen-assets.github.io/fonts/consolas.TTF'); }
  67.  
  68. /*--------------------TOOLTIPS--------------------*/
  69. #s-m-t-tooltip {
  70. padding:5px 10px;
  71. margin:26px 9px 0px 15px;
  72. background-color:#222; /* tooltip background color */
  73. border-radius:5px; /* rounded tooltip */
  74. font-family:Quicksand;font-weight:bold;
  75. font-size:9px;
  76. letter-spacing:1.3px;
  77. text-transform:uppercase;
  78. color:#ccc; /* tooltip text color */
  79. z-index:99999999999999999999999999998!important;
  80. max-width:40vw;
  81. -webkit-transition: all 0.3s ease-in-out;
  82. -moz-transition: all 0.3s ease-in-out;
  83. -o-transition: all 0.3s ease-in-out;
  84. }
  85.  
  86. /*--------------------TUMBLR CONTROLS--------------------*/
  87. iframe#tumblr_controls, .iframe-controls--desktop {
  88. top:3px!important;
  89. right:3px!important;
  90. position:fixed!important;
  91. transition:0.5s ease-in-out;
  92. opacity:0.6;
  93. z-index:99999999;
  94. }
  95.  
  96. iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
  97. opacity:0.8;
  98. }
  99.  
  100. /*--------------------SCROLLBAR--------------------*/
  101. ::-webkit-scrollbar {
  102. width:5px;
  103. height:5px;
  104. }
  105.  
  106. ::-webkit-scrollbar-thumb {
  107. background-color:#742936; /* color of scrollbar thumb */
  108. border-radius:10px; /* roundness of scrollbar ends */
  109. }
  110.  
  111. ::-webkit-scrollbar-track {
  112. background-color:#222; /* color of scrollbar track */
  113. border-radius:10px; /* roundness of scrollbar track */
  114. }
  115.  
  116. /*-----------------TEXT HIGHLIGHT-----------------*/
  117. ::selection {
  118. background:#333; /* text highlight background color */
  119. color:#ddd; /* text highlight color */
  120. }
  121.  
  122. ::-moz-selection {
  123. background:#333; /* text highlight background color */
  124. color:#ddd; /* text highlight color */
  125. }
  126.  
  127. /*--------------------BASICS--------------------*/
  128. body {
  129. background:#000 url('//78.media.tumblr.com/f88ca3448f0758865fd73fa63964579b/tumblr_p7wf47IuPm1qg2f5co3_r1_1280.png'); /* background color & image */
  130. background-attachment:fixed;
  131. background-repeat:no-repeat;
  132. background-size:cover;
  133. color:#999;
  134. font-family:karla;
  135. line-height:1.6em;
  136. font-size:12px;
  137. }
  138.  
  139. a {
  140. color:#fff;
  141. text-decoration:none;
  142. -webkit-transition: all 0.4s ease-in-out;
  143. -moz-transition: all 0.4s ease-in-out;
  144. -o-transition: all 0.4s ease-in-out;
  145. }
  146.  
  147. a:hover {
  148. text-decoration:none;
  149. color:#777;
  150. }
  151.  
  152. img {
  153. opacity:1;
  154. text-decoration:none;
  155. }
  156.  
  157. /*--------------------LEFT SIDEBAR--------------------*/
  158. #alliance {
  159. position:fixed;
  160. top:50%;left:50%;
  161. transform:translate(-50%, -50%);
  162. margin-left:-400px;
  163. width:300px;
  164. }
  165.  
  166. /* outmost red circle */
  167. .red-a1 {
  168. position:absolute;
  169. width:300px;
  170. height:300px;
  171. border-radius:100%;
  172. background-color:rgba(0,0,0,0.6);
  173. border:2px solid #9c3042;
  174. }
  175.  
  176. /* 2nd outmost red circle */
  177. .red-a2 {
  178. position:absolute;
  179. margin-top:10px;
  180. margin-left:10px;
  181. width:280px;
  182. height:280px;
  183. border-radius:100%;
  184. border:2px solid #9c3042;
  185. }
  186.  
  187. /* rotating red tab */
  188. .red-a3 {
  189. position:absolute;
  190. margin-left:77px;
  191. margin-top:252px;
  192. width:113px;
  193. height:30px;
  194. border-radius:100%;
  195. border:10px solid #9c3042;
  196. border-top-color:transparent;
  197. border-left-color:transparent;
  198. border-right-color:transparent;
  199. transform-origin:50% 50%;
  200. transform:rotate(4deg);
  201. }
  202.  
  203. /*------------------------------*/
  204. .load-red {
  205. position:absolute;
  206. width:304px;
  207. height:304px;
  208. transform-origin:50% 50%;
  209. background-color:transparent;
  210. -webkit-animation:spinred linear 3s infinite;
  211. -moz-animation:spinred linear 3s infinite;
  212. animation:spinred linear 3s infinite;
  213. }
  214.  
  215. @keyframes spinred {
  216. 0% {transform:rotate(360deg);}
  217. 100% {transform:rotate(0deg);}
  218. }
  219.  
  220. @-webkit-keyframes spinred {
  221. 0% {transform:rotate(360deg);}
  222. 100% {transform:rotate(0deg);}
  223. }
  224.  
  225. @-moz-keyframes spinred {
  226. 0% {transform:rotate(360deg);}
  227. 100% {transform:rotate(0deg);}
  228. }
  229. /*------------------------------*/
  230.  
  231. /* gray circle */
  232. .gray-a1 {
  233. position:absolute;
  234. width:230px;
  235. height:230px;
  236. border-radius:100%;
  237. background-color:transparent;
  238. border:1px solid #444;
  239. }
  240.  
  241. /* rotating gray tab*/
  242. .gray-a2 {
  243. position:absolute;
  244. width:105px;
  245. height:44px;
  246. margin-left:calc(50% - 61px);
  247. margin-top:-4px;
  248. border-radius:50%;
  249. border:8px solid #444;
  250. border-left-color:transparent;
  251. border-right-color:transparent;
  252. border-bottom-color:transparent;
  253. }
  254.  
  255. /*------------------------------*/
  256. .load-gray {
  257. position:absolute;
  258. width:232px;
  259. height:232px;
  260. margin-left:36px;
  261. margin-top:36px;
  262. transform-origin:50% 50%;
  263. background-color:transparent;
  264. -webkit-animation:spingray linear 1.8s infinite;
  265. -moz-animation:spingray linear 1.8s infinite;
  266. animation:spingray linear 1.8s infinite;
  267. }
  268.  
  269. @keyframes spingray {
  270. 0% {transform:rotate(0deg);}
  271. 100% {transform:rotate(360deg);}
  272. }
  273.  
  274. @-webkit-keyframes spingray {
  275. 0% {transform:rotate(0deg);}
  276. 100% {transform:rotate(360deg);}
  277. }
  278.  
  279. @-moz-keyframes spingray {
  280. 0% {transform:rotate(0deg);}
  281. 100% {transform:rotate(360deg);}
  282. }
  283.  
  284. /*------------------------------*/
  285.  
  286. /* thick red circle */
  287. .center-a1 {
  288. position:absolute;
  289. margin-left:62px;
  290. margin-top:62px;
  291. width:124px;
  292. height:124px;
  293. border-radius:100%;
  294. background-color:rgba(0,0,0,0.4);
  295. border:28px solid #5d1c27;
  296. }
  297.  
  298. /* innermost red circle */
  299. .center-a2 {
  300. position:absolute;
  301. margin-left:99px;
  302. margin-top:99px;
  303. width:104px;
  304. height:104px;
  305. border-radius:100%;
  306. background-color:transparent;
  307. border:1px solid #9c3042;
  308. }
  309.  
  310. /* thick top white bar */
  311. .white-bar {
  312. position:absolute;
  313. margin-left:62px;
  314. margin-top:62px;
  315. width:124px;
  316. height:124px;
  317. border-radius:100%;
  318. background-color:transparent;
  319. border:28px solid #ddd;
  320. border-left-color:transparent;
  321. border-right-color:transparent;
  322. border-bottom-color:transparent;
  323. }
  324.  
  325. /* image in the very center */
  326. /* change positioning as necessary */
  327. .picture {
  328. position:absolute;
  329. margin-top:114px;
  330. margin-left:119px;
  331. width:70px;
  332. height:auto;
  333. }
  334.  
  335. .basket {
  336. margin-top:calc(100% + 25px);
  337. margin-left:-18px;
  338. width:345px;
  339. }
  340.  
  341. /* member icons */
  342. .agent {
  343. margin:10px;
  344. width:64px;
  345. height:64px;
  346. border-radius:100%;
  347. cursor:pointer;
  348. -webkit-transition: all 0.15s ease-in-out;
  349. -moz-transition: all 0.15s ease-in-out;
  350. -o-transition: all 0.15s ease-in-out;
  351. }
  352.  
  353. .agent:hover {transform:scale(1.1,1.1);}
  354.  
  355. /* bottom member title */
  356. .affiliation {
  357. margin-top:11px;
  358. font-family:motor oil;
  359. font-size:10px;
  360. text-transform:uppercase;letter-spacing:3px;
  361. text-align:center;
  362. color:#ca5165;
  363. }
  364.  
  365.  
  366. /* bottom member title left line */
  367. .affiliation::before {
  368. content:"";
  369. position:absolute;
  370. margin-top:9px;
  371. margin-left:-110px;
  372. width:90px;
  373. height:1px;
  374. background:-webkit-linear-gradient(left,
  375. transparent 0%,
  376. #ba394f 80%);
  377.  
  378. }
  379.  
  380. /* bottom member title left right */
  381. .affiliation::after {
  382. content:"";
  383. position:absolute;
  384. margin-top:9px;
  385. margin-left:20px;
  386. width:90px;
  387. height:1px;
  388. background:-webkit-linear-gradient(right,
  389. transparent 0%,
  390. #ba394f 80%);
  391. }
  392.  
  393.  
  394. /*-----------------RIGHT INFO CONTAINER-----------------*/
  395. #classified {
  396. position:fixed;
  397. top:50%;left:50%;
  398. transform:translate(-50%, -50%);
  399. margin-left:200px;
  400. width:640px;
  401. height:405px;
  402. padding:20px;
  403. background-color:#151515;
  404. border-radius:10px;
  405. }
  406.  
  407. .dots {
  408. position:absolute;
  409. margin-top:8px;
  410. left:100%;
  411. margin-left:-66px;
  412. width:50px;
  413. }
  414.  
  415. .dots a {
  416. display:inline-block;
  417. margin:0px 2px;
  418. }
  419.  
  420. .dot1, .dot2, .dot3 {
  421. width:10px;
  422. height:10px;
  423. border-radius:100%;
  424. -webkit-transition: all 0.15s ease-in-out;
  425. -moz-transition: all 0.15s ease-in-out;
  426. -o-transition: all 0.15s ease-in-out;
  427. }
  428.  
  429. /* color of dots */
  430. .dot1 {background-color:#9c3042;}
  431. .dot1:hover {background-color:#ef6642;}
  432.  
  433. .dot2 {background-color:#C13B51;}
  434. .dot2:hover {background-color:#ef6642;}
  435.  
  436. .dot3 {background-color:#CE5E71;}
  437. .dot3:hover {background-color:#ef6642;}
  438.  
  439. /* fake filepath bar background */
  440. .mockbar {
  441. width:580px;
  442. height:30px;max-height:30px;
  443. overflow:hidden;
  444. background-color:#222;
  445. border-radius:10px;
  446. border:1px solid #000;
  447. cursor:text;
  448. }
  449.  
  450. .mockwrap {display:flex;}
  451.  
  452. /* fake filepath bar text */
  453. .mocktext {
  454. padding:0px 10px;
  455. font-family:consolas-alt;
  456. text-transform:uppercase;
  457. letter-spacing:2.5px;
  458. line-height:30px;
  459. font-size:8px;
  460. color:#ccc;
  461. }
  462.  
  463. .mocktext::after {content:" >";}
  464.  
  465. .bartext1 {display:block;}
  466.  
  467. /* flashing text input underline */
  468. .input {
  469. margin-top:20px;
  470. margin-left:-6px;
  471. width:10px;
  472. height:2px;
  473. background-color:#fff;
  474. animation: flashing 1s step-start 0s infinite;
  475. -webkit-animation: flashing 1s step-start 0s infinite;
  476. -moz-animation: flashing 1s step-start 0s infinite;
  477. }
  478.  
  479. @keyframes flashing {
  480. 50% {opacity:0;}
  481. }
  482.  
  483. @-webkit-keyframes flashing {
  484. 50% {opacity:0;}
  485. }
  486.  
  487. @-moz-keyframes flashing {
  488. 50% {opacity:0;}
  489. }
  490.  
  491. .portrait {float:left;margin-right:20px;}
  492.  
  493. /* vertical portrait image */
  494. .visage {
  495. margin-top:20px;
  496. width:200px;
  497. height:355px;
  498. border-radius:0px 0px 0px 10px;
  499. }
  500.  
  501. .chara1 {display:block;}
  502.  
  503. /* vertical portrait image label */
  504. .label {
  505. position:absolute;
  506. margin-top:-50px;
  507. width:180px;
  508. padding:10px;
  509. background-color:rgba(0,0,0,0.8);
  510. line-height:1em;
  511. font-family:montserrat;
  512. text-transform:uppercase;
  513. letter-spacing:1px;
  514. font-size:10px;
  515. color:#ccc;
  516. text-align:center;
  517. z-index:5;
  518. }
  519.  
  520. .strip1 {display:block;}
  521.  
  522. /* vertical portrait image label font icons */
  523. .label .lnr {margin:0px 2px;}
  524.  
  525. /* star font-icon */
  526. .label .lnr-star {color:#ff9a67;}
  527.  
  528. /* empty star font-icon */
  529. .label .lnr-star-empty {color:#9f9f9f;}
  530.  
  531.  
  532. /* top title */
  533. .name {
  534. margin-top:32px;
  535. font-family:big noodle;
  536. letter-spacing:1.5px;
  537. font-size:28px;
  538. color:#b0364a;
  539. }
  540.  
  541. .name::first-letter {color:#dd4953;}
  542.  
  543. .n1 {display:block;}
  544.  
  545. /* top right text */
  546. .number {
  547. float:right;
  548. margin-top:-18px;
  549. text-align:right;
  550. }
  551.  
  552. /* top right text: top text */
  553. .numbertop {
  554. font-family:big noodle;
  555. letter-spacing:1.5px;
  556. font-size:28px;
  557. color:#d94343;
  558. }
  559.  
  560. .no1 {display:block;}
  561.  
  562.  
  563. /* top right text: bottom text */
  564. .numberbot {
  565. margin-top:6px;
  566. font-family:big noodle;
  567. letter-spacing:1.5px;
  568. font-size:15px;
  569. color:#c3455a;
  570. }
  571.  
  572. .bot1 {display:block;}
  573.  
  574. /* separator line */
  575. .separator {
  576. margin:15px 0px;
  577. margin-left:220px;
  578. width:calc(100% - 360px);
  579. height:1px;
  580. background:-webkit-linear-gradient(left,
  581. transparent 0%,
  582. #ba394f 80% );
  583. }
  584.  
  585.  
  586. /* information list */
  587. .details {
  588. font-family:montserrat;
  589. text-transform:uppercase;
  590. letter-spacing:1px;
  591. font-size:11px;
  592. }
  593.  
  594. .details b {color:#d94343;}
  595.  
  596. .listo1 {display:block;}
  597.  
  598.  
  599. /* small image on the right */
  600. .smallimage {
  601. position:absolute;
  602. margin-top:-65px;
  603. margin-left:233px;
  604. width:130px;
  605. }
  606.  
  607. .tiny1 {display:block;}
  608.  
  609.  
  610. /* biography text space */
  611. .biospace {
  612. margin-top:15px;
  613. max-height:143px;
  614. overflow:auto;
  615. padding-right:15px;
  616. font-family:Muli;
  617. text-align:justify;
  618. }
  619.  
  620. .biospace p:last-child {margin-bottom:0px;}
  621.  
  622. .bio1 {display:block;}
  623.  
  624. /*----------------------VOICE LINE----------------------*/
  625. .quorn {
  626. display:flex;
  627. margin-top:15px;
  628. margin-left:220px;
  629. width:calc(100% - 220px);
  630. }
  631.  
  632. /* voice line mic icon */
  633. .quorn .lnr {
  634. align-self:center;
  635. -webkit-align-self:center;
  636. font-size:20px;
  637. background-color:#111;
  638. padding:9px;
  639. border-radius:100%;
  640. border:3px solid #9c3042;
  641. color:#aaa;
  642. cursor:pointer;
  643. -webkit-transition: all 0.25s ease-in-out;
  644. -moz-transition: all 0.25s ease-in-out;
  645. -o-transition: all 0.25s ease-in-out;
  646. }
  647.  
  648. .quorn .lnr:hover {color:#DC6478;}
  649.  
  650. /* voice line horizontal line */
  651. .qline {
  652. align-self:center;
  653. -webkit-align-self:center;
  654. width:15px;
  655. height:3px;
  656. background-color:#9c3042;
  657. }
  658.  
  659. /* voice line dialogue text */
  660. .quote {
  661. border-left:3px solid #9c3042;
  662. width:100%;
  663. padding:12px;
  664. background-color:#222;
  665. border-radius:0px 0px 10px 0px;
  666. font-family:motor oil;
  667. text-transform:uppercase;
  668. letter-spacing:1.5px;
  669. font-size:9px;
  670. color:#bbb;
  671. }
  672.  
  673. .sound1 {display:block;}
  674.  
  675. /*--------------CREDIT - PLEASE DO NOT REMOVE--------------*/
  676. #please-respect-theme-makers a {
  677. position:fixed;
  678. bottom:0;margin-bottom:15px;
  679. right:0;margin-right:15px;
  680. padding:9px;
  681. background-color:#222;
  682. border-radius:5px;
  683. font-family:karla;
  684. text-transform:uppercase;
  685. line-height:1em;
  686. text-align:center;
  687. font-size:9px;
  688. letter-spacing:1.3px;
  689. color:#ccc;
  690. z-index:999999;
  691. }
  692.  
  693. </style>
  694.  
  695. </head>
  696.  
  697. <body>
  698.  
  699. <!----PLEASE DO NOT REMOVE THE THEME CREDIT---->
  700. <div id="please-respect-theme-makers"><a href="//glenthemes.tumblr.com" title="page by glenthemes">glenthemes</a></div>
  701.  
  702. <!----------------LEFT SIDEBAR---------------->
  703. <div id="lettuce">
  704. <div id="alliance">
  705. <div class="load-red">
  706. <div class="red-a1"></div>
  707. <div class="red-a2"></div>
  708. <div class="red-a3"></div>
  709. </div><!--loadred-->
  710.  
  711. <div class="load-gray">
  712. <div class="gray-a1"></div>
  713. <div class="gray-a2"></div>
  714. </div><!--loadgray-->
  715.  
  716. <div class="center-a1"></div>
  717. <div class="center-a2"></div>
  718. <div class="white-bar"></div>
  719.  
  720.  
  721. <!-- IMAGE INSIDE THE CIRCLES -->
  722. <img class="picture" src="//78.media.tumblr.com/adbafcdd49475a0a7225bb3b6c82886f/tumblr_p7thy7UVQI1qg2f5co1_250.png" ondragstart="return false">
  723.  
  724.  
  725. <div class="basket">
  726. <!-- MEMBER ICONS -->
  727. <!-- start copy -->
  728. <a class="avatar1" title="genji"><img class="agent" src="//78.media.tumblr.com/a4003e28c75362644873da7bd4d90e5d/tumblr_p7v4udjp0N1qg2f5co4_250.png"></a>
  729. <!--end copy-->
  730.  
  731. <a class="avatar2" title="reaper"><img class="agent" src="//78.media.tumblr.com/9bd84ca86dd08f5aa3c0efe3fca67413/tumblr_p7v4udjp0N1qg2f5co2_250.png"></a>
  732.  
  733. <a class="avatar3" title="mccree"><img class="agent" src="//78.media.tumblr.com/47ff5f586aeaf04d1bfdda6d698c9889/tumblr_p7v4udjp0N1qg2f5co1_250.png"></a>
  734.  
  735. <a class="avatar4" title="moira"><img class="agent" src="//78.media.tumblr.com/89ec087869112b23243f30d6d7825fa9/tumblr_p7v4udjp0N1qg2f5co3_250.png"></a>
  736.  
  737. <!-- BOTTOM TITLE -->
  738. <div class="affiliation">blackwatch</div>
  739. </div><!--basket-->
  740. </div><!--alliance-->
  741.  
  742.  
  743. <!----------------RIGHT CONTENT---------------->
  744. <div id="classified">
  745.  
  746. <div class="dots">
  747. <a href="/" title="index"><div class="dot1"></div></a>
  748. <a href="/ask" title="message"><div class="dot2"></div></a>
  749. <a href="/archive" title="archive"><div class="dot3"></div></a>
  750. </div><!--dots-->
  751.  
  752.  
  753.  
  754. <div class="mockbar">
  755. <div class="mockwrap">
  756.  
  757.  
  758. <div class="path">
  759. <!-- FAKE FILEPATH BAR -->
  760. <!-- rmb to change the number in bartext1 to your chara no. -->
  761. <!-- i.e. change it to bartext5 if on your 5th character -->
  762.  
  763. <!-- start copy -->
  764. <div class="bartext1">
  765. <div class="mocktext">
  766. Blackwatch:\Archives\Agents > character 1 bar text</div>
  767. </div>
  768. <!-- end copy -->
  769.  
  770. <div class="bartext2">
  771. <div class="mocktext">
  772. Blackwatch:\Archives\Agents > character 2 bar text</div>
  773. </div>
  774.  
  775. <div class="bartext3">
  776. <div class="mocktext">
  777. Blackwatch:\Archives\Agents > character 3 bar text</div>
  778. </div>
  779.  
  780. <div class="bartext4">
  781. <div class="mocktext">
  782. Blackwatch:\Archives\Agents > character 4 bar text</div>
  783. </div>
  784.  
  785. </div><!--path-->
  786.  
  787.  
  788. <div class="input"></div>
  789. </div><!--mockwrap-->
  790. </div><!--mockbar-->
  791.  
  792.  
  793.  
  794. <div class="portrait">
  795.  
  796. <div class="mirror">
  797.  
  798. <!-- RIGHT CONTAINER PORTRAIT IMAGE -->
  799. <!-- rmb to change the number in chara1 to your chara no. -->
  800. <!-- i.e. change it to chara5 if on your 5th character -->
  801.  
  802. <!-- start copy -->
  803. <a class="chara1"><img class="visage" src="//78.media.tumblr.com/267851976887145fa1bb18b710fa0a2a/tumblr_p7v2snKzWB1qg2f5co2_1280.png"></a>
  804. <!--end copy-->
  805.  
  806. <a class="chara2"><img class="visage" src="//78.media.tumblr.com/9f9afc80ffa2fa8fa35287887f5db2b4/tumblr_p7v3m7krJA1qg2f5co2_1280.png"></a>
  807.  
  808. <a class="chara3"><img class="visage" src="//78.media.tumblr.com/8591821534bae1204bb5cf721e6e5228/tumblr_p7v3m7krJA1qg2f5co1_1280.png"></a>
  809.  
  810. <a class="chara4"><img class="visage" src="//78.media.tumblr.com/b30753a784b5e8c3263631aa5a2b8b8d/tumblr_p7v2snKzWB1qg2f5co1_r1_400.png"></a>
  811. </div><!--mirror-->
  812.  
  813.  
  814.  
  815. <div class="label">
  816.  
  817. <!-- rmb to change the number in strip1 to your chara no. -->
  818. <!-- i.e. change it to strip5 if on your 5th character -->
  819. <div class="strip1">
  820. <!-- PORTRAIT IMAGE LABEL TEXT-->
  821. difficulty:
  822. <!-- PORTRAIT IMAGE LABEL STAR RATING -->
  823. <span class="lnr lnr-star"></span>
  824. <span class="lnr lnr-star"></span>
  825. <span class="lnr lnr-star"></span>
  826. </div><!--strip1-->
  827.  
  828.  
  829. <div class="strip2">
  830. <!-- PORTRAIT IMAGE LABEL TEXT-->
  831. difficulty:
  832. <!-- PORTRAIT IMAGE LABEL STAR RATING -->
  833. <span class="lnr lnr-star"></span>
  834. <span class="lnr lnr-star-empty"></span>
  835. <span class="lnr lnr-star-empty"></span>
  836. </div><!--strip2-->
  837.  
  838.  
  839. <div class="strip3">
  840. <!-- PORTRAIT IMAGE LABEL TEXT-->
  841. difficulty:
  842. <!-- PORTRAIT IMAGE LABEL STAR RATING -->
  843. <span class="lnr lnr-star"></span>
  844. <span class="lnr lnr-star"></span>
  845. <span class="lnr lnr-star-empty"></span>
  846. </div><!--strip3-->
  847.  
  848. <div class="strip4">
  849. <!-- PORTRAIT IMAGE LABEL TEXT-->
  850. difficulty:
  851. <!-- PORTRAIT IMAGE LABEL STAR RATING -->
  852. <span class="lnr lnr-star"></span>
  853. <span class="lnr lnr-star"></span>
  854. <span class="lnr lnr-star-empty"></span>
  855. </div><!--strip4-->
  856.  
  857. </div><!--label-->
  858.  
  859.  
  860. </div><!--portrait-->
  861.  
  862.  
  863.  
  864. <!-- TOP-LEFT TITLE -->
  865. <!-- rmb to change the number in n11 to your chara no. -->
  866. <!-- i.e. change it to n5 if on your 5th character -->
  867. <div class="name">
  868. <div class="n1">character 1 name</div>
  869. <div class="n2">character 2 name</div>
  870. <div class="n3">character 3 name</div>
  871. <div class="n4">character 4 name</div>
  872. </div><!--name-->
  873.  
  874.  
  875.  
  876. <div class="number">
  877. <!-- TOP-RIGHT NUMBER AND SUBTITLE -->
  878. <!-- rmb to change the number in no1 to your chara no. -->
  879. <!-- i.e. change it to no5 if on your 5th character -->
  880. <div class="numbertop">
  881. <div class="no1">character 1 top text</div>
  882. <div class="no2">character 2 top text</div>
  883. <div class="no3">character 3 top text</div>
  884. <div class="no4">character 4 top text</div>
  885. </div><!--numbertop-->
  886.  
  887.  
  888. <!-- rmb to change the number in bot1 to your chara no. -->
  889. <!-- i.e. change it to bot5 if on your 5th character -->
  890. <div class="numberbot">
  891. <div class="bot1">character 1 bottom text</div>
  892. <div class="bot2">character 2 bottom text</div>
  893. <div class="bot3">character 3 bottom text</div>
  894. <div class="bot4">character 4 bottom text</div>
  895. </div><!--numberbot-->
  896.  
  897.  
  898.  
  899. </div><!--number-->
  900.  
  901.  
  902. <div class="separator"></div>
  903.  
  904.  
  905. <div class="details">
  906.  
  907. <!-- INFORMATION LIST -->
  908. <!-- rmb to change the number in listo1 to your chara no. -->
  909. <!-- i.e. change it to listo5 if on your 5th character -->
  910.  
  911. <!--start copy-->
  912. <div class="listo1">
  913. <b>stat name:</b> stat detail
  914. <br>
  915. <b>stat name:</b> stat detail
  916. <br>
  917. <b>stat name:</b> stat detail
  918. <br>
  919. <b>stat name:</b> stat detail
  920. </div><!--listo1-->
  921. <!--end copy-->
  922.  
  923. <div class="listo2">
  924. <b>stat name:</b> stat detail
  925. <br>
  926. <b>stat name:</b> stat detail
  927. <br>
  928. <b>stat name:</b> stat detail
  929. <br>
  930. <b>stat name:</b> stat detail
  931. </div><!--listo2-->
  932.  
  933. <div class="listo3">
  934. <b>stat name:</b> stat detail
  935. <br>
  936. <b>stat name:</b> stat detail
  937. <br>
  938. <b>stat name:</b> stat detail
  939. <br>
  940. <b>stat name:</b> stat detail
  941. </div><!--listo3-->
  942.  
  943. <div class="listo4">
  944. <b>stat name:</b> stat detail
  945. <br>
  946. <b>stat name:</b> stat detail
  947. <br>
  948. <b>stat name:</b> stat detail
  949. <br>
  950. <b>stat name:</b> stat detail
  951. </div><!--listo4-->
  952. </div><!--details-->
  953.  
  954.  
  955.  
  956. <div class="imgs">
  957. <!-- RIGHT SMALL IMAGE-->
  958. <!-- rmb to change the number in tiny1 to your chara no. -->
  959. <!-- i.e. change it to tiny5 if on your 5th character -->
  960.  
  961. <!--start copy-->
  962. <div class="tiny1"><img class="smallimage" src="//78.media.tumblr.com/fd989ca0ab79a8495a9026b76e4dcb5f/tumblr_p7wh9p9G0g1qg2f5co2_r1_400.png"></div>
  963. <!-- end copy -->
  964.  
  965. <div class="tiny2"><img class="smallimage" src="//78.media.tumblr.com/c74e5e51bfaa6262f1e99737383b62c6/tumblr_p7wh9p9G0g1qg2f5co1_r1_400.png"></div>
  966.  
  967. <div class="tiny3"><img class="smallimage" src="//78.media.tumblr.com/24c52ee7d1595ea1844fc0bd8a3a87a1/tumblr_p7wh9p9G0g1qg2f5co3_r1_400.png"></div>
  968.  
  969. <div class="tiny4"><img class="smallimage" src="//78.media.tumblr.com/6f94e9412403252eef78981a5a409981/tumblr_p7wh9p9G0g1qg2f5co4_r1_400.png"></div>
  970. </div><!--imgs-->
  971.  
  972.  
  973.  
  974. <div class="biospace">
  975. <!-- BIOGRAPHY TEXT SPACE -->
  976. <!-- rmb to change the number in bio1 to your chara no. -->
  977. <!-- i.e. change it to bio5 if on your 5th character -->
  978.  
  979. <!--start copy-->
  980. <div class="bio1">
  981. Character 1 biography text.
  982. </div><!--bio1-->
  983. <!--end copy-->
  984.  
  985.  
  986. <div class="bio2">
  987. Character 2 biography text.
  988. </div><!--bio1-->
  989.  
  990.  
  991. <div class="bio3">
  992. Character 3 biography text.
  993. </div><!--bio1-->
  994.  
  995.  
  996. <div class="bio4">
  997. Character 4 biography text.
  998. </div><!--bio1-->
  999.  
  1000. </div><!--biospace-->
  1001.  
  1002.  
  1003. <div class="echo">
  1004. <!-- BOTTOM AUDIO FILE -->
  1005. <!-- rmb to change the number in toggleSound1() to your chara no. -->
  1006. <!-- i.e. change it to toggleSound5() if on your 5th character -->
  1007. <!-- the same rule applies for sound1 -->
  1008.  
  1009. <!--start copy-->
  1010. <div class="sound1">
  1011. <div class="quorn">
  1012. <span class="lnr lnr-mic" onclick="toggleSound1();"></span>
  1013. <div class="qline"></div>
  1014. <!-- AUDIO DESCRIPTION -->
  1015. <div class="quote">Character 1 dialogue text</div>
  1016. </div><!--quorn-->
  1017. </div><!--sound1-->
  1018. <!-- end copy-->
  1019.  
  1020.  
  1021. <div class="sound2">
  1022. <div class="quorn">
  1023. <span class="lnr lnr-mic" onclick="toggleSound2();"></span>
  1024. <div class="qline"></div>
  1025. <!-- AUDIO DESCRIPTION -->
  1026. <div class="quote">Character 2 dialogue text</div>
  1027. </div><!--quorn-->
  1028. </div><!--sound2-->
  1029.  
  1030.  
  1031. <div class="sound3">
  1032. <div class="quorn">
  1033. <span class="lnr lnr-mic" onclick="toggleSound3();"></span>
  1034. <div class="qline"></div>
  1035. <!-- AUDIO DESCRIPTION -->
  1036. <div class="quote">Character 3 dialogue text</div>
  1037. </div><!--quorn-->
  1038. </div><!--sound3-->
  1039.  
  1040.  
  1041. <div class="sound4">
  1042. <div class="quorn">
  1043. <span class="lnr lnr-mic" onclick="toggleSound4();"></span>
  1044. <div class="qline"></div>
  1045. <!-- AUDIO DESCRIPTION -->
  1046. <div class="quote">Character 1 dialogue text</div>
  1047. </div><!--quorn-->
  1048. </div><!--sound4-->
  1049.  
  1050.  
  1051. </div><!--echo-->
  1052.  
  1053.  
  1054. <!-- ACTUAL AUDIO FILES -->
  1055. <!-- rmb to change the number in member1 to your chara no. -->
  1056. <!-- i.e. change it to member5 if on your 5th character -->
  1057. <!-- start copy -->
  1058. <audio id="member1" src="https://rhizo.gitlab.io/vf/I_was_hoping_for_a_challenge.ogg" type="audio"></audio>
  1059. <!-- end copy -->
  1060.  
  1061. <audio id="member2" src="https://rhizo.gitlab.io/vf/I_dont_take_lessons_from_you.ogg" type="audio"></audio>
  1062.  
  1063. <audio id="member3" src="https://rhizo.gitlab.io/vf/time_to_ride_off_into_the_sunset.ogg" type="audio"></audio>
  1064.  
  1065. <audio id="member4" src="https://rhizo.gitlab.io/vf/I_will_allow_none_to_stand_in_the_way_of_progress.ogg" type="audio"></audio>
  1066.  
  1067.  
  1068. </div><!--classified-->
  1069. </div><!--lettuce-->
  1070.  
  1071. </body>
  1072.  
  1073. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!