API tools faq
paste
glenthemes

About Page [02]: Night's Kiss

glenthemes
Feb 7th, 2017 (edited)
6,433
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.46 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. About Page [02]: Night's Kiss
  3. Made by glenthemes
  4.  
  5. Initial release: 2017/02/08
  6. Last updated: 2023/05/12
  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. Customization pointers:
  16. 🌙🌙🌙🌙🌙🌙🌙 = places to edit
  17. ------------------------------------------------------------------------>
  18.  
  19. <!DOCTYPE html>
  20. <html lang="en">
  21.  
  22. <head>
  23.  
  24. <title>{Title}</title>
  25.  
  26. <link rel="shortcut icon" href="{Favicon}">
  27.  
  28. <!--------------------JAVASCRIPTS-------------------->
  29. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  30. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  31. <script>
  32. (function($){
  33. $(document).ready(function(){
  34. $("a[title]").style_my_tooltips({
  35. tip_follows_cursor:true,
  36. tip_delay_time:50,
  37. tip_fade_speed:0,
  38. attribute:"title"
  39. });
  40. });
  41. })(jQuery);
  42. </script>
  43.  
  44. <link href="//fonts.googleapis.com/css?family=Karla" rel="stylesheet">
  45.  
  46. <link rel="stylesheet" href="//cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  47.  
  48. <script src="//static.tumblr.com/2pnwama/lnLppjutr/gletanica.js"></script>
  49.  
  50. <script src="//glen-themes.gitlab.io/abt-pages/02/bm-diana.js"></script>
  51.  
  52. <!-------------------------------------------------------------------->
  53.  
  54. <style type="text/css">
  55.  
  56. @font-face { font-family: "beaufort"; src: url('//glen-assets.github.io/fonts/Beaufort W01 Regular.ttf'); }
  57.  
  58. /*--------------------TOOLTIPS--------------------*/
  59. #s-m-t-tooltip {
  60. padding:5px 10px;
  61. margin:20px;
  62. background-color:rgba(var(--Tooltips-BG),var(--Tooltips-BG-Opacity));
  63. border-radius:2px;
  64. font-family:beaufort;
  65. font-weight:bold;
  66. font-size:calc(var(--Main-Text-Font-Size) - 2.5px);
  67. text-transform:uppercase;
  68. letter-spacing:1.3px;
  69. color:var(--Tooltips-Text);
  70. z-index:99;
  71. max-width:40vw;
  72. }
  73.  
  74. /*--------------------TUMBLR CONTROLS--------------------*/
  75. iframe#tumblr_controls, .iframe-controls--desktop {
  76. top:5px!important;
  77. right:5px!important;
  78. position:fixed!important;
  79.  
  80. transform:scale(0.85,0.85);
  81. -webkit-transform:scale(0.85,0.85);
  82. -moz-transform:scale(0.85,0.85);
  83. -o-transform:scale(0.85,0.85);
  84. -ms-transform:scale(0.85,0.85);
  85.  
  86. transform-origin:100% 0;
  87. -webkit-transform-origin:100% 0;
  88. -moz-transform-origin:100% 0;
  89. -o-transform-origin:100% 0;
  90. -ms-transform-origin:100% 0;
  91. z-index:999999!important;
  92. }
  93.  
  94. /*--------------------TEXT HIGHLIGHT--------------------*/
  95. ::selection {
  96. background:var(--Highlighted-Text-BG);
  97. color:var(--Highlighted-Text);
  98. }
  99.  
  100. ::-moz-selection {
  101. background:var(--Highlighted-Text-BG);
  102. color:var(--Highlighted-Text);
  103. }
  104.  
  105. /*--------------------BASICS--------------------*/
  106. body {
  107. font-family:karla;
  108. line-height:1.6em;
  109. font-size:12px;
  110. overflow:hidden;
  111. }
  112.  
  113. a {
  114. color:var(--Main-Text-Links);
  115. text-decoration:none;
  116. -webkit-transition: all 0.4s ease-in-out;
  117. -moz-transition: all 0.4s ease-in-out;
  118. -o-transition: all 0.4s ease-in-out;
  119. }
  120.  
  121. a[title]:not([href]):hover {cursor:help;}
  122.  
  123. pre, code {white-space:pre-wrap;}
  124.  
  125. img {vertical-align:middle;}
  126.  
  127. /*---------------CUSTOMIZATION OPTIONS---------------*/
  128. /*-- 🌙🌙🌙🌙🌙🌙🌙 --*/
  129.  
  130. /* all colors are edited in the :root list below
  131. EXCEPT for the background image, changed here:
  132. */
  133.  
  134. body {
  135. background-color:#10080a;
  136. }
  137.  
  138. :root {
  139. /*
  140. ♡ ------- GENERAL NOTE ------- ♡
  141.  
  142. be careful not to remove the COLON or SEMICOLON
  143. e.g. what will work: --Sample:#fff;
  144. what won't work: --Sample#fff
  145.  
  146. ♡ ------- NOTE ABOUT 'RBG' ------- ♡
  147.  
  148. RGB values are different from color hexes.
  149. To convert hex to RGB, use this site:
  150. codepen.io/joshuajcollinsworth/full/mdJmBQz
  151.  
  152. you only need the numbers
  153. e.g.: the result will give you rgb(0, 0, 0)
  154. but here you only need to put 0, 0, 0
  155.  
  156. ♡ ------- ABOUT 'OPACITY' ------- ♡
  157.  
  158. You can put any number between 0 and 1
  159. 0 = invisible
  160. 1 = visible
  161. */
  162.  
  163. /*------- OUTER FRAME -------*/
  164. --Frame-Thickness:40px;
  165. --Frame-Color:23, 10, 16; /* RGB value only */
  166. --Frame-Opacity:0.73;
  167.  
  168. /*------- INNER CONTAINER -------*/
  169. --Container-Padding:25px;
  170. --Container-BG:23, 10, 16;
  171. --Container-BG-Opacity:0.63;
  172.  
  173. /*------- LEFT SIDEBAR -------*/
  174. --Sidebar-Width:185px;
  175. --Sidebar-Image-Size:120px;
  176. --Sidebar-Image-Shadow-Size:20px;
  177. --Sidebar-Image-Shadow-Color:#170a10;
  178.  
  179. --Sidebar-Title-Font-Size:13px;
  180. --Sidebar-Title-Color:#c884a0;
  181. --Sidebar-Title-Padding:10px;
  182. --Sidebar-Title-BG:23, 10, 16; /* RGB value only */
  183. --Sidebar-Title-BG-Opacity:0.6;
  184.  
  185. --Stats-Left-Border-Color:#c6b0b8;
  186. --Stats-Text:#baa1af;
  187. --Stats-Font-Size:12px;
  188.  
  189. --Sidebar-Items-Spacing:14px;
  190.  
  191. /*------- CUSTOM LINKS -------*/
  192. --Custom-Links-Per-Row:2; /* works best with 1 or 2 */
  193. --Custom-Links-Padding:4px;
  194. --Custom-Links-BG:23, 10, 16; /* RGB value only */
  195. --Custom-Links-BG-Opacity:0.6;
  196. --Custom-Links-Font-Size:10px;
  197. --Custom-Links-Color:#c884a0;
  198. --Custom-Links-Spacing:4px;
  199.  
  200. --Gutter-Width:25px; /* space between sidebar and text */
  201.  
  202. /*------- MAIN TEXT (RIGHTSIDE) -------*/
  203. --Main-Text-Width:460px;
  204. --Scrollbar-Thumb:#473546;
  205. --Scrollbar-Track:#170a10;
  206. --Quote-Font-Size:14px;
  207. --Quote-Color:#b5a7ba;
  208. --Main-Text-Blockquote-Border:#c6b0b8;
  209. --Main-Text-Font-Size:12px;
  210. --Main-Text-Color:#c6b0b8;
  211. --Main-Text-Bold:#ccc;
  212. --Main-Text-Italic:#ef9598;
  213. --Main-Text-Links:#ff6a80;
  214. --Main-Text-Links-BG:23, 10, 16; /* RGB value only */
  215. --Main-Text-Links-BG-Opacity:0.4;
  216. --Main-Text-Underline:#5c4e58;
  217. --SubHeading-Font-Size:13px;
  218. --SubHeading-Text:#c884a0;
  219. --SubHeading-Link:#d9748f;
  220. --SubHeading-BG:23, 10, 16; /* RGB value only */
  221. --SubHeading-BG-Opacity:0.6;
  222. --SubHeading-Padding:10px;
  223.  
  224. --Background-Gradient-Color:#170a10;
  225. --Background-Gradient-Height:40%;
  226.  
  227. /*------- BOTTOM BAR -------*/
  228. --Bottom-Bar-Height:100px;
  229. --Bottom-Bar-BG:#170a10;
  230. --Bottom-Bar-Side-Margins:28px;
  231.  
  232. /*------- MUSIC PLAYER -------*/
  233. --Music-Player-Color:#170a10;
  234. --Music-Player-BG:#0d0203;
  235. --Music-Player-Text:#b5a7ba;
  236.  
  237. /*------- BOTTOM CENTER TEXTBOX -------*/
  238. --Bottom-TextBox-Width:430px;
  239. --Bottom-TextBox-BG:#170a10;
  240. --Bottom-TextBox-Padding:25px;
  241.  
  242. --Moon-Icon-Size:24px;
  243. --Moon-Icon-Color:#867888;
  244.  
  245. --Bottom-Title-Font-Size:26px;
  246. --Bottom-Title-Color:#b5a7ba;
  247.  
  248. --Bottom-Subtitle-Font-Size:12px;
  249. --Bottom-Subtitle-Color:#b5a7ba;
  250.  
  251. --Bottom-Text-Spacing:4px;
  252.  
  253. /*------- CREDIT -------*/
  254. --Credit-BG:#170a10;
  255. --Credit-Text:#b5a7ba;
  256.  
  257. /*------- MISC/OTHER -------*/
  258. --Tooltips-BG:23, 10, 16; /* RGB value only */
  259. --Tooltips-BG-Opacity:0.83;
  260. --Tooltips-Text:#b5a7ba;
  261.  
  262. --Highlighted-Text-BG:#170a10;
  263. --Highlighted-Text:#c5c5c5;
  264. }
  265.  
  266. #background {
  267. position:fixed;
  268. top:0;left:0;
  269. width:100vw;
  270. height:100vh;
  271.  
  272. /*-------- BACKGROUND IMAGE --------*/
  273. /*-- 🌙🌙🌙🌙🌙🌙🌙 --*/
  274. /*-- 🦀🦀🦀🦀🦀🦀🦀 --*/
  275.  
  276. /* put the image url between the brackets of url() */
  277. /* do not remove the brackets or the semicolon at the end */
  278.  
  279. background-image:url(//static.tumblr.com/18ff7605554871c7c2b4a605be59ce6e/2pnwama/VYJovqk1v/tumblr_static_d7ou6t3s2y8s40804c8go04cg.png);
  280.  
  281. background-attachment:fixed;
  282. background-size:cover;
  283. background-repeat:no-repeat;
  284. background-position:center;
  285. z-index:-2;
  286. display:none;
  287. }
  288.  
  289. /* background gradient */
  290. #loveislikeagradient {
  291. position:fixed;
  292. bottom:0;left:0;
  293. width:100vw;
  294. padding-top:var(--Background-Gradient-Height);
  295. background-image:linear-gradient(to bottom, transparent, var(--Background-Gradient-Color));
  296. z-index:-2;
  297. }
  298.  
  299. /*-------- FRAME & CONTAINER --------*/
  300. #horizontal-a {
  301. position:fixed;
  302. top:0;left:0;right:0;
  303. margin:0 auto;
  304. height:100vh;
  305. text-align:center;
  306. z-index:-1;
  307. }
  308.  
  309. #horizontal-b {display:inline-block;}
  310.  
  311. #vertigo-a {
  312. height:100vh;
  313. display:table;
  314. }
  315.  
  316. #vertigo-b {
  317. display:table-cell;
  318. vertical-align:middle;
  319. }
  320.  
  321. #frame {
  322. margin-top:calc(var(--Bottom-Bar-Height) * -1);
  323. border:var(--Frame-Thickness) solid rgba(var(--Frame-Color),var(--Frame-Opacity));
  324. }
  325.  
  326. #main-cont {
  327. padding:var(--Container-Padding);
  328. background:rgba(var(--Container-BG),var(--Container-BG-Opacity));
  329. display:flex;
  330. }
  331.  
  332. /*---------- LEFT SIDEBAR ----------*/
  333. #sidebar {
  334. align-self:center;
  335. width:var(--Sidebar-Width);
  336. max-height:calc(87vh - var(--Bottom-Bar-Height) - (var(--Container-Padding) * 2) - (var(--Frame-Thickness) * 2));
  337. overflow:hidden;
  338. padding-top:var(--Sidebar-Image-Shadow-Size);
  339. margin-top:calc(var(--Sidebar-Image-Shadow-Size) * -1);
  340. }
  341.  
  342. .sb-image {
  343. margin:2px 0;
  344. width:var(--Sidebar-Image-Size);
  345. height:var(--Sidebar-Image-Size);
  346. border-radius:100%;
  347. box-shadow:0 0 var(--Sidebar-Image-Shadow-Size) 0 var(--Sidebar-Image-Shadow-Color);
  348. }
  349.  
  350. .sb-title {
  351. margin-top:var(--Sidebar-Items-Spacing);
  352. padding:var(--Sidebar-Title-Padding);
  353. background:rgba(var(--Sidebar-Title-BG),var(--Sidebar-Title-BG-Opacity));
  354. font-family:beaufort;
  355. font-size:var(--Sidebar-Title-Font-Size);
  356. font-weight:bold;
  357. text-transform:uppercase;
  358. letter-spacing:2px;
  359. color:var(--Sidebar-Title-Color);
  360. line-height:1.25em;
  361. }
  362.  
  363. .stats {
  364. margin-top:var(--Sidebar-Items-Spacing);
  365. font-family:karla;
  366. font-size:var(--Stats-Font-Size);
  367. color:var(--Stats-Text);
  368. line-height:1.6em;
  369. }
  370.  
  371. .stats blockquote {
  372. margin:10px;
  373. padding-left:15px;
  374. border-left:2px solid var(--Stats-Left-Border-Color);
  375. text-align:left;
  376. }
  377.  
  378. .stats blockquote:first-of-type {margin-top:0;}
  379. .stats blockquote:last-of-type {margin-bottom:0;}
  380.  
  381. .customlinks {
  382. margin-top:calc(var(--Sidebar-Items-Spacing) - var(--Custom-Links-Spacing));
  383. margin-bottom:calc(var(--Custom-Links-Spacing) * -1);
  384. margin-left:calc(var(--Custom-Links-Spacing) * -1);
  385. width:calc(100% + (var(--Custom-Links-Spacing) * 2));
  386. display:flex;
  387. flex-wrap:wrap;
  388. }
  389.  
  390. .customlinks a {
  391. margin:var(--Custom-Links-Spacing);
  392. width:calc((100% / var(--Custom-Links-Per-Row)) - (var(--Custom-Links-Spacing) * 2));
  393. box-sizing:border-box;
  394. padding:var(--Custom-Links-Padding);
  395. background:rgba(var(--Custom-Links-BG),var(--Custom-Links-BG-Opacity));
  396. font-family:beaufort;
  397. font-size:var(--Custom-Links-Font-Size);
  398. font-weight:bold;
  399. text-transform:uppercase;
  400. letter-spacing:1.3px;
  401. color:var(--Custom-Links-Color);
  402. }
  403.  
  404. /*---------- RIGHT SIDE (main text) ----------*/
  405. #text-cont {
  406. margin:calc(var(--Container-Padding) * -1);
  407. margin-left:var(--Gutter-Width);
  408. padding:var(--Container-Padding);
  409. padding-left:0;
  410. width:var(--Main-Text-Width);
  411. max-height:calc(87vh - var(--Bottom-Bar-Height) - (var(--Container-Padding) * 2) - (var(--Frame-Thickness) * 2));
  412. overflow-y:auto;
  413. font-family:karla;
  414. font-size:var(--Main-Text-Font-Size);
  415. color:var(--Main-Text-Color);
  416. text-align:justify;
  417. }
  418.  
  419. .txt::-webkit-scrollbar {
  420. width:4px;
  421. height:4px;
  422. }
  423.  
  424. .txt::-webkit-scrollbar-thumb {
  425. background-color:var(--Scrollbar-Thumb);
  426. }
  427.  
  428. .txt::-webkit-scrollbar-track {
  429. background-color:var(--Scrollbar-Track);
  430. }
  431.  
  432. .quote {
  433. font-family:beaufort;
  434. font-size:var(--Quote-Font-Size);
  435. font-weight:bold;
  436. text-transform:uppercase;
  437. letter-spacing:2px;
  438. color:var(--Quote-Color);
  439. text-align:right;
  440. line-height:1.569em;
  441. }
  442.  
  443. .txt blockquote {
  444. margin:10px;
  445. margin-left:0;
  446. padding-right:15px;
  447. border-right:2px solid var(--Main-Text-Blockquote-Border);
  448. text-align:right;
  449. }
  450.  
  451. /* bold text */
  452. .txt b, .txt strong {
  453. color:var(--Main-Text-Bold);
  454. }
  455.  
  456. /* italicized text */
  457. .txt i, .txt em {
  458. color:var(--Main-Text-Italic);
  459. }
  460.  
  461. /* links (if any) */
  462. .txt a {
  463. padding:3px 5px;
  464. background:rgba(var(--Main-Text-Links-BG),var(--Main-Text-Links-BG-Opacity));
  465. border-radius:2px;
  466. border-bottom:2px solid rgba(var(--Main-Text-Links-BG),var(--Main-Text-Links-BG-Opacity));
  467. font-size:calc(var(--Main-Text-Font-Size) - 2px);
  468. text-transform:uppercase;
  469. letter-spacing:1px;
  470. color:var(--Main-Text-Links);
  471. }
  472.  
  473. /* underlined words (if any) */
  474. .txt u {
  475. text-decoration:none;
  476. padding-bottom:1px;
  477. border-bottom:1px solid var(--Main-Text-Underline);
  478. }
  479.  
  480. .txt p, .txt h1 {margin-bottom:0;}
  481.  
  482. /* heading(s) */
  483. .txt h1, .txt h1 > a {
  484. padding:var(--SubHeading-Padding);
  485. background:rgba(var(--SubHeading-BG), var(--SubHeading-BG-Opacity));
  486. font-family:beaufort;
  487. font-weight:bold;
  488. font-size:var(--SubHeading-Font-Size);
  489. text-transform:uppercase;
  490. letter-spacing:2px;
  491. color:var(--SubHeading-Text);
  492. text-align:center;
  493. }
  494.  
  495. .rm_pd {padding:0px!important;}
  496.  
  497. .txt h1 > a {
  498. display:block;
  499. color:var(--SubHeading-Link);
  500. }
  501.  
  502. /*---------- BOTTOM BAR ----------*/
  503. #botbar {
  504. position:fixed;
  505. bottom:0;left:0;
  506. width:100%;
  507. height:var(--Bottom-Bar-Height);
  508. background:var(--Bottom-Bar-BG);
  509. background-image:url(https://rhizo.gitlab.io/random/images/Ky8nj56.png);
  510. background-repeat:repeat;
  511. background-position:center;
  512. z-index:69;
  513. }
  514.  
  515. /*---------- MUSIC PLAYER ----------*/
  516. #ban-pyke-in-aram {
  517. position:fixed;
  518. bottom:0;
  519. left:0;margin-left:var(--Bottom-Bar-Side-Margins);
  520. height:var(--Bottom-Bar-Height);
  521. display:table;
  522. z-index:70;
  523. }
  524.  
  525. #i-mean-it {
  526. display:table-cell;
  527. vertical-align:middle;
  528. }
  529.  
  530. /* music player skin by vitanica */
  531. #musicplayer {
  532. display:flex;
  533. -webkit-transition:all .7s ease;
  534. -moz-transition:all .7s ease;
  535. -o-transition:all .7s ease;
  536. transition:all .7s ease;
  537. }
  538.  
  539. #musicplayer > *, .play > * {align-self:center;-webkit-align-self:center}
  540.  
  541. .roundthing {
  542. width:31px;
  543. height:31px;
  544. border-radius:100%;
  545. background:var(--Music-Player-Color); /* icon background */
  546. }
  547.  
  548. .roundthing img {
  549. margin:8px;
  550. width:15px;
  551. }
  552.  
  553. .midline {
  554. width:0px;
  555. height:3px;
  556. background:var(--Music-Player-Color);
  557. -webkit-transition:all .4s ease;
  558. -moz-transition:all .4s ease;
  559. -o-transition:all .4s ease;
  560. transition-delay: .9s;
  561. -webkit-transition-delay: .9s;
  562. }
  563.  
  564. #musicplayer:hover .midline {
  565. width:20px;
  566. transition-delay:0s;
  567. -webkit-transition-delay:0s;
  568. }
  569.  
  570. .play {
  571. display:flex;
  572. height:31px;
  573. text-align: left;
  574. padding:0px 8px;
  575. background: var(--Music-Player-BG); /* player background */
  576. border-left: 3px solid var(--Music-Player-Color); /* player border */
  577. color:var(--Music-Player-Text);
  578. opacity: 0;
  579. -webkit-transition: all .4s ease;
  580. -moz-transition: all .4s ease;
  581. -o-transition: all .4s ease;
  582. transition-delay: .4s;
  583. -webkit-transition-delay: .4s;
  584. }
  585.  
  586. .music-controls, .music-controls > * {
  587. user-select:none;
  588. -webkit-user-select:none;
  589. width:11px;
  590. font-size:11px;
  591. cursor:pointer;
  592. }
  593.  
  594. .pausee {display:none;}
  595.  
  596. .playtext {
  597. margin-left:8px;
  598. font-family:courier new;
  599. font-size:9px;
  600. }
  601.  
  602. #musicplayer:hover .play {
  603. opacity:1;
  604. transition-delay: .6s;
  605. -webkit-transition-delay: .6s;
  606. }
  607.  
  608. /*---------- BOTTOM CENTER TEXTBOX ----------*/
  609. #botshit {
  610. position:fixed;
  611. margin:0 auto;
  612. bottom:0;left:0;right:0;
  613. width:var(--Bottom-TextBox-Width);
  614. z-index:70;
  615. }
  616.  
  617. #tryangel {
  618. width:0;height:0;
  619. border-left:calc(var(--Bottom-TextBox-Width) / 2) solid transparent;
  620. border-right:calc(var(--Bottom-TextBox-Width) / 2) solid transparent;
  621. border-bottom:calc(var(--Bottom-Bar-Height) * 0.45) solid var(--Bottom-TextBox-BG);
  622. }
  623.  
  624. #botpanel {
  625. width:100%;
  626. height:calc(var(--Bottom-Bar-Height) * 1.2);
  627. background:var(--Bottom-TextBox-BG);
  628. }
  629.  
  630. #bt-holder {
  631. position:fixed;
  632. margin:0 auto;
  633. bottom:0;left:0;right:0;
  634. margin-bottom:var(--Bottom-TextBox-Padding);
  635. width:calc(var(--Bottom-TextBox-Width) - (var(--Bottom-TextBox-Padding) * 2));
  636. height:calc(((var(--Bottom-Bar-Height) * 1.2) + (var(--Bottom-Bar-Height) * 0.45)) - (var(--Bottom-TextBox-Padding) * 2));
  637. display:table;
  638. z-index:420;
  639. }
  640.  
  641. #ban-yasuo {
  642. display:table-cell;
  643. vertical-align:middle;
  644. text-align:center;
  645. }
  646.  
  647. #ban-yasuo > * {
  648. line-height:1.6em;
  649. }
  650.  
  651. .lnr {
  652. font-size:var(--Moon-Icon-Size);
  653. color:var(--Moon-Icon-Color);
  654. }
  655.  
  656. .bigname {
  657. margin-top:calc(var(--Bottom-Text-Spacing) * 1.4);
  658. font-family:beaufort;
  659. font-size:var(--Bottom-Title-Font-Size);
  660. text-transform:uppercase;
  661. letter-spacing:3px;
  662. color:var(--Bottom-Title-Color);
  663. }
  664.  
  665. .subtitle {
  666. margin-top:var(--Bottom-Text-Spacing);
  667. margin-bottom:calc(var(--Bottom-Text-Spacing) * -1);
  668. font-family:beaufort;
  669. font-size:var(--Bottom-Subtitle-Font-Size);
  670. letter-spacing:0.5px;
  671. color:var(--Bottom-Subtitle-Color);
  672. }
  673.  
  674. /*---------- CREDIT ----------*/
  675. #what-is-a-skeletons-favorite-snack {
  676. position:fixed;
  677. bottom:0;
  678. right:0;margin-right:var(--Bottom-Bar-Side-Margins);
  679. height:var(--Bottom-Bar-Height);
  680. display:table;
  681. z-index:70;
  682. }
  683.  
  684. #ribs_spare-ribs {
  685. display:table-cell;
  686. vertical-align:middle;
  687. }
  688.  
  689. .instalock-ap-lucian {
  690. padding:5px 8px;
  691. background:var(--Credit-BG);
  692. font-family:karla;
  693. font-size:calc(var(--Main-Text-Font-Size) - 3.5px);
  694. text-transform:uppercase;
  695. letter-spacing:1.5px;
  696. color:var(--Credit-Text);
  697. line-height:1em;
  698. }
  699.  
  700. </style>
  701.  
  702. </head>
  703.  
  704. <body>
  705.  
  706. <!------- BACKGROUND IMAGE ------->
  707. <!-- 🌙🌙🌙🌙🌙🌙🌙 -->
  708.  
  709. <!--
  710. only the fade option is set here.
  711. to change the image, scroll back up & find this guy: 🦀🦀🦀🦀🦀🦀
  712.  
  713. currently, the background image fades in once it is loaded.
  714. to turn off this option, change "yes" to "no" below:
  715. -->
  716. <div id="background" fade-in="yes"></div>
  717.  
  718.  
  719. <!------ GRADIENT ------>
  720. <div id="loveislikeagradient"></div>
  721.  
  722.  
  723. <!------ FRAME & CONTAINER ------>
  724. <div id="horizontal-a">
  725. <div id="horizontal-b">
  726. <div id="vertigo-a">
  727. <div id="vertigo-b">
  728. <div id="frame">
  729. <div id="main-cont">
  730.  
  731. <!------ LEFT SIDEBAR ------>
  732. <div id="sidebar">
  733.  
  734. <!------- SIDEBAR IMAGE ------->
  735. <!-- 🌙🌙🌙🌙🌙🌙🌙 -->
  736. <!--
  737. to change the image, put the image url between the
  738. quotation marks of src=""
  739. -->
  740. <a href="/" title="return home">
  741. <img class="sb-image" src="https://rhizo.gitlab.io/random/images/WvFi8aC.png">
  742. </a>
  743.  
  744.  
  745. <!------- SIDEBAR TITLE ------->
  746. <!-- 🌙🌙🌙🌙🌙🌙🌙 -->
  747.  
  748. <div class="sb-title">about me</div>
  749.  
  750.  
  751.  
  752. <!------- SIDEBAR STATS (BLOCKQUOTES) ------->
  753. <!-- 🌙🌙🌙🌙🌙🌙🌙 -->
  754.  
  755. <div class="stats">
  756. <blockquote>
  757. <b>Q:</b> Moonsilver Blade
  758. </blockquote>
  759.  
  760. <blockquote>
  761. <b>W:</b> Pale Cascade
  762. </blockquote>
  763.  
  764. <blockquote>
  765. <b>E:</b> Lunar Rush
  766. </blockquote>
  767.  
  768. <blockquote>
  769. <b>R:</b> Moonfall
  770. </blockquote>
  771.  
  772. </div><!--end stats-->
  773.  
  774.  
  775.  
  776. <!------ CUSTOM LINKS ------>
  777. <!-- 🌙🌙🌙🌙🌙🌙🌙 -->
  778.  
  779. <!--
  780. put the url between the quotation marks of href=""
  781. feel free to add/delete as many as you like
  782.  
  783. if (e.g.) your link names are too long to fit
  784. into 2 per row, you can change them to 1 per row.
  785. search for: /* works best with 1 or 2 */
  786. -->
  787. <div class="customlinks">
  788.  
  789. <a href="/">return</a>
  790. <a href="/ask">message</a>
  791. <a href="">link</a>
  792. <a href="">link</a>
  793. <a href="">link</a>
  794. <a href="">link</a>
  795. <a href="">link</a>
  796. <a href="">link</a>
  797.  
  798. </div><!--customlinks-->
  799. </div><!--sidebar-->
  800.  
  801.  
  802.  
  803.  
  804.  
  805.  
  806.  
  807. <!------ MAIN TEXT (RIGHTSIDE) ------>
  808. <!-- 🌙🌙🌙🌙🌙🌙🌙 -->
  809.  
  810. <div id="text-cont" rightside class="txt">
  811.  
  812. <div class="quote">
  813. "Here is the quote.
  814. <br>
  815. Have a nice day
  816. </div><!--end quote-->
  817.  
  818. <blockquote>
  819. <b>Alias:</b> Scorn of the Moon
  820. </blockquote>
  821.  
  822. <blockquote>
  823. <b>Region:</b> Mount Targon
  824. </blockquote>
  825.  
  826. <blockquote>
  827. <b>Role:</b> Fighter
  828. </blockquote>
  829.  
  830.  
  831.  
  832. Here is where your main about text goes.
  833. <br>
  834. A scrollbar will appear if you have too much text.
  835.  
  836. <p>
  837.  
  838. <b>bold</b> | <i>italic</i> | <u>underline</u>
  839.  
  840. <p>
  841.  
  842. <a href="//google.com">sample link</a>
  843.  
  844. <h1>Here is a normal heading.</h1>
  845.  
  846. <h1>
  847. <a href="//google.com">Here is a heading that links to something.</a>
  848. </h1>
  849. </div><!--end rightside-->
  850. </div><!--main-cont-->
  851. </div><!--frame-->
  852. </div><!--vertigo-b-->
  853. </div><!--vertigo-a-->
  854. </div><!--horizontal-b-->
  855. </div><!--horizontal-a-->
  856.  
  857.  
  858. <!------ BOTTOM BAR ------>
  859. <div id="botbar"></div>
  860.  
  861. <!------ MUSIC PLAYER ------>
  862. <div id="ban-pyke-in-aram">
  863. <div id="i-mean-it">
  864. <div id="musicplayer">
  865. <div class="roundthing">
  866. <!--more music player gifs here:-->
  867. <!--stewlate.tumblr.com/post/28218185078/music-player-gifs-->
  868. <img src="//68.media.tumblr.com/tumblr_m7w2o3N94I1r6o8v2.gif"></div>
  869. <div class="midline"></div>
  870. <div class="play">
  871. <div class="music-controls">
  872. <div class="playy">►</div>
  873. <div class="pausee">❚❚</div>
  874. </div>
  875.  
  876. <!------- MUSIC TRACK NAME ------->
  877. <!-- 🌙🌙🌙🌙🌙🌙🌙 -->
  878.  
  879. <div class="playtext">Blood Moon Diana Theme</div>
  880.  
  881. </div><!--play--><!--do not delete this line-->
  882.  
  883.  
  884. <!------- MUSIC LINK ------->
  885. <!-- 🌙🌙🌙🌙🌙🌙🌙 -->
  886. <!--
  887. to change the music, you can upload songs from your computer
  888. and grab the link. here are a few ways you can do it:
  889.  
  890. linktr.ee/direct_file_links
  891.  
  892. insert your music link between the quotation marks of src=""
  893. -->
  894.  
  895. <audio id="tune" src="https://rhizo.gitlab.io/m/Blood_Moon_Diana.mp3" type="audio"></audio>
  896.  
  897. </div><!--musicplayer-->
  898. </div><!--i-mean-it-->
  899. </div><!--ban-pyke-in-aram-->
  900. <!--end music player-->
  901.  
  902.  
  903. <div id="botshit">
  904. <div id="tryangel"></div>
  905. <div id="botpanel"></div>
  906. </div>
  907.  
  908.  
  909.  
  910. <!------ BOTTOM CENTER TEXTBOX ------>
  911.  
  912. <div id="bt-holder">
  913. <div id="ban-yasuo">
  914.  
  915. <!------- MOON ICON ------->
  916. <!-- 🌙🌙🌙🌙🌙🌙🌙 -->
  917. <!--
  918. you can change the icon, but there are only a certain selection
  919. of icons that you can choose from.
  920.  
  921. instructions:
  922. 1. go to this site: //linearicons.com/free
  923. 2. pick an icon you like; copy the name
  924. 3. below, replace lnr-moon with the name you just copied
  925. -->
  926. <span class="lnr lnr-moon"></span>
  927.  
  928.  
  929.  
  930. <!------- BIG TITLE (BOTTOM) ------->
  931. <!-- 🌙🌙🌙🌙🌙🌙🌙 -->
  932.  
  933. <div class="bigname">diana</div>
  934.  
  935.  
  936.  
  937. <!------- SUBTITLE / SMALL TEXT (VERY BOTTOM) ------->
  938. <!-- 🌙🌙🌙🌙🌙🌙🌙 -->
  939.  
  940. <div class="subtitle">
  941. Looks best with 2 lines.
  942. <br>
  943. I love you
  944. </div><!--end subtitle-->
  945.  
  946. </div><!--ban-yasuo-->
  947. </div><!--bt-holder-->
  948.  
  949.  
  950. <!------ CREDIT ------>
  951. <!-- pls do not delete the credit! thank you *\^o^)/ -->
  952. <div id="what-is-a-skeletons-favorite-snack">
  953. <div id="ribs_spare-ribs">
  954. <a class="instalock-ap-lucian" href="//glenthemes.tumblr.com" title="page by glenthemes">credit</a>
  955. </div><!--do not delete this line-->
  956. </div><!--do not delete this line-->
  957.  
  958. </body>
  959.  
  960. </html>
  961.  
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!