API tools faq
paste
Advertisement
sculptorgalaxy

amp up! tumblr theme

sculptorgalaxy
Jan 22nd, 2024
389
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.10 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <head>
  3. <!-- AMP UP! theme by faust cyberpalace
  4. it will look a little wonky in the preview this is normal
  5. i think i was gonna do a lot more of on-hover animations but i got satisfied with just the avatar. lol. Anyways theme name refers to like. guitar amps lol i love the distortion that comes from them. my luv letter to loud music...in any case enjoyyyy
  6. -->
  7.  
  8. <!-- Images -->
  9. <meta name="image:favicon" content="">
  10. <meta name="image:background" content="">
  11. <meta name="image:avatar" content="">
  12. <meta name="image:floatie" content="">
  13. <meta name="image:custom cursor" content="">
  14.  
  15. <!-- Text -->
  16. <meta name="text:text size" content="20">
  17. <meta name="text:border size" content="2">
  18. <meta name="text:floatie size" content="150">
  19. <meta name="text:title" content="lalalalaaa">
  20. <meta name="text:music track" content="Artist ★ Song">
  21. <meta name="text:URL to music" content="">
  22. <meta name="text:link one" content="home">
  23. <meta name="text:link two" content="ask">
  24. <meta name="text:link three" content="submit">
  25. <meta name="text:link four" content="archive">
  26. <meta name="text:link five" content="more?">
  27. <meta name="text:link one url" content="/">
  28. <meta name="text:link two url" content="/ask">
  29. <meta name="text:link three url" content="/submit">
  30. <meta name="text:link four url" content="/archive">
  31. <meta name="text:link five url" content="https://crouton.net">
  32. <meta name="text:round corners by" content="30">
  33. <meta name="text:post corners" content="10">
  34. <meta name="text:marquee background RGB" content="255,255,255">
  35. <meta name="text:marquee text" content="HAPPY WORLD FOR EVARR">
  36.  
  37. <!-- Select -->
  38. <meta name="select:border style" content="solid"/>
  39. <meta name="select:border style" content="double"/>
  40. <meta name="select:border style" content="groove"/>
  41. <meta name="select:border style" content="ridge"/>
  42. <meta name="select:border style" content="inset"/>
  43. <meta name="select:border style" content="outset"/>
  44. <meta name="select:border style" content="dashed"/>
  45. <meta name="select:border style" content="dotted"/>
  46.  
  47. <!-- Colors -->
  48. <meta name="color:background color" content="">
  49. <meta name="color:content color" content="">
  50. <meta name="color:border color" content="">
  51. <meta name="color:text color" content="">
  52. <meta name="color:link color" content="">
  53. <meta name="color:link hover color" content="">
  54. <meta name="color:text selection color" content="">
  55. <meta name="color:text selection bg color" content="">
  56. <meta name="color:glow" content="">
  57.  
  58. <!-- Options -->
  59. <meta name="if:custom cursor" content="">
  60. <meta name="if:full background" content="">
  61. <meta name="if:content glows" content="">
  62. <meta name="if:links glow" content="">
  63. <meta name="if:music player" content="">
  64. <meta name="if:avatar shape 1" content="">
  65. <meta name="if:avatar shape 2" content="">
  66. <meta name="if:avatar shape 3" content="">
  67. <meta name="if:avatar shape 4" content="">
  68.  
  69. <meta name="select:font" content="Arial">
  70. <meta name="select:font" content="Tepeno Sans">
  71. <meta name="select:font" content="MS Gothic">
  72. <meta name="select:font" content="Black Wolf">
  73. <meta name="select:font" content="VCRosdNEUE">
  74. <meta name="select:font" content="Suboleya">
  75. <meta name="select:font" content="Jet Set">
  76. <meta name="select:font" content="Short Stack">
  77.  
  78. <meta name="select:title font" content="Arial">
  79. <meta name="select:title font" content="Tepeno Sans">
  80. <meta name="select:title font" content="MS Gothic">
  81. <meta name="select:title font" content="Black Wolf">
  82. <meta name="select:title font" content="VCRosdNEUE">
  83. <meta name="select:title font" content="Suboleya">
  84. <meta name="select:title font" content="Jet Set">
  85. <meta name="select:title font" content="Short Stack">
  86.  
  87. <!-- Misc -->
  88. <title>{Title}</title>
  89. <link rel="shortcut icon" href="{image:favicon}">
  90. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  91. <link rel="stylesheet" href="https://static.tumblr.com/qxrkgx6/RWPmgn2qa/normalize.min.css">
  92. <link href="https://fonts.cdnfonts.com/css/tepeno-sans" rel="stylesheet">
  93. <link href="https://fonts.cdnfonts.com/css/jet-set" rel="stylesheet">
  94. <link href="https://fonts.cdnfonts.com/css/black-wolf" rel="stylesheet">
  95. <link href="https://fonts.cdnfonts.com/css/vcrosdneue" rel="stylesheet">
  96. <link href="https://fonts.cdnfonts.com/css/suboleya" rel="stylesheet">
  97. <link href="https://fonts.cdnfonts.com/css/short-stack" rel="stylesheet">
  98. <script src="https://kit.fontawesome.com/9d40a42a52.js" crossorigin="anonymous"></script>
  99. <link rel="stylesheet" href="https://unpkg.com/@icon/dripicons/dripicons.css">
  100. {block:Description}
  101. <meta name="description" content="{MetaDescription}" />
  102. {/block:Description}
  103. <style type="text/css">
  104.  
  105. /* Text, Background, Links */
  106. body{
  107. background-color:white;
  108. background-image:Url('{image:background}');
  109. background-attachment:fixed;
  110. {block:iffullbackground}
  111. background-size: cover;
  112. {/block:iffullbackground}
  113. color:{color:text color};
  114. {block:ifcustomcursor};
  115. cursor:url("{image:custom cursor}"), default;
  116. {/block:ifcustomcursor};
  117. font-size:{text:text size}px;
  118. font-family:{select:font};
  119. word-wrap:break-word;}
  120. a{
  121. color:{color:link color};
  122. text-decoration:none;
  123. {block:iflinksglow}
  124. text-shadow:0 0 5px;
  125. {/block:iflinksglow}
  126. }
  127. a:hover{
  128. cursor:help;
  129. color:{color:link hover color};
  130. text-decoration:none;
  131. font-weight: bold;
  132. }
  133. blockquote{
  134. margin:0 0 10px 10px;
  135. padding:0 0 0 10px;
  136. border-left:solid 1px #000;}
  137. ::selection{
  138. color:{color:text selection color};
  139. background:{color:text selection bg color};}
  140.  
  141. /* Sidebar, Posts */
  142. #content{
  143. width:500px;
  144. margin-left:200px;
  145. }
  146. .post, .naviga{
  147. width:475px;
  148. margin:0 0 25px 0;
  149. overflow:hidden;
  150. padding:10px;
  151. {block:ifcontentglows}
  152. box-shadow:0 0 20px {color:glow};
  153. {/block:ifcontentglows}
  154. background-color:{color:content color};
  155. border:{text:border size}px {select:border style} {color:border color};
  156. border-radius:{text:post corners}px;
  157. }
  158. #sidebar{
  159. width:220px;
  160. height:220px;
  161. background-color:{color:content color};
  162. border:{text:border size}px {select:border style} {color:border color};
  163. border-radius:{text:round corners by}px;
  164. {block:ifcontentglows}
  165. box-shadow:0 0 20px {color:glow};
  166. {/block:ifcontentglows}
  167. position:fixed;
  168. padding:15px;
  169. margin-left:-165px;
  170. overflow:hidden;
  171. }
  172. #sidebar:hover{
  173. transform: rotate(-8deg) translateX(-10px);
  174. }
  175. #linksbox{
  176. width:150px;
  177. background-color:{color:content color};
  178. height:100%;
  179. position:fixed;
  180. {block:ifcontentglows}
  181. box-shadow:0 0 20px {color:glow};
  182. {/block:ifcontentglows}
  183. top:285px;
  184. margin-left:-115px;
  185. }
  186. #mark{
  187. width:200px;
  188. height:100%;
  189. top:0;
  190. background: rgb({text:marquee background RGB},0.7);
  191. position:fixed;
  192. left:25px;
  193. }
  194. #wrapper{
  195. width:600px;
  196. margin:50px auto;}
  197.  
  198. /* Content */
  199. .title{
  200. font-weight:bold;
  201. font-size:35px;
  202. margin:0 0 10px 0;}
  203. .footer{
  204. padding: 5px;}
  205. .naviga{
  206. text-align:center;}
  207. .post img{
  208. max-width:100%;}
  209. .sidebar img{
  210. max-width:100%;
  211. {block:ifavatarshape1}
  212. border-radius:{text:round corners by}px;
  213. {/block:ifavatarshape1}
  214. {block:ifavatarshape2}
  215. border-radius:100px 0px;
  216. {/block:ifavatarshape2}
  217. {block:ifavatarshape3}
  218. border-radius:100px 70px 200px 30px;
  219. {/block:ifavatarshape3}
  220. {block:ifavatarshape4}
  221. border-radius:5px;
  222. {/block:ifavatarshape4}
  223. }
  224. .question{
  225. margin-left:10px;
  226. width:93%;
  227. padding:7px;
  228. text-align:right;
  229. border:{text:border size}px {select:border style} {color:border color};
  230. border-radius:{text:post corners}px;
  231. }
  232. #titley{
  233. transform: rotate(-8deg);
  234. position:fixed;
  235. top:15px;
  236. margin-left:244px;
  237. font-size:36px;
  238. font-family:{select:title font};
  239. }
  240.  
  241. /* Audio */
  242. #audioplayer{
  243. width:30px;
  244. height:25px;
  245. overflow:hidden;
  246. position:absolute;
  247. margin-top:40px;
  248. margin-bottom:40px;
  249. margin-left:35px;
  250. border-radius: 40px;
  251. opacity: 0.7;}
  252. .trackstuff{
  253. overflow:auto;
  254. margin-left:110px;
  255. margin-top:-75px;
  256. margin-bottom:50px;
  257. display:block;}
  258. .playbutton{
  259. margin-bottom:30px;
  260. margin-top:-60px;
  261. margin-left:35px;
  262. z-index:9;
  263. width:33px;
  264. height:30px;
  265. overflow:hidden;}
  266.  
  267. /* Misc */
  268. #c{
  269. font-size:25px;
  270. position:fixed;
  271. left:5px;
  272. bottom:3px;}
  273. #plz{
  274. position:fixed;
  275. bottom:0px;
  276. right:15px;}
  277. video{
  278. max-width: 100%;
  279. height: auto;}
  280. #music {
  281. align-items: center;
  282. position: fixed;
  283. right:25px;
  284. top:100px;
  285. display: flex;
  286. box-sizing: border-box;
  287. width: 300px;
  288. padding: 5px;
  289. {block:ifcontentglows}
  290. box-shadow:0 0 20px {color:glow};
  291. {/block:ifcontentglows}
  292. background-color: {color:content color};
  293. color: {color:text color};
  294. border: {select:border style} {color:border color} {text:border size}px;
  295. font-size: 14px;
  296. font-family:'{select:font}';
  297. border-radius:{text:post corners}px;
  298. }
  299. #play {
  300. padding: 5px;
  301. padding-right: 7px;
  302. margin-right: 3px;
  303. background: 0;
  304. border: none;
  305. box-sizing: border-box;
  306. text-align: center;
  307. cursor: pointer;
  308. color: {color:text color};
  309. }
  310.  
  311. {CustomCss}
  312. </style>
  313. </head>
  314. <body>
  315. <div id="mark">
  316. <center><marquee direction="down" width="75%" height="800px" scrollamount="8">{text:marquee text}</marquee></center>
  317. </div>
  318. <div id="wrapper">
  319. <div id="linksbox"><center><br><a href="{text:link one url}">{text:link one}</a><br><a href="{text:link two url}">{text:link two}</a><br><a href="{text:link three url}">{text:link three}</a><br><a href="{text:link four url}">{text:link four}</a><br><a href="{text:link five url}">{text:link five}</a><br>
  320. <center>
  321. <br>
  322. <table>
  323. {block:PreviousPage}
  324. <a href="{PreviousPage}">&#171; Back</a>
  325. {/block:PreviousPage}
  326. <td>
  327. <span class="current_page">{CurrentPage}</span>
  328. <td>
  329. {block:NextPage}
  330. <a href="{NextPage}">Next &#187;</a>
  331. {/block:NextPage}
  332. </table>
  333. </center>
  334. </center></div>
  335. <div id="sidebar">
  336. <div class="sidebar img">
  337. <center>
  338. <a href="/"><img src="{image:avatar}"></a>
  339. </center>
  340. </div>
  341. </div>
  342.  
  343. <div id="content">
  344. {block:Posts}
  345. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} --> {block:ContentSource}<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  346. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  347. {/block:ContentSource}
  348. <div class="post">
  349.  
  350. <!-- Text -->
  351. {block:Text}
  352. {block:Title}
  353. <div class="title">{Title}</div>
  354. {/block:Title}
  355. {Body}
  356. {/block:Text}
  357. {block:Chat}
  358. {block:Title}
  359. <div class="title">
  360. <h3><a href="{Permalink}">{Title}</a></h3></div>
  361. {/block:Title}
  362. {block:Lines}
  363. <div class="{Alt} user_{UserNumber}">
  364. {block:Label}
  365. <span class="label">{Label}</span>
  366. {/block:Label}{Line}
  367. </div>
  368. {/block:Lines}
  369. {/block:Chat}
  370.  
  371. <!-- Images --->
  372. {block:Photo}
  373. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
  374. {block:Caption}{Caption}{/block:Caption}
  375. {/block:Photo}
  376. {block:Photoset}
  377. {Photoset}
  378. {block:Caption}
  379. {Caption}
  380. {/block:Caption}
  381. {/block:Photoset}
  382.  
  383. <!-- Video -->
  384. {block:Video}
  385. {Video-500}
  386. {block:Caption}
  387. {Caption}
  388. {/block:Caption}
  389. {/block:Video}
  390.  
  391. <!-- Audio -->
  392. {block:Audio}
  393. <div id= "audioplayer">{AudioPlayerWhite}</div>
  394. {block:AlbumArt}
  395. <div id="albumart">
  396. <img src="{AlbumArtURL}" width="100">
  397. </div>
  398. {/block:AlbumArt}
  399. <div class="trackstuff">
  400. {block:TrackName}<b><i>{TrackName}</i></b>{/block:TrackName}<br>{block:Artist}<i>{Artist}</i>{/block:Artist}</div>
  401. {Caption}
  402. {/block:Audio}
  403.  
  404. <!-- Quote -->
  405. {block:Quote}
  406. <div class="quote">
  407. "{Quote}"
  408. {block:Source}
  409. <div class="source">- <i>{Source}</i></div>
  410. {/block:Source}
  411. </div>
  412. {/block:Quote}
  413.  
  414. <!-- Link -->
  415. {block:Link}
  416. <a href="{URL}" class="link" {Target}>{Name}</a>
  417. {block:Description}
  418. {Description}
  419. {/block:Description}
  420. {/block:Link}
  421.  
  422. <!-- Ask -->
  423. {block:Answer}
  424. <div class="question"><img src="{AskerPortraitURL-64}" style="text-align:left;float:left;width:64px;height:64px;border:2px {select:border type} {color:border color};">{Asker}: {Question}</div>
  425. <div class="caption">{Answer}</div>
  426. {/block:Answer}
  427.  
  428. <!-- Footer -->
  429. {block:Date}
  430. <div class="footer">
  431. <hr width="100%" size="1" color="{color:text color}">
  432. <center><a href="{Permalink}">{TimeAgo}{block:NoteCount} ({NoteCountWithLabel}){/block:NoteCount}</a>, <a href="{ReblogUrl}">&#8634;</a>
  433. {block:HasTags}<br>{block:Tags}#<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}</center>
  434. </div>
  435. {block:PermalinkPage}
  436. {block:NoteCount}
  437. {block:PostNotes}{PostNotes}{/block:PostNotes}
  438. {/block:NoteCount}
  439. {/block:PermalinkPage}
  440. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  441. {/block:Date}
  442.  
  443. </div>
  444. {/block:Posts}
  445.  
  446. {block:Pagination}
  447. <div class="naviga">
  448. {block:PreviousPage}
  449. <a href="{PreviousPage}">&#171; Back</a>
  450. {/block:PreviousPage}
  451. {block:NextPage}
  452. <a href="{NextPage}">Next &#187;</a>
  453. {/block:NextPage}
  454. </div>
  455. {/block:Pagination}
  456.  
  457. </div>
  458. </div>
  459. <div id="plz">
  460. <img src="{image:floatie}" width="{text:floatie size}px">
  461. </div>
  462. <div id="c">
  463. <a href="https://urlcyberpalace.tumblr.com"><img src="https://64.media.tumblr.com/67bfbe4513101669ac2a10b65d7c2a54/558928f97b1d2545-76/s75x75_c1/bca3538fc35ea4bb94deec7c88234b99bff82bab.gifv" width="35px" {block:ifcontentglows}{block:iflinksglow} style="box-shadow:0 0 20px {color:glow}"{/block:iflinksglow}{/block:ifshadowsglow};></a>
  464. </div>
  465. {block:ifmusicplayer}
  466. <div id="music">
  467. <button id="play">
  468. <div id="playbutton"><i class="dripicons dripicons-media-play" style='font-size:20px;'></i></div>
  469. </button>
  470. <marquee><b>{text:music track}</b></marquee>
  471. </div>
  472. {/block:ifmusicplayer}
  473. <div id="titley">{text:title}</div>
  474. <script>
  475. window.addEventListener("load", () => {
  476.  
  477. var audio = new Audio("{text:URL to music}"),
  478. play = document.getElementById("play"),
  479. playbutton = document.getElementById("playbutton");
  480.  
  481. play.onclick = () => {
  482. if (audio.paused) { audio.play(); }
  483. else { audio.pause(); }
  484. };
  485.  
  486. audio.onplay = () => { document.getElementById("playbutton").innerHTML = "<i class='dripicons dripicons-media-pause' style='font-size:20px;'></i>"; };
  487. audio.onpause = () => { document.getElementById("playbutton").innerHTML = "<i class='dripicons dripicons-media-play' style='font-size:20px;'></i>"; };
  488. audio.onend = () => { document.getElementById("playbutton").innerHTML = "<i class='dripicons dripicons-media-play' style='font-size:20px;'></i>"; };
  489. });
  490.  
  491. </script>
  492. </body>
  493. </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!