API tools faq
paste
onediewreckshun

5 - looking glass - http://kimsjongin.tumblr.com

onediewreckshun
Dec 28th, 2012
1,396
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.53 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <head>
  4.  
  5. <title>{title}</title>
  6.  
  7. <link rel="shortcut icon" href="{favicon}">
  8.  
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  10. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  11.  
  12. <meta name="color:Background" content="#ffffff"/>
  13. <meta name="color:Text" content="#838282"/>
  14. <meta name="color:Link" content="#b8b8b8"/>
  15. <meta name="color:Linkhover" content="#ddd"/>
  16. <meta name="color:Scrollbar" content="#ddd" />
  17. <meta name="color:textselect" content="#ddd" />
  18.  
  19. <meta name="text:Link1" content="/" />
  20. <meta name="text:Link1Title" content="link" />
  21. <meta name="text:Link2" content="/" />
  22. <meta name="text:Link2Title" content="link" />
  23. <meta name="text:Link3" content="/" />
  24. <meta name="text:Link3Title" content="link" />
  25. <meta name="text:Link4" content="/" />
  26. <meta name="text:Link4Title" content="link" />
  27. <meta name="text:Link5" content="/" />
  28. <meta name="text:Link5Title" content="link" />
  29.  
  30. <meta name="image:sidebar" content=""/>
  31. <meta name="image:sidebar background" content="" />
  32.  
  33.  
  34. <meta name="if:hovertags" content="1" />
  35.  
  36. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script type="text/javascript" src="http://static.tumblr.com/gyoju49/uF2mjkhe3/layoutcomponent.txt"></script><script type="text/javascript" src="http://static.tumblr.com/gyoju49/2A6mk8i6o/component.js"></script><script type="text/javascript" src="http://static.tumblr.com/bkd4m5b/Citm42m8i/smoothscroll.js"></script>
  37.  
  38. <!--
  39. 　　　　　　
  40. ┊ 　 ┊ ┊
  41. ┊ ┊ ┊ ┊ ┊ ┊ ┊
  42. ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊
  43. ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊
  44.  
  45. ᴛʜᴇᴍᴇ 5 | ʟᴏᴏᴋɪɴɢ ɢʟᴀss | ʙʏ ᴍᴇᴇᴍ (ᴋɪᴍsᴊᴏɴɢɪɴ)
  46. ᴘʟᴇᴀsᴇ ᴅᴏɴ'ᴛ ʀᴇᴍᴏᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛ ᴏʀ sᴛᴇᴀʟ!
  47.  
  48. ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊
  49. ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊
  50. ┊ ┊ ┊ ┊ ┊ ┊ ┊
  51. ┊ ┊ ┊
  52.  
  53. -->
  54.  
  55.  
  56.  
  57. <style type="text/css">
  58.  
  59. #audio {
  60. margin-bottom:5px;
  61. width:500px;
  62. height:105px;
  63. }
  64.  
  65. .albumart {
  66. width:100px;
  67. height:100px;
  68. position:absolute;
  69. }
  70.  
  71. .albumart img {
  72. width:100px;
  73. height:100px;
  74. float:left;
  75. }
  76.  
  77. .playercontainer {
  78. opacity: .2;
  79. display:block;
  80. width:100px;
  81. height:100px;
  82. background-color:white;
  83. position:absolute;
  84. z-index:1;
  85. -webkit-transition:all 0.5s ease-in-out;
  86. -moz-transition:all 0.5s ease-in-out;
  87. -o-transition:all 0.5s ease-in-out;
  88. -ms-transition: all 0.5s ease-in-out;
  89. transition:all 0.5s ease-in-out;
  90. }
  91.  
  92. .playercontainer:hover {
  93. opacity:.7;
  94. position:absolute;
  95. -webkit-transition:all 0.5s ease-in-out;
  96. -moz-transition:all 0.5s ease-in-out;
  97. -o-transition:all 0.5s ease-in-out;
  98. -ms-transition: all 0.5s ease-in-out;
  99. transition:all 0.5s ease-in-out;
  100. }
  101.  
  102. .player {
  103. margin-left:36px;
  104. margin-top:36px;
  105. width:25px;
  106. height:25px;
  107. overflow:hidden;
  108. position:absolute;
  109. background-color:white;
  110. }
  111.  
  112. .audioinfo {
  113. margin-left:110px;
  114. float:left;
  115. color:{color:Text};
  116. width:386px;
  117. padding:2px;
  118. margin-top:3px;
  119. }
  120.  
  121. ::-moz-selection {
  122. text-shadow:0px 0px 0px transparent;
  123. background-color: {color:textselect};
  124. color: #ffffff;
  125. }
  126.  
  127. ::selection {
  128. text-shadow:0px 0px 0px transparent;
  129. background-color: {color:textselect};
  130. color: #ffffff;
  131. }
  132.  
  133.  
  134. ::-webkit-scrollbar {
  135. height: 5px;
  136. width: 5px;
  137. }
  138.  
  139. ::-webkit-scrollbar-thumb {
  140. background-color:{color:scrollbar};
  141. }
  142.  
  143. ::-webkit-scrollbar-track{
  144. background-color:#fff;opacity:0;
  145. }
  146.  
  147. ::-webkit-scrollbar-bottom{
  148. background-color:#fff;
  149. }
  150.  
  151. body {
  152. background-color: #ffffff;
  153. color:{color:text};
  154. font-family:'cambria';
  155. font-style:normal;
  156. font-size: 9px;
  157. line-height:130%;
  158. letter-spacing:1px;
  159. }
  160.  
  161. a {
  162. text-decoration:none;
  163. color:{color:link};
  164. -webkit-transition: all 0.4s linear;
  165. -moz-transition-duration:0.5s;
  166. -webkit-transition-duration:0.5s;
  167. -o-transition-duration:0.5s;
  168. }
  169.  
  170. a:hover {
  171. text-decoration:none;
  172. color:{color:linkhover};
  173. -moz-transition-duration:0.5s;
  174. -webkit-transition-duration:0.5s;
  175. -o-transition-duration:0.5s;
  176. }
  177.  
  178. blockquote {
  179. border-left:1px solid #ececec;
  180. margin:5px 5px 2px 2px;
  181. padding: 1px 0 3px 6px;
  182. }
  183.  
  184. blockquote blockquote {
  185. margin:5px 5px 2px 2px;
  186. padding: 1px 0 3px 6px;
  187. border-left:1px solid #ececec;
  188. }
  189.  
  190. h1 {
  191. font-weight:normal;
  192. font-family:cambria;
  193. font-size:15px;
  194. }
  195.  
  196. #entries {
  197. padding:10px;
  198. width:500px;
  199. margin-left:500px;
  200. margin-top:40px;
  201. }
  202.  
  203. #post {
  204. width:500px;
  205. padding-bottom:20px;
  206. padding-top:20px;
  207. }
  208.  
  209. #sb {
  210. z-index:1000;
  211. width:250px;
  212. position:fixed;
  213. margin-left:200px;
  214. margin-top:20px;
  215. }
  216.  
  217. #flip-grid {
  218. margin-left:-50px;
  219. margin-top:80px;
  220. padding: 0;
  221. background-color:transparent;
  222. list-style: none;
  223. display: block;
  224. text-align: center;
  225. width: 200px;
  226. z-index:100;
  227. position:fixed;
  228. }
  229.  
  230. #flip-grid:after,
  231. #flip-item:before {
  232. content: '';
  233. display: table;
  234. }
  235.  
  236. #flip-grid:after {
  237. clear: both;
  238. }
  239.  
  240. #flip-grid li {
  241. width: 200px;
  242. height: 200px;
  243. display: inline-block;
  244. margin: 0px;
  245. }
  246.  
  247. .flip-item {
  248. width: 100%;
  249. height: 100%;
  250. border-radius: 500px;
  251. position: relative;
  252. box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  253. cursor: url('http://24.media.tumblr.com/tumblr_mdig6jktic1riysloo1_100.png'), progress;
  254. }
  255.  
  256. .flip-info-wrap,
  257. .flip-info{
  258. position: absolute;
  259. width: 160px;
  260. height: 160px;
  261. border-radius: 500px;
  262.  
  263. -webkit-transition: all 0.4s ease-in-out;
  264. -moz-transition: all 0.4s ease-in-out;
  265. -o-transition: all 0.4s ease-in-out;
  266. -ms-transition: all 0.4s ease-in-out;
  267. transition: all 0.4s ease-in-out;
  268.  
  269. -webkit-perspective: 1100px;
  270. -moz-perspective: 1100px;
  271. -o-perspective: 1100px;
  272. -ms-perspective: 1100px;
  273. perspective: 1100px;
  274. }
  275.  
  276. .flip-info-wrap {
  277. top: 20px;
  278. left: 20px;
  279. background: #f9f9f9 url('{image:sidebar background}');
  280. background-size:200px;
  281. box-shadow:
  282. 0 0 0 20px rgba(255,255,255,0.2),
  283. inset 0 0 3px #999;
  284. }
  285.  
  286. .flip-info {
  287. -webkit-transform-style: preserve-3d;
  288. -moz-transform-style: preserve-3d;
  289. -o-transform-style: preserve-3d;
  290. -ms-transform-style: preserve-3d;
  291. transform-style: preserve-3d;
  292. }
  293.  
  294. .flip-info > div {
  295.  
  296. display: block;
  297. position: absolute;
  298. width: 100%;
  299. height: 100%;
  300. border-radius: 500px;
  301. background-position: center center;
  302.  
  303. -webkit-transition: all 0.6s ease-in-out;
  304. -moz-transition: all 0.6s ease-in-out;
  305. -o-transition: all 0.6s ease-in-out;
  306. -ms-transition: all 0.6s ease-in-out;
  307. transition: all 0.6s ease-in-out;
  308. }
  309.  
  310. .flip-info .flip-info-front {
  311. -webkit-transform-origin: 50% 100%;
  312. -moz-transform-origin: 50% 100%;
  313. -o-transform-origin: 50% 100%;
  314. -ms-transform-origin: 50% 100%;
  315. transform-origin: 50% 100%;
  316.  
  317. z-index: 100;
  318. box-shadow:
  319. inset 0px 0px 20px rgba(0,0,0,0.1);
  320.  
  321. }
  322.  
  323. .flip-info .flip-info-back {
  324. background: rgba(230,132,107,0.0);
  325. }
  326.  
  327.  
  328.  
  329. .flip-img-1 {
  330. background-image:url('{image:sidebar}');
  331. background-size:220px;
  332. background-position:center;
  333. }
  334.  
  335. .flip-info h3 {
  336. width:auto;
  337. color:#3a3a3a;
  338. text-transform: uppercase;
  339. letter-spacing: 1px;
  340. font-size: 9px;
  341. margin: 0px;
  342. padding: 0px 0px 2px 0px;
  343. height: auto;
  344. font-family:'book antiqua';
  345. text-shadow:
  346. 0 0 1px #fff,
  347. 0 1px 2px rgba(0,0,0,0.3);
  348. }
  349.  
  350. .flip-info p {
  351. color:#3a3a3a;
  352. padding: 1px;
  353. font-style: italic;
  354. margin: 0 30px;
  355. font-size: 9px;
  356. border-top: 1px solid rgba(255,255,255,0.5);
  357. }
  358.  
  359. .flip-info p a {
  360. color:#5f4848;
  361. font-style:normal;
  362. text-transform:Capitalize;
  363. font-size:9px;
  364. letter-spacing:1px;
  365. padding-top:5px;
  366. font-family:'tahoma';
  367.  
  368. -moz-transition-duration:0.5s;
  369. -webkit-transition-duration:0.5s;
  370. -o-transition-duration:0.5s;
  371. }
  372.  
  373. .flip-info p a:hover {
  374.  
  375. color:#e9e6cb;
  376. border-bottom:0px solid #fff;
  377.  
  378. -moz-transition-duration:0.5s;
  379. -webkit-transition-duration:0.5s;
  380. -o-transition-duration:0.5s;
  381. }
  382.  
  383.  
  384. .flip-item:hover .flip-info-front {
  385. -webkit-transform: rotate3d(1,0,0,-180deg);
  386. -moz-transform: rotate3d(1,0,0,-180deg);
  387. -o-transform: rotate3d(1,0,0,-180deg);
  388. -ms-transform: rotate3d(1,0,0,-180deg);
  389. transform: rotate3d(1,0,0,-180deg);
  390. box-shadow:
  391. inset 0 0 5px rgba(255,255,255,0.2),
  392. inset 0 0 3px rgba(0,0,0,0.3);
  393. }
  394.  
  395. .flip-item:hover .flip-info-back {
  396. background: rgba(0,0,0,0.0);
  397. }
  398.  
  399. #pagination {
  400. border:0px solid transparent;
  401. padding-top:2px;
  402. padding-bottom:3px;
  403. margin-left:5px;
  404. margin-right:5px;
  405. font-size:12px;
  406. text-align:center;
  407. margin-top:300px;
  408. margin-left:-150px;
  409. }
  410.  
  411. #pagination a {
  412. border-radius:50px;
  413. border-bottom:0px solid transparent;
  414. padding-left:7px;
  415. padding-right:6px;
  416. padding-top:2px;
  417. padding-bottom:4px;
  418. background-color:#fff;
  419. color:{color:link};
  420. -webkit-transition: all 0.7s ease-out;
  421. }
  422.  
  423. #pagination a:hover {
  424. text-shadow:0px 0px 0px #fff;
  425. color:#fff;
  426. background-color:{color:linkhover};
  427. }
  428.  
  429. #info {
  430. border:1px solid #ececec;
  431. border-bottom:1px solid #ececec;
  432. text-align:left;
  433. font-family:'georgia';
  434. padding-top:10px;
  435. padding-bottom:10px;
  436. margin-top:15px;
  437. font-size:8px;
  438. text-transform: lowercase;
  439. }
  440.  
  441. #asker {
  442. margin-top:8px;
  443. float:left;
  444. margin-right:10px;
  445. }
  446.  
  447. #contained {
  448. width: 500px;
  449. margin:0px auto;
  450. }
  451.  
  452. #container a{
  453. color:{color:background};
  454. }
  455.  
  456. #desc {
  457. width: 120px;
  458. margin:0px auto;
  459. }
  460.  
  461. {block:ifhovertags}
  462.  
  463. #post:hover .tags {
  464. margin-top:0px;
  465. opacity:1;
  466. -moz-transition-duration:0.5s;
  467. -webkit-transition-duration:0.5s;
  468. -o-transition-duration:0.5s;
  469. }
  470.  
  471. .tags {
  472. font-family:calibri;
  473. margin-top:-10px;
  474. opacity:0;
  475. -moz-transition-duration:0.5s;
  476. -webkit-transition-duration:0.5s;
  477. -o-transition-duration:0.5s;
  478. }
  479.  
  480. {/block:ifhovertags}
  481.  
  482. {block:ifnothovertags}
  483.  
  484. .tags {
  485. font-family:calibri;
  486. margin-top:0px;
  487. opacity:1;
  488. -moz-transition-duration:0.5s;
  489. -webkit-transition-duration:0.5s;
  490. -o-transition-duration:0.5s;
  491. }
  492.  
  493. {/block:ifnothovertags}
  494.  
  495. #desc a {
  496. border-bottom:0px;
  497. border:0px solid transparent;
  498. font-family:calibri;
  499. text-transform:uppercase;
  500. -moz-transition-duration:0.5s;
  501. -webkit-transition-duration:0.5s;
  502. -o-transition-duration:0.5s;
  503. }
  504.  
  505. #desc a:first-letter {
  506. font-weight:bold;
  507. }
  508.  
  509. #desc a:hover #desc{
  510. font-family:calibri;
  511. text-transform:uppercase;
  512. -moz-transition-duration:0.5s;
  513. -webkit-transition-duration:0.5s;
  514. -o-transition-duration:0.5s;
  515. }
  516.  
  517. {CustomCSS}</style>
  518.  
  519.  
  520. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script> <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script> <script type="text/javascript" charset="utf-8"> var $j = jQuery.noConflict(); $j(function() { if (navigator.platform == "iPad" || navigator.platform == "iPhone") return; $j("img").lazyload({ placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif", effect: "fadeIn", }); }); </script>
  521.  
  522. </head>
  523.  
  524.  
  525.  
  526. <body>
  527.  
  528.  
  529.  
  530. <div id="sb">
  531.  
  532. <div id="contained">
  533.  
  534.  
  535. <div id="description">
  536.  
  537. </div>
  538.  
  539. <div id="flip-grid">
  540.  
  541. <li>
  542.  
  543. <div class="flip-item flip-img-1">
  544.  
  545. <div class="flip-info-wrap">
  546.  
  547. <div class="flip-info">
  548.  
  549. <div class="flip-info-front flip-img-1"></div>
  550.  
  551. <div class="flip-info-back">
  552.  
  553.  
  554. <br><br><br>
  555. <div id="desc">
  556. {description}
  557. </center>
  558. <br><br>
  559. <a href="{text:link1}">{text:link1title}</a><br>
  560. <a href="{text:link2}">{text:link2title}</a><br>
  561. <a href="{text:link3}">{text:link3title}</a><br>
  562. <a href="{text:link4}">{text:link4title}</a><br>
  563. <a href="{text:link4}">{text:link5title}</a><br>
  564.  
  565. </div>
  566. </li>
  567.  
  568. </div>
  569.  
  570. </div>
  571.  
  572. <div id="pagination">
  573. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">«</a>{/block:PreviousPage}
  574. {block:NextPage}<a href="{NextPage}">»</a>{/block:NextPage}{/block:Pagination}</div></div>
  575.  
  576.  
  577. <div id="entries">{block:Posts}<div id="post">
  578.  
  579. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  580.  
  581. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}{block:Caption}<br><br>{Caption}{/block:Caption}{/block:Photo}
  582.  
  583. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  584.  
  585. <center>{block:Quote}<big>{Quote}</big>{block:Source} <br>- {Source}{/block:Source}{/block:Quote}</center>
  586.  
  587. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  588.  
  589. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  590.  
  591. {block:Audio}
  592. <div id="audio">
  593. <div class="albumart"><img src="http://static.tumblr.com/4wyqgof/Dyvm2qmp1/default.jpg"></div>{block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}<div class="playercontainer"><div class="player">{AudioPlayerWhite}</div></div>
  594.  
  595. {block:TrackName}<div class="audioinfo"><b>Title:</b> {TrackName}</div><br>{/block:TrackName}
  596. {block:Artist}<div class="audioinfo"><b>Artist:</b> {Artist}</div><br>{/block:Artist}
  597. {block:Album}<div class="audioinfo"><b>Album:</b> {Album}</div>{/block:Album}
  598. {block:PlayCount}<div class="audioinfo"><b>Played:</b> {FormattedPlayCount} times</div> {/block:PlayCount}
  599. </div>{block:Caption}{Caption}{/block:Caption}
  600. {/block:Audio}
  601.  
  602. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  603.  
  604. {block:Answer}<div id="asker"><img src="{AskerPortraitURL-24}"></div><p align="left"><b>{Asker} <i>asked:</i></b><br>{Question}</p><p align="left"><br>{Answer}</p>{/block:Answer}
  605.  
  606. <div id="info">
  607. {block:Date}<div class="date"><center><a href="{Permalink}">{TimeAgo}</a> • {block:RebloggedFrom}<a title="{reblogparenturl}" href="{ReblogParentURL}">via</a>{/block:RebloggedFrom}{block:ContentSource} • <a href="{SourceURL}"><a href="{SourceURL}">source</a> •{/block:ContentSource}{block:RebloggedFrom} <a href="{ReblogParentURL}" target="_blank"></a>{/block:RebloggedFrom} <a href="{Permalink}">{NoteCountWithLabel}</a> &bull; <a href="{ReblogURL}" target="_blank">reblog</a><br>
  608. <small>{block:HasTags}<div class="tags">{block:Tags} <a href="/tagged/{Tag}">#{Tag}</a> &nbsp;{/block:Tags}</div>{/block:HasTags}</small></div>
  609.  
  610. </div>
  611. {block:PostNotes}<center><a href="http://kimsjongin.tumblr.com">ᴛʜᴇᴍᴇ&nbsp;ʙʏ&nbsp;ᴋɪᴍsᴊᴏɴɢɪɴ</a></center>{PostNotes}{/block:PostNotes}
  612. {/block:Posts}</div>
  613.  
  614. </body>
  615.  
  616. <!--
  617. 　　　　　　
  618. ┊ 　 ┊ ┊
  619. ┊ ┊ ┊ ┊ ┊ ┊ ┊
  620. ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊
  621. ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊
  622.  
  623. ᴛʜᴇᴍᴇ 5 | ʟᴏᴏᴋɪɴɢ ɢʟᴀss | ʙʏ ᴍᴇᴇᴍ (ᴋɪᴍsᴊᴏɴɢɪɴ)
  624. ᴘʟᴇᴀsᴇ ᴅᴏɴ'ᴛ ʀᴇᴍᴏᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛ ᴏʀ sᴛᴇᴀʟ! ^_^
  625.  
  626. ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊
  627. ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊ ┊
  628. ┊ ┊ ┊ ┊ ┊ ┊ ┊
  629. ┊ ┊ ┊
  630.  
  631.  
  632. -->
  633. </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!