API tools faq
paste
clerihew

21. go down to kokomo music page

clerihew
Aug 9th, 2019
7,078
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.04 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--
  3. © Clerihew Themes 2019
  4.  
  5. Do not use without reading terms of use.
  6.  
  7. Contact me at clerihew.tumblr.com if you have problems with any
  8. un-heavily edited code or if you have questions on how to use this theme. -->
  9. <head>
  10.  
  11. <!-- put the title you want in the tab here -->
  12. <title>music !</title>
  13. <link rel="shortcut icon" href="{Favicon}">
  14. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  15. <link href="https://static.tumblr.com/wgijwsy/k1Hm9ei8b/normalize.css" rel="stylesheet" type="text/css" />
  16. <link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
  17. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  18.  
  19. <!-- colors used in this theme:
  20. <meta name="color:Background" content="#f6f6f6"/>
  21. <meta name="color:Text" content="#000"/>
  22. <meta name="color:Accent" content="#B49594">
  23. <meta name="color:Accent 2" content="#eed01e"/>
  24. <meta name="color:Accent 3" content="#008040"/> -->
  25.  
  26. <style>
  27.  
  28. /* TUMBLR CONTROLS */
  29.  
  30. iframe.tmblr-iframe {
  31. z-index:99999999999999!important;
  32. top:0!important;
  33. right:0!important;
  34. opacity:0.6;
  35. /* delete invert(1) from here */
  36. filter:invert(1) contrast(150%);
  37. -webkit-filter:invert(1) contrast(150%);
  38. -o-filter:invert(1) contrast(150%);
  39. -moz-filter:invert(1) contrast(150%);
  40. -ms-filter:invert(1) contrast(150%);
  41. /* to here if your blog has a dark background */
  42. transform:scale(0.65);
  43. transform-origin:100% 0;
  44. -webkit-transform:scale(0.65);
  45. -webkit-transform-origin:100% 0;
  46. -o-transform:scale(0.65);
  47. -o-transform-origin:100% 0;
  48. -moz-transform:scale(0.65);
  49. -moz-transform-origin:100% 0;
  50. -ms-transform:scale(0.65);
  51. -ms-transform-origin:100% 0;}
  52.  
  53. iframe.tmblr-iframe:hover {
  54. opacity:1!important;}
  55.  
  56. /* TOOLTIPS */
  57.  
  58. #s-m-t-tooltip{
  59. font-size:8px;
  60. color:#000;
  61. background-color:#fff;
  62. letter-spacing:2px;
  63. min-width:10px;
  64. max-width:200px;
  65. overflow:auto;
  66. text-transform:uppercase;
  67. font-style:italic;
  68. display: none;
  69. position: absolute;
  70. z-index: 999999999999;
  71. padding:5px;
  72. margin:30px 0 15px 10px;
  73. -webkit-transition: all 0.2s ease-in-out;
  74. -moz-transition: all 0.2s ease-in-out;
  75. transition: all 0.2s ease-in-out;}
  76.  
  77. /* SCROLLBAR */
  78.  
  79. /* thanks @shythemes */
  80. ::-webkit-scrollbar {
  81. width:17px;
  82. height:17px;
  83. }
  84.  
  85. ::-webkit-scrollbar {
  86. background-color: #f6f6f6; /* background color */
  87. }
  88.  
  89. ::-webkit-scrollbar-track {
  90. border:8px solid #f6f6f6; /* background color */
  91. background-color: #000; /* light border color */
  92. }
  93.  
  94. ::-webkit-scrollbar-thumb {
  95. border:8px solid #f6f6f6; /* background color */
  96. background-color: #eed01e; /* dark border color */
  97. min-height:24px;
  98. min-width:24px;
  99. }
  100.  
  101. /* MAIN */
  102.  
  103. /* main background color, font, font size */
  104. body {
  105. background-color: #f6f6f6;
  106. font-family: "Nunito", sans-serif;
  107. font-size: 12px
  108. }
  109.  
  110. /* in-text link color */
  111. a {
  112. color: #6cac9c;
  113. text-decoration: none;
  114. }
  115.  
  116. /* in-text link hover color */
  117. a:hover {
  118. color: #eed01e;
  119. }
  120.  
  121. /* NAV */
  122.  
  123. /* first stripe color */
  124. #block-1 {
  125. width: 10px;
  126. height: 100%;
  127. position: fixed;
  128. background-color: #eed01e;
  129. left: 0;
  130. top: 0;
  131. }
  132.  
  133. /* second stripe color */
  134. #block-2 {
  135. width: 10px;
  136. height: 100%;
  137. position: fixed;
  138. background-color: #008040;
  139. left: 20px;
  140. top: 0;
  141. }
  142.  
  143. /* nav background color */
  144. #nav {
  145. width: 50px;
  146. height: 100%;
  147. position: fixed;
  148. background-color: #6cac9c;
  149. left: 30px;
  150. top: 0;
  151. }
  152.  
  153. #nav .links {
  154. margin-top: 115px;
  155. }
  156.  
  157. /* nav link colors */
  158. #nav a {
  159. display: inline-block;
  160. font-size: 20px;
  161. margin-top: 40px;
  162. margin-left: 14px;
  163. text-decoration: none;
  164. }
  165.  
  166. #nav a:nth-child(odd) {
  167. color: #eed01e;
  168. }
  169.  
  170. #nav a:nth-child(even) {
  171. color: #008040;
  172. }
  173.  
  174. #nav a:hover {
  175. color: #f6f6f6;
  176. }
  177.  
  178. /* title color, font size */
  179. .bt h1 {
  180. margin-left: 150px;
  181. margin-top: 15px;
  182. margin-bottom: 0px;
  183. color: #eed01e;
  184. font-size: 40px
  185. }
  186.  
  187. /* description background color, font size */
  188. #info {
  189. min-width: 10px;
  190. max-width: 175px;
  191. margin-left: 150px;
  192. margin-top: 0px;
  193. padding: 1px 10px;
  194. background-color: #e5e5e5;
  195. border-radius: 10px;
  196. font-size: 12px;
  197. }
  198.  
  199. /* MUSIC */
  200.  
  201. /* nav links hover color */
  202. .nav a:hover {
  203. color: #bf0b0b;
  204. }
  205.  
  206. #bookshelf {
  207. margin-top: 30px;
  208. margin-left: 135px;
  209. }
  210.  
  211. #music {
  212. width: 300px;
  213. display: inline-block;
  214. vertical-align: top;
  215. margin-right: 70px;
  216. }
  217.  
  218. #music .album-art img {
  219. height: 300px;
  220. width: 300px;
  221. margin-left: 20px;
  222. margin-right: 20px;
  223. margin-bottom: 0;
  224. }
  225.  
  226. #music .album-info h5 {
  227. margin-left: 20px;
  228. margin-top: 3px;
  229. margin-bottom: 0;
  230. font-size: 15px;
  231. }
  232.  
  233. /* album title link color, underline */
  234. #music .album-info a {
  235. color: #6cac9c;
  236. text-decoration: none;
  237. -webkit-transition: color 0.5s;
  238. -moz-transition: color 0.5s;
  239. -o-transition: color 0.5s;
  240. transition: color 0.5s;
  241. }
  242.  
  243. /* album title link hover */
  244. #music .album-info a:hover {
  245. color: #008040;
  246. }
  247.  
  248. #music .album-info p {
  249. margin-top: 2px;
  250. font-size: 12px;
  251. margin-left: 20px;
  252. margin-bottom: 50px;
  253. }
  254.  
  255. /* DO NOT TOUCH THIS */
  256. .credit a {
  257. position: fixed;
  258. bottom: 15px;
  259. right: 5px;
  260. font-size: 8px;
  261. padding: 3px;
  262. text-decoration: none;
  263. color: black;
  264. -webkit-transition: color 1s;
  265. -moz-transition: color 1s;
  266. -o-transition: color 1s;
  267. transition: color 1s;
  268. }
  269.  
  270. .credit a:hover {
  271. color: #548773;
  272. }
  273.  
  274. </style>
  275.  
  276. </head>
  277. <body>
  278.  
  279. <div id="block-1"></div>
  280.  
  281. <div id="block-2"></div>
  282.  
  283. <!-- keep same as ones on main blog -->
  284. <div id="nav">
  285. <div class="links"></div>
  286. <a href="/" title="home"><span class="th th-apple"></span></a>
  287. <a href="/ask" title="ask"><span class="th th-cherry"></span></a>
  288. <a href="/submit" title="submit"><span class="th th-coconut"></span></a>
  289. <a href="/" title="one"><span class="th th-orange"></span></a>
  290. <a href="/" title="two"><span class="th th-strawberry"></span></a>
  291. <a href="/" title="three"><span class="th th-pineapple"></span></a>
  292. </div>
  293.  
  294. <!-- page title -->
  295. <div class="bt">
  296. <h1>music !</h1>
  297. </div>
  298.  
  299. <!-- ur description -->
  300. <div id="info">
  301. <p>a place for some cool tunes by cool people</p>
  302. </div>
  303.  
  304. <div id="bookshelf">
  305.  
  306. <!-- to add more albums, copy everying from id="music" to the last </div>. then, replace the info with your own. class="album-art" is the image you need to upload from imgur. use the direct link. class="album-info" is the info below each image. replace the link with a link to the spotify/apple/amazon page. then, fill out a sentence or two of description. try to keep it short. -->
  307. <div id="music">
  308. <div class="album-art">
  309. <img src="https://i.imgur.com/gZd5u1V.png"/>
  310. </div>
  311.  
  312. <div class="album-info">
  313. <h5><a href="https://open.spotify.com/album/4Ssy3iVHJxPrCu36QmQFUi?si=ZjThq6MDTE2f5keNbdVylg">hoodratscumbags</a></h5>
  314. <p>a blend of punk, rock, and surf rock, beach goons triumph on this album. full of songs you can vibe with, it makes for a very awesome listen.</p>
  315. </div>
  316. </div>
  317.  
  318. <div id="music">
  319. <div class="album-art">
  320. <img src="https://i.imgur.com/VLVcdcb.jpg"/>
  321. </div>
  322.  
  323. <div class="album-info">
  324. <h5><a href="https://open.spotify.com/album/0b7iiX6rAdsggW5ERuLWB7?si=Tp1Gl4j6TOqWAOg6KHA8fQ">Chinese Fountain</a></h5>
  325. <p>the growlers have a certain type of sound, and by god, it is amazing! surf rock has certainly made it a long way from where it started. </p>
  326. </div>
  327. </div>
  328.  
  329. <div id="music">
  330. <div class="album-art">
  331. <img src="https://i.imgur.com/Ddti9lL.jpg"/>
  332. </div>
  333.  
  334. <div class="album-info">
  335. <h5><a href="https://open.spotify.com/album/4UPR0hxNYmDNkf151KZBJD?si=TreMJI3JQBqNbyOvEiuqCA">Yes, Yes. Yes. Yes. Yes.</a></h5>
  336. <p>hunny has songs that are perfect for repeat listens. their unique sound and awesome lyrics combine for a sick alternative album.</p>
  337. </div>
  338. </div>
  339.  
  340. <div id="music">
  341. <div class="album-art">
  342. <img src="https://i.imgur.com/C2tpQ2m.jpg"/>
  343. </div>
  344.  
  345. <div class="album-info">
  346. <h5><a href="https://open.spotify.com/album/1lESM5Y1VAvrCLEgLmyfOw?si=-Xa9BTpQSzKDtVb2iS8gTg">soy pablo</a></h5>
  347. <p>relatable lyrics? check. sad stuff? check. rad tunes? check. boy pablo has got it all (except his girl).</p>
  348. </div>
  349. </div>
  350.  
  351. <div id="music">
  352. <div class="album-art">
  353. <img src="https://i.imgur.com/HZkgPew.png"/>
  354. </div>
  355.  
  356. <div class="album-info">
  357. <h5><a href="https://open.spotify.com/album/6PWXKiakqhI17mTYM4y6oY?si=VXDPIWPnSROoOSRIBGQTxQ">a brief inquiry into online relationships</a></h5>
  358. <p>the 1975 are a powerhouse. their third album carves out a space for every emotion and has a song to fit every mood.</p>
  359. </div>
  360. </div>
  361.  
  362. <div id="music">
  363. <div class="album-art">
  364. <img src="https://i.imgur.com/kI5l8Uk.jpg"/>
  365. </div>
  366.  
  367. <div class="album-info">
  368. <h5><a href="https://open.spotify.com/album/5GgsYoD0QMQyCaJ1MhEtPz?si=_WEu4VbWTPuroDvLJLQhzg">badillac</a></h5>
  369. <p>prepare to rock the hell out on this album. together pangea has a distinct sounds that begs you to come back for more.</p>
  370. </div>
  371. </div>
  372.  
  373. <div id="music">
  374. <div class="album-art">
  375. <img src="https://i.imgur.com/xfWXorX.png"/>
  376. </div>
  377.  
  378. <div class="album-info">
  379. <h5><a href="https://open.spotify.com/album/6SWmGozzQDUaczHXMuE8Za?si=N7VKZJ9bSjCrjcN7NWoo-w">malibu nights</a></h5>
  380. <p>lany has made an album that covers you in a warm blanket and whispers "it's gonna be okay". also it's fucking sick. also pjk is really hot.</p>
  381. </div>
  382. </div>
  383.  
  384.  
  385.  
  386.  
  387.  
  388.  
  389.  
  390.  
  391.  
  392. </div> <!-- bookshelf -->
  393.  
  394.  
  395. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  396. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  397. <script src="https://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  398.  
  399. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  400. <script>
  401. (function($){
  402. $(document).ready(function(){
  403. $("[title]").style_my_tooltips({
  404. tip_follows_cursor:true,
  405. tip_delay_time:0,
  406. tip_fade_speed:0
  407. }
  408. );
  409. });
  410. })(jQuery);
  411. </script>
  412.  
  413.  
  414. <!-- DO NOT TOUCH THIS -->
  415. <div class="credit">
  416. <a href="https://clerihew.tumblr.com/" title="theme by clerihew"><span class="th th-aloe-vera"></span></a>
  417. </div>
  418.  
  419.  
  420.  
  421. </body>
  422. </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!