API tools faq
paste
glenthemes

About Page [05]: Deceit

glenthemes
Aug 11th, 2018 (edited)
3,482
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.42 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. About Page [05]: Deceit
  3. Made by glenthemes
  4.  
  5. Initial release: 2018/08/11
  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. Please stick to the TOU! Make 9S proud.
  16. ------------------------------------------------------------------------>
  17.  
  18. <!DOCTYPE html>
  19. <html lang="en">
  20.  
  21. <head>
  22.  
  23. <title>{Title}</title>
  24.  
  25. <link rel="shortcut icon" href="{Favicon}">
  26.  
  27. <!--------------------JAVASCRIPTS-------------------->
  28. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  29. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  30. <script>
  31. (function($){
  32. $(document).ready(function(){
  33. $("a[title]").style_my_tooltips({
  34. tip_follows_cursor:true,
  35. tip_delay_time:0,
  36. tip_fade_speed:250,
  37. attribute:"title"
  38. });
  39. });
  40. })(jQuery);
  41. </script>
  42.  
  43. <script src ="//static.tumblr.com/2pnwama/HGEpacv22/hearts.js"></script>
  44.  
  45. <link href="//fonts.googleapis.com/css?family=Inconsolata|Quicksand:400,500|Source+Code+Pro|Unica+One" rel="stylesheet">
  46.  
  47. <!-------------------------------------------------------------------->
  48.  
  49. <style type="text/css">
  50.  
  51. /*-------------------TOOLTIPS--------------------*/
  52. #s-m-t-tooltip {
  53. padding: 3.5px 9px;
  54. margin: 26px 9px 0px 15px;
  55. background-color: #333; /* tooltip background color */
  56. font-family: quicksand;
  57. font-size: 9px;
  58. text-transform: uppercase;
  59. letter-spacing:1px;
  60. color: #eee; /* tooltip text color */
  61. z-index:99999999999999999999999999998!important;
  62. max-width: 40vw;
  63. -webkit-transition: all 0.3s ease-in-out;
  64. -moz-transition: all 0.3s ease-in-out;
  65. -o-transition: all 0.3s ease-in-out;
  66. }
  67.  
  68. /*--------------------TUMBLR CONTROLS--------------------*/
  69. iframe#tumblr_controls, .iframe-controls--desktop {
  70. top:7px!important;
  71. right:7px!important;
  72. position:fixed!important;
  73.  
  74. /* delete the next 2 lines to have white tumblr controls */
  75. filter:invert(100%) hue-rotate(180deg);
  76. -webkit-filter:invert(100%) hue-rotate(180deg);
  77.  
  78. transform:scale(0.7,0.7);
  79. -webkit-transform:scale(0.7,0.7);
  80.  
  81. transform-origin:100% 0;
  82. z-index:999999!important;
  83. }
  84.  
  85. /*--------------------TEXT HIGHLIGHT--------------------*/
  86. ::selection {
  87. background:#fafafa;
  88. color:#555;
  89. }
  90.  
  91. ::-moz-selection {
  92. background:#fafafa;
  93. color:#555;
  94. }
  95.  
  96. /*--------------------BASICS--------------------*/
  97. body {
  98. background-color:#fdfdfd; /* background color */
  99. background-image:url(''); /* background image URL */
  100. background-attachment:fixed;
  101. background-repeat:repeat;
  102. color:#888; /* body text color */
  103. cursor:normal;
  104. font-family:source code pro;
  105. line-height:1.6em;
  106. font-size:12px;
  107. text-align:left;
  108. overflow:hidden;
  109. }
  110.  
  111. blockquote {
  112. padding-left:10px;
  113. margin-left:5px;
  114. border-left:1px solid;
  115. border-color:#aaa;
  116. margin:10px;
  117. }
  118.  
  119. a {
  120. color:#000;
  121. text-decoration:none;
  122. -webkit-transition: all 0.4s ease-in-out;
  123. -moz-transition: all 0.4s ease-in-out;
  124. -o-transition: all 0.4s ease-in-out;
  125. }
  126.  
  127. b, strong {
  128. font-weight:bold;
  129. color:#555;
  130. }
  131.  
  132. pre, code {
  133. white-space:pre-wrap;
  134. display:block;
  135. }
  136.  
  137. hr {
  138. width:70%;
  139. border-width:0px;
  140. height:1px;
  141. background-color:#bbb;
  142. }
  143.  
  144. /*--------------------EVERYTHING--------------------*/
  145. /* best not to touch this section */
  146. #wrappy {
  147. position:fixed;
  148. top:50%;left:50%;
  149. transform:translate(-50%,-50%);
  150.  
  151. width:calc(200px + 40px + 200px + 100px + 500px);
  152. /* yorha icon + gap1 + bars + gap2 + bio box */
  153.  
  154. display:flex;
  155. }
  156.  
  157.  
  158. /*--------------------LEFT CONTENT--------------------*/
  159. #left {
  160. -webkit-align-self:center;
  161. align-self:center;
  162. }
  163.  
  164. #topwrap1 {display:flex;}
  165.  
  166. /*----LEFT IMAGE----*/
  167. #yorha {
  168. vertical-align:middle;
  169. -webkit-align-self:center;
  170. align-self:center;
  171. width:200px; /* please do not make it larger */
  172. }
  173.  
  174. #sbstats {
  175. -webkit-align-self:center;
  176. align-self:center;
  177. margin-left:40px;
  178. }
  179.  
  180. /*----STATISTICS BARS----*/
  181. .statbar {
  182. margin-top:15px;
  183. width:calc(200px - 1px);
  184. height:8px;
  185. background-color:#fbfbfb; /* empty color */
  186. border:0.5px solid #222; /* whole bar border */
  187. overflow:hidden;
  188. }
  189.  
  190. .statbar:first-child {margin-top:0px;}
  191.  
  192. .statfill {
  193. margin-top:0px;
  194. margin-left:0px;
  195. height:inherit;
  196. background-color:#222; /* fill color */
  197. }
  198.  
  199. .bar-label {
  200. margin-top:8px;
  201. font-family:source code pro;
  202. font-size:8px;
  203. text-transform:uppercase;
  204. color:#999; /* bar label text color */
  205. line-height:1em;
  206. }
  207.  
  208. /*----STATISTICS TABLE----*/
  209. #stat-table {
  210. margin-top:20px;
  211. font-family:source code pro;
  212. font-size:9px;
  213. text-transform:uppercase;
  214. letter-spacing:0.5px;
  215. color:#999; /* statistics table text color */
  216. line-height:1.5em;
  217. }
  218.  
  219. #stat-table table {
  220. margin:-6px -17px;
  221. border-spacing:17px 6px;
  222. }
  223.  
  224. #stat-table tr {
  225. vertical-align:top;
  226. }
  227.  
  228. /*----CUSTOM LINKS----*/
  229. #c-title {
  230. /* best not to touch the next 2/3 lines */
  231. margin-top:30px;
  232. width:calc((200px + 40px + 200px) - 24px);
  233. /* leftwidth - leftright padding - border */
  234.  
  235. background-color:#f9f9f9; /* custom links title background color */
  236. padding:12px;
  237. font-family:quicksand;
  238. text-transform:uppercase;
  239. letter-spacing:2px;
  240. font-weight:500;
  241. font-size:11px;
  242. color:#aaa6ac; /* custom links title color */
  243. line-height:1em;
  244. text-align:center;
  245. }
  246.  
  247. /* best not to touch this section */
  248. #c-links {
  249. margin-top:12px;
  250. margin-left:-2px;
  251. width:calc(100% + 6px);
  252. }
  253.  
  254. #c-links a {
  255. /* best not to touch the next 3 lines */
  256. display:inline-block;
  257. margin:5px 2px;
  258. width:calc(25% - 6px - (4px * 6));
  259.  
  260. background-color:#f9f9f9; /* custom links background color */
  261. padding:6px 10px;
  262. font-family:quicksand;
  263. text-transform:uppercase;
  264. letter-spacing:2px;
  265. font-weight:500;
  266. font-size:9px;
  267. color:#aaa6ac; /* custom links text color */
  268. text-align:center;
  269. }
  270.  
  271. #c-links a:hover {
  272. background-color:#f4f4f4; /* custom links background hover color */
  273. }
  274.  
  275. /*--------------------RIGHT--------------------*/
  276. /* best not to touch the first 3 sections */
  277. #right {
  278. -webkit-align-self:center;
  279. align-self:center;
  280. }
  281.  
  282. #righteo {
  283. margin-left:100px;
  284. width:500px;
  285. }
  286.  
  287. #titlewrap {
  288. display:flex;
  289. line-height:1em;
  290. margin-bottom:-1px;
  291. }
  292.  
  293. /*----BIOGRAPHY TITLE----*/
  294. #maintitle {
  295. font-family:unica one;
  296. text-transform:uppercase;
  297. letter-spacing:2px;
  298. font-weight:500;
  299. font-size:20px;
  300. color:#555; /* biography box title color */
  301. text-align:left;
  302. }
  303.  
  304. /* flashing text input underline */
  305. .input {
  306. margin-top:1em;
  307. margin-left:0.5ch;
  308. width:10px;
  309. height:1.5px;
  310. background-color:#555; /* flashing input line color */
  311. animation: flashing 1s step-start 0s infinite;
  312. -webkit-animation: flashing 1s step-start 0s infinite;
  313. -moz-animation: flashing 1s step-start 0s infinite;
  314. }
  315.  
  316. @keyframes flashing {
  317. 50% {opacity:0;}
  318. }
  319.  
  320. @-webkit-keyframes flashing {
  321. 50% {opacity:0;}
  322. }
  323.  
  324. @-moz-keyframes flashing {
  325. 50% {opacity:0;}
  326. }
  327.  
  328. /*----BIOGRAPHY BOX----*/
  329. #mainbox {
  330. margin-top:20px;
  331. height:400px; /* box height */
  332. padding:25px;
  333. background-color:#fafafa; /* box background color */
  334. border:1px solid #f2f2f2; /* box border */
  335. }
  336.  
  337. .sbimage {
  338. float:right;
  339. margin-left:25px;
  340. height:100%;
  341. }
  342.  
  343. .bio {
  344. max-height:100%;
  345. padding-right:10px;
  346. overflow:auto;
  347. font-family:inconsolata;
  348. font-size:12px;
  349. color:#aaa; /* biography text color */
  350. line-height:1.9em;
  351. text-align:justify;
  352. }
  353.  
  354. .bio a {
  355. padding-bottom:1px;
  356. border-bottom:1px solid #ddd; /* biography links bottom border */
  357. color:#333; /* biography links color */
  358. }
  359.  
  360. /*----BIOGRAPHY BULLET POINTS----*/
  361. .bullet-line {
  362. display:flex;
  363. margin-bottom:5px;
  364. }
  365.  
  366. .bullet-line:last-of-type {margin-bottom:0px;}
  367.  
  368. .bio .cursor {
  369. -webkit-align-self:center;
  370. align-self:center;
  371. width:22px; /* width of bullet point icon */
  372. }
  373.  
  374. .bullet-text {
  375. margin-left:12px;
  376. }
  377.  
  378. .bullet-text name {
  379. text-transform:uppercase;
  380. letter-spacing:1px;
  381. color:#222; /* bullet point label color */
  382. }
  383.  
  384. .bio::-webkit-scrollbar {
  385. background-color:#fafafa; /* biography scrollbar background color */
  386. height:13px;
  387. width:13px;
  388. }
  389.  
  390. .bio::-webkit-scrollbar-thumb {
  391. background-color:#ccc; /* biography scrollbar color */
  392. border:6px solid #fafafa; /* biography scrollbar background color */
  393. }
  394.  
  395. .bio::-webkit-scrollbar-track {
  396. background-color:#fafafa; /* biography scrollbar background color */
  397. }
  398.  
  399. .bio p:last-child {margin-bottom:0px;}
  400.  
  401. /*--------------------MUSIC PLAYER--------------------*/
  402. #glenjamin {
  403. position:fixed;
  404. bottom:0;margin-bottom:20px;
  405. left:0;margin-left:20px;
  406. display:flex;
  407. z-index:2;
  408. }
  409.  
  410. .buttoms {cursor:pointer;}
  411.  
  412. .playy, .pausee {
  413. font-size:13px;
  414. color:#111; /* audio buttons color */
  415. }
  416.  
  417. .pausee {
  418. display:none;
  419. margin-right:1.5px;
  420. }
  421.  
  422. .sonata {
  423. margin-left:10px;
  424. color:#111; /* music icon color */
  425. }
  426.  
  427. .labeltext {
  428. margin-left:8px;
  429. font-family:courier new;
  430. font-size:9px;
  431. color:#111; /* music text color */
  432. }
  433.  
  434. /*---------------CREDIT. PLEASE DO NOT REMOVE---------------*/
  435. #glencred {
  436. position:fixed;
  437. bottom:0;margin-bottom:20px;
  438. right:0;margin-right:20px;
  439. font-family:quicksand;
  440. text-transform:uppercase;
  441. letter-spacing:2px;
  442. font-weight:500;
  443. font-size:8px;
  444. color:#999; /* credit link color */
  445. z-index:10;
  446. }
  447.  
  448. </style>
  449.  
  450. </head>
  451.  
  452. <body>
  453.  
  454. <!---- CREDIT. PLESAE DO NOT REMOVE! THANKS! ---->
  455. <a id="glencred" href="//glenthemes.tumblr.com" title="page by glenthemes">glenthemes</a>
  456.  
  457. <!---- MUSIC PLAYER ---->
  458. <div id="glenjamin">
  459. <div class="buttoms" onclick="kaishi();">
  460. <a title="play music"><div class="playy">►</div></a>
  461. <a title="pause music"><div class="pausee">❚❚</div></a>
  462. </div><!--please do not delete this line-->
  463.  
  464. <div class="sonata">♫</div>
  465.  
  466. <!--music name-->
  467. <div class="labeltext">Fortress of Lies</div>
  468. </div><!--please do not delete this line-->
  469.  
  470.  
  471. <!-- music track URL -->
  472. <!-- put the music link between "" of src="" -->
  473. <!-- tutorial: linktr.ee/direct_file_links -->
  474. <audio id="tune" src="https://rhizo.gitlab.io/nier/Fortress_of_Lies.mp3" onended="restart();" type="audio"></audio>
  475.  
  476. <div id="wrappy">
  477.  
  478. <div id="left">
  479. <div id="topwrap1">
  480.  
  481. <!---- LEFT SIDEBAR IMAGE ---->
  482. <img id="yorha" src="//78.media.tumblr.com/3da643846a21e88a3860ed0998436e02/tumblr_pd5bleZa0f1qg2f5co4_r1_540.png">
  483.  
  484.  
  485. <!---- STATISTICS BARS ---->
  486. <div id="sbstats">
  487. <!---- ONE BAR ---->
  488. <div class="statbar">
  489. <div class="statfill" style="width:70%"></div>
  490. </div>
  491.  
  492. <div class="bar-label">> Lv. 99</div>
  493.  
  494. <!---- ONE BAR ---->
  495. <div class="statbar">
  496. <div class="statfill" style="width:30%"></div>
  497. </div>
  498.  
  499. <div class="bar-label">> 999,999 EXP</div>
  500.  
  501.  
  502. <!---- STATISTICS BARS ---->
  503. <div id="stat-table">
  504. <table>
  505. <tbody>
  506. <tr>
  507. <td>Vitals:</td>
  508. <td>Green</td>
  509. </tr>
  510.  
  511. <tr>
  512. <td>Black Box Temp.:</td>
  513. <td>Normal</td>
  514. </tr>
  515.  
  516. <tr>
  517. <td>Remaining Energy:</td>
  518. <td>100%</td>
  519. </tr>
  520.  
  521. <tr>
  522. <td>System Check:</td>
  523. <td>Complete</td>
  524. </tr>
  525. </tbody>
  526. </table>
  527. </div><!--stat-table-->
  528.  
  529. </div><!--sbstats--><!--please do not delete this line-->
  530. </div><!--topwrap1--><!--please do not delete this line-->
  531.  
  532.  
  533. <!---- CUSTOM LINKS TITLE ---->
  534. <div id="c-title">systems directory</div>
  535.  
  536.  
  537. <!---- CUSTOM LINKS ---->
  538. <div id="c-links">
  539. <a href="/">link one</a>
  540. <a href="/">link two</a>
  541. <a href="/">link three</a>
  542. <a href="/">link four</a>
  543. <a href="/">link five</a>
  544. <a href="/">link six</a>
  545. <a href="/">link seven</a>
  546. <a href="/">link eight</a>
  547. </div>
  548. </div><!--left--><!--please do not delete this line-->
  549.  
  550.  
  551.  
  552. <div id="right">
  553. <div id="righteo">
  554. <div id="titlewrap">
  555.  
  556. <!-- biography box title -->
  557. <div id="maintitle">YoRHa No.9 Type S</div>
  558.  
  559. <div class="input"></div>
  560. </div><!--please do not delete this line-->
  561.  
  562. <div id="mainbox">
  563.  
  564. <!--biography box sidebar image-->
  565. <img class="sbimage" src="//78.media.tumblr.com/09c8bc923af499dcf667365c738d9981/tumblr_pd5bleZa0f1qg2f5co5_r1_400.png">
  566.  
  567. <div class="bio">
  568. here lies your text
  569.  
  570. <p>
  571.  
  572. <!---- ONE BULLET POINT ---->
  573. <div class="bullet-line">
  574. <img class="cursor" src="https://static.tumblr.com/snld4jp/3Dsri7q7g/select_cursor_svg.svg">
  575. <div class="bullet-text">
  576. <name>Age:</name> 2-3 years
  577. </div><!--please do not delete this line-->
  578. </div><!--please do not delete this line-->
  579.  
  580. <!---- ONE BULLET POINT ---->
  581. <div class="bullet-line">
  582. <img class="cursor" src="https://static.tumblr.com/snld4jp/3Dsri7q7g/select_cursor_svg.svg">
  583. <div class="bullet-text">
  584. <name>Race:</name> YoRHa Android
  585. </div><!--please do not delete this line-->
  586. </div><!--please do not delete this line-->
  587.  
  588. <!---- ONE BULLET POINT ---->
  589. <div class="bullet-line">
  590. <img class="cursor" src="https://static.tumblr.com/snld4jp/3Dsri7q7g/select_cursor_svg.svg">
  591. <div class="bullet-text">
  592. <name>Occupation:</name> YoRHa Scanning Unit
  593. </div><!--please do not delete this line-->
  594. </div><!--please do not delete this line-->
  595.  
  596. <p>
  597.  
  598. Your biography text goes here!
  599. </div><!--bio->
  600. </div><!--mainbox-->
  601. </div><!--righteo--><!--please do not delete this line-->
  602. </div><!--right--><!--please do not delete this line-->
  603.  
  604. </div><!--wrappy--><!--please do not delete this line-->
  605. </body>
  606.  
  607. </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!