API tools faq
paste
Advertisement
glenthemes

Character Page [07]: Heartbreaker

glenthemes
Dec 31st, 2020 (edited)
2,980
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 50.75 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. Character Page [07]: Heartbreaker
  3. Made by glenthemes
  4.  
  5. Initial release: 2021/01/01
  6. Last updated: 2023/10/03
  7.  
  8. What's new:
  9. ✱ rehosted images
  10.  
  11. TERMS OF USE:
  12. 1) Do not remove the page credit.
  13. 2) Do not repost/redistribute my themes.
  14. 3) Do not take parts of the code and use it as your own.
  15. 4) Do not use my themes as a base code.
  16. 5) Do not mix my themes together.
  17.  
  18. HOW TO USE:
  19. docs.google.com/document/d/16IsbHldwQ86KgCc1rH6qp48xK-6TGagwKuvTqHwlHmA/edit?usp=sharing
  20.  
  21. Find these: 🔮🔮🔮🔮🔮🔮🔮
  22.  
  23. Credits:
  24. - K/DA 'THE BADDEST' pre-worlds key art: artstation.com/artwork/B1686r
  25. - clip path css maker: bennettfeely.com/clippy
  26. - K/DA font: reddit.com/r/leagueoflegends/comments/jjfs29/kda_font
  27. - feathericons: feathericons.com
  28. - fontawesome: fontawesome.com/icons
  29. - dripicons: demo.amitjakhu.com/dripicons
  30. - cursor: deviantart.com/raindropmemory/art/DOWNLOAD-Molecule-Cursor-427716613
  31. ------------------------------------------------------------------------>
  32.  
  33. <!DOCTYPE html>
  34. <html lang="en">
  35.  
  36. <head>
  37.  
  38. <title>{Title}</title>
  39.  
  40. <link rel="shortcut icon" href="{Favicon}">
  41.  
  42. <!--------------------JAVASCRIPTS-------------------->
  43. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  44. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  45. <script>
  46. (function($){
  47. $(document).ready(function(){
  48. $("a[title]").style_my_tooltips({
  49. tip_follows_cursor:true,
  50. tip_delay_time:50,
  51. tip_fade_speed:0,
  52. attribute:"title"
  53. });
  54. });
  55. })(jQuery);
  56. </script>
  57.  
  58. <link href="//fonts.googleapis.com/css?family=Abel|Teko:300|Sintony" rel="stylesheet">
  59.  
  60. <script src="//kit.fontawesome.com/9b31aab1c4.js" crossorigin="anonymous"></script>
  61.  
  62. <script src="//static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
  63.  
  64. <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@icon/dripicons@latest/dripicons.css">
  65.  
  66. <script src="//glen-themes.gitlab.io/chara-pages/07/heartbreaker_.js"></script>
  67.  
  68. <!-------------------------------------------------------------------->
  69.  
  70. <style type="text/css">
  71.  
  72. @font-face { font-family: "consolas-alt"; src: url('//glen-assets.github.io/fonts/consolas.TTF'); }
  73.  
  74. @font-face { font-family: "gobold light"; src: url('//glen-assets.github.io/fonts/Gobold Light.otf'); }
  75.  
  76. @font-face { font-family: "gobold bold"; src: url('//glen-assets.github.io/fonts/Gobold Bold.otf'); }
  77.  
  78. @font-face { font-family: "kda-font"; src: url('//glen-assets.github.io/fonts/KDA.ttf'); }
  79.  
  80. /*--------------------TOOLTIPS--------------------*/
  81. #s-m-t-tooltip {
  82. margin:12px;
  83. padding:5px 10px;
  84. background-color:var(--Tooltips-BG);
  85. font-family:sintony;
  86. font-size:9px;
  87. letter-spacing:0.7px;
  88. text-transform:uppercase;
  89. color:var(--Tooltips-Text);
  90. z-index:99;
  91. max-width:40vw;
  92. }
  93.  
  94. /*--------------------TUMBLR CONTROLS--------------------*/
  95. iframe#tumblr_controls, .iframe-controls--desktop {
  96. top:calc(var(--Screen-Margin) - 3px)!important;
  97. right:calc(var(--Screen-Margin) - 3px)!important;
  98. padding-right:calc(16px * 2)!important;
  99. position:fixed!important;
  100.  
  101. transform:scale(0.75,0.75);
  102. -webkit-transform:scale(0.75,0.75);
  103. -moz-transform:scale(0.75,0.75);
  104. -o-transform:scale(0.75,0.75);
  105. -ms-transform:scale(0.75,0.75);
  106.  
  107. transform-origin:100% 0;
  108. -webkit-transform-origin:100% 0;
  109. -moz-transform-origin:100% 0;
  110. -o-transform-origin:100% 0;
  111. -ms-transform-origin:100% 0;
  112. z-index:999999!important;
  113. opacity:0;
  114. -webkit-transition: opacity 0.4s ease-in-out;
  115. -moz-transition: opacity 0.4s ease-in-out;
  116. -o-transition: opacity 0.4s ease-in-out;
  117. }
  118.  
  119. iframe#tumblr_controls:hover, .iframe-controls--desktop:hover {
  120. opacity:1;
  121. }
  122.  
  123. #tr-ico {
  124. position:fixed;
  125. top:0;margin-top:calc(var(--Screen-Margin) + 7px);
  126. right:0;margin-right:var(--Screen-Margin);
  127. }
  128.  
  129. #tr-ico .dripicons {
  130. font-size:16px;
  131. color:var(--Indicator-Color);
  132. }
  133.  
  134. .navstuff {
  135. position:fixed;
  136. top:0;margin-top:calc(var(--Screen-Margin) + 7px + 16px + 8px);
  137. right:0;margin-right:calc(var(--Screen-Margin) + 7px);
  138. }
  139.  
  140. .nv {
  141. position:relative;
  142. }
  143.  
  144. .navline {
  145. margin:auto;
  146. width:1px;
  147. height:var(--NavLine-Height);
  148. background-image:linear-gradient(to bottom, transparent, var(--NavLine-Color) 25%, transparent);
  149. }
  150.  
  151. .nav {
  152. position:absolute;
  153. margin-top:10px;
  154. right:0;
  155. margin-right:-16px;
  156. }
  157.  
  158. .nav a {
  159. display:block;
  160. padding:var(--NavLinks-Spacing);
  161. }
  162.  
  163. .nav svg {
  164. width:var(--NavLinks-Icon-Size);
  165. height:var(--NavLinks-Icon-Size);
  166. color:var(--NavLinks-Icon-Color);
  167. stroke-width:1.5
  168. }
  169.  
  170. .nav i {
  171. font-size:var(--NavLinks-Icon-Size);
  172. color:var(--NavLinks-Icon-Color);
  173. }
  174.  
  175. /*--------------------TEXT HIGHLIGHT--------------------*/
  176. ::selection {
  177. background:#BBD3FD;
  178. }
  179.  
  180. ::-moz-selection {
  181. background:#BBD3FD;
  182. }
  183.  
  184. /*--------------------BASICS--------------------*/
  185. body {
  186. background-attachment:fixed;
  187. background-repeat:repeat;
  188. color:#888;
  189. cursor:normal;
  190. font-family:consolas-alt;
  191. line-height:1.6em;
  192. font-size:12px;
  193. text-align:left;
  194. }
  195.  
  196. body {
  197. cursor:url(https://rhizo.gitlab.io/KDA/molecular_big.png), auto;
  198. }
  199.  
  200. #background {
  201. position:fixed;
  202. top:0;left:0;
  203. width:100%;
  204. height:100%;
  205. background:var(--Background-Color);
  206. background:radial-gradient(ellipse at top, var(--Background-Lighting-Color) 0%, var(--Background-Color) 100%);
  207. z-index:-69;
  208. }
  209.  
  210. blockquote {
  211. padding-left:10px;
  212. margin-left:5px;
  213. border-left:1px solid;
  214. border-color:#aaa;
  215. margin:10px;
  216. }
  217.  
  218. a {
  219. color:var(--Link);
  220. text-decoration:none;
  221. -webkit-transition: all 0.4s ease-in-out;
  222. -moz-transition: all 0.4s ease-in-out;
  223. -o-transition: all 0.4s ease-in-out;
  224. }
  225.  
  226. audio, .banyasuo {display:none;}
  227.  
  228. .stats, .olive, .infoholder {
  229. display:none;
  230. }
  231.  
  232. .stats:first-of-type, .olive:first-of-type, .infoholder:first-of-type {
  233. display:block;
  234. }
  235.  
  236. pre, code {
  237. white-space:pre-wrap;
  238. }
  239.  
  240. hr {
  241. width:70%;
  242. border-width:0px;
  243. height:1px;
  244. background-color:#bbb;
  245. }
  246.  
  247. img {vertical-align:middle;}
  248.  
  249. .pen, [class*="fa-"], svg {
  250. pointer-events:none;
  251. }
  252.  
  253. /*------------- CUSTOMIZATION OPTIONS -------------*/
  254. /*--🔮🔮🔮🔮🔮🔮🔮--*/
  255.  
  256. body {
  257. background-color:#060608;
  258. }
  259.  
  260. :root {
  261. --Background-Color:#060608; /* this should be the same color as above */
  262. --Background-Lighting-Color:#312f3d;
  263. --Screen-Margin:50px;
  264.  
  265. --Character-Transition-Speed:400; /* in milliseconds ONLY */
  266.  
  267. /*------- TOP-LEFT CORNER TEXT -------*/
  268. --Top-Corner-Text-Color-1:#a4b6ec;
  269. --Top-Corner-Text-Color-2:#badbf8;
  270. --Top-Corner-Text-Font-Size:28px;
  271. --Top-Corner-Text-Spacing:2px;
  272.  
  273. /*-------- TUMBLR CONTROLS INDICATOR --------*/
  274. /* top right corner symbol */
  275. --Indicator-Color:#a4b6ec;
  276.  
  277. --NavLine-Height:100px;
  278. --NavLine-Color:#a4b6ec;
  279.  
  280. --NavLinks-Icon-Size:14px;
  281. --NavLinks-Icon-Color:#a4b6ec;
  282. --NavLinks-Spacing:7px;
  283.  
  284. /*------ CHARACTER STATS ------*/
  285. --Stat-Label-Font-Size:20px;
  286. --Stat-Label-Color:#9f98d9;
  287. --Stat-Detail-Font-Size:13px;
  288. --Stat-Detail-Color:#827cba;
  289. --Stat-Detail-Offset-Amount:-10px;
  290. --Stats-Spacing:7px;
  291. --Stats-Slant-Amount:10px;
  292.  
  293. --Character-Icon-Size:27px;
  294. --Character-Icon-Padding:8px;
  295. --Character-Icon-Background:#19162c;
  296. --Character-Icon-Border-Size:2px;
  297. --Character-Icon-Border-Color-1:#7CA4CB;
  298. --Character-Icon-Border-Color-2:#7D7AD2;
  299. --Character-Icon-Shine-Color:#bee1ff;
  300.  
  301. --Character-Image-Left-Gap:42px;
  302. --Character-Image-Container-Width:169px;
  303. --Character-Image-Container-Height:374px;
  304.  
  305. /*------ CHARACTER NAME ------*/
  306. --Character-Info-Left-Gap:69px;
  307. --Character-Name-Color:#a9a7ee;
  308. --Character-Name-Font-Size:24px;
  309. --Character-Name-Letter-Spacing:5px;
  310.  
  311. --Name-Outline-1-Color:#6f6da5;
  312. --Name-Outline-1-Offset-X:-12px;
  313. --Name-Outline-1-Offset-Y:-6px;
  314.  
  315. --Name-Outline-2-Color:#47456a;
  316. --Name-Outline-2-Offset-X:8px;
  317. --Name-Outline-2-Offset-Y:-4px;
  318.  
  319. /*------ MAIN BIOGRAPHY TEXT ------*/
  320. --Bio-Text-Top-Gap:30px;
  321. --Bio-Text-Width:380px;
  322. --Bio-Text-Font-Size:12px;
  323. --Bio-Text-Color:#9690cd;
  324. --Bio-Text-Line-Height:1.9em;
  325. --Link:#a9a7ee;
  326. --Bio-Text-Bottom-Gap:20px;
  327.  
  328. /*------ PLAYSTYLE SHOWCASE ------*/
  329. /* the little image under the main text */
  330. --Playstyle-Image-Width:32px;
  331. --Playstyle-Image-Right-Gap:16px;
  332.  
  333. --Playstyle-TOP-Label-Font-Size:11px;
  334. --Playstyle-TOP-Label-Color:#a9a7ee;
  335.  
  336. --Playstyle-BOTTOM-Label-Font-Size:11px;
  337. --Playstyle-BOTTOM-Label-Color:#9992d1;
  338.  
  339. /*------ DIFFICULTY BARS ------*/
  340. --Difficulty-Label-Font-Size:11px;
  341. --Difficulty-Label-Color:#9f98d9;
  342.  
  343. --Difficulty-Bar-Width:52px;
  344. --Difficulty-Bar-Height:3px;
  345. --Difficulty-Bar-Empty:#47456a;
  346. --Difficulty-Bar-Fill-Color-1:#a4b6ec;
  347. --Difficulty-Bar-Fill-Color-2:#aca5e7;
  348. --Difficulty-Bar-Spacing:4px;
  349.  
  350. --Character-Bottom-Gap:20px;
  351.  
  352. /*-------- MUSIC PLAYER ---------*/
  353. --Music-Player-Background-Color:#1a1823;
  354. --Music-Player-Padding:18px;
  355. --Album-Image-Size:64px;
  356. --Album-Image-Right-Gap:14px;
  357. --Song-Name-Color:#a7a6d0;
  358. --Song-Name-Font-Size:14px;
  359. --Artist-Name-Color:#9aa1aa;
  360. --Artist-Name-Font-Size:11px;
  361.  
  362. --Music-Controls-Color:#bdbce7;
  363.  
  364. --Music-Controls-Size:16px;
  365. --Music-Controls-Spacing:13px;
  366.  
  367. --Play-Button-Padding:9px;
  368.  
  369. --Progress-Bar-Top-Gap:12px;
  370. --Progress-Bar-Length:300px;
  371. --Progress-Bar-Height:5px;
  372. --Progress-Bar-Empty:#312d40;
  373. --Progress-Bar-Fill:#8484bd;
  374.  
  375. --Volume-Icon-Size:16px;
  376. --Volume-Icon-Color:#9b9abf;
  377. --Volume-Icon-Spacing:13px;
  378. --Volume-Bar-Length:70px;
  379. --Volume-Bar-Height:4px;
  380. --Volume-Bar-Empty:#312d40;
  381. --Volume-Bar-Fill:#7e7eb5;
  382.  
  383. /*----- OTHER -----*/
  384. --Move-Everything-To-The-Left:-23px;
  385. --Move-Everything-Downwards:10px;
  386. --Tooltips-BG:#2c293e;
  387. --Tooltips-Text:#a7a6d0;
  388. }
  389.  
  390. /*--------- TOP LEFT CORNER ---------*/
  391. #top-corner-text {
  392. position:fixed;
  393. top:0;margin-top:var(--Screen-Margin);
  394. left:0;margin-left:var(--Screen-Margin);
  395. font-family:kda-font;
  396. font-size:var(--Top-Corner-Text-Font-Size);
  397. color:var(--Top-Corner-Text-Color-1);
  398. background:-webkit-linear-gradient(var(--Top-Corner-Text-Color-2), var(--Top-Corner-Text-Color-1));
  399. -webkit-background-clip:text;
  400. -webkit-text-fill-color:transparent;
  401. letter-spacing:var(--Top-Corner-Text-Spacing);
  402. line-height:1em;
  403. }
  404.  
  405. #top-corner-text::selection {
  406. background:transparent;
  407. }
  408.  
  409. /*--------- MAIN CONTAINER ---------*/
  410. #horizontal-a {
  411. position:fixed;
  412. top:0;left:0;right:0;
  413. margin:0 auto;
  414. height:100vh;
  415. text-align:center;
  416. z-index:-1;
  417. }
  418.  
  419. #horizontal-b {
  420. display:inline-block;
  421. }
  422.  
  423. #vertigo-a {
  424. height:100vh;
  425. display:table;
  426. }
  427.  
  428. #vertigo-b {
  429. display:table-cell;
  430. vertical-align:middle;
  431. }
  432.  
  433. .youthegoat {
  434. display:table;
  435. margin-left:var(--Move-Everything-To-The-Left);
  436. margin-bottom:calc(var(--Move-Everything-Downwards) * -1);
  437. opacity:0;
  438. }
  439.  
  440. /*--------- LEFT SIDE ---------*/
  441. .lefto {
  442. display:table-cell;
  443. vertical-align:bottom;
  444. text-align:right;
  445. }
  446.  
  447. .stats {
  448.  
  449. }
  450.  
  451. .onestat {
  452. margin:var(--Stats-Spacing) 0;
  453. line-height:1.8em;
  454. opacity:0;
  455. transition:opacity 0.2s ease-in;
  456. }
  457.  
  458. .stat-label {
  459. font-family:teko;
  460. font-size:var(--Stat-Label-Font-Size);
  461. text-transform:uppercase;
  462. font-style:italic;
  463. letter-spacing:1px;
  464. color:var(--Stat-Label-Color);
  465. }
  466.  
  467. .stat-detail {
  468. margin-right:var(--Stat-Detail-Offset-Amount);
  469. font-family:abel;
  470. font-size:var(--Stat-Detail-Font-Size);
  471. text-transform:uppercase;
  472. font-style:italic;
  473. letter-spacing:0.7px;
  474. color:var(--Stat-Detail-Color);
  475. }
  476.  
  477. .skew {
  478. display:inline-block;
  479. transform:skew(-11deg);
  480. font-style:normal;
  481. }
  482.  
  483. .chara-listing {
  484. margin-bottom:-10px;
  485. justify-content:flex-end;
  486. margin-right:var(--Stat-Detail-Offset-Amount);
  487. }
  488.  
  489. .one-chara-icon {
  490. position:relative;
  491. margin-left:calc(var(--Character-Icon-Border-Size) * -1);
  492. padding:10px var(--Character-Icon-Border-Size);
  493. }
  494.  
  495. .skellout {
  496. position:relative;
  497. width:calc(var(--Character-Icon-Size) + (var(--Character-Icon-Padding) * 2) + (var(--Character-Icon-Border-Size) * 2));
  498. height:calc(var(--Character-Icon-Size) + (var(--Character-Icon-Padding) * 2) + (var(--Character-Icon-Border-Size) * 2));
  499. clip-path:polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0 25%);
  500. }
  501.  
  502. .one-chara-icon:hover .skellout, .i-hover .skellout, .i-active .skellout {
  503. background:var(--Character-Icon-Border-Color-1);
  504. background-image:linear-gradient(120deg, var(--Character-Icon-Border-Color-1), var(--Character-Icon-Border-Color-2));
  505. }
  506.  
  507. .skellin {
  508. position:absolute;
  509. top:0;margin-top:var(--Character-Icon-Border-Size);
  510. left:0;margin-left:var(--Character-Icon-Border-Size);
  511. width:calc(var(--Character-Icon-Size) + (var(--Character-Icon-Padding) * 2));
  512. height:calc(var(--Character-Icon-Size) + (var(--Character-Icon-Padding) * 2));
  513. clip-path:polygon(25% 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0 25%);
  514. }
  515.  
  516. .one-chara-icon:hover .skellin, .i-hover .skellin, .i-active .skellin {
  517. background:var(--Character-Icon-Background);
  518. }
  519.  
  520. .ico {
  521. padding:var(--Character-Icon-Padding);
  522. width:var(--Character-Icon-Size);
  523. height:var(--Character-Icon-Size);
  524. opacity:0.69;
  525. filter:saturate(150%) contrast(104%);
  526. }
  527.  
  528. .ico:hover, .i-hover .ico, .i-active .ico {
  529. filter:saturate(1);
  530. opacity:1;
  531. }
  532.  
  533. .vanillae {
  534. position:absolute;
  535. bottom:0;left:0;
  536. margin-left:calc((var(--Character-Icon-Size) + (var(--Character-Icon-Padding) * 2)) * -1);
  537. width:calc((var(--Character-Icon-Size) + (var(--Character-Icon-Padding) * 2) + (var(--Character-Icon-Border-Size) * 2)) * 2);
  538. height:var(--Character-Icon-Border-Size);
  539. transform:rotate(-45deg);
  540. transform-origin:left;
  541. background-color:;
  542. background-image:linear-gradient(to left, var(--Character-Icon-Shine-Color) 69%, transparent);
  543. z-index:2;
  544. }
  545.  
  546. .vc {
  547. margin-left:calc((var(--Character-Icon-Size) + (var(--Character-Icon-Padding) * 2)) * 1);
  548. }
  549.  
  550. .vc {
  551. transition:all 0.25s linear;
  552. }
  553.  
  554. /*--------- CHARACTER IMAGE ---------*/
  555. .lemon {
  556. padding-left:var(--Character-Image-Left-Gap);
  557. display:table-cell;
  558. vertical-align:bottom;
  559. }
  560.  
  561. .olive {
  562. width:var(--Character-Image-Container-Width);
  563. height:var(--Character-Image-Container-Height);
  564. }
  565.  
  566. .picsholder {
  567. position:relative;
  568. display:flex;
  569. align-items:flex-end;
  570. justify-content:center;
  571. width:100%;
  572. height:100%;
  573. }
  574.  
  575. .chara-image {
  576. max-width:100%;
  577. max-height:100%;
  578. }
  579.  
  580. .signature-image {
  581. position:absolute;
  582. -webkit-user-select:none;
  583. -moz-user-select:none;
  584. -ms-user-select:none;
  585. user-select:none;
  586. }
  587.  
  588. /*--------- RIGHT SIDE ---------*/
  589. .watermalone {
  590. display:table-cell;
  591. vertical-align:middle;
  592. }
  593.  
  594. .infoholder {
  595. margin-left:var(--Character-Info-Left-Gap);
  596. width:var(--Bio-Text-Width);
  597. text-align:left;
  598. }
  599.  
  600. /*--------- CHARACTER NAME ---------*/
  601. .chara-name {
  602. position:relative;
  603. font-family:gobold light;
  604. font-size:var(--Character-Name-Font-Size);
  605. text-transform:uppercase;
  606. font-style:italic;
  607. letter-spacing:var(--Character-Name-Letter-Spacing);
  608. color:var(--Character-Name-Color);
  609. line-height:1em;
  610. }
  611.  
  612. [class^='clone-']{
  613. position:absolute;
  614. color:transparent;
  615. -webkit-user-select:none;
  616. -moz-user-select:none;
  617. -ms-user-select:none;
  618. user-select:none;
  619. z-index:-1;
  620. }
  621.  
  622. .clone-1 {
  623. bottom:0;margin-bottom:var(--Name-Outline-1-Offset-Y);
  624. left:0;margin-left:var(--Name-Outline-1-Offset-X);
  625. font-family:gobold bold;
  626. -webkit-text-stroke:0.5px var(--Name-Outline-1-Color);
  627. }
  628.  
  629. .clone-2 {
  630. top:0;margin-top:var(--Name-Outline-2-Offset-Y);
  631. left:0;margin-left:var(--Name-Outline-2-Offset-X);
  632. font-family:gobold bold;
  633. font-size:calc(var(--Character-Name-Font-Size) * 1.5);
  634. -webkit-text-stroke:0.5px var(--Name-Outline-2-Color);
  635. letter-spacing:calc(var(--Character-Name-Letter-Spacing) * 1.5);
  636. }
  637.  
  638. /*--------- MAIN BIOGRAPHY TEXT ---------*/
  639. .bio-text {
  640. margin-top:var(--Bio-Text-Top-Gap);
  641. margin-left:calc(var(--Name-Outline-1-Offset-X) / 2);
  642. font-family:Sintony;
  643. font-size:var(--Bio-Text-Font-Size);
  644. color:var(--Bio-Text-Color);
  645. line-height:var(--Bio-Text-Line-Height);
  646. transform:skew(-4deg);
  647. }
  648.  
  649. /*--------- EXTRAS (BOTTOM OF TEXT) ---------*/
  650. .extras {
  651. margin-top:var(--Bio-Text-Bottom-Gap);
  652. justify-content:space-between;
  653. }
  654.  
  655. .playstyle {
  656. }
  657.  
  658. .playstyle img {
  659. margin-right:var(--Playstyle-Image-Right-Gap);
  660. width:var(--Playstyle-Image-Width);
  661. height:auto;
  662. transform:skew(4deg);
  663. }
  664.  
  665. .playstyle span {
  666. display:block;
  667. line-height:1.8em;
  668. transform:skew(-6deg);
  669. }
  670.  
  671. .playstyle span:first-child {
  672. font-family:sintony;
  673. font-size:var(--Playstyle-TOP-Label-Font-Size);
  674. text-transform:uppercase;
  675. letter-spacing:0.7px;
  676. color:var(--Playstyle-TOP-Label-Color);
  677. }
  678.  
  679. .playstyle span:last-child {
  680. font-family:abel;
  681. font-size:var(--Playstyle-BOTTOM-Label-Font-Size);
  682. text-transform:uppercase;
  683. letter-spacing:1px;
  684. color:var(--Playstyle-BOTTOM-Label-Color);
  685. }
  686.  
  687. /*--------- DIFFICULTY BARS ---------*/
  688. .difficulty {
  689. }
  690.  
  691. .d-label {
  692. margin-top:-1em;
  693. font-family:abel;
  694. font-size:var(--Difficulty-Label-Font-Size);
  695. text-transform:uppercase;
  696. letter-spacing:0.7px;
  697. color:var(--Difficulty-Label-Color);
  698. text-align:right;
  699. line-height:2.5em;
  700. transform:skew(-6deg);
  701. }
  702.  
  703. .dbars {
  704. justify-content:flex-end;
  705. }
  706.  
  707. .onebar {
  708. margin-left:var(--Difficulty-Bar-Spacing);
  709. width:var(--Difficulty-Bar-Width);
  710. height:var(--Difficulty-Bar-Height);
  711. background:var(--Difficulty-Bar-Empty);
  712. transform:skew(-7deg);
  713. }
  714.  
  715. .ob-fill {
  716. width:0;
  717. height:100%;
  718. }
  719.  
  720. .onebar:first-child .ob-fill {
  721. background:var(--Difficulty-Bar-Fill-Color-1);
  722. }
  723.  
  724. .onebar:nth-child(2) .ob-fill {
  725. background-image:linear-gradient(to left, var(--Difficulty-Bar-Fill-Color-2), var(--Difficulty-Bar-Fill-Color-1));
  726. }
  727.  
  728. .onebar:last-child .ob-fill {
  729. background:var(--Difficulty-Bar-Fill-Color-2);
  730. }
  731.  
  732. /*------- MUSIC PLAYER -------*/
  733. .badbitch {
  734. position:fixed;
  735. bottom:0;left:0;
  736. width:100%;
  737. background:var(--Music-Player-Background-Color);
  738. z-index:69;
  739. }
  740.  
  741. .deadweight {
  742. padding:var(--Music-Player-Padding);
  743. padding-right:calc(var(--Music-Player-Padding) * 1.5);
  744. }
  745.  
  746. .song {
  747. display:none;
  748. }
  749.  
  750. .song:first-of-type {
  751. display:block;
  752. }
  753.  
  754. .deadweight > div {
  755. flex:1
  756. }
  757.  
  758. .flex {
  759. display:flex;
  760. align-items:center;
  761. }
  762.  
  763. .album-image {
  764. margin-right:var(--Album-Image-Right-Gap);
  765. width:var(--Album-Image-Size);
  766. height:var(--Album-Image-Size);
  767. border-radius:3px;
  768. }
  769.  
  770. .music-text {
  771. line-height:1.7em;
  772. }
  773.  
  774. .song-name {
  775. font-family:abel;
  776. font-size:var(--Song-Name-Font-Size);
  777. text-transform:uppercase;
  778. letter-spacing:0.5px;
  779. color:var(--Song-Name-Color);
  780. }
  781.  
  782. .artist-name {
  783. font-family:sintony;
  784. font-size:var(--Artist-Name-Font-Size);
  785. color:var(--Artist-Name-Color);
  786. }
  787.  
  788. /*--------- MUSIC CONTROLS ---------*/
  789. .mmid {
  790. display:block;
  791. margin:auto;
  792. padding:0 10px;
  793. text-align:center;
  794. line-height:1em;
  795. }
  796.  
  797. .mcontrols {
  798. display:inline-block;
  799. }
  800.  
  801. .playbutt {
  802. position:relative;
  803. }
  804.  
  805. .playbutt:before {
  806. content:"";
  807. position:absolute;
  808. top:0;margin-top:-1px;
  809. left:0;margin-left:-1px;
  810. width:100%;
  811. height:100%;
  812. border-radius:100%;
  813. border:1px solid var(--Music-Controls-Color);
  814. opacity:0.7;
  815. z-index:-1;
  816. }
  817.  
  818. .fen {
  819. display:flex;
  820. align-items:center;
  821. justify-content:center;
  822. width:calc((var(--Music-Controls-Size) - 4px) + (var(--Play-Button-Padding) * 2));
  823. height:calc((var(--Music-Controls-Size) - 4px) + (var(--Play-Button-Padding) * 2));
  824. }
  825.  
  826. .playy i {
  827. margin-left:1px;
  828. font-size:calc(var(--Music-Controls-Size) - 4px);
  829. color:var(--Music-Controls-Color);
  830. }
  831.  
  832. .pausee {
  833. display:none;
  834. }
  835.  
  836. .pausee i {
  837. font-size:calc(var(--Music-Controls-Size) - 2px);
  838. color:var(--Music-Controls-Color);
  839. }
  840.  
  841. .prev, .next {
  842. margin:0 calc(var(--Music-Controls-Spacing) / 2);
  843. padding:calc(var(--Music-Controls-Spacing) / 2);
  844. }
  845.  
  846. .prev svg, .next svg {
  847. width:var(--Music-Controls-Size);
  848. height:var(--Music-Controls-Size);
  849. color:var(--Music-Controls-Color);
  850. stroke-width:1.5;
  851. }
  852.  
  853. .brococho {
  854. margin:auto;
  855. margin-top:calc(var(--Progress-Bar-Top-Gap) - 10px);
  856. margin-bottom:-10px;
  857. padding:10px 0;
  858. width:var(--Progress-Bar-Length);
  859. height:var(--Progress-Bar-Height);
  860. }
  861.  
  862. .barley {
  863. width:100%;
  864. height:100%;
  865. background:var(--Progress-Bar-Empty);
  866. border-radius:var(--Progress-Bar-Height);
  867. overflow:hidden;
  868. }
  869.  
  870. .barfill {
  871. width:0;
  872. height:100%;
  873. background:var(--Progress-Bar-Fill);
  874. border-radius:var(--Progress-Bar-Height);
  875. }
  876.  
  877. /*--------- VOLUME CONTROLS ---------*/
  878. .mright {
  879. justify-content:flex-end;
  880. }
  881.  
  882. .mutemax {
  883.  
  884. }
  885.  
  886. .mutemax svg {
  887. padding:7px;
  888. width:var(--Volume-Icon-Size);
  889. height:var(--Volume-Icon-Size);
  890. color:var(--Volume-Icon-Color);
  891. }
  892.  
  893. .mute, .low {display:none;}
  894.  
  895. .volbar {
  896. margin-left:calc(var(--Volume-Icon-Spacing) - 7px);
  897. width:var(--Volume-Bar-Length);
  898. height:var(--Volume-Bar-Height);
  899. border-radius:var(--Volume-Bar-Height);
  900. background:var(--Volume-Bar-Empty);
  901. overflow:hidden;
  902. }
  903.  
  904. .volfill {
  905. height:100%;
  906. background:#6e668f;
  907. border-radius:var(--Volume-Bar-Height);
  908. }
  909.  
  910. .glenjamin {
  911. margin-left:var(--Volume-Icon-Spacing);
  912. margin-right:-7px;
  913. }
  914.  
  915. .glenjamin svg {
  916. padding:7px;
  917. width:calc(var(--Volume-Icon-Size) - 2px);
  918. height:calc(var(--Volume-Icon-Size) - 2px);
  919. fill:var(--Volume-Icon-Color);
  920. opacity:0.9;
  921. }
  922.  
  923. </style>
  924.  
  925. </head>
  926.  
  927. <body>
  928.  
  929. <div id="background"></div>
  930.  
  931. <div id="tr-ico">
  932. <i class="dripicons dripicons-meter"></i>
  933. </div>
  934.  
  935. <div class="navstuff">
  936. <div class="nv">
  937. <div class="navline"></div>
  938. <div class="nav">
  939. <a href="/" title="home"><i data-feather="home"></i></a>
  940. <a href="/ask" title="message"><i data-feather="inbox"></i></a>
  941. <a href="/archive" title="archive"><i data-feather="grid"></i></a>
  942.  
  943. <!----- CUSTOM LINKS ----->
  944. <!--🔮🔮🔮🔮🔮🔮🔮-->
  945.  
  946. <!-- link goes between "" of href="" -->
  947. <!--
  948. TO PICK ICONS: fontawesome.com/search?m=free
  949. change e.g. spotify to icon of your choice
  950. -->
  951.  
  952. <a href="" title="nav hover text">
  953. <i class="fab fa-spotify"></i>
  954. </a>
  955.  
  956. <a href="" title="nav hover text">
  957. <i class="fab fa-youtube"></i>
  958. </a>
  959.  
  960. <a href="" title="nav hover text">
  961. <i class="fab fa-soundcloud"></i>
  962. </a>
  963.  
  964. </div><!--nav-->
  965. </div><!--nv-->
  966. </div><!--navstuff-->
  967.  
  968.  
  969. <div id="top-corner-text">
  970. <!------- TOP LEFT CORNER TEXT ------->
  971. <!--🔮🔮🔮🔮🔮🔮🔮-->
  972. KDA
  973. </div>
  974.  
  975. <div id="horizontal-a">
  976. <div id="horizontal-b">
  977. <div id="vertigo-a">
  978. <div id="vertigo-b">
  979. <div class="youthegoat">
  980. <div class="lefto">
  981. <!---------- LEFT STATS ---------->
  982. <!--🔮🔮🔮🔮🔮🔮🔮-->
  983.  
  984. <!------ STATS FOR CHARACTER 1 ------>
  985. <!--👇👇👇👇👇👇👇-->
  986.  
  987. <!--
  988. Instructions:
  989. - assign an ID for your character
  990. - this goes between the "" of chara-id=""
  991. - you will have to use this ID again later
  992. - ID cannot start with a number
  993. -->
  994.  
  995. <div class="stats" chara-id="akali">
  996.  
  997. <div class="onestat">
  998. <div class="stat-label">Alias</div>
  999. <div class="stat-detail">The Rebel</div>
  1000. </div>
  1001.  
  1002. <div class="onestat">
  1003. <div class="stat-label">Role</div>
  1004. <div class="stat-detail">Rapper</div>
  1005. </div>
  1006.  
  1007. <div class="onestat">
  1008. <div class="stat-label">Zodiac</div>
  1009. <div class="stat-detail">Taurus</div>
  1010. </div>
  1011.  
  1012. <div class="onestat">
  1013. <div class="stat-label">Nicknames</div>
  1014. <div class="stat-detail">Rogue</div>
  1015. </div>
  1016.  
  1017. </div><!--end stats for a chara-->
  1018. <!--⏚ī¸âšī¸âšī¸âšī¸âšī¸âšī¸âšī¸-->
  1019.  
  1020.  
  1021.  
  1022.  
  1023. <!------ STATS FOR CHARACTER 2 ------>
  1024. <!--👇👇👇👇👇👇👇-->
  1025. <div class="stats" chara-id="ahri">
  1026.  
  1027. <div class="onestat">
  1028. <div class="stat-label">Alias</div>
  1029. <div class="stat-detail">The Queen</div>
  1030. </div>
  1031.  
  1032. <div class="onestat">
  1033. <div class="stat-label">Role</div>
  1034. <div class="stat-detail">Lead Vocalist</div>
  1035. </div>
  1036.  
  1037. <div class="onestat">
  1038. <div class="stat-label">Zodiac</div>
  1039. <div class="stat-detail">Sagittarius</div>
  1040. </div>
  1041.  
  1042. <div class="onestat">
  1043. <div class="stat-label">Nicknames</div>
  1044. <div class="stat-detail">Foxy | Gumiho</div>
  1045. </div>
  1046.  
  1047. </div><!--end stats for a chara-->
  1048. <!--⏚ī¸âšī¸âšī¸âšī¸âšī¸âšī¸âšī¸-->
  1049.  
  1050.  
  1051.  
  1052.  
  1053. <!------ STATS FOR CHARACTER 3 ------>
  1054. <!--👇👇👇👇👇👇👇-->
  1055. <div class="stats" chara-id="evelynn">
  1056.  
  1057. <div class="onestat">
  1058. <div class="stat-label">Alias</div>
  1059. <div class="stat-detail">The Diva</div>
  1060. </div>
  1061.  
  1062. <div class="onestat">
  1063. <div class="stat-label">Role</div>
  1064. <div class="stat-detail">Lead Vocalist</div>
  1065. </div>
  1066.  
  1067. <div class="onestat">
  1068. <div class="stat-label">Zodiac</div>
  1069. <div class="stat-detail">Taurus</div>
  1070. </div>
  1071.  
  1072. <div class="onestat">
  1073. <div class="stat-label">Nicknames</div>
  1074. <div class="stat-detail">Siren, Eve</div>
  1075. </div>
  1076.  
  1077. </div><!--end stats for a chara-->
  1078. <!--⏚ī¸âšī¸âšī¸âšī¸âšī¸âšī¸âšī¸-->
  1079.  
  1080.  
  1081.  
  1082.  
  1083. <!------ STATS FOR CHARACTER 4 ------>
  1084. <!--👇👇👇👇👇👇👇-->
  1085. <div class="stats" chara-id="kaisa">
  1086. <div class="onestat">
  1087. <div class="stat-label">Alias</div>
  1088. <div class="stat-detail">The Dancer</div>
  1089. </div>
  1090.  
  1091. <div class="onestat">
  1092. <div class="stat-label">Role</div>
  1093. <div class="stat-detail">Lead Dancer</div>
  1094. </div>
  1095.  
  1096. <div class="onestat">
  1097. <div class="stat-label">Zodiac</div>
  1098. <div class="stat-detail">Pisces</div>
  1099. </div>
  1100.  
  1101. <div class="onestat">
  1102. <div class="stat-label">Nicknames</div>
  1103. <div class="stat-detail">BOKKIE</div>
  1104. </div>
  1105.  
  1106. </div><!--end stats for a chara-->
  1107. <!--⏚ī¸âšī¸âšī¸âšī¸âšī¸âšī¸âšī¸-->
  1108.  
  1109.  
  1110. <!----- you *can* add more characters ----->
  1111.  
  1112.  
  1113.  
  1114.  
  1115.  
  1116. <!-------- CHARACTER SELECTION -------->
  1117. <!--🔮🔮🔮🔮🔮🔮🔮-->
  1118.  
  1119. <div class="chara-listing flex">
  1120.  
  1121. <!--
  1122. Instructions:
  1123. - use the same chara-id="" as you assigned previously
  1124. - icon image url goes between "" of src=""
  1125. -->
  1126.  
  1127. <!--👇👇👇👇👇👇👇-->
  1128. <div class="one-chara-icon" chara-id="akali">
  1129. <div class="skellout">
  1130. <div class="vanillae"></div>
  1131. <div class="skellin">
  1132. <img class="ico" src="https://rhizo.gitlab.io/KDA/akali_icon.png">
  1133. </div>
  1134. </div>
  1135. </div><!--end one character-->
  1136. <!--⏚ī¸âšī¸âšī¸âšī¸âšī¸âšī¸âšī¸-->
  1137.  
  1138.  
  1139.  
  1140. <!--👇👇👇👇👇👇👇-->
  1141. <div class="one-chara-icon" chara-id="ahri">
  1142. <div class="skellout">
  1143. <div class="vanillae"></div>
  1144. <div class="skellin">
  1145. <img class="ico" src="https://rhizo.gitlab.io/KDA/ahri_icon.png">
  1146. </div>
  1147. </div>
  1148. </div><!--end one character-->
  1149. <!--⏚ī¸âšī¸âšī¸âšī¸âšī¸âšī¸âšī¸-->
  1150.  
  1151.  
  1152.  
  1153. <!--👇👇👇👇👇👇👇-->
  1154. <div class="one-chara-icon" chara-id="evelynn">
  1155. <div class="skellout">
  1156. <div class="vanillae"></div>
  1157. <div class="skellin">
  1158. <img class="ico" src="https://rhizo.gitlab.io/KDA/evelynn_icon.png">
  1159. </div>
  1160. </div>
  1161. </div><!--end one character-->
  1162. <!--⏚ī¸âšī¸âšī¸âšī¸âšī¸âšī¸âšī¸-->
  1163.  
  1164.  
  1165.  
  1166. <!--👇👇👇👇👇👇👇-->
  1167. <div class="one-chara-icon" chara-id="kaisa">
  1168. <div class="skellout">
  1169. <div class="vanillae"></div>
  1170. <div class="skellin">
  1171. <img class="ico" src="https://rhizo.gitlab.io/KDA/kaisa_icon.png">
  1172. </div>
  1173. </div>
  1174. </div><!--end one character-->
  1175. <!--⏚ī¸âšī¸âšī¸âšī¸âšī¸âšī¸âšī¸-->
  1176.  
  1177.  
  1178. </div><!--chara-listing--><!--do not delete this line-->
  1179. </div><!--lefto--><!--do not delete this line-->
  1180.  
  1181.  
  1182.  
  1183.  
  1184.  
  1185.  
  1186. <div class="lemon">
  1187.  
  1188. <!----------- CHARACTER IMAGES ----------->
  1189. <!--🔮🔮🔮🔮🔮🔮🔮-->
  1190.  
  1191. <!--
  1192. Instructions:
  1193. - use the chara-id="" that you assigned previously
  1194.  
  1195. IMAGE Instructions:
  1196. - image URL goes between "" of src=""
  1197. - first image is your main character image
  1198. - second image is the signature image. *can* be deleted
  1199. - you can change the dimensions and positioning
  1200. - put them before the ending pointy bracket ">"
  1201. - available adjustments:
  1202. width | height | top | bottom | left | right
  1203. -->
  1204.  
  1205. <!--------- CHARACTER 1 IMAGE(S) --------->
  1206. <!--👇👇👇👇👇👇👇-->
  1207. <div class="olive" chara-id="akali">
  1208. <div class="picsholder">
  1209. <img class="chara-image" src="https://rhizo.gitlab.io/KDA/akali_psd_trans.png" left="4px">
  1210. <img class="signature-image" src="https://rhizo.gitlab.io/KDA/akali_ss.png" width="118px" bottom="28px" right="-14px">
  1211. </div><!--picsholder-->
  1212. </div><!--olive-->
  1213. <!--⏚ī¸âšī¸âšī¸âšī¸âšī¸âšī¸âšī¸-->
  1214.  
  1215.  
  1216. <!--------- CHARACTER 2 IMAGE(S) --------->
  1217. <!--👇👇👇👇👇👇👇-->
  1218. <div class="olive" chara-id="ahri">
  1219. <div class="picsholder">
  1220. <img class="chara-image" src="https://rhizo.gitlab.io/KDA/ahri_psd_trans.png" height="102%" bottom="-26px" left="10px">
  1221.  
  1222. <img class="signature-image" src="https://rhizo.gitlab.io/KDA/ahri_gradient.png" width="90px" bottom="6px" left>
  1223. </div><!--picsholder-->
  1224. </div><!--olive-->
  1225. <!--⏚ī¸âšī¸âšī¸âšī¸âšī¸âšī¸âšī¸-->
  1226.  
  1227.  
  1228. <!--------- CHARACTER 3 IMAGE(S) --------->
  1229. <!--👇👇👇👇👇👇👇-->
  1230. <div class="olive" chara-id="evelynn">
  1231. <div class="picsholder">
  1232. <img class="chara-image" src="https://rhizo.gitlab.io/KDA/eve_psd_trans.png" height="102%" left="15px" bottom="-20px">
  1233.  
  1234. <img class="signature-image" src="https://rhizo.gitlab.io/KDA/eve_ss.png" width="140px" bottom="-62px" right="-17px">
  1235. </div><!--picsholder-->
  1236. </div><!--olive-->
  1237. <!--⏚ī¸âšī¸âšī¸âšī¸âšī¸âšī¸âšī¸-->
  1238.  
  1239.  
  1240. <!--------- CHARACTER 4 IMAGE(S) --------->
  1241. <!--👇👇👇👇👇👇👇-->
  1242. <div class="olive" chara-id="kaisa">
  1243. <div class="picsholder">
  1244. <img class="chara-image" src="https://rhizo.gitlab.io/KDA/kaisa_psd_trans_2.png" height="114%" bottom="-26px" left="-9px">
  1245.  
  1246. <img class="signature-image" src="https://rhizo.gitlab.io/KDA/kaisa_gradient.png" width="107px" bottom="22px" right="-24px">
  1247. </div><!--picsholder-->
  1248. </div><!--olive-->
  1249. <!--⏚ī¸âšī¸âšī¸âšī¸âšī¸âšī¸âšī¸-->
  1250.  
  1251. </div><!--lemon--><!--do not delete this line-->
  1252.  
  1253.  
  1254.  
  1255.  
  1256.  
  1257. <div class="watermalone">
  1258.  
  1259. <!----------- MAIN TEXT (RIGHT SIDE) ---------->
  1260. <!--🔮🔮🔮🔮🔮🔮🔮-->
  1261. <!--
  1262. Instructions:
  1263. - use the chara-id="" that you previously assigned
  1264. - follow the notes in gray
  1265. -->
  1266.  
  1267. <!----------- CHARACTER 1 MAIN TEXT ----------->
  1268. <!--👇👇👇👇👇👇👇-->
  1269. <div class="infoholder" chara-id="akali">
  1270.  
  1271. <div class="chara-name">
  1272. <span>Akali</span> <!--- character name --->
  1273. </div>
  1274.  
  1275. <div class="bio-text">
  1276. <!--- paragraph text goes here -->
  1277. Biography text for character 1.
  1278.  
  1279.  
  1280.  
  1281. <div class="extras flex">
  1282. <div class="playstyle flex">
  1283.  
  1284. <!--- the small image & text under the paragraphs --->
  1285. <!-- image URL goes between "" of src="" -->
  1286.  
  1287. <img src="https://rhizo.gitlab.io/KDA/asslogo_.png">
  1288.  
  1289. <div>
  1290. <!--- top & bottom text --->
  1291. <span>the rogue assassin</span>
  1292. <span>this is a reckoning</span>
  1293. </div>
  1294. </div><!--do not delete this line-->
  1295.  
  1296.  
  1297. <!--- difficulty bars --->
  1298. <!--
  1299. - meant to be only 3 bars
  1300. - you can change 100%
  1301. - remove fill="100%" to clear the bar
  1302. -->
  1303. <div class="difficulty">
  1304. <div class="d-label">Difficulty:</div>
  1305. <div class="dbars flex">
  1306. <div class="onebar">
  1307. <div class="ob-fill" fill="100%"></div>
  1308. </div>
  1309.  
  1310. <div class="onebar">
  1311. <div class="ob-fill" fill="100%"></div>
  1312. </div>
  1313.  
  1314. <div class="onebar">
  1315. <div class="ob-fill"></div>
  1316. </div>
  1317. </div><!--dbars-->
  1318. </div><!--difficulty-->
  1319.  
  1320. </div><!--extras-->
  1321. </div><!--bio-text-->
  1322. </div><!--infoholder-->
  1323. <!--⏚ī¸âšī¸âšī¸âšī¸âšī¸âšī¸âšī¸-->
  1324.  
  1325.  
  1326.  
  1327.  
  1328. <!----------- CHARACTER 2 MAIN TEXT ----------->
  1329. <!--👇👇👇👇👇👇👇-->
  1330. <div class="infoholder" chara-id="ahri">
  1331.  
  1332. <div class="chara-name">
  1333. <span>Ahri</span> <!--- character name --->
  1334. </div>
  1335.  
  1336. <div class="bio-text">
  1337. <!--- paragraph text goes here -->
  1338. Biography text for character 2.
  1339.  
  1340.  
  1341.  
  1342. <div class="extras flex">
  1343. <div class="playstyle flex">
  1344.  
  1345. <!--- the small image & text under the paragraphs --->
  1346. <!-- image URL goes between "" of src="" -->
  1347.  
  1348. <img src="https://rhizo.gitlab.io/KDA/magelogo_.png">
  1349.  
  1350. <div>
  1351. <!--- top & bottom text --->
  1352. <span>the nine-tailed fox</span>
  1353. <span>let's pretend this is love</span>
  1354. </div>
  1355. </div><!--do not delete this line-->
  1356.  
  1357.  
  1358. <!--- difficulty bars --->
  1359. <!--
  1360. - meant to be only 3 bars
  1361. - you can change 100%
  1362. - remove fill="100%" to clear the bar
  1363. -->
  1364. <div class="difficulty">
  1365. <div class="d-label">Difficulty:</div>
  1366. <div class="dbars flex">
  1367. <div class="onebar">
  1368. <div class="ob-fill" fill="100%"></div>
  1369. </div>
  1370.  
  1371. <div class="onebar">
  1372. <div class="ob-fill" fill="100%"></div>
  1373. </div>
  1374.  
  1375. <div class="onebar">
  1376. <div class="ob-fill"></div>
  1377. </div>
  1378. </div><!--dbars-->
  1379. </div><!--difficulty-->
  1380.  
  1381. </div><!--extras-->
  1382. </div><!--bio-text-->
  1383. </div><!--infoholder-->
  1384. <!--⏚ī¸âšī¸âšī¸âšī¸âšī¸âšī¸âšī¸-->
  1385.  
  1386.  
  1387.  
  1388.  
  1389.  
  1390. <!----------- CHARACTER 2 MAIN TEXT ----------->
  1391. <!--👇👇👇👇👇👇👇-->
  1392. <div class="infoholder" chara-id="evelynn">
  1393.  
  1394. <div class="chara-name">
  1395. <span>Evelynn</span> <!--- character name --->
  1396. </div>
  1397.  
  1398. <div class="bio-text">
  1399. <!--- paragraph text goes here -->
  1400. Biography text for character 3.
  1401.  
  1402.  
  1403.  
  1404. <div class="extras flex">
  1405. <div class="playstyle flex">
  1406.  
  1407. <!--- the small image & text under the paragraphs --->
  1408. <!-- image URL goes between "" of src="" -->
  1409.  
  1410. <img src="https://rhizo.gitlab.io/KDA/magelogo_.png">
  1411.  
  1412. <div>
  1413. <!--- top & bottom text --->
  1414. <span>agony's embrace</span>
  1415. <span>my pleasure, your pain</span>
  1416. </div>
  1417. </div><!--do not delete this line-->
  1418.  
  1419.  
  1420. <!--- difficulty bars --->
  1421. <!--
  1422. - meant to be only 3 bars
  1423. - you can change 100%
  1424. - remove fill="100%" to clear the bar
  1425. -->
  1426. <div class="difficulty">
  1427. <div class="d-label">Difficulty:</div>
  1428. <div class="dbars flex">
  1429. <div class="onebar">
  1430. <div class="ob-fill" fill="100%"></div>
  1431. </div>
  1432.  
  1433. <div class="onebar">
  1434. <div class="ob-fill" fill="100%"></div>
  1435. </div>
  1436.  
  1437. <div class="onebar">
  1438. <div class="ob-fill" fill="100%"></div>
  1439. </div>
  1440. </div><!--dbars-->
  1441. </div><!--difficulty-->
  1442.  
  1443. </div><!--extras-->
  1444. </div><!--bio-text-->
  1445. </div><!--infoholder-->
  1446. <!--⏚ī¸âšī¸âšī¸âšī¸âšī¸âšī¸âšī¸-->
  1447.  
  1448.  
  1449.  
  1450.  
  1451.  
  1452. <!----------- CHARACTER 4 MAIN TEXT ----------->
  1453. <!--👇👇👇👇👇👇👇-->
  1454. <div class="infoholder" chara-id="kaisa">
  1455.  
  1456. <div class="chara-name">
  1457. <span>Kai'Sa</span> <!--- character name --->
  1458. </div>
  1459.  
  1460. <div class="bio-text">
  1461. <!--- paragraph text goes here -->
  1462. Biography text for character 4.
  1463.  
  1464.  
  1465.  
  1466. <div class="extras flex">
  1467. <div class="playstyle flex">
  1468.  
  1469. <!--- the small image & text under the paragraphs --->
  1470. <!-- image URL goes between "" of src="" -->
  1471.  
  1472. <img src="https://rhizo.gitlab.io/KDA/marksmanlogo_.png">
  1473.  
  1474. <div>
  1475. <!--- top & bottom text --->
  1476. <span>daughter of the void</span>
  1477. <span>let them come to us</span>
  1478. </div>
  1479. </div><!--do not delete this line-->
  1480.  
  1481.  
  1482. <!--- difficulty bars --->
  1483. <!--
  1484. - meant to be only 3 bars
  1485. - you can change 100%
  1486. - remove fill="100%" to clear the bar
  1487. -->
  1488. <div class="difficulty">
  1489. <div class="d-label">Difficulty:</div>
  1490. <div class="dbars flex">
  1491. <div class="onebar">
  1492. <div class="ob-fill" fill="100%"></div>
  1493. </div>
  1494.  
  1495. <div class="onebar">
  1496. <div class="ob-fill" fill="100%"></div>
  1497. </div>
  1498.  
  1499. <div class="onebar">
  1500. <div class="ob-fill"></div>
  1501. </div>
  1502. </div><!--dbars-->
  1503. </div><!--difficulty-->
  1504.  
  1505. </div><!--extras-->
  1506. </div><!--bio-text-->
  1507. </div><!--infoholder-->
  1508. <!--⏚ī¸âšī¸âšī¸âšī¸âšī¸âšī¸âšī¸-->
  1509.  
  1510.  
  1511. <!----- FEEL FREE TO ADD/REMOVE CHARACTERS ----->
  1512.  
  1513. <!--do not delete below-->
  1514. </div><!--watermalone-->
  1515. </div><!--youthegoat-->
  1516. </div><!--don't delete-->
  1517. </div><!--don't delete-->
  1518. </div><!--don't delete-->
  1519. </div><!--don't delete-->
  1520.  
  1521.  
  1522.  
  1523.  
  1524.  
  1525. <!----------- MUSIC PLAYER ----------->
  1526. <!--🔮🔮🔮🔮🔮🔮🔮-->
  1527. <div class="badbitch">
  1528. <div class="deadweight flex">
  1529. <div class="tracklist">
  1530.  
  1531. <!--
  1532. Instructions:
  1533. - you can have as many songs as you want
  1534. - I recommend not removing the music player
  1535. - (so at least have 1 song)
  1536.  
  1537. >>>>> HOW TO CHANGE THE MUSIC: <<<<<<
  1538. - you can download youtube videos into mp3 using this site:
  1539. flvto.biz/en83
  1540. - then, read this: glenthemes.tumblr.com/post/164215965424
  1541. - put the MP3 URL between "" of <audio src=""
  1542. -->
  1543.  
  1544. <!----- START SONG 1 ----->
  1545. <!--👇👇👇👇👇👇👇-->
  1546. <div class="song">
  1547. <div class="call-it-a flex">
  1548.  
  1549. <!-- album image-->
  1550. <!-- image url goes between "" of src="" -->
  1551. <img class="album-image" src="https://rhizo.gitlab.io/KDA/album_cover_b.png">
  1552.  
  1553. <!--song name & artist-->
  1554. <div class="music-text">
  1555. <div class="song-name">The Baddest</div>
  1556. <div class="artist-name">K/DA, (G)I-DLE & Wolftyla</div>
  1557. </div>
  1558.  
  1559. <!--song MP3 URL-->
  1560. <!-- linktr.ee/direct_file_links -->
  1561. <audio src="https://rhizo.gitlab.io/m/THE_BADDEST.mp3"></audio>
  1562. </div><!--flex-->
  1563. </div><!--song-->
  1564. <!--⏚ī¸âšī¸âšī¸âšī¸âšī¸âšī¸âšī¸-->
  1565.  
  1566.  
  1567.  
  1568.  
  1569. <!----- START SONG 2 ----->
  1570. <!--👇👇👇👇👇👇👇-->
  1571. <div class="song">
  1572. <div class="call-it-a flex">
  1573.  
  1574. <!-- album image-->
  1575. <!-- image url goes between "" of src="" -->
  1576. <img class="album-image" src="https://rhizo.gitlab.io/KDA/1x1.png">
  1577.  
  1578. <!--song name & artist-->
  1579. <div class="music-text">
  1580. <div class="song-name">POP/STARS</div>
  1581. <div class="artist-name">K/DA, Madison Beer & (G)I-DLE</div>
  1582. </div>
  1583.  
  1584. <!--song MP3 URL-->
  1585. <!-- glenthemes.tumblr.com/post/164215965424 -->
  1586. <audio src="https://rhizo.gitlab.io/m/POPSTARS.mp3"></audio>
  1587. </div><!--flex-->
  1588. </div><!--song-->
  1589. <!--⏚ī¸âšī¸âšī¸âšī¸âšī¸âšī¸âšī¸-->
  1590.  
  1591.  
  1592.  
  1593.  
  1594.  
  1595. <!----- START SONG 3 ----->
  1596. <!--👇👇👇👇👇👇👇-->
  1597. <div class="song">
  1598. <div class="call-it-a flex">
  1599.  
  1600. <!-- album image-->
  1601. <!-- image url goes between "" of src="" -->
  1602. <img class="album-image" src="https://rhizo.gitlab.io/KDA/more_cover_sq.png">
  1603.  
  1604. <!--song name & artist-->
  1605. <div class="music-text">
  1606. <div class="song-name">MORE</div>
  1607. <div class="artist-name">K/DA, Madison Beer, (G)I-DLE, Lexie Liu, Jaira Burns, Seraphine</div>
  1608. </div>
  1609.  
  1610. <!--song MP3 URL-->
  1611. <!-- glenthemes.tumblr.com/post/164215965424 -->
  1612. <audio src="https://rhizo.gitlab.io/m/MORE.mp3"></audio>
  1613. </div><!--flex-->
  1614. </div><!--song-->
  1615. <!--⏚ī¸âšī¸âšī¸âšī¸âšī¸âšī¸âšī¸-->
  1616.  
  1617.  
  1618. <!---- YOU CAN ADD MORE SONGS IF YOU WISH ---->
  1619.  
  1620.  
  1621. </div><!--tracklist--><!--do not delete this line-->
  1622.  
  1623.  
  1624.  
  1625.  
  1626.  
  1627. <!--------- VOLUME CONTROLS (NO NEED TO EDIT) -------->
  1628. <div class="mmid">
  1629. <div class="mcontrols">
  1630. <div class="flex">
  1631. <a class="prev">
  1632. <i data-feather="skip-back"></i>
  1633. </a>
  1634.  
  1635. <a class="playbutt">
  1636. <div class="playy">
  1637. <div class="fen"><i class="fas fa-play"></i></div>
  1638. </div>
  1639.  
  1640. <div class="pausee">
  1641. <div class="fen"><i class="dripicons dripicons-media-pause"></i></div>
  1642. </div>
  1643. </a>
  1644.  
  1645. <a class="next">
  1646. <i data-feather="skip-forward"></i>
  1647. </a>
  1648. </div>
  1649. </div><!--mcontrols-->
  1650.  
  1651. <div class="brococho">
  1652. <div class="barley">
  1653. <div class="barfill"></div>
  1654. </div>
  1655. </div>
  1656. </div><!--mmid-->
  1657.  
  1658. <div class="mright flex">
  1659. <div class="mutemax">
  1660. <div class="mute"><i data-feather="volume-x"></i></div>
  1661. <div class="max"><i data-feather="volume-2"></i></div>
  1662. <div class="low"><i data-feather="volume-1"></i></div>
  1663. </div>
  1664.  
  1665. <div class="volbar">
  1666. <div class="volfill"></div>
  1667. </div>
  1668.  
  1669. <!--pls don't delete the credit thanks!!-->
  1670. <a class="glenjamin" href="//glenthemes.tumblr.com" title="coded by glenthemes">
  1671. <div class="glencannotcook"></div>
  1672. </a>
  1673. </div><!--mright-->
  1674. </div><!--deadweight-->
  1675. </div><!--badbitch-->
  1676.  
  1677. <div class="banyasuo"></div>
  1678.  
  1679. <script>feather.replace()</script>
  1680. </body>
  1681.  
  1682. </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!