API tools faq
paste
glenthemes

Music Page [03]: Starchild

glenthemes
Mar 27th, 2020 (edited)
2,187
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.54 KB | None | 0 0
raw download clone embed print report
  1. <!-----------------------------------------------------------------------
  2. Music Page [03]: Starchild
  3. Made by glenthemes
  4.  
  5. Initial release: 2020/03/28
  6. Last updated: 2023/10/19
  7.  
  8. What's new:
  9. ✱ rehosted cursor 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. Customization pointers:
  19. ☁️☁️☁️☁️☁️☁️☁️ = places to edit
  20. 🌟🌟🌟🌟🌟🌟🌟️ = start of a section || begin copy
  21. 🛑🛑🛑🛑🛑🛑🛑 = end of a section || end copy
  22.  
  23. Guide here:
  24. docs.google.com/document/d/1Yn7TQ0IhVCN557tpo4Jyd9z4p_BcUH9ReFulap18MDA/edit?usp=sharing
  25. ------------------------------------------------------------------------>
  26.  
  27. <!DOCTYPE html>
  28. <html lang="en">
  29.  
  30. <head>
  31.  
  32. <title>{Title}</title>
  33.  
  34. <link rel="shortcut icon" href="{Favicon}">
  35.  
  36. <!--------------------JAVASCRIPTS-------------------->
  37. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  38. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  39. <script>
  40. (function($){
  41. $(document).ready(function(){
  42. $("a[title]").style_my_tooltips({
  43. tip_follows_cursor:true,
  44. tip_delay_time:50,
  45. tip_fade_speed:0,
  46. attribute:"title"
  47. });
  48. });
  49. })(jQuery);
  50. </script>
  51.  
  52. <link href="//fonts.googleapis.com/css?family=Nunito|Philosopher|Work+Sans|Quicksand:500|Press+Start+2P|Material+Icons" rel="stylesheet">
  53.  
  54. <link href="//glen-themes.gitlab.io/music-pages/03/css/imports.css" rel="stylesheet">
  55. <script src="//glen-themes.gitlab.io/music-pages/03/js/svgs.js"></script>
  56. <script src="//glen-themes.gitlab.io/music-pages/03/js/ineedsomemilk.js"></script>
  57. <script src="//glen-themes.gitlab.io/music-pages/03/js/get-durations.js"></script>
  58.  
  59. <!-------------------->
  60.  
  61. <style type="text/css">
  62.  
  63. /*-----------------FONTS-----------------*/
  64. @font-face { font-family: "pixeloperator bold"; src: url('//glen-assets.github.io/fonts/PixelOperator-Bold.ttf'); }
  65.  
  66. @font-face { font-family: "silkscreen"; src: url('//glen-assets.github.io/fonts/silkscreen.ttf'); }
  67.  
  68. @font-face { font-family: "8bit madness"; src: url('//glen-assets.github.io/fonts/8-Bit%20Madness.ttf'); }
  69.  
  70. /*-----------------TOOLTIPS-----------------*/
  71. #s-m-t-tooltip {
  72. padding:2px 8px;
  73. margin:18px;
  74. background-color:var(--Tooltips-BG);
  75. font-family:silkscreen;
  76. font-size:9px;
  77. text-transform:uppercase;
  78. color:var(--Tooltips-Text);
  79. z-index:99;
  80. max-width:40vw;
  81. }
  82.  
  83. /*-----------------TUMBLR CONTROLS-----------------*/
  84. iframe#tumblr_controls, .iframe-controls--desktop {
  85. top:5px!important;
  86. right:5px!important;
  87. position:fixed!important;
  88.  
  89. transform:scale(0.7,0.7);
  90. -webkit-transform:scale(0.7,0.7);
  91. -moz-transform:scale(0.7,0.7);
  92. -o-transform:scale(0.7,0.7);
  93. -ms-transform:scale(0.7,0.7);
  94.  
  95. transform-origin:100% 0;
  96. -webkit-transform-origin:100% 0;
  97. -moz-transform-origin:100% 0;
  98. -o-transform-origin:100% 0;
  99. -ms-transform-origin:100% 0;
  100. z-index:999999!important;
  101. }
  102.  
  103. /*-----------------TEXT HIGHLIGHT-----------------*/
  104. ::selection {
  105. background:var(--BG-On-Highlight);
  106. color:var(--Text-On-Highlight);
  107. }
  108.  
  109. ::-moz-selection {
  110. background:var(--BG-On-Highlight);
  111. color:var(--Text-On-Highlight);
  112. }
  113.  
  114. /*-----------------CURSOR SETTINGS-----------------*/
  115. body, a[title]:not([href]):hover {
  116. cursor:url(https://static.tumblr.com/snld4jp/cqEs2spvp/diagonal_resize_1.png), auto;
  117. }
  118.  
  119. a {
  120. cursor:url(https://static.tumblr.com/snld4jp/8lKs2spw2/link_2.png), auto;
  121. }
  122.  
  123. .shufflebutton, .one-song-row {
  124. cursor:url(https://static.tumblr.com/snld4jp/VoEs2spwa/vertical_resize_2.png), auto;
  125. }
  126.  
  127. /*--------------CUSTOMIZATION OPTIONS--------------*/
  128. body {
  129. background:#89e3ea url(""); /* background color & image, if u want one */
  130. background-size:cover;
  131. background-position:center;
  132. background-attachment:fixed;
  133. overflow-x:hidden;
  134. line-height:1.6em;
  135. text-align:left;
  136. }
  137.  
  138. /* colors, sizes, margins, etc */
  139. :root {
  140. --Foreground-Clouds-Size-1:245px;
  141. --Foreground-Clouds-Size-2:120px;
  142. --Foreground-Clouds-Size-3:76px;
  143. --Foreground-Clouds-Color:#ecf9d2;
  144. --Foreground-Clouds-Speed:60s;
  145.  
  146. --Background-Clouds-Size-1:69px;
  147. --Background-Clouds-Size-2:129px;
  148. --Background-Clouds-Size-3:76px;
  149. --Background-Clouds-Size-4:100px;
  150. --Background-Clouds-Color:#a7ede6;
  151. --Background-Clouds-Speed:190s;
  152.  
  153. --Album-Image-Width:275px;
  154. --Album-Image-Bottom-Gap:25px;
  155. --Sidebar-Desc-Width:250px;
  156. --Sidebar-Desc-Font-Size:15px;
  157. --Sidebar-Desc-Text:#604c3a;
  158. --Sidebar-Desc-Links:#fff;
  159. --Sidebar-Desc-Links-Background:#30adc9;
  160. --Sidebar-Desc-Text-Shadow:#51afc4;
  161. --Sidebar-Desc-Line-Height:1.5em;
  162.  
  163. --Container-Center-Gap:42px;
  164.  
  165. --Heading-Border-Height:3px;
  166. --Heading-Border:#f7c282;
  167. --Heading-Border-Highlight-1:#f2d0ad;
  168. --Heading-Border-Highlight-2:#dcab8a;
  169. --Heading-Border-Shadow-1:#5f2d24;
  170. --Heading-Border-Shadow-2:#1d1d1d;
  171. --Heading-Border-Shadow-3:#563746;
  172.  
  173. --Heading-Background:#623437;
  174. --Heading-Font-Size:11px;
  175. --Heading-Text:#f6cfb0;
  176. --Heading-Text-Shadow:#000;
  177. --Heading-Width:269px; /* essentially the width of the right section */
  178. --Heading-Bottom-Gap:16px;
  179.  
  180. --Music-Controls-Size:16px;
  181. --Music-Controls:#623437;
  182. --Music-Controls-Shadow:#30ADC9;
  183. --Music-Controls-Text:#623437;
  184. --Music-Controls-Text-Shadow:#30ADC9;
  185. --Music-Controls-Text-Font-Size:17px;
  186. --Music-Controls-Spacing:24px;
  187. --Music-Controls-Bottom-Gap:20px;
  188.  
  189. --Song-Bullet-Icon-Size:18px;
  190. --Song-Bullet-Gap:12px;
  191. --Music-Name:#623437;
  192. --Music-Name-Font-Size:15px;
  193. --Music-Name-Text-Shadow:#30ADC9;
  194. --Music-Tracks-Spacing:14px;
  195. --Music-Name-When-Playing:#30adc9;
  196. --Music-Name-Text-Shadow-When-Playing:#a7ede6;
  197. --Scrollbar:#A7EDE6; /* if you want one. find 🌊🌊🌊 to adjust */
  198.  
  199. --Navlinks-Top-Margin:35px;
  200. --Navlinks-Font-Size:15px;
  201. --Navlinks:#623437;
  202. --Navlinks-Text-Shadow:#30ADC9;
  203. --Navlinks-Divider-Image-Width:22px;
  204. --Navlinks-Spacing:4px;
  205.  
  206. --Tooltips-BG:#30adc9;
  207. --Tooltips-Text:#fff;
  208. --BG-On-Highlight:#30adc9;
  209. --Text-On-Highlight:#fff;
  210.  
  211. --Corner-Text-Font-Size:15px;
  212. --Corner-Text:#fff;
  213. --Corner-Text-Link:#fff;
  214.  
  215. --Credit-Color:#30adc9;
  216. }
  217.  
  218. /*-----------------BASICS-----------------*/
  219. a {
  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. pre, code {
  227. white-space:pre-wrap;
  228. display:block;
  229. }
  230.  
  231. audio{display:none;}
  232. img {vertical-align:middle;}
  233. :after {display:flex;}
  234.  
  235. /*-----------------CLOUDS-----------------*/
  236. /* foreground cloud 1 */
  237. .cloud1 {
  238. position:absolute;
  239. top:0;margin-top:169px;
  240. -webkit-animation:foreground_clouds_1 var(--Foreground-Clouds-Speed) linear infinite;
  241. }
  242.  
  243. .cloud1 svg {
  244. width:var(--Foreground-Clouds-Size-1);
  245. }
  246.  
  247. @-webkit-keyframes foreground_clouds_1 {
  248. 0% {margin-left:calc(var(--Foreground-Clouds-Size-1) * -1);}
  249. 100% {margin-left:100vw;}
  250. }
  251.  
  252. /* foreground cloud 2 */
  253. .cloud2 {
  254. position:absolute;
  255. top:0;margin-top:310px;
  256. -webkit-animation:foreground_clouds_2 var(--Foreground-Clouds-Speed) linear infinite;
  257. }
  258.  
  259. .cloud2 svg {
  260. width:var(--Foreground-Clouds-Size-2);
  261. }
  262.  
  263. @-webkit-keyframes foreground_clouds_2 {
  264. 0% {margin-left:calc((var(--Foreground-Clouds-Size-2) * -1) - 300px);}
  265. 100% {margin-left:100vw;}
  266. }
  267.  
  268. /* foreground cloud 3 */
  269. .cloud3 {
  270. position:absolute;
  271. bottom:0;margin-bottom:100px;
  272. -webkit-animation:foreground_clouds_3 var(--Foreground-Clouds-Speed) linear infinite;
  273. }
  274.  
  275. .cloud3 svg {
  276. width:var(--Foreground-Clouds-Size-3);
  277. }
  278.  
  279. @-webkit-keyframes foreground_clouds_3 {
  280. 0% {margin-left:calc((var(--Foreground-Clouds-Size-3) * -1) - 69px);}
  281. 100% {margin-left:100vw;}
  282. }
  283.  
  284. /* background cloud 1 */
  285. .bgcloud1 {
  286. position:absolute;
  287. bottom:0;margin-bottom:100px;
  288. -webkit-animation:background_clouds_1 var(--Background-Clouds-Speed) linear infinite;
  289. z-index:-1;
  290. }
  291.  
  292. .bgcloud1 svg {
  293. width:var(--Background-Clouds-Size-1);
  294. }
  295.  
  296. @-webkit-keyframes background_clouds_1 {
  297. 0% {
  298. margin-left:240px;
  299. opacity:0;
  300. }
  301.  
  302. 1% {
  303. opacity:1;
  304. }
  305.  
  306. 99% {
  307. opacity:0;
  308. }
  309.  
  310. 100% {
  311. margin-left:calc(100vw - 240px);
  312. }
  313. }
  314.  
  315. /* background cloud 2 */
  316. .bgcloud2 {
  317. position:absolute;
  318. top:0;margin-top:260px;
  319. -webkit-animation:background_clouds_2 var(--Background-Clouds-Speed) linear infinite;
  320. z-index:-1;
  321. }
  322.  
  323. .bgcloud2 svg {
  324. width:var(--Background-Clouds-Size-2);
  325. }
  326.  
  327. @-webkit-keyframes background_clouds_2 {
  328. 0% {
  329. margin-left:420px;
  330. opacity:0;
  331. }
  332.  
  333. 1% {
  334. opacity:1;
  335. }
  336.  
  337. 99% {
  338. opacity:0;
  339. }
  340.  
  341. 100% {
  342. margin-left:calc(100vw - 240px);
  343. }
  344. }
  345.  
  346. /* background cloud 3 */
  347. .bgcloud3 {
  348. position:absolute;
  349. top:0;margin-top:360px;
  350. -webkit-animation:background_clouds_3 var(--Background-Clouds-Speed) linear infinite;
  351. z-index:-1;
  352. }
  353.  
  354. .bgcloud3 svg {
  355. width:var(--Background-Clouds-Size-3);
  356. }
  357.  
  358. @-webkit-keyframes background_clouds_3 {
  359. 0% {
  360. margin-left:600px;
  361. opacity:0;
  362. }
  363.  
  364. 1% {
  365. opacity:1;
  366. }
  367.  
  368. 99% {
  369. opacity:0;
  370. }
  371.  
  372. 100% {
  373. margin-left:calc(100vw - 300px);
  374. }
  375. }
  376.  
  377. /* background cloud 4 */
  378. .bgcloud4 {
  379. position:absolute;
  380. top:0;margin-top:160px;
  381. -webkit-animation:background_clouds_4 var(--Background-Clouds-Speed) linear infinite;
  382. z-index:-1;
  383. }
  384.  
  385. .bgcloud4 svg {
  386. width:var(--Background-Clouds-Size-4);
  387. }
  388.  
  389. @-webkit-keyframes background_clouds_4 {
  390. 0% {
  391. margin-left:-130px;
  392. opacity:0;
  393. }
  394.  
  395. 1% {
  396. opacity:1;
  397. }
  398.  
  399. 99% {
  400. opacity:0;
  401. }
  402.  
  403. 100% {
  404. margin-left:calc(100vw - 70px);
  405. }
  406. }
  407.  
  408. /*--------------------CONTAINER--------------------*/
  409. #horizontal-a {
  410. position:fixed;
  411. top:0;left:0;right:0;
  412. margin:0 auto;
  413. height:100vh;
  414. text-align:center;
  415. }
  416.  
  417. #horizontal-b {
  418. display:inline-block;
  419. }
  420.  
  421. #vertical-a {
  422. height:100vh;
  423. display:table;
  424. }
  425.  
  426. #vertical-b {
  427. display:table-cell;
  428. vertical-align:middle;
  429. }
  430.  
  431. .spreadcont {
  432. display:flex;
  433. align-items:center;
  434. }
  435.  
  436. /*-----------------LEFT SIDEBAR-----------------*/
  437. .potatoe {
  438. margin-right:var(--Container-Center-Gap);
  439. }
  440.  
  441. .album-image {
  442. margin-bottom:var(--Album-Image-Bottom-Gap);
  443. width:var(--Album-Image-Width);
  444. }
  445.  
  446. .sidebar-desc {
  447. margin:0 auto;
  448. width:var(--Sidebar-Desc-Width);
  449. font-family:"8bit madness";
  450. font-size:var(--Sidebar-Desc-Font-Size);
  451. color:var(--Sidebar-Desc-Text);
  452. text-shadow:1px 1.5px 0 var(--Sidebar-Desc-Text-Shadow);
  453. line-height:var(--Sidebar-Desc-Line-Height);
  454. }
  455.  
  456. .sidebar-desc a {
  457. color:var(--Sidebar-Desc-Links);
  458. background:var(--Sidebar-Desc-Links-Background);
  459. }
  460.  
  461.  
  462. /*--------------RIGHT SIDEBAR - MUSIC STUFF--------------*/
  463. .minfo {
  464. width:calc(var(--Heading-Width) + (var(--Heading-Border-Height) * 18));
  465. }
  466.  
  467. .praysouffle {
  468. margin-top:var(--Heading-Bottom-Gap);
  469. display:flex;
  470. align-items:center;
  471. justify-content:center;
  472. user-select:none;
  473. }
  474.  
  475. .tracknos, .tracknos span {
  476. display:flex;
  477. align-items:center;
  478. }
  479.  
  480. .tracknos li {
  481. list-style-type:none;
  482. margin-right:5px;
  483. }
  484.  
  485. .praysouffle .material-icons {
  486. font-size:var(--Music-Controls-Size);
  487. color:var(--Music-Controls);
  488. text-shadow:1px 1.5px 0 var(--Music-Controls-Shadow);
  489. }
  490.  
  491. .shufflebutton {
  492. display:flex;
  493. align-items:center;
  494. margin-left:var(--Music-Controls-Spacing);
  495. }
  496.  
  497. .praysouffle span {
  498. margin-left:6px;
  499. font-family:pixeloperator bold;
  500. font-size:var(--Music-Controls-Text-Font-Size);
  501. text-transform:uppercase;
  502. color:var(--Music-Controls-Text);
  503. text-shadow:1px 1.5px 0 var(--Music-Controls-Text-Shadow);
  504. }
  505.  
  506. .themusics {
  507. margin-top:var(--Music-Controls-Bottom-Gap);
  508.  
  509. /* if you don't want a scrollbar, delete/modify the following lines */
  510. /* 🌊🌊🌊🌊🌊🌊🌊 */
  511.  
  512. max-height:420px;
  513. overflow-y:auto;
  514. padding-right:10px;
  515. }
  516.  
  517. .themusics::-webkit-scrollbar {
  518. width:11px;
  519. height:11px;
  520. background-color:transparent url('//assets.tumblr.com/images/x.gif?v=1') repeat-y !important;
  521. }
  522.  
  523. .themusics::-webkit-scrollbar-thumb {
  524. background-clip:padding-box;
  525. background-color:var(--Scrollbar);
  526. border:4px solid transparent;
  527. }
  528.  
  529. .one-song-row:before {
  530. content:"";
  531. display:inline-block;
  532. margin-right:var(--Song-Bullet-Gap);
  533. height:var(--Song-Bullet-Icon-Size);
  534. width:var(--Song-Bullet-Icon-Size);
  535. background-image:url(//66.media.tumblr.com/39905cd3a8b5fd888703e96da5440f77/c6e52d2ccae4ec56-7c/s250x400/ce81e96a698b309c6b1ebed95c262fdc82ff7800.png);
  536. background-size:contain;
  537. background-repeat:no-repeat;
  538. }
  539.  
  540. .one-song-row {
  541. display:flex;
  542. align-items:center;
  543. margin-bottom:var(--Music-Tracks-Spacing);
  544. list-style:none;
  545. font-family:pixeloperator bold;
  546. font-size:var(--Music-Name-Font-Size);
  547. text-transform:uppercase;
  548. letter-spacing:.5px;
  549. color:var(--Music-Name);
  550. text-shadow:1px 1.5px 0 var(--Music-Name-Text-Shadow);
  551. user-select:none;
  552. }
  553.  
  554. .whenplaying {
  555. color:var(--Music-Name-When-Playing);
  556. text-shadow:1px 1.5px 0 var(--Music-Name-Text-Shadow-When-Playing);
  557. }
  558.  
  559. .ostie {
  560. display:flex;
  561. flex:1;
  562. justify-content:space-between;
  563. }
  564.  
  565. .dur {
  566. display:none;
  567. }
  568.  
  569. /*----------------HEADING/BANNER----------------*/
  570. .heading {
  571. position:relative;
  572. display:flex;
  573. align-items:center;
  574. margin-left:calc(var(--Heading-Border-Height) * 9);
  575. }
  576.  
  577. .tline-grad {
  578. position:absolute;
  579. width:var(--Heading-Width);
  580. height:calc(var(--Heading-Border-Height) * 2);
  581. background-image:linear-gradient(to right,transparent,var(--Heading-Border-Highlight-1),var(--Heading-Border-Highlight-2),transparent);
  582. }
  583.  
  584. .stuff-onleft {
  585. align-self:baseline;
  586. }
  587.  
  588. .stuff-onright {
  589. align-self:baseline;
  590. }
  591.  
  592. .textarea {
  593. display:flex;
  594. width:calc(100% - var(--Heading-Border-Height));
  595. min-height:calc(var(--Heading-Border-Height) * 9);
  596. background:var(--Heading-Background);
  597. text-align:left;
  598. }
  599.  
  600. .text-text {
  601. align-self:center;
  602. margin:var(--Heading-Border-Height) auto 0 auto;
  603. max-width:calc(var(--Heading-Width) - (var(--Heading-Border-Height) * 14));
  604. font-family:"press start 2p";
  605. font-size:var(--Heading-Font-Size);
  606. text-transform:uppercase;
  607. letter-spacing:1px;
  608. color:var(--Heading-Text);
  609. text-shadow:0 2px 0 var(--Heading-Text-Shadow);
  610. -webkit-text-stroke:0.3px var(--Heading-Text-Shadow);
  611. overflow:hidden;
  612. white-space:nowrap;
  613. }
  614.  
  615. /*-----------------NAVLINKS (BOTTOM)-----------------*/
  616. .navlinks {
  617. margin-top:var(--Navlinks-Top-Margin);
  618. margin-bottom:calc(var(--Navlinks-Spacing) * -1);
  619. display:flex;
  620. align-items:center;
  621. justify-content:center;
  622. font-family:"pixeloperator bold";
  623. font-size:var(--Navlinks-Font-Size);
  624. text-transform:uppercase;
  625. letter-spacing:.7px;
  626. }
  627.  
  628. .navlinks a {
  629. padding:var(--Navlinks-Spacing);
  630. color:var(--Navlinks);
  631. text-shadow:1px 1.5px 0 var(--Navlinks-Text-Shadow);
  632. }
  633.  
  634. .divider {
  635. padding:0px var(--Navlinks-Spacing);
  636. width:var(--Navlinks-Divider-Image-Width);
  637. height:auto;
  638. }
  639.  
  640. /*-----------------CORNER TEXT-----------------*/
  641. .corner-text {
  642. position:fixed;
  643. top:0;margin-top:30px;
  644. left:0;margin-left:30px;
  645. font-family:"8bit madness";
  646. font-size:var(--Corner-Text-Font-Size);
  647. color:var(--Corner-Text);
  648. line-height:1.2em;
  649. z-index:2;
  650. }
  651.  
  652. .corner-text a {color:var(--Corner-Text-Link);}
  653.  
  654. /*-----------------CREDIT-----------------*/
  655. .glencrd {
  656. display:block;
  657. position:fixed;
  658. bottom:0;margin-bottom:30px;
  659. right:0;margin-right:30px;
  660. z-index:99;
  661. }
  662.  
  663. .glen-svg svg {
  664. width:20px;
  665. height:auto;
  666. }
  667.  
  668. </style>
  669.  
  670. </head>
  671.  
  672. <body>
  673.  
  674. <a class="glencrd" href="//glenthemes.tumblr.com" title="coded by glenthemes">
  675. <div class="glen-svg"></div>
  676. </a>
  677.  
  678. <!------- TOP-LEFT CORNER TEXT ------->
  679. <!--☁️☁️☁️☁️☁️☁️☁️-->
  680. <div class="corner-text">
  681. some text in the corner,
  682. <br>
  683. if you wish
  684. </div><!--end cornertext-->
  685.  
  686. <!------- BACKGROUND CLOUDS ------->
  687. <!-- 🌟🌟🌟🌟🌟🌟🌟 -->
  688. <div class="cloud1"></div>
  689. <div class="cloud2"></div>
  690. <div class="cloud3"></div>
  691. <div class="bgcloud1"></div>
  692. <div class="bgcloud2"></div>
  693. <div class="bgcloud3"></div>
  694. <div class="bgcloud4"></div>
  695. <!-- 🛑🛑🛑🛑🛑🛑🛑-->
  696. <!---------------------->
  697.  
  698.  
  699. <!------- CONTAINER ------->
  700. <div id="horizontal-a">
  701. <div id="horizontal-b">
  702. <div id="vertical-a">
  703. <div id="vertical-b">
  704.  
  705. <div class="spreadcont">
  706.  
  707. <!------- LEFT SIDEBAR ------->
  708. <div class="potatoe">
  709.  
  710. <!---- SIDEBAR IMAGE ---->
  711. <!--☁️☁️☁️☁️☁️☁️☁️-->
  712. <!-- put image url between quote marks of src="" -->
  713. <img class="album-image" src="//66.media.tumblr.com/a6c6eb92bc63ba9bb9fa607bcd4a8483/865cd7c4889d766a-06/s1280x1920/87ed2be237f8ece84d0f186262402d56c70e5f43.png">
  714.  
  715. <!---- SIDEBAR DESCRIPTION ---->
  716. <!--☁️☁️☁️☁️☁️☁️☁️-->
  717. <div class="sidebar-desc">
  718.  
  719. some text here
  720.  
  721. </div><!--end desc-->
  722.  
  723. </div><!--end leftside-->
  724.  
  725.  
  726.  
  727. <!------- RIGHTSIDE ------->
  728. <div class="minfo">
  729.  
  730. <!-- heading made with css. long, boring stuff -->
  731. <!-- skip ahead until you see the next cloud emojis -->
  732. <div class="heading">
  733. <div class="stuff-onleft">
  734. <div class="celery">
  735. <div class="sss s1">
  736. <div class="stumpy"></div>
  737. <div class="stoo"></div>
  738. </div>
  739.  
  740. <div class="sss s2">
  741. <div class="stumpy"></div>
  742. <div class="stoo"></div>
  743. </div>
  744.  
  745. <div class="sss s3">
  746. <div class="stumpy"></div>
  747. <div class="stoo"></div>
  748. </div>
  749.  
  750. <div class="sss s4">
  751. <div class="stumpy"></div>
  752. </div>
  753.  
  754. <div class="sss s5">
  755. <div class="stumpy"></div>
  756. </div>
  757.  
  758. <div class="sss s6">
  759. <div class="stumpy"></div>
  760. </div>
  761.  
  762. <div class="sss s7">
  763. <div class="stumpy"></div>
  764. </div>
  765.  
  766. <div class="sidestub"></div>
  767.  
  768. <div class="sss s8">
  769. <div class="stumpy"></div>
  770. </div>
  771.  
  772. <div class="sss s9">
  773. <div class="stumpy"></div>
  774. </div>
  775.  
  776. <div class="sss s10">
  777. <div class="stumpy"></div>
  778. </div>
  779.  
  780. <div class="sss s11">
  781. <div class="stumpy"></div>
  782. </div>
  783.  
  784. <div class="sss s12">
  785. <div class="stumpy"></div>
  786. </div>
  787.  
  788. <div class="sss s13">
  789. <div class="stumpy"></div>
  790. </div>
  791.  
  792. <div class="sss s14">
  793. <div class="stumpy"></div>
  794. </div>
  795.  
  796. <div class="sss s15">
  797. <div class="stumpy"></div>
  798. </div>
  799.  
  800. <div class="sss s16">
  801. <div class="stumpy"></div>
  802. </div>
  803.  
  804. </div>
  805. </div><!--stuff-onleft-->
  806.  
  807. <div class="midsect">
  808. <div class="topline">
  809. <div class="tline-grad">
  810. </div><!--t-shad-->
  811. </div><!--topline-->
  812.  
  813. <div class="shad-a">
  814. <div class="sa-stub"></div>
  815. <div class="sa-long"></div>
  816. <div class="sa-stub"></div>
  817. </div>
  818.  
  819. <div class="shad-b">
  820. <div class="sb-stub"></div>
  821. <div class="sb-long"></div>
  822. <div class="sb-stub"></div>
  823. </div>
  824.  
  825. <div class="textarea">
  826. <div class="nutcase">
  827. <div class="n1"></div>
  828. <div class="n2"></div>
  829. <div class="n3"></div>
  830. <div class="n4 l"></div>
  831. <div class="n5"></div>
  832. <div class="n1"></div>
  833. </div>
  834.  
  835.  
  836.  
  837. <!------- MAIN TITLE (HEADING) ------->
  838. <!--☁️☁️☁️☁️☁️☁️☁️-->
  839. <!-- 1 line please -->
  840. <div class="text-text">Starchild</div>
  841.  
  842.  
  843.  
  844. <!-- again, boring stuff here, skip ahead -->
  845. <div class="nutcase">
  846. <div class="n1"></div>
  847. <div class="n2"></div>
  848. <div class="n3"></div>
  849. <div class="n4 r"></div>
  850. <div class="n5"></div>
  851. <div class="n1"></div>
  852. </div>
  853. </div>
  854.  
  855. <div class="botline">
  856. <div class="tline-grad">
  857. </div><!--t-shad-->
  858. </div><!--topline-->
  859.  
  860. <div class="bs-line-b"></div>
  861. <div class="bs-line-c"></div>
  862. </div><!--midsect-->
  863.  
  864. <div class="stuff-onright">
  865. <div class="celery">
  866. <div class="ccc c1">
  867. <div class="stumpy"></div>
  868. <div class="stoo"></div>
  869. </div>
  870.  
  871. <div class="ccc c2">
  872. <div class="stumpy"></div>
  873. <div class="stoo"></div>
  874. </div>
  875.  
  876. <div class="ccc c3">
  877. <div class="stumpy"></div>
  878. <div class="stoo"></div>
  879. </div>
  880.  
  881. <div class="ccc c4">
  882. <div class="stumpy"></div>
  883. </div>
  884.  
  885. <div class="ccc c5">
  886. <div class="stumpy"></div>
  887. </div>
  888.  
  889. <div class="ccc c6">
  890. <div class="stumpy"></div>
  891. </div>
  892.  
  893. <div class="ccc c7">
  894. <div class="stumpy"></div>
  895. </div>
  896.  
  897. <div class="ccc sidestub"></div>
  898.  
  899. <div class="ccc c8">
  900. <div class="stumpy"></div>
  901. </div>
  902.  
  903. <div class="ccc c9">
  904. <div class="stumpy"></div>
  905. </div>
  906.  
  907. <div class="ccc c10">
  908. <div class="stumpy"></div>
  909. </div>
  910.  
  911. <div class="ccc c11">
  912. <div class="stumpy"></div>
  913. </div>
  914.  
  915. <div class="ccc c12">
  916. <div class="stumpy"></div>
  917. </div>
  918.  
  919. <div class="ccc c13">
  920. <div class="stumpy"></div>
  921. </div>
  922.  
  923. <div class="ccc c14">
  924. <div class="stumpy"></div>
  925. </div>
  926.  
  927. <div class="ccc c15">
  928. <div class="stumpy"></div>
  929. </div>
  930.  
  931. <div class="ccc c16">
  932. <div class="stumpy"></div>
  933. </div>
  934. </div><!--celery-->
  935. </div><!--stuff-onright-->
  936. </div><!--end one heading-->
  937.  
  938.  
  939.  
  940. <div class="praysouffle">
  941.  
  942.  
  943. <div class="tracknos">
  944. <!---- TRACK NO.: ICON ---->
  945. <!--☁️☁️☁️☁️☁️☁️☁️-->
  946. <!-- if u want to change it, go to this website: -->
  947. <!-- //material.io/resources/icons/?style=baseline -->
  948. <!-- and replace the word ALBUM with it -->
  949. <i class="material-icons playy">album</i>
  950.  
  951.  
  952. <!---- TRACK NO.: TEXT ---->
  953. <!--☁️☁️☁️☁️☁️☁️☁️-->
  954. <!-- the number of tracks is automatically generated, -->
  955. <!-- but you can replace the word TRACKS if u wish -->
  956. <span>
  957. <li id="count"></li>
  958. <label>tracks</label>
  959. </span>
  960. </div><!--tracknos-->
  961.  
  962.  
  963.  
  964. <div class="shufflebutton">
  965.  
  966. <!---- SHUFFLE ICON ---->
  967. <!--☁️☁️☁️☁️☁️☁️☁️-->
  968. <!-- if u want to change it, go to this website: -->
  969. <!-- //material.io/resources/icons/?style=baseline -->
  970. <!-- and replace the word SHUFFLE with it -->
  971. <i class="material-icons souffle">shuffle</i>
  972.  
  973.  
  974. <!---- 'SHUFFLE' TEXT ---->
  975. <!--☁️☁️☁️☁️☁️☁️☁️-->
  976. <span>shuffle</span>
  977.  
  978. </div><!--shufflebutton--><!--do not delete this line-->
  979. </div><!--praysouffle--><!--do not delete this line-->
  980.  
  981.  
  982.  
  983.  
  984. <!------- MUSIC CONTAINER ------->
  985. <div class="themusics">
  986.  
  987. <!--☁️☁️☁️☁️☁️☁️☁️-->
  988. <!-- THINGS TO NOTE: -->
  989. <!-- song durations are automated. no need to manually type them -->
  990. <!-- to insert your own song, pick a tutorial: -->
  991. <!-- linktr.ee/direct_file_links -->
  992.  
  993. <!-- when you insert a new song, remember to: -->
  994. <!-- change all 1s to 2s -->
  995. <!-- use the second & third songs below as examples -->
  996.  
  997. <!---------------------->
  998. <!--🌟🌟🌟🌟🌟🌟🌟-->
  999. <!---- START ONE SONG ---->
  1000. <li class="one-song-row track1">
  1001. <div class="ostie">
  1002. <span>Gear Up for Adventure</span>
  1003. <span id="d1" class="dur"></span>
  1004. </div>
  1005.  
  1006. <audio id="track1" src="https://rhizo.gitlab.io/m/Gear_Up_for_Adventure.mp3" type="audio"></audio>
  1007. </li>
  1008. <!---- end one song ---->
  1009. <!--🛑🛑🛑🛑🛑🛑🛑-->
  1010. <!---------------------->
  1011.  
  1012.  
  1013.  
  1014. <!---------------------->
  1015. <!--🌟🌟🌟🌟🌟🌟🌟-->
  1016. <!---- START ONE SONG ---->
  1017. <li class="one-song-row track2">
  1018. <div class="ostie">
  1019. <span>Abandon Ship</span>
  1020. <span id="d2" class="dur"></span>
  1021. </div>
  1022.  
  1023. <audio id="track2" src="https://rhizo.gitlab.io/m/Abandon_Ship.mp3" type="audio"></audio>
  1024. </li>
  1025. <!---- end one song ---->
  1026. <!--🛑🛑🛑🛑🛑🛑🛑-->
  1027. <!---------------------->
  1028.  
  1029.  
  1030.  
  1031. <!---------------------->
  1032. <!--🌟🌟🌟🌟🌟🌟🌟-->
  1033. <!---- START ONE SONG ---->
  1034. <li class="one-song-row track3">
  1035. <div class="ostie">
  1036. <span>The Vinelands</span>
  1037. <span id="d3" class="dur"></span>
  1038. </div>
  1039.  
  1040. <audio id="track3" src="https://rhizo.gitlab.io/m/The_Vinelands.mp3" type="audio"></audio>
  1041. </li>
  1042. <!---- end one song ---->
  1043. <!--🛑🛑🛑🛑🛑🛑🛑-->
  1044. <!---------------------->
  1045.  
  1046. </div><!--themusics--><!--do not delete this line-->
  1047. </div><!--minfo--><!--do not delete this line-->
  1048. </div><!--spreadcont--><!--do not delete this line-->
  1049.  
  1050.  
  1051.  
  1052. <!---- NAVLINKS (BOTTOM) ---->
  1053. <!--☁️☁️☁️☁️☁️☁️☁️-->
  1054. <!-- to change divider image, put new image url between: -->
  1055. <!-- quote marks of src="" -->
  1056. <div class="navlinks">
  1057.  
  1058. <a href="/">home</a>
  1059.  
  1060. <img class="divider" src="//66.media.tumblr.com/33cdbc70744ef045145e3ff9b8705e31/b673b6835374224f-af/s75x75_c1/247c6567d07fcee336cff3c841675db3470fdf60.png">
  1061.  
  1062. <a href="/ask">message</a>
  1063.  
  1064. <img class="divider" src="//66.media.tumblr.com/33cdbc70744ef045145e3ff9b8705e31/b673b6835374224f-af/s75x75_c1/247c6567d07fcee336cff3c841675db3470fdf60.png">
  1065.  
  1066. <a href="/archive">archive</a>
  1067.  
  1068. </div><!--do not delete this line-->
  1069.  
  1070. </div><!--do not delete this line-->
  1071. </div><!--do not delete this line-->
  1072. </div><!--do not delete this line-->
  1073. </div><!--do not delete this line-->
  1074.  
  1075. </body>
  1076. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!