API tools faq
paste
Advertisement
tricksterkid

tumblr page / melodies

tricksterkid
Oct 17th, 2020 (edited)
1,437
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <!-- @NUCLEARTHEMES ON TUMBLR || PLEASE DON'T DELETE CREDIT -->
  4.  
  5. <!--
  6. || CREDITS ||
  7.  
  8. Custom tooltips by Atomiks >> https://atomiks.github.io/tippyjs/
  9.  
  10. Fonts from Google >> https://fonts.google.com/
  11.  
  12. Placeholders from Unsplash >> https://unsplash.com/
  13.  
  14. -->
  15.  
  16. <html>
  17.  
  18. <head>
  19.  
  20. <title>{Name} / title</title> <!-- page title -->
  21.  
  22. <link rel="shortcut icon" href="{Favicon}">
  23.  
  24. <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:400,400i,700,700i|Quicksand:400,400i,700,700i" rel="stylesheet">
  25.  
  26. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  27.  
  28. <style type="text/css">
  29.  
  30. /* ----------------------------------------------------------------------- */
  31. /* --------------------------- custom tooltips --------------------------- */
  32.  
  33. .tippy-tooltip.custom-theme {
  34. background-color: #5c616d;
  35. color: #77f5ab;
  36. font-family: inherit;
  37. margin-bottom: 10px;
  38. text-align: center;
  39. }
  40.  
  41. /* ----------------------------------------------------------------------- */
  42. /* -------------------- custom selection & scrollbar --------------------- */
  43.  
  44. ::-moz-selection {background: #f4f8ff; color: #2f3136;}
  45. ::selection {background: #f4f8ff; color: #2f3136;}
  46.  
  47. ::-webkit-scrollbar-thumb {background: #f4f8ff;}
  48. ::-webkit-scrollbar {background: #2f3136; width: 5px;}
  49.  
  50. * {margin:0; padding:0;}
  51.  
  52. /* ----------------------------------------------------------------------- */
  53. /* ---------------------------- large blocks ----------------------------- */
  54.  
  55. body {
  56. background: #2f3136; /* background color */
  57. color: #f4f8ff; /* text color */
  58. font-family: Quicksand; /* font */
  59. font-size: 13px; /* font size */
  60. text-align: justify; /* text align */
  61. }
  62.  
  63. #container {
  64. background: #36393f; /* container background color */
  65. border-radius: 20px;
  66. height: 550px;
  67. left: 50%;
  68. margin-bottom: 40px;
  69. overflow: auto;
  70. padding: 20px;
  71. position: absolute;
  72. top: 50%;
  73. transform: translate(-50%,-50%);
  74. width: 400px;
  75. -ms-overflow-style: none;
  76. }
  77.  
  78. #container::-webkit-scrollbar {
  79. display: none;
  80. }
  81.  
  82. /* ----------------------------------------------------------------------- */
  83. /* -------------------------------- text --------------------------------- */
  84.  
  85. h1 { /* main title */
  86. float: left;
  87. font-family: Open Sans Condensed;
  88. font-size: 2em;
  89. font-weight: normal;
  90. margin-left: 10px;
  91. text-transform: uppercase;
  92. }
  93.  
  94. a {
  95. color: #9e76f5; /* link color */
  96. text-decoration: none;
  97. }
  98.  
  99. a:hover {
  100. color: #77f5ab; /* link hover color */
  101. transition: 0.4s;
  102. }
  103.  
  104. /* ----------------------------------------------------------------------- */
  105. /* ---------------------------- top content ------------------------------ */
  106.  
  107. #cover { /* 150x150 */
  108. border-radius: 20px;
  109. float: left;
  110. width: 150px;
  111. }
  112.  
  113. #description { /* top description */
  114. float: left;
  115. margin: 10px 0px 15px 10px;
  116. font-style: italic;
  117. width: 240px;
  118. }
  119.  
  120. #links { /* button container */
  121. float: left;
  122. margin-left: 10px;
  123. width: 240px;
  124. }
  125.  
  126. .button { /* link buttons */
  127. background-color: #5c616d;
  128. border-radius: 10px;
  129. color: #dee1e9;
  130. display: inline-block;
  131. margin: 0px 3px;
  132. font-size: 20px;
  133. padding: 10px;
  134. }
  135.  
  136. .button:hover {
  137. background-color: #9e76f5;
  138. color: #f4f8ff;
  139. transition: 0.4s;
  140. }
  141.  
  142. /* ----------------------------------------------------------------------- */
  143. /* ------------------------------ songlist ------------------------------- */
  144.  
  145. #songlist { /* song container */
  146. float: left;
  147. height: 375px;
  148. margin-top: 20px;
  149. overflow: auto;
  150. width: 100%;
  151. -ms-overflow-style: none;
  152. }
  153.  
  154. #songlist::-webkit-scrollbar {
  155. display: none;
  156. }
  157.  
  158. .song { /* song */
  159. background-color: #2f3136;
  160. border-radius: 15px;
  161. margin-bottom: 15px;
  162. padding: 15px;
  163. width: calc(100%-30px);
  164. }
  165.  
  166. .icon { /* song play icon */
  167. background-color: #36393f;
  168. border-radius: 100%;
  169. color: #77f5ab;
  170. display: inline;
  171. font-size: 15px;
  172. margin-left: -10px;
  173. padding: 10px 6px 10px 13px;
  174. }
  175.  
  176. .icon:hover {
  177. background-color: #77f5ab;
  178. color: #36393f;
  179. transition: 0.4s;
  180. }
  181.  
  182. .title { /* song title */
  183. display: inline;
  184. font-weight: bold;
  185. margin-left: 10px;
  186. text-transform: uppercase;
  187. }
  188.  
  189. .artist { /* song artist */
  190. display: inline;
  191. font-style: italic;
  192. }
  193.  
  194. /* ----------------------------------------------------------------------- */
  195. /* ------------------------------- credits ------------------------------- */
  196.  
  197. #credit {
  198. color: #5c616d;
  199. border-radius: 5px;
  200. bottom: 0;
  201. display: inline;
  202. font-style: italic;
  203. padding: 10px;
  204. position: fixed;
  205. right: 0;
  206. }
  207.  
  208. #credit:hover {
  209. color: #dee1e9;
  210. transition: 0.4s;
  211. }
  212.  
  213. /* ----------------------------------------------------------------------- */
  214.  
  215. </style>
  216.  
  217. </head>
  218.  
  219. <body>
  220.  
  221. <!--------------------------- START MAIN CONTENT---------------------------->
  222.  
  223. <div id="container">
  224.  
  225. <!-- START IMAGE -->
  226.  
  227. <img id="cover" src="https://i.imgur.com/Hgy8zey.jpg">
  228.  
  229. <!-- END IMAGE -->
  230.  
  231. <h1>melodies</h1> <!-- main title -->
  232.  
  233. <!-- START DESCRIPTION -->
  234.  
  235. <div id="description">
  236.  
  237. Here you can put a small description. You can also put <a href="">a link</a> here if you'd like, or some <b>bold text</b>.
  238.  
  239. </div>
  240.  
  241. <!-- END DESCRIPTION -->
  242.  
  243. <!-- START LINKS -->
  244.  
  245. <div id="links">
  246.  
  247. <a href="/" title="home">
  248. <div class="button">
  249. <i class="fa fa-home"></i>
  250. </div>
  251. </a>
  252.  
  253. <a href="/" title="instagram">
  254. <div class="button">
  255. <i class="fa fa-instagram"></i>
  256. </div>
  257. </a>
  258.  
  259. <a href="/" title="spotify">
  260. <div class="button">
  261. <i class="fa fa-spotify"></i>
  262. </div>
  263. </a>
  264.  
  265. <a href="/" title="twitter">
  266. <div class="button">
  267. <i class="fa fa-twitter"></i>
  268. </div>
  269. </a>
  270.  
  271. <a href="/" title="pinterest">
  272. <div class="button">
  273. <i class="fa fa-pinterest"></i>
  274. </div>
  275. </a>
  276.  
  277. </div>
  278.  
  279. <!-- END LINKS -->
  280.  
  281. <!-- START SONGS -->
  282.  
  283. <div id="songlist">
  284.  
  285. <!-- START SONG 1 -->
  286.  
  287. <div class="song">
  288.  
  289. <a href="">
  290. <div class="icon">
  291. <i class="fa fa-play"></i>
  292. </div>
  293. </a>
  294.  
  295. <div class="title">song title</div>
  296.  
  297. <div class="artist">- artist name</div>
  298.  
  299. </div>
  300.  
  301. <!-- END SONG 1 -->
  302.  
  303. <!-- START SONG 2 -->
  304.  
  305. <div class="song">
  306.  
  307. <a href="">
  308. <div class="icon">
  309. <i class="fa fa-play"></i>
  310. </div>
  311. </a>
  312.  
  313. <div class="title">song title</div>
  314.  
  315. <div class="artist">- artist name</div>
  316.  
  317. </div>
  318.  
  319. <!-- END SONG 2 -->
  320.  
  321. <!-- START SONG 3 -->
  322.  
  323. <div class="song">
  324.  
  325. <a href="">
  326. <div class="icon">
  327. <i class="fa fa-play"></i>
  328. </div>
  329. </a>
  330.  
  331. <div class="title">song title</div>
  332.  
  333. <div class="artist">- artist name</div>
  334.  
  335. </div>
  336.  
  337. <!-- END SONG 3 -->
  338.  
  339. <!-- START SONG 4 -->
  340.  
  341. <div class="song">
  342.  
  343. <a href="">
  344. <div class="icon">
  345. <i class="fa fa-play"></i>
  346. </div>
  347. </a>
  348.  
  349. <div class="title">song title</div>
  350.  
  351. <div class="artist">- artist name</div>
  352.  
  353. </div>
  354.  
  355. <!-- END SONG 4 -->
  356.  
  357. <!-- START SONG 5 -->
  358.  
  359. <div class="song">
  360.  
  361. <a href="">
  362. <div class="icon">
  363. <i class="fa fa-play"></i>
  364. </div>
  365. </a>
  366.  
  367. <div class="title">song title</div>
  368.  
  369. <div class="artist">- artist name</div>
  370.  
  371. </div>
  372.  
  373. <!-- END SONG 5 -->
  374.  
  375. <!-- START SONG 6 -->
  376.  
  377. <div class="song">
  378.  
  379. <a href="">
  380. <div class="icon">
  381. <i class="fa fa-play"></i>
  382. </div>
  383. </a>
  384.  
  385. <div class="title">song title</div>
  386.  
  387. <div class="artist">- artist name</div>
  388.  
  389. </div>
  390.  
  391. <!-- END SONG 6 -->
  392.  
  393. <!-- START SONG 7 -->
  394.  
  395. <div class="song">
  396.  
  397. <a href="">
  398. <div class="icon">
  399. <i class="fa fa-play"></i>
  400. </div>
  401. </a>
  402.  
  403. <div class="title">song title</div>
  404.  
  405. <div class="artist">- artist name</div>
  406.  
  407. </div>
  408.  
  409. <!-- END SONG 7 -->
  410.  
  411. <!-- START SONG 8 -->
  412.  
  413. <div class="song">
  414.  
  415. <a href="">
  416. <div class="icon">
  417. <i class="fa fa-play"></i>
  418. </div>
  419. </a>
  420.  
  421. <div class="title">song title</div>
  422.  
  423. <div class="artist">- artist name</div>
  424.  
  425. </div>
  426.  
  427. <!-- END SONG 8 -->
  428.  
  429. <!-- START SONG 9 -->
  430.  
  431. <div class="song">
  432.  
  433. <a href="">
  434. <div class="icon">
  435. <i class="fa fa-play"></i>
  436. </div>
  437. </a>
  438.  
  439. <div class="title">song title</div>
  440.  
  441. <div class="artist">- artist name</div>
  442.  
  443. </div>
  444.  
  445. <!-- END SONG 9 -->
  446.  
  447. <!-- START SONG 10 -->
  448.  
  449. <div class="song">
  450.  
  451. <a href="">
  452. <div class="icon">
  453. <i class="fa fa-play"></i>
  454. </div>
  455. </a>
  456.  
  457. <div class="title">song title</div>
  458.  
  459. <div class="artist">- artist name</div>
  460.  
  461. </div>
  462.  
  463. <!-- END SONG 10 -->
  464.  
  465. <!-- START SONG 11 -->
  466.  
  467. <div class="song">
  468.  
  469. <a href="">
  470. <div class="icon">
  471. <i class="fa fa-play"></i>
  472. </div>
  473. </a>
  474.  
  475. <div class="title">song title</div>
  476.  
  477. <div class="artist">- artist name</div>
  478.  
  479. </div>
  480.  
  481. <!-- END SONG 11 -->
  482.  
  483. <!-- START SONG 12 -->
  484.  
  485. <!-- IMPORTANT!
  486. in this final song, i've added some styling to the div itself; this is to make sure there's no white space underneath the final song. if you want to add or remove songs, make sure the final song has this styling in it!
  487. -->
  488.  
  489. <div class="song" style="margin-bottom:0px">
  490.  
  491. <a href="">
  492. <div class="icon">
  493. <i class="fa fa-play"></i>
  494. </div>
  495. </a>
  496.  
  497. <div class="title">song title</div>
  498.  
  499. <div class="artist">- artist name</div>
  500.  
  501. </div>
  502.  
  503. <!-- END SONG 12 -->
  504.  
  505. </div>
  506.  
  507. <!-- END SONGS -->
  508.  
  509. </div>
  510.  
  511. <!---------------------------- END MAIN CONTENT----------------------------->
  512.  
  513. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  514.  
  515. <a id="credit" target="blank" href="https://nuclearthemes.tumblr.com/">
  516. page theme by bones.
  517. </a>
  518.  
  519. <script src="https://unpkg.com/popper.js@1"></script>
  520. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  521. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  522.  
  523. <script>
  524. tippy('[title]', {
  525. theme: 'custom',
  526. arrow: false,
  527. delay: [200, 0],
  528. zIndex: 9999999999,
  529. maxWidth: 300,
  530.  
  531. content(reference) {
  532. const title = reference.getAttribute('title');
  533. reference.removeAttribute('title');
  534. return title;
  535. },
  536. });
  537. </script>
  538.  
  539. </body>
  540.  
  541. </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!