API tools faq
paste
bangyixing

Theme #31 - Beat (Ver. 1)

bangyixing
Oct 3rd, 2013
166
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.53 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4. <!--
  5. ᴛʜᴇᴍᴇ 31: ʙᴇᴀᴛ
  6. ᴅᴇsɪɢɴᴇᴅ ᴀɴᴅ ᴄᴏᴅᴇᴅ ʙʏ ᴀɴᴅʀᴇᴀ @ ᴍʟɪᴋʙᴏʏ
  7. ᴘʟᴇᴀsᴇ ᴅᴏɴ'ᴛ ʀᴇᴍᴏᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛs. ᴛʜᴀɴᴋ ʏᴏᴜ.
  8. -->
  9.  
  10. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  11. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  12. <head><title>{Title}</title>
  13. <link rel="shortcut icon" href="{Favicon}">
  14. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  15. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  16.  
  17. <!--Default Variables-->
  18. <!--Colors-->
  19.  
  20. <meta name="color:Background" content="#ffffff"/>
  21. <meta name="color:Title" content="#474545"/>
  22. <meta name="color:Border" content="#000000"/>
  23. <meta name="color:Sidebar Border" content="#000000"/>
  24. <meta name="color:Link" content="#5c5e5e"/>
  25. <meta name="color:Link Background" content="#333333"/>
  26. <meta name="color:Scrollbar" content="#fbfbfb"/>
  27. <meta name="color:Hover" content="#cfcfcf"/>
  28. <meta name="color:Description" content="#111111"/>
  29. <meta name="color:Asker" content="#fafafa"/>
  30. <meta name="color:Quote" content="#fafafa"/>
  31. <meta name="color:Info Border" content="#e6e4e4"/>
  32. <meta name="color:Hover" content="#cfcfcf"/>
  33. <meta name="color:Tags" content="#d7d9da"/>
  34. <meta name="color:Text" content="#000000"/>
  35.  
  36. <!--Images-->
  37.  
  38. <meta name="image:Background" content="">
  39.  
  40. <!--Links-->
  41.  
  42. <meta name="text:Link1" content="/" />
  43. <meta name="text:Link1 Title" content="link" />
  44. <meta name="text:Link2" content="/" />
  45. <meta name="text:Link2 Title" content="link" />
  46. <meta name="text:Link3" content="/" />
  47. <meta name="text:Link3 Title" content="link" />
  48. <meta name="text:Link4" content="/" />
  49. <meta name="text:Link4 Title" content="link" />
  50.  
  51. <!--Titles-->
  52.  
  53. <meta name="text:Title" content="i long for your touch" />
  54.  
  55. <!--Functions-->
  56.  
  57. <meta name="if:Lazy Load" content="1"/>
  58.  
  59. <!--Fonts-->
  60.  
  61. <link href='http://fonts.googleapis.com/css?family=Trochut:400,400italic' rel='stylesheet' type='text/css'>
  62. <link href='http://fonts.googleapis.com/css?family=Alegreya+SC' rel='stylesheet' type='text/css'>
  63.  
  64. <!--Lazy Load-->
  65.  
  66. {block:IfLazyLoad}
  67. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  68. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
  69. <script type="text/javascript" charset="utf-8">
  70. var $j = jQuery.noConflict();
  71. $j(function() {
  72. if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
  73. $j("img").lazyload({
  74. placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
  75. effect: "fadeIn",
  76. });
  77. });
  78. </script>
  79.  
  80. </style>
  81. {/block:IfLazyLoad}
  82.  
  83. <!--qTip-->
  84.  
  85. <script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
  86.  
  87. <style type="text/css">
  88.  
  89. ::-webkit-scrollbar-thumb:vertical {
  90. background: {color:Border};
  91. height: 80px;
  92. }
  93.  
  94. ::-webkit-scrollbar {
  95. height: 10px;
  96. width: 3px;
  97. background: {color:Scrollbar};
  98. }
  99.  
  100. body {
  101. font-family:Helvetica;
  102. font-size:9px;
  103. text-align:justify;
  104. letter-spacing:1px;
  105. line-height:140%;
  106. margin:0px;
  107. background-image: url('{image:Background}');
  108. background-attachment:fixed;
  109. background-repeat:repeat;
  110. background:{color:Background};
  111. color:{color:Text};
  112. cursor: url(http://img69.imageshack.us/img69/7673/cursorw.png), progress;
  113. }
  114.  
  115. a {
  116. text-decoration:none;
  117. outline:none;
  118. -moz-outline-style:none;
  119. color:{color:Text};
  120. -webkit-transition: all 0.5s ease;
  121. -moz-transition: all 0.5s ease;
  122. -o-transition: all 0.5s ease;
  123. }
  124.  
  125. img {
  126. border:none;
  127. }
  128.  
  129. blockquote blockquote {
  130. padding-left:5px;
  131. border-left:1px solid;
  132. }
  133.  
  134. h1 {
  135. font-size:20px;
  136. text-transform:none;
  137. font-style:none;
  138. line-height:140%;
  139. text-align:center;
  140. font-family:Trochut;
  141. color:{color:Title};
  142. }
  143.  
  144. a:hover {
  145. color: {color:Hover};
  146. }
  147.  
  148. small{
  149. font-size:9px;
  150. line-height:140%;
  151. }
  152.  
  153. big {
  154. font-size:12px;
  155. line-height:140%;
  156. }
  157.  
  158. b, strong{
  159. color:{color:Text};
  160. }
  161. i, em {
  162. color:{color:Text};
  163. }
  164. p{
  165. margin-top:5px;
  166. margin-bottom:5px;
  167. }
  168.  
  169. blockquote {
  170. padding:0px;
  171. padding-left:5px;
  172. margin:5px;
  173. border-left:1px solid {color:Border};
  174. }
  175.  
  176. blockquote img {
  177. max-width:500px;
  178. }
  179.  
  180. .audio { height:60px; padding:5px; margin-bottom:5px;}
  181. .audio-album { position:absolute; width:60px; }
  182. .audio-player { position:absolute; width:25px; height:25px; margin-left:15px; margin-top:15px; opacity:0.9; overflow:hidden; border:2px solid {color:Border}; }
  183. .audio-info { margin-top:-2px; position:relative; margin-left:70px; padding:5px; }
  184.  
  185. .entries{
  186. padding:2px;
  187. width:500px;
  188. padding:5px;
  189. margin:5px;
  190. background:{color:Background};
  191. }
  192.  
  193. #posts{
  194. width:500px;
  195. margin-left:570px;
  196. padding-left:15px;
  197. padding-right:15px;
  198. padding-top:35px;
  199. margin-top:50px;
  200. background-color:{color:Background};
  201. padding:5px;
  202. }
  203.  
  204. #quote {
  205. padding:10px;
  206. margin-bottom:5px;
  207. background:{color:Quote};
  208. font-family:Courier;
  209. font-size:12px;
  210. font-style:none;
  211. letter-spacing:1px;
  212. -webkit-border-radius:2px;
  213. -moz-border-radius:2px;
  214. border-radius:2px;
  215. }
  216.  
  217. #chat {
  218. text-transform:lowercase;
  219. font-family:'Alegreya SC', serif;
  220. }
  221.  
  222. #website {
  223. font-family:Arial;
  224. font-style:italic;
  225. text-align:right;
  226. font-size:12px;
  227. color:{color:Text};
  228. }
  229.  
  230. #sidebar {
  231. margin-left:550px;
  232. margin-top:170px;
  233. position:fixed;
  234. }
  235.  
  236. #title {
  237. font-size:20px;
  238. position:fixed;
  239. margin-left:-296px;
  240. margin-top:-65px;
  241. padding:5px;
  242. font-family:Arial;
  243. font-style:italic;
  244. text-align:right;
  245. line-height:40%;
  246. width:248px;
  247. padding-bottom:10px;
  248. letter-spacing:0px;
  249. border-bottom:1px solid {color:Info Border};
  250. text-transform:lowercase;
  251. color:#888888;
  252. -moz-transition-duration:1s;
  253. -webkit-transition-duration:1s;
  254. -o-transition-duration:1s;
  255. }
  256.  
  257. #qTip {
  258. padding:3px;
  259. width:auto;
  260. display: none;
  261. text-align: center;
  262. position:fixed;
  263. font-size:8px;
  264. text-transform:uppercase;
  265. font-family:Helvetica;
  266. background:{color:Background};
  267. color: {color:Text};
  268. font-style:none;
  269. letter-spacing: 0px;
  270. border:1px solid {color:Info Border};
  271. }
  272.  
  273. #links {
  274. width:18px;
  275. height:auto;
  276. padding:10px;
  277. padding-top:35px;
  278. font-size:10px;
  279. font-family:Arial;
  280. font-style:italic;
  281. text-align:center;
  282. text-transform:uppercase;
  283. opacity:0;
  284. position:fixed;
  285. word-spacing:0px;
  286. margin-left:-350px;
  287. margin-top:-45px;
  288. letter-spacing:1px;
  289. border-right:1px solid {color:Info Border};
  290. -moz-transition-duration:1s;
  291. -webkit-transition-duration:1s;
  292. -o-transition-duration:1s;
  293. }
  294.  
  295. #links a {
  296. display:block;
  297. width:20px;
  298. padding:5px;
  299. margin-right:3px;
  300. margin-bottom:0px;
  301. }
  302.  
  303. #links img{
  304. opacity: 0.9;
  305. -webkit-transition: all 0.7s ease-in-out;
  306. -moz-transition: all 0.7s ease-in-out;
  307. -o-transition: all 0.7s ease-in-out;
  308. -ms-transition: all 0.7s ease-in-out;
  309. transition: all 0.7s ease-in-out;
  310. }
  311.  
  312. #links img:hover{
  313. opacity: 0.3;
  314. -webkit-transition: all 0.7s ease-in-out;
  315. -moz-transition: all 0.7s ease-in-out;
  316. -o-transition: all 0.7s ease-in-out;
  317. -ms-transition: all 0.7s ease-in-out;
  318. transition: all 0.7s ease-in-out;
  319. }
  320.  
  321. #sidebar:hover #links {
  322. margin-top:-60px;
  323. opacity:1;
  324. }
  325.  
  326. #sidebar:hover #title {
  327. margin-left:-330px;
  328. width:268px;
  329. }
  330.  
  331. #description {
  332. font-size:9px;
  333. width:258px;
  334. height:49px;
  335. font-family:Helvetica;
  336. text-transform:none;
  337. position:fixed;
  338. text-align:justify;
  339. font-style:none;
  340. line-height:10px;
  341. margin-left:-300px;
  342. margin-top:-20px;
  343. letter-spacing:1px;
  344. opacity:1;
  345. padding:5px;
  346. color:{color:Description};
  347. -moz-transition-duration:1s;
  348. -webkit-transition-duration:1s;
  349. -o-transition-duration:1s;
  350. }
  351.  
  352. #pagination {
  353. width:120px;
  354. font-size:8px;
  355. text-align:center;
  356. padding:8px;
  357. margin-top:70px;
  358. margin-left:-240px;
  359. letter-spacing:3px;
  360. position:fixed;
  361. text-transform:uppercase;
  362. font-style:italic;
  363. color:black;
  364. }
  365.  
  366. #pagination a:hover {
  367. color:{color:Hover};
  368. -webkit-transition: all 0.5s ease-out;
  369. -moz-transition: all 0.5s ease-out;
  370. transition: all 0.5s ease-out;
  371. }
  372.  
  373. #question {
  374. float:left;
  375. line-height:130%;
  376. }
  377.  
  378. #question img {
  379. float:left;
  380. margin-right:11px;
  381. border-radius:500px;
  382. }
  383.  
  384. #info {
  385. text-align:left;
  386. margin-top:5px;
  387. margin-bottom:6px;
  388. font-family:Helvetica;
  389. padding-top:5px;
  390. text-transform:lowercase;
  391. font-style:none;
  392. letter-spacing:0px;
  393. font-size:9px;
  394. line-height:120%;
  395. padding:20px;
  396. border-top: 1px solid {color:Info Border};
  397. }
  398.  
  399. #info a:hover{
  400. text-decoration: none;
  401. color: {color:Hover};}
  402.  
  403. #tags {
  404. font-size:9px;
  405. margin-top:0px;
  406. }
  407.  
  408. #notes {
  409. font-family:Helvetica;
  410. text-transform:lowercase;
  411. font-size:9px;
  412. text-align:left;
  413. left:0px;
  414. }
  415.  
  416. #credit {
  417. font-family:Calibri;
  418. font-size:9px;
  419. letter-spacing:1px;
  420. float:right;
  421. position:fixed;
  422. bottom:15px;
  423. right:10px;
  424. }
  425.  
  426. #credit a {
  427. color:{color:Background};
  428. padding:5px;
  429. text-transform:uppercase;
  430. background:{color:Link};
  431. }
  432.  
  433. #credit a:hover {
  434. color:{color:Link};
  435. text-transform:uppercase;
  436. font-style:none;
  437. background:{color:Background};
  438. }
  439.  
  440. {CustomCSS}</style></head><body>
  441.  
  442. <div id="sidebar">
  443. <div id="title">{text:Title}</div>
  444. <div id="links">
  445. <a href="/" title="refresh"><img src="http://static.tumblr.com/p7wg3p9/TP5moktey/home.png"></a>
  446. <a href="/ask" title="message"><img src="http://static.tumblr.com/p7wg3p9/3Wdmoktn4/message.png"></a>
  447. {block:ifLink1}<a href="{text:Link1}" title="{text:Link1 Title}"><img src="http://static.tumblr.com/p7wg3p9/kuGmrbe84/user.png"></a>{/block:ifLink1}
  448. {block:ifLink2}<a href="{text:Link2}" title="{text:Link2 Title}"><img src="http://static.tumblr.com/p7wg3p9/w2jmoktxx/heart.png"></a>{/block:ifLink2}
  449. {block:ifLink3}<a href="{text:Link3}" title="{text:Link3 Title}"><img src="http://static.tumblr.com/p7wg3p9/88tmokts4/plus.png"></a>{/block:ifLink3}
  450. </div>
  451.  
  452. <div id="description"><img src="{PortraitURL-64}" align="left" style="margin-right:5px; width:64px; height:64px; ">{Description}
  453. <br><br>
  454. <center>
  455. <div style="text-transform:uppercase;font-style:italic;letter-spacing:2px;">
  456. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">fall</a>{/block:PreviousPage} — {block:NextPage}<a href="{NextPage}">jump</a>{/block:NextPage}{/block:Pagination}
  457. </center>
  458. </div>
  459. </div>
  460.  
  461. <div id="posts">
  462. {block:Posts}
  463. <div class="entries">
  464.  
  465. {block:Photo}<a href="{Permalink}"><img src="{PhotoURL-500}"></a>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  466.  
  467. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  468.  
  469. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  470.  
  471. {block:Quote}<div id="quote">❝{Quote}</i>❞{block:Source} — {Source}</div>{/block:Source}{/block:Quote}
  472.  
  473. {block:Link}<div id="website"><a href="{URL}" {Target}>{Name}</a></div>{block:Description}{Description}{/block:Description}{/block:Link}
  474.  
  475. <div id="chat">
  476. {block:Chat}
  477. {block:Title}
  478. <h1>{Title}</h1>
  479. {/block:Title}
  480. {block:Lines}
  481. <blockquote>{block:Label}<b>{Label}</b>{/block:Label} -
  482. {Line}</blockquote><br>
  483. {/block:Lines}{/block:Chat}
  484. </div>
  485.  
  486. {block:Audio}
  487. <div class="audio">
  488. {block:AlbumArt}<img class="audio-album" src="{AlbumArtURL}">{/block:AlbumArt}
  489. <div class="audio-player">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div>
  490. <div class="audio-info">
  491. {block:TrackName}<b>Title:</b> {TrackName}<br>{/block:TrackName}
  492. {block:Artist}<b>Artist:</b> {Artist}<br>{/block:Artist}
  493. {block:Album}<b>Album:</b> {Album}<br>{/block:Album}
  494. {block:PlayCount}<b>Plays:</b> {PlayCount}<br>{/block:PlayCount}
  495. </div></div>
  496. {/block:Audio}
  497.  
  498. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  499.  
  500. {block:Answer}<div id="question"><img src="{AskerPortraitURL-48}"></div> <div style="text-transform:uppercase;
  501. font-style:italic;
  502. font-size:9px;">{Question} — <b>{Asker}</b><br><br><br><br><br></div>
  503. {Answer}<br>{/block:Answer}
  504.  
  505. <div id="info">
  506. with: <a href="{Permalink}">{NoteCount} notes</a><br>
  507. {block:Date} posted: <a href="{Permalink}">{Month} {DayOfMonth} {Year}</a>{/block:Date}
  508. {block:HasTags}<div id="tags"> index: {block:Tags} ▪ <a href="{TagURL}">{Tag}</a> {/block:Tags}</div>{/block:HasTags}</div></div>
  509. {/block:Posts}
  510. {block:RebloggedFrom} via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom} {block:ContentSource}(© <a href="{SourceURL}">{SourceLink}</a>){/block:ContentSource}{block:RebloggedFrom} <a href="{ReblogParentURL}" target="_blank"></a>{/block:RebloggedFrom}
  511. {block:PostNotes}<div id="notes">{PostNotes}</div>{/block:PostNotes}
  512.  
  513. {/block:Posts}
  514.  
  515. <div id="credit"><a href="http://mlikboy.tumblr.com/">mlikboy</a></div>
  516.  
  517. </body>
  518. </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!