API tools faq
paste
Advertisement
glenthemes

About Page [12]: Stargazer

glenthemes
Mar 7th, 2019 (edited)
14,836
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.66 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. About Page [12]: Stargazer
  3. Made by glenthemes
  4.  
  5. Initial release: 2019/03/07
  6. Last updated: 2022/09/14
  7.  
  8. TERMS OF USE:
  9. 1) Do not remove the page credit.
  10. 2) Do not repost/redistribute my themes.
  11. 3) Do not take parts of the code and use it as your own.
  12. 4) Do not use my themes as a base code.
  13. 5) Do not mix my themes together.
  14.  
  15. Guide:
  16. docs.google.com/document/d/1LXRZccy9F7vskPp18jG3LeO4BRUxnDfZOz9KrO1BCLg/edit?usp=sharing
  17.  
  18. --- Credits:
  19.  
  20. Side image:
  21. - "Hollow Knight - F2U" pixel art by BelieveTheHorror
  22. www.deviantart.com/believethehorror/art/Hollow-Knight-F2U-746195471
  23.  
  24. Fonts:
  25. - "Silkscreen" by Jason Aleksandr Kottke
  26. www.dafont.com/silkscreen.font
  27. - "PixelOperator Bold" by Jayvee Enaguas
  28. www.dafont.com/pixel-operator.font
  29.  
  30. Music:
  31. - "The Tower" (8-bit version) by Keiichi Okabe for NieR: Automata
  32.  
  33. Background:
  34. - @davehugs (user deactivated)
  35. backup post link: devsmaycry.tumblr.com/post/155883512669/
  36. ------------------------------------------------------------------------>
  37.  
  38. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  39. <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  40.  
  41. <head>
  42.  
  43. <title>{Title}</title>
  44.  
  45. <link rel="shortcut icon" href="{Favicon}">
  46.  
  47. <!--------------------JAVASCRIPTS-------------------->
  48. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  49. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  50. <script>
  51. (function($){
  52. $(document).ready(function(){
  53. $("a[title]").style_my_tooltips({
  54. tip_follows_cursor:true,
  55. tip_delay_time:0,
  56. tip_fade_speed:0,
  57. attribute:"title"
  58. });
  59. });
  60. })(jQuery);
  61. </script>
  62.  
  63. <link href="//fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
  64.  
  65. <script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>
  66.  
  67. <script>
  68. $(document).ready(function(){
  69. $("img").each(function(){
  70. if ($(this).attr("src") == "//orig00.deviantart.net/77fd/f/2018/142/b/6/hollow_knight___f2u_by_believethehorror-dcc9k3z.gif"){
  71. $(this).wrap("<a title='Art by BelieveTheHorror - DeviantArt'></a>");
  72. $(this).css("cursor","help");
  73. }
  74. });
  75. });
  76. </script>
  77. <!-------------------------------------------------------------------->
  78.  
  79. <style type="text/css">
  80.  
  81. @font-face { font-family: "pixeloperator bold"; src: url('//glen-assets.github.io/fonts/PixelOperator-Bold.ttf'); }
  82.  
  83. @font-face { font-family: "silkscreen"; src: url('//glen-assets.github.io/fonts/silkscreen.ttf'); }
  84.  
  85. @font-face { font-family: "consolas-alt"; src: url('//glen-assets.github.io/fonts/consolas.TTF'); }
  86.  
  87. /*--------------------TOOLTIPS--------------------*/
  88. #s-m-t-tooltip {
  89. padding:4px 9px;
  90. margin:20px;
  91. background:var(--Tooltip-Background);
  92. border:2px solid var(--Tooltip-Border);
  93. border-radius:1px;
  94. font-family:consolas-alt;
  95. font-size:10px;
  96. color:var(--Tooltip-Text);
  97. max-width:40vw;
  98. }
  99.  
  100. /*--------------------TUMBLR CONTROLS--------------------*/
  101. iframe#tumblr_controls, .iframe-controls--desktop {
  102. top:10px!important;
  103. right:10px!important;
  104. position:fixed!important;
  105.  
  106. transform:scale(0.7,0.7);
  107. -webkit-transform:scale(0.7,0.7);
  108.  
  109. transform-origin:100% 0;
  110. opacity:0.87;
  111. z-index:999999!important;
  112. }
  113.  
  114. /*--------------------BASICS--------------------*/
  115. body {
  116. background-color:var(--Background);
  117. /* background image */
  118. background:url(//66.media.tumblr.com/cab8feb0a1bf9e66ac5d8e4d0b38d4fa/tumblr_pnybijoLnD1qg2f5co5_r1_500.png);
  119. background-attachment:fixed;
  120. background-repeat:repeat;
  121. line-height:1.6em;
  122. font-size:12px;
  123. }
  124.  
  125. a {
  126. text-decoration:none;
  127. -webkit-transition: all 0.4s ease-in-out;
  128. -moz-transition: all 0.4s ease-in-out;
  129. -o-transition: all 0.4s ease-in-out;
  130. }
  131.  
  132. .a a {
  133. color:var(--Link);
  134. padding-bottom:1px;
  135. border-bottom:1px solid var(--Link-Bottom-Border);
  136. }
  137.  
  138. b, strong {font-weight:bold;}
  139.  
  140. i, em {font-style:italic;}
  141.  
  142. pre, code {
  143. white-space:pre-wrap;
  144. display:block;
  145. }
  146.  
  147. /*--------------------COLORS--------------------*/
  148. :root {
  149. /* background */
  150. --Background:#000;
  151.  
  152. /* links */
  153. --Link:#C6CFD5;
  154. --Link-Bottom-Border:#6a757b;
  155.  
  156. /* tooltips */
  157. --Tooltip-Border:#6a757b;
  158. --Tooltip-Background:#000;
  159. --Tooltip-Text:#C6CFD5;
  160.  
  161. /* speech bubble */
  162. --Speech-Bubble-Background:#000;
  163. --Speech-Bubble-Border:#6a757b;
  164. --Speech-Bubble-Text:#C6CFD5;
  165.  
  166. /* sidebar navigation */
  167. --Sidebar-Links-Background:#000;
  168. --Sidebar-Links-Border:#6a757b;
  169. --Sidebar-Links:#6a757b; /* unhovered */
  170. --Sidebar-Links-Highlighted:#C6CFD5; /* hovered */
  171.  
  172. /* health widget */
  173. --Heart:#C6CFD5;
  174. --Health-Label-1:#C6CFD5;
  175. --Health-Bar-Fill:#C6CFD5;
  176. --Health-Bar-Empty:#000;
  177. --Health-Label-2:#C6CFD5;
  178.  
  179. /* EXP widget */
  180. --EXP-symbol:#C6CFD5;
  181. --EXP-Label-1:#C6CFD5;
  182. --EXP-Bar-Fill:#C6CFD5;
  183. --EXP-Bar-Empty:#000;
  184. --EXP-Label-2:#C6CFD5;
  185.  
  186. /* info boxes */
  187. --Short-Info-Box-Border:#6a757b;
  188. --Short-Info-Box-Title:#C6CFD5;
  189. --Short-Info-Background:#000;
  190. --Short-Info-Label-Bold:#C6CFD5;
  191. --Short-Info-Text:#C6CFD5;
  192.  
  193. /* quote box */
  194. --Quote-Box-Background:#000;
  195. --Quote-Box-Border:#6a757b;
  196. --Quote-Text:#C6CFD5;
  197. --Quote-Text-Shadow:#3f4649;
  198. --Quote-Arrow:#C6CFD5;
  199.  
  200. /* other */
  201. --Music-Player:#C6CFD5;
  202. --Credit-Text:#C6CFD5; /* please don't be an asshole! */
  203. }
  204.  
  205. /*--------------------CONTAINER--------------------*/
  206. #cont {
  207. position:fixed;
  208. top:0;left:0;right:0;
  209. margin:0 auto;
  210. width:736px;
  211. height:100vh;
  212. display:table;
  213. }
  214.  
  215. #contmid {
  216. display:table-cell;
  217. vertical-align:middle;
  218. }
  219.  
  220. #big {display:flex;}
  221.  
  222. #big > * {
  223. align-self:center;
  224. -webkit-align-self:center;
  225. }
  226.  
  227. /*--------------------SIDEBAR--------------------*/
  228. #left {width:150px;}
  229.  
  230. .sb-speech {width:inherit;}
  231.  
  232. .l-sp-b, .l-sp-c, .speech-txt, .sp-sq, .sp-7, .sp-8 {
  233. background:var(--Speech-Bubble-Background);
  234. }
  235.  
  236. .l-sp-a, .sp-9 {background:var(--Speech-Bubble-Border);
  237. }
  238.  
  239. .l-sp-b, .l-sp-c, .speech-txt, .sp-sq, .sp-7, .sp-8 {
  240. border-left:2px solid var(--Speech-Bubble-Border);
  241. border-right:2px solid var(--Speech-Bubble-Border);
  242. }
  243.  
  244. .speech-txt {
  245. width:calc(100% - 24px);
  246. padding:10px;
  247. font-family:inconsolata;
  248. font-size:13px;
  249. color:var(--Speech-Bubble-Text);
  250. text-align:center;
  251. }
  252.  
  253. .sp-arrow {
  254. margin-top:-2px;
  255. margin-left:110px; /* speech bubble arrow position from left */
  256. }
  257.  
  258. .sp-sq {width:8px;height:8px;}
  259. .sp-7 {width:6px;height:2px;}
  260. .sp-8 {margin-left:-2px;width:6px;height:2px;}
  261. .sp-9 {margin-left:-2px;width:8px;height:2px;}
  262.  
  263. .sb-hold {
  264. margin-top:15px;
  265. width:inherit;
  266. }
  267.  
  268. .sb-pic {
  269. display:block;
  270. margin:auto;
  271. max-width:100%;
  272. }
  273.  
  274. /*--------------------SIDEBAR LINKS--------------------*/
  275. .slinks {margin-top:30px;}
  276.  
  277. .l-sb-b, .l-sb-c, .slinks-bigcont {
  278. background:var(--Sidebar-Links-Background);
  279. }
  280.  
  281. .l-sb-a {background:var(--Sidebar-Links-Border);}
  282.  
  283. .l-sb-b, .l-sb-c, .slinks-bigcont {
  284. border-left:2px solid var(--Sidebar-Links-Border);
  285. border-right:2px solid var(--Sidebar-Links-Border);
  286. }
  287.  
  288. .line-a {
  289. margin-left:6px;
  290. width:calc(100% - 12px);
  291. height:2px;
  292. }
  293.  
  294. .line-b {
  295. margin-left:4px;
  296. width:calc(100% - 12px);
  297. height:2px;
  298. }
  299.  
  300. .line-c {
  301. margin-left:2px;
  302. width:calc(100% - 8px);
  303. height:2px;
  304. }
  305.  
  306. .slinks-bigcont {padding:6px 14px;}
  307.  
  308. .slinks-cont {margin-left:2px;line-height:1em;}
  309.  
  310. .one-link-row {
  311. padding:8px 0;
  312. display:flex;
  313. }
  314.  
  315. .one-link-row > * {
  316. align-self:center;
  317. -webkit-align-self:center;
  318. }
  319.  
  320. /* 1st & 2nd triangles */
  321. /* both */
  322. .tri-a-cont, .tri-b-cont {width:calc(13px + 5px);}
  323.  
  324. .one-link-row:first-child .xo {
  325. color:var(--Sidebar-Links-Highlighted);
  326. }
  327.  
  328. .xo {
  329. font-size:13px;
  330. text-align:center;
  331. }
  332.  
  333. .one-link-row:hover .xo {
  334. color:var(--Sidebar-Links-Highlighted);
  335. }
  336.  
  337. .slinks-cont:hover .one-link-row:first-child .xo, .xo {opacity:0}
  338. .one-link-row:hover .xo, .one-link-row:first-child .xo, .slinks-cont:hover .one-link-row:first-child:hover .xo {opacity:1}
  339.  
  340. /* 1st triangle */
  341. .one-link-row:hover .tri-a {
  342. animation:tri-a-ani 0.7s step-start 0s infinite;
  343. -webkit-animation:tri-a-ani 0.7s step-start 0s infinite;
  344. -moz-animation:tri-a-ani 0.7s step-start 0s infinite;
  345. }
  346.  
  347. @keyframes tri-a-ani {
  348. 50% {margin-left:5px;}
  349. }
  350.  
  351. @-webkit-keyframes tri-a-ani {
  352. 50% {margin-left:5px;}
  353. }
  354.  
  355. @-moz-keyframes tri-a-ani {
  356. 50% {margin-left:5px;}
  357. }
  358.  
  359. /* 2nd triangle */
  360. .tri-b {margin-left:0px;}
  361.  
  362. .one-link-row:hover .tri-b {
  363. animation:tri-b-ani 0.7s step-start 0s infinite;
  364. -webkit-animation:tri-b-ani 0.7s step-start 0s infinite;
  365. -moz-animation:tri-b-ani 0.7s step-start 0s infinite;
  366. }
  367.  
  368. @keyframes tri-b-ani {
  369. 50% {margin-left:-5px;}
  370. }
  371.  
  372. @-webkit-keyframes tri-b-ani {
  373. 50% {margin-left:-5px;}
  374. }
  375.  
  376. @-moz-keyframes tri-b-ani {
  377. 50% {margin-left:-5px;}
  378. }
  379.  
  380. /* link text styling */
  381. .linktext {
  382. margin:auto 5px;
  383. width:calc(100% - 32px);
  384. font-family:pixeloperator bold;
  385. font-size:13px;
  386. text-transform:uppercase;
  387. letter-spacing:0.3px;
  388. text-align:center;
  389. }
  390.  
  391. /* sidebar FIRST link styling */
  392. .one-link-row:first-child .linktext, .slinks-cont:hover .one-link-row:first-child:hover .linktext {
  393. color:var(--Sidebar-Links-Highlighted);
  394. }
  395.  
  396. .slinks-cont:hover .one-link-row:first-child .linktext, .linktext {
  397. color:var(--Sidebar-Links);
  398. }
  399.  
  400. .one-link-row:hover .linktext {
  401. color:var(--Sidebar-Links-Highlighted);
  402. }
  403.  
  404. /*--------------------RIGHT--------------------*/
  405. #right {
  406. margin-left:60px;
  407. width:calc(100% - 150px - 60px);
  408. }
  409.  
  410. /*--------------------HEALTH WIDGET--------------------*/
  411. .heart-sect {display:flex;}
  412.  
  413. .heart-sect > * {
  414. align-self:center;
  415. -webkit-align-self:center;
  416. }
  417.  
  418. .heart-hold {width:16px;height:16px;}
  419. .raw {display:flex;}
  420.  
  421. .gt-fill {
  422. background:var(--Heart);
  423. height:1px;
  424. }
  425.  
  426. .f2 {width:2px;}
  427. .f4 {width:4px;}
  428. .f5 {width:5px;}
  429. .f7 {width:7px;}
  430. .f8 {width:8px;}
  431. .f12 {width:12px;}
  432. .f16 {width:16px;height:6px;}
  433. .gtwo {height:2px;}
  434.  
  435. .health-label-1 {
  436. margin-left:20px;
  437. font-family:pixeloperator bold;
  438. font-size:16px;
  439. text-transform:uppercase;
  440. letter-spacing:1px;
  441. color:var(--Health-Label-1);
  442. }
  443.  
  444. .healthbar {
  445. margin-left:20px;
  446. -webkit-flex:1;
  447. -ms-flex:1;
  448. -moz-flex:1;
  449. flex:1;
  450. height:6px;
  451. background:var(--Health-Bar-Empty);
  452. border:1px solid var(--Health-Bar-Fill);
  453. border-radius:3px;
  454. overflow:hidden;
  455. }
  456.  
  457. .health-fill:before {
  458. position:absolute;
  459. content:"";
  460. width:2px;height:inherit;
  461. background:var(--Health-Bar-Fill);
  462. transform:skew(-22deg);
  463. -webkit-transform:skew(-22deg);
  464. -moz-transform:skew(-22deg);
  465. -ms-transform:skew(-22deg);
  466. -o-transform:skew(-22deg);
  467. }
  468.  
  469. .health-fill {
  470. height:inherit;
  471. background:var(--Health-Bar-Fill);
  472. transform:skew(22deg);
  473. -webkit-transform:skew(22deg);
  474. -moz-transform:skew(22deg);
  475. -ms-transform:skew(22deg);
  476. -o-transform:skew(22deg);
  477. }
  478.  
  479. .health-label-2 {
  480. margin-left:20px;
  481. font-family:pixeloperator bold;
  482. font-size:16px;
  483. text-transform:uppercase;
  484. letter-spacing:1px;
  485. color:var(--Health-Label-2);
  486. }
  487.  
  488. /*--------------------EXP WIDGET--------------------*/
  489. .exp-sect {
  490. margin-top:20px;
  491. display:flex;
  492. }
  493.  
  494. .exp-sect > * {
  495. align-self:center;
  496. -webkit-align-self:center;
  497. }
  498.  
  499. /* the curved 'up' arrow */
  500. .exp-symbol {
  501. margin-bottom:-5px;
  502. width:16px;
  503. font-size:19px;
  504. color:var(--EXP-symbol);
  505. }
  506.  
  507. .exp-label-1 {
  508. margin-left:20px;
  509. font-family:pixeloperator bold;
  510. font-size:16px;
  511. text-transform:uppercase;
  512. letter-spacing:1px;
  513. color:var(--EXP-Label-1);
  514. }
  515.  
  516. .expbar {
  517. margin-left:20px;
  518. -webkit-flex:1;
  519. -ms-flex:1;
  520. -moz-flex:1;
  521. flex:1;
  522. height:6px;
  523. background:var(--EXP-Bar-Empty);
  524. border:1px solid var(--EXP-Bar-Fill);
  525. border-radius:3px;
  526. overflow:hidden;
  527. }
  528.  
  529. .exp-fill:before {
  530. position:absolute;
  531. content:"";
  532. width:2px;height:inherit;
  533. background:var(--EXP-Bar-Fill);
  534. transform:skew(-22deg);
  535. -webkit-transform:skew(-22deg);
  536. -moz-transform:skew(-22deg);
  537. -ms-transform:skew(-22deg);
  538. -o-transform:skew(-22deg);
  539. }
  540.  
  541. .exp-fill {
  542. height:inherit;
  543. background:var(--EXP-Bar-Fill);
  544. transform:skew(22deg);
  545. -webkit-transform:skew(22deg);
  546. -moz-transform:skew(22deg);
  547. -ms-transform:skew(22deg);
  548. -o-transform:skew(22deg);
  549. }
  550.  
  551. .exp-label-2 {
  552. margin-left:20px;
  553. font-family:pixeloperator bold;
  554. font-size:16px;
  555. text-transform:uppercase;
  556. letter-spacing:1px;
  557. color:var(--EXP-Label-2);
  558. }
  559.  
  560. /*--------------------BOXES--------------------*/
  561. .boxwrap {
  562. margin-top:35px;
  563. display:flex;
  564. }
  565.  
  566. .boxwrap > * {
  567. align-self:top;
  568. -webkit-align-self:top;
  569. }
  570.  
  571. /* 1st box */
  572. .bulletbox {
  573. width:calc(36% - 14px);
  574. }
  575.  
  576. /* 2nd box */
  577. .bulletbox:last-of-type {
  578. margin-left:28px;
  579. width:calc(64% - 14px);
  580. }
  581.  
  582. .l-bb-b, .l-bb-c, .b-title, .bb-1 {
  583. background:var(--Short-Info-Background);
  584. }
  585.  
  586. .l-bb-a {background:var(--Short-Info-Box-Border);}
  587.  
  588. .l-bb-b, .l-bb-c, .b-title, .bb-1 {
  589. border-left:2px solid var(--Short-Info-Box-Border);
  590. border-right:2px solid var(--Short-Info-Box-Border);
  591. }
  592.  
  593. .b-title {
  594. padding:6px 16px 8px 16px;
  595. border-bottom:2px solid var(--Short-Info-Box-Border);
  596. font-family:pixeloperator bold;
  597. font-size:15px;
  598. text-transform:uppercase;
  599. letter-spacing:1px;
  600. color:var(--Short-Info-Box-Title);
  601. }
  602.  
  603. .bb-1 {padding:8px 16px;}
  604.  
  605. .chocolate {
  606. font-family:consolas-alt;
  607. font-size:11px;
  608. color:var(--Short-Info-Text);
  609. line-height:2.2em;
  610. }
  611.  
  612. .chocolate b:before {
  613. margin-right:7px;
  614. content:">";
  615. font-family:silkscreen;
  616. }
  617.  
  618. .chocolate b {
  619. font-family:pixeloperator bold;
  620. font-weight:normal;
  621. font-size:13px;
  622. text-transform:uppercase;
  623. letter-spacing:0.3px;
  624. color:var(--Short-Info-Bold);
  625. }
  626.  
  627. /*--------------------QUOTE--------------------*/
  628. .quote-sect {
  629. margin-top:34px;
  630. }
  631.  
  632. .l-q-b, .l-q-c, .ql-main {
  633. background:var(--Quote-Box-Background);
  634. }
  635.  
  636. .l-q-a {background:var(--Quote-Box-Border);}
  637.  
  638. .l-q-b, .l-q-c, .ql-main {
  639. border-left:2px solid var(--Quote-Box-Border);
  640. border-right:2px solid var(--Quote-Box-Border);
  641. }
  642.  
  643. .ql-main {
  644. padding:8px 16px;
  645. display:flex;
  646. }
  647.  
  648. .quote {
  649. width:calc(100% - 28px);
  650. font-family:silkscreen;
  651. font-size:9px;
  652. color:var(--Quote-Text);
  653. text-shadow:2px 2px var(--Quote-Text-Shadow);
  654. }
  655.  
  656. .quote-arrow {
  657. align-self:flex-end;
  658. -webkit-align-self:flex-end;
  659. margin-left:16px;
  660. font-size:13px;
  661. color:var(--Quote-Arrow);
  662. }
  663.  
  664. /*---------------MUSIC PLAYER---------------*/
  665. #glenplayer02 {
  666. position:fixed;
  667. bottom:0;margin-bottom:20px;
  668. left:0;margin-left:20px;
  669. display:flex;
  670. z-index:9;
  671. }
  672.  
  673. #glenplayer02 > div {
  674. align-self:center;
  675. -webkit-align-self:center;
  676. }
  677.  
  678. .music-controls {
  679. user-select:none;
  680. -webkit-user-select:none;
  681. width:13px;
  682. font-size:13px;
  683. cursor:pointer;
  684. }
  685.  
  686. .playy, .pausee, .sonata, .labeltext {color:var(--Music-Player);}
  687.  
  688. .pausee {display:none;}
  689. .sonata {margin-left:10px;}
  690.  
  691. .labeltext {
  692. margin-left:12px;
  693. font-family:silkscreen;
  694. font-size:9px;
  695. }
  696.  
  697. /*------------CREDIT. PLEASE DO NOT BE AN ASSHOLE------------*/
  698. #glenjamin {
  699. position:fixed;
  700. bottom:0;margin-bottom:20px;
  701. right:0;margin-right:20px;
  702. font-family:silkscreen;
  703. font-size:9px;
  704. color:var(--Credit-Text);
  705. }
  706.  
  707. </style>
  708.  
  709. </head>
  710.  
  711. <body>
  712.  
  713. <div id="cont">
  714. <div id="contmid">
  715. <div id="big">
  716. <div id="left">
  717. <div class="sb-speech">
  718. <div class="line-a l-sp-a"></div>
  719. <div class="line-b l-sp-b"></div>
  720. <div class="line-c l-sp-c"></div>
  721.  
  722. <!----SPEECH BUBBLE TEXT---->
  723. <div class="speech-txt">Welcome!</div>
  724.  
  725. <div class="line-c l-sp-c"></div>
  726. <div class="line-b l-sp-b"></div>
  727. <div class="line-a l-sp-a"></div>
  728.  
  729. <div class="sp-arrow">
  730. <div class="sp-sq"></div>
  731. <div class="sp-7"></div>
  732. <div class="sp-8"></div>
  733. <div class="sp-9"></div>
  734. </div><!--sp-arrow-->
  735. </div><!--sb-speech-->
  736.  
  737. <div class="sb-hold">
  738.  
  739. <!----SIDEBAR IMAGE---->
  740. <!--max. width 150px-->
  741. <img class="sb-pic" src="//orig00.deviantart.net/77fd/f/2018/142/b/6/hollow_knight___f2u_by_believethehorror-dcc9k3z.gif"></div>
  742.  
  743. <div class="slinks">
  744. <div class="line-a l-sb-a"></div>
  745. <div class="line-b l-sb-b"></div>
  746. <div class="line-c l-sb-c"></div>
  747. <div class="slinks-bigcont">
  748. <div class="slinks-cont">
  749.  
  750. <!----SIDEBAR LINKS---->
  751. <!--link url goes between quotation marks of href=""-->
  752. <a class="one-link-row" href="">
  753. <div class="tri-a-cont xo"><div class="tri-a">▶</div></div>
  754. <div class="linktext">return</div>
  755. <div class="tri-b-cont xo"><div class="tri-b">◀</div></div>
  756. </a><!--one-link-row-->
  757.  
  758. <a class="one-link-row" href="">
  759. <div class="tri-a-cont xo"><div class="tri-a">▶</div></div>
  760. <div class="linktext">message</div>
  761. <div class="tri-b-cont xo"><div class="tri-b">◀</div></div>
  762. </a><!--one-link-row-->
  763.  
  764. <a class="one-link-row" href="">
  765. <div class="tri-a-cont xo"><div class="tri-a">▶</div></div>
  766. <div class="linktext">trophies</div>
  767. <div class="tri-b-cont xo"><div class="tri-b">◀</div></div>
  768. </a><!--one-link-row-->
  769.  
  770. <a class="one-link-row" href="">
  771. <div class="tri-a-cont xo"><div class="tri-a">▶</div></div>
  772. <div class="linktext">inventory</div>
  773. <div class="tri-b-cont xo"><div class="tri-b">◀</div></div>
  774. </a><!--one-link-row-->
  775.  
  776. </div><!--slinks-cont--><!--do not delete this line-->
  777. </div><!--slinks-bigcont-->
  778. <div class="line-c l-sb-c"></div>
  779. <div class="line-b l-sb-b"></div>
  780. <div class="line-a l-sb-a"></div>
  781. </div><!--slinks-->
  782. </div><!--left-->
  783.  
  784.  
  785.  
  786. <div id="right">
  787. <div class="heart-sect">
  788. <div class="heart-hold">
  789. <div class="raw">
  790. <div class="gt-fill f2" style="margin-left:2px"></div>
  791. <div class="gt-fill f2" style="margin-left:8px"></div></div>
  792. <div class="raw">
  793. <div class="gt-fill f5" style="margin-left:1px"></div>
  794. <div class="gt-fill f5" style="margin-left:4px"></div></div>
  795. <div class="raw">
  796. <div class="gt-fill f7 gtwo"></div>
  797. <div class="gt-fill f7 gtwo" style="margin-left:2px"></div></div>
  798. <div class="gt-fill f16" style="top:4px;"></div>
  799. <div class="gt-fill f12 gtwo" style="margin-left:2px"></div>
  800. <div class="gt-fill f8 gtwo" style="margin-left:4px"></div>
  801. <div class="gt-fill f4 gtwo" style="margin-left:6px"></div>
  802. </div><!--heart-hold-->
  803.  
  804. <!----HEALTH WIDGET---->
  805. <div class="health-label-1">HP</div>
  806. <div class="healthbar">
  807. <div class="health-fill" style="width:70%"></div></div>
  808. <div class="health-label-2">1,200 PTS</div>
  809. </div><!--heart-sect-->
  810.  
  811.  
  812. <!----EXP WIDGET---->
  813. <div class="exp-sect">
  814. <div class="exp-symbol">⮝</div>
  815. <div class="exp-label-1">XP</div>
  816. <div class="expbar">
  817. <div class="exp-fill" style="width:40%"></div></div>
  818. <div class="exp-label-2">9,999 EXP</div>
  819. </div><!--exp-sect-->
  820.  
  821.  
  822.  
  823. <div class="boxwrap">
  824.  
  825. <!----BOX 1---->
  826. <div class="bulletbox">
  827. <div class="line-a l-bb-a"></div>
  828. <div class="line-b l-bb-b"></div>
  829. <div class="line-c l-bb-c"></div>
  830. <!--BOX 1 TITLE-->
  831. <div class="b-title">Box 1 Title</div>
  832. <div class="bb-1">
  833. <div class="chocolate a">
  834. <!--BOX 1 CONTENT-->
  835. <b>Stat 1:</b> Stat 1
  836. <br>
  837. <b>Stat 2:</b> Stat 2
  838. <br>
  839. <b>Stat 3:</b> Stat 3
  840. <br>
  841. <b>Stat 4:</b> Stat 4
  842. <br>
  843. <b>Stat 5:</b> Stat 5
  844. </div><!--chocolate--><!--do not delete this line-->
  845. </div><!--bb-1-->
  846. <div class="line-c l-bb-c"></div>
  847. <div class="line-b l-bb-b"></div>
  848. <div class="line-a l-bb-a"></div>
  849. </div><!--bulletbox-->
  850.  
  851.  
  852.  
  853. <!----BOX 2---->
  854. <div class="bulletbox">
  855. <div class="line-a l-bb-a"></div>
  856. <div class="line-b l-bb-b"></div>
  857. <div class="line-c l-bb-c"></div>
  858. <!--BOX 2 TITLE-->
  859. <div class="b-title">Box 2 Title</div>
  860. <div class="bb-1">
  861. <div class="chocolate a">
  862. <!--BOX 2 CONTENT-->
  863. <b>Stat 1:</b> Stat 1
  864. <br>
  865. <b>Stat 2:</b> Stat 2
  866. <br>
  867. <b>Stat 3:</b> Stat 3
  868. <br>
  869. <b>Stat 4:</b> Stat 4
  870. <br>
  871. <b>Stat 5:</b> Stat 5
  872. </div><!--chocolate--><!--do not delete this line-->
  873. </div><!--bb-1-->
  874. <div class="line-c l-bb-c"></div>
  875. <div class="line-b l-bb-b"></div>
  876. <div class="line-a l-bb-a"></div>
  877. </div><!--bulletbox-->
  878. </div><!--boxwrap-->
  879.  
  880.  
  881. <!----QUOTE BOX---->
  882. <div class="quote-sect">
  883. <div class="line-a l-q-a"></div>
  884. <div class="line-b l-q-b"></div>
  885. <div class="line-c l-q-c"></div>
  886. <div class="ql-main">
  887. <!--actual quote text-->
  888. <!--made to look best with 2 lines-->
  889. <div class="quote a">such is the fate of a star: to burn too brightly,<br>to collapse, to begin anew.</div>
  890.  
  891. <div class="quote-arrow">▼</div></div>
  892. <div class="line-c l-q-c"></div>
  893. <div class="line-b l-q-b"></div>
  894. <div class="line-a l-q-a"></div>
  895. </div><!--quote-sect-->
  896. </div><!--right-->
  897. </div><!--big-->
  898. </div><!--contmid-->
  899. </div><!--cont-->
  900.  
  901.  
  902.  
  903. <!-------MUSIC PLAYER------->
  904. <div id="glenplayer02">
  905. <div class="music-controls" onclick="songstart();">
  906. <div class="playy">▶</div>
  907. <div class="pausee">❚❚</div>
  908. </div>
  909. <div class="sonata">♫</div>
  910. <div class="labeltext">The Tower (8-bit)</div>
  911. </div>
  912.  
  913. <!--music url goes between quotation marks of src=""-->
  914. <!--pick a tutorial:-->
  915. <!--linktr.ee/direct_file_links-->
  916. <audio id="tune" src="https://rhizo.gitlab.io/nier/The_Tower__8-bit_.mp3" type="audio"></audio>
  917.  
  918.  
  919.  
  920. <!-------CREDIT. PLEASE DON'T BE AN ASSHOLE!------->
  921. <a id="glenjamin" href="//glenthemes.tumblr.com" title="Page by glenthemes">credit</a>
  922.  
  923. </body>
  924.  
  925. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!