API tools faq
paste
bisetsu

DISSONANCE [#3]

bisetsu
Oct 16th, 2016
114
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 43.03 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. THEME: GAIA
  4. by acuite
  5.  
  6. - the oft-requested header theme :)
  7. - don't steal this pls
  8. - enjoy, ilu (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
  9.  
  10. - @acuite for more themes
  11.  
  12. -->
  13.  
  14. <html>
  15. <head>
  16.  
  17. <title>{Title}</title>
  18. <link rel="shortcut icon" href="http://i.imgur.com/OdEv9WU.png">
  19. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  21.  
  22. <meta name="image:Header" content=""/>
  23.  
  24. <meta name="color:Post" content="#fff"/>
  25. <meta name="color:Accent" content="#89adc3"/>
  26. <meta name="color:Background" content="#f8f8f8"/>
  27. <meta name="color:Border" content="#eee"/>
  28. <meta name="color:Text" content="#555"/>
  29. <meta name="color:Link" content="#999"/>
  30.  
  31. <meta name="if:Drop Links" content=""/>
  32. <meta name="if:Description" content=""/>
  33. <meta name="if:Image" content=""/>
  34. <meta name="if:Paginate" content=""/>
  35. <meta name="if:Border" content=""/>
  36. <meta name="if:Captions" content=""/>
  37.  
  38. <meta name="select:Tags" content="tshow" title="Show">
  39. <meta name="select:Tags" content="thide" title="Hide">
  40. <meta name="select:Tags" content="thover" title="Hover">
  41.  
  42. <meta name="select:Header Align" content="right" title="Right">
  43. <meta name="select:Header Align" content="center" title="Center">
  44. <meta name="select:Header Align" content="left" title="Left">
  45.  
  46. <meta name="select:Permalink Align" content="left" title="Left">
  47. <meta name="select:Permalink Align" content="center" title="Center">
  48. <meta name="select:Permalink Align" content="right" title="Right">
  49.  
  50. <meta name="text:Post" content="350"/>
  51. <meta name="text:Margin" content="75"/>
  52. <meta name="text:Padding" content="5"/>
  53.  
  54. <meta name="text:Link 1" content="/"/>
  55. <meta name="text:Link 1 Title" content="one"/>
  56. <meta name="text:Link 2" content="/" />
  57. <meta name="text:Link 2 Title" content="two"/>
  58. <meta name="text:Link 3" content="/" />
  59. <meta name="text:Link 3 Title" content="three"/>
  60. <meta name="text:Link 4" content="/" />
  61. <meta name="text:Link 4 Title" content="four"/>
  62.  
  63.  
  64. <script type="text/javascript"
  65. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  66.  
  67. <script>
  68. $(document).ready(function() {
  69. //
  70. $('a.poplight[href^=#]').click(function() {
  71. var popID = $(this).attr('rel'); //Get Popup Name
  72. var popURL = $(this).attr('href'); //Get Popup href to define size
  73. var query= popURL.split('?');
  74. var dim= query[1].split('&');
  75. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  76. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');
  77. var popMargTop = ($('#' + popID).height() + 80) / 2;
  78. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  79. //Apply Margin to Popup
  80. $('#' + popID).css({
  81. 'margin-top' : -popMargTop,
  82. 'margin-left' : -popMargLeft
  83. });
  84. $('body').append('<div id="fade"></div>');
  85. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  86. return false;
  87. });
  88. $('a.close, #fade').live('click', function() {
  89. $('#fade , .popup_block, .popup_block2').fadeOut(function() {
  90. $('#fade, a.close').remove(); //fade them both out
  91. });
  92. return false;
  93. });
  94. });
  95. </script>
  96.  
  97. <link href="http://static.tumblr.com/qudkd6d/OcDnl99gb/style.css" rel="stylesheet" type="text/css"/>
  98. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  99. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
  100. <link href='https://fonts.googleapis.com/css?family=Calibri:400,700,400italic,700italic' rel="stylesheet" type='text/css'>
  101. <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
  102.  
  103.  
  104.  
  105. <style type="text/css">
  106.  
  107. @font-face
  108. { font-family: "calibri"; src: url('https://www.dropbox.com/s/6mmpehe5chje91r/Calibri.ttf?dl=0'); }
  109.  
  110.  
  111. ::-webkit-scrollbar {width:5px;height:5px;background:{color:Background};}
  112. ::-webkit-scrollbar-thumb {background:{color:Border};}
  113.  
  114. .tmblr-iframe--desktop-logged-in-controls, .iframe-controls--desktop, .tmblr-iframe, #tumblr_controls{-webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);opacity:0.5;}
  115.  
  116. /* General */
  117.  
  118. body {
  119. margin:0px;
  120. color:{color:Text};
  121. background:#f9f9f9;
  122. }
  123.  
  124. a:link, a:active, a:visited {text-decoration:none;}
  125. .playh,.tags{
  126. transition:0.5s ease;
  127. -o-transition:0.5s ease;
  128. -moz-transition:0.5s ease;
  129. -webkit-transition:0.5s ease;
  130. }
  131.  
  132. pre,p,blockquote,body,big,small,sub,sup,.desc,.links a{font-size:9px;}
  133. p, body, pre, em{font-family:'Open Sans',Arial,Helvetica,sans-serif;}
  134.  
  135. .desc,.cap,.txt,.ans,.au_cap,.qut,h1{
  136. font-smooth:antialiased;
  137. -webkit-font-smoothing:antialiased;
  138. -moz-osx-font-smoothing: grayscale;
  139. }
  140.  
  141. /* Credit & Pagi */
  142.  
  143. .c {position:fixed;bottom:30px;right:30px;}
  144. .cp {margin:0px 10px;}
  145. .pag a{margin:0px 5px;}
  146. .pag {position:relative;margin:0;}
  147. .c, .pag {
  148. text-align:center;
  149. letter-spacing:1px;
  150. text-transform:uppercase;
  151. }
  152.  
  153. {block:ifnotPaginate}
  154. .pag,#infscr-loading {display:none!important;}
  155. {/block:ifnotPaginate}
  156.  
  157. /* Sizing Backups */
  158.  
  159. .header,.bx,.cap,.chat,.audio,.au_cap,.qut_hold,.ask_hold,.ans {
  160. background:{color:Post};
  161. {block:ifBorder}border:1px solid {color:Border};{/block:ifBorder}
  162. }
  163.  
  164. .bx,.chat {
  165. padding:{text:Padding}px;
  166. }
  167.  
  168. #center {
  169. min-width:calc(200px + ({text:Padding}px * 2) {block:ifBorder} + 2px{/block:ifBorder});
  170. width:calc(350px + ({text:Padding}px * 2) {block:ifBorder} + 2px{/block:ifBorder});
  171. max-width:calc(750px + ({text:Padding}px * 2) {block:ifBorder} + 2px{/block:ifBorder});
  172. }
  173.  
  174. /* Containers */
  175.  
  176. #center {
  177. position:relative;
  178. margin:{text:Margin}px auto;
  179. width:calc({text:Post}px + ({text:Padding}px * 2) {block:ifBorder} + 2px{/block:ifBorder});
  180. margin-right:310px;
  181. }
  182.  
  183. .entry img {max-width:100%;height:auto;}
  184. .entry {
  185. -webkit-filter:grayscale(100%);
  186. filter: grayscale(100%);
  187. margin:{text:Margin}px 0px;
  188. }
  189.  
  190. /* Sidebar */
  191.  
  192. .desc,.lb {border-top:1px solid {color:Border};}
  193. .image img{width:100%;height:40px;}
  194. .image {
  195. padding:{text:Padding}px;
  196. float:left;
  197. width:40px;
  198. border-right:1px solid {color:Border};
  199. }
  200.  
  201. .desc{padding:13px;}
  202.  
  203. .links {
  204. padding:0 9px;
  205. padding-top:calc(6px + {text:Padding}px);
  206. padding-bottom:calc(6px + {text:Padding}px);
  207. height:28px;
  208. overflow:hidden;
  209. }
  210.  
  211. .links,.lb {text-align:{select:Header Align};}
  212. .lb {display:none;padding:7px 9px;}
  213. .links a,.lb a {display:inline-block;margin:2px 0;}
  214. .links a:last-of-type:after,.lb a:last-of-type:after {display:none;}
  215. .links a:after,.lb a:after {
  216. content:' :';
  217. color:{color:Text};
  218. margin:0px 3px 0px 4px;
  219. }
  220.  
  221. h1 {
  222. margin:0px;
  223. font-size:10px;
  224. letter-spacing:1px;
  225. font-style:italic;
  226. text-transform:uppercase;
  227. font-weight:400;
  228. }
  229.  
  230. /* Titles */
  231.  
  232. h2 {
  233. margin:15px 15px 0px;
  234. font-size:10px;
  235. letter-spacing:2px;
  236. font-style:italic;
  237. text-transform:uppercase;
  238. font-weight:400;
  239. }
  240.  
  241. h3 {
  242. margin:10px 0px;
  243. font-weight:400;
  244. font-size:9px;
  245. }
  246.  
  247. .src {margin:5px;}
  248. .qut {margin:10px 5px 5px;font-size:10px;letter-spacing:0.25px;}
  249. .qut_hold {padding:15px;}
  250.  
  251. /* Permalinks */
  252.  
  253. .p {padding:10px 7px;text-align:{select:Permalink Align};}
  254. .p a{
  255. display:inline-block;
  256. margin:0px 3px;
  257. font-size:8px;
  258. letter-spacing:0.75px;
  259. text-transform:uppercase;
  260. }
  261.  
  262. .p b{margin:0px 2px;font-weight:400;}
  263. .entry:hover .thover{opacity:1;}
  264. .tshow,.thover{display:block;position:relative;}
  265. .thide {display:none;}
  266. .thover {opacity:0;}
  267. .tags {margin-top:3px;}
  268. .tags a{text-transform:none;letter-spacing:0.3px;font-size:8.5px;}
  269.  
  270. /* Audio & Chat */
  271.  
  272. .lines {padding:10px;border-top:1px solid {color:Border};}
  273. .lines:first-child,.chat h2{border:none;}
  274. .lines b{display:block;font-weight:400;}
  275.  
  276. .play {
  277. float:left;
  278. padding:10px;
  279. background:#e4e4e4;
  280. margin-right:15px;
  281. height:27px;
  282. border-radius:50%;
  283. }
  284.  
  285. .soundcloud_audio_player{padding:10px;}
  286. .audio {height:47px;padding:10px;}
  287. .au {padding:3px 0px;}
  288. .au span{display:block;margin:5px 0px;}
  289. .tumblr_audio_player {width:27px;height:27px;overflow:hidden;}
  290.  
  291. /* Text */
  292.  
  293. ol, ul {padding:0px 0px 0px 25px;}
  294. p {margin:10px 0px;}
  295. b,strong {font-weight:600;}
  296. blockquote p{margin:10px 0px;}
  297. blockquote p:first-child{margin:0px 0px 10px;}
  298. blockquote p:last-child{margin:10px 0px 0px;}
  299. blockquote p:only-child{margin:0px;}
  300. blockquote{margin:10px 0px;border-left:1px solid {color:Border};padding-left:10px;}
  301.  
  302. pre {
  303. margin:0px;
  304. white-space:pre-wrap;
  305. white-space:-moz-pre-wrap;
  306. white-space:-pre-wrap;
  307. white-space:-o-pre-wrap;
  308. word-wrap:break-word;
  309. }
  310.  
  311. /* Captions */
  312.  
  313. .cap,.ans,.au_cap,.txt {padding:5px 15px;}
  314. .cap,.ans,.au_cap {margin-top:7px;}
  315. .cap iframe,.ans iframe,.au_cap iframe{display:block;max-width:100%;overflow:hidden;}
  316.  
  317. /* Photosets */
  318.  
  319. #tumblr_lightbox,.tmblr-lightbox {
  320. background:rgba({RGBcolor:Background},0.75)!important;
  321. }
  322.  
  323. #vignette,#tumblr_lightbox_caption,.vignette,.lightbox-caption{
  324. opacity:0!important;
  325. }
  326.  
  327. #tumblr_lightbox_center_image, #tumblr_lightbox_left_image,
  328. #tumblr_lightbox_right_image, .lightbox-image {
  329. box-shadow:none!important;
  330. border-radius:0px!important;
  331. background:{color:Post}!important;
  332. padding:{text:Padding}px!important;
  333. {block:ifBorder}border:1px solid {color:Border}!important;{/block:ifBorder}
  334. }
  335.  
  336. /* Ask */
  337.  
  338. .aske h2 {margin:0px;padding:0px;line-height:30px;}
  339. .ask {padding:12px;font-style:italic; color;#000;}
  340. .aske {height:29px;border-bottom:1px solid {color:Border};}
  341. .ap img{
  342. float:left;
  343. width:25px;
  344. padding:2px;
  345. margin-right:10px;
  346. border-right:1px solid {color:Border};
  347. }
  348.  
  349. /* Permalink Page + Postnotes */
  350.  
  351. .pph {text-transform:lowercase;}
  352. .perma {
  353. padding:15px;
  354. border-bottom:1px solid {color:Border};
  355. }
  356.  
  357. .pmt a:after {content:',';}
  358. .pmt a:last-of-type:after {content:'.';}
  359. .pn ul,.pn ol {margin:0px;}
  360. .pn li{margin:10px 5px;}
  361. .pn,.pn img{display:none;}
  362. .pn {padding:5px 10px;border-top:1px solid {color:Border};font-size:8.5px;}
  363. .pnh{display:block;padding:7px 8px;font-weight:600;}
  364.  
  365. /* Tooltips */
  366.  
  367. #s-m-t-tooltip{
  368. max-width:300px;
  369. margin:15px;
  370. z-index:99999999;
  371. padding:7px;
  372. word-wrap:break-word;
  373. word-break:break-all;
  374. background:#fff;
  375. font-size:7px;
  376. font-family:'Open Sans';
  377. text-transform:uppercase;
  378. color:#000;
  379. }
  380.  
  381. /* Common Styles */
  382.  
  383. .ask,p,blockquote,.lines,.pn,.qut{line-height:160%;}
  384. .perma,.tags,.cap,ul,ol,.desc{line-height:175%;}
  385. a:hover, a h2:hover{color:{color:Accent};}
  386. a,.perma,.src,.lines b,.tn,h2,.ask,ul,ol{color:{color:Link};}
  387. .lines b,.tn,.pag,.ask,h3{letter-spacing:0.3px;}
  388. h2 a i,.pag a i{margin:0px 2px;}
  389.  
  390. /* Video */
  391.  
  392. .video {overflow:hidden;}
  393. .vine-embed {margin-bottom:-3px;}
  394. .instagram-media {border-radius:0px!important;box-shadow:none!important;}
  395.  
  396. /* Etc */
  397.  
  398. .notes img {width:0px;}
  399. img {margin:0px;display:block;}
  400.  
  401. /* sb */
  402.  
  403. #botm {
  404. position:fixed;
  405. left:-155px;
  406. bottom:0px;
  407. width: 500px;
  408. color:#f4e9ed;
  409. height: 200%;
  410. -webkit-transform: rotate(13deg);
  411. -moz-transform: rotate(13deg);
  412. -o-transform: rotate(13deg);
  413. background:#fdfdfd;
  414. }
  415.  
  416.  
  417.  
  418. #botm2 {
  419. position: fixed;
  420. top: 0px;
  421. left: 0px;
  422. width: 100%;
  423. height: 5px;
  424. background-color: #fff;
  425.  
  426. }
  427.  
  428. #botm5 {
  429. position: fixed;
  430. bottom: 0px;
  431. left: 0px;
  432. width: 100%;
  433. height: 5px;
  434. background-color: #fff;
  435.  
  436. }
  437.  
  438. #botm3 {
  439. position: fixed;
  440. top: 0px;
  441. left: 0px;
  442. width: 5px;
  443. height: 100%;
  444. background-color: #fff;
  445.  
  446. }
  447.  
  448.  
  449. #botm4 {
  450. position: fixed;
  451. top: 0px;
  452. right: 0px;
  453. width: 5px;
  454. height: 100%;
  455. background-color: #fff;
  456.  
  457. }
  458.  
  459.  
  460. }
  461.  
  462. #bg {
  463. position:fixed;
  464. margin-left:245px;
  465. margin-top:194px;
  466. background:#efefef;;
  467. width:237px;
  468. height:250px;
  469. }
  470.  
  471. #pic1 {
  472. margin-left:196px;
  473. margin-top:191px;
  474. position:fixed;
  475. width:120px;
  476. height:193px;
  477. -webkit-filter:grayscale(98%);
  478. filter: grayscale(98%);
  479. z-index:2222;
  480.  
  481. }
  482.  
  483. #pic1 img {
  484. width:180px;
  485. }
  486.  
  487.  
  488. #pic2 {
  489. position:fixed;
  490. top:150px;
  491. left:120px;
  492. height:auto;
  493. background:transparent;
  494. width:340px;
  495. -webkit-filter:grayscale(93%);
  496. filter: grayscale(93%);
  497. }
  498.  
  499. #pic2 img {
  500. width:340px;
  501. }
  502.  
  503.  
  504.  
  505. #pic3 {
  506. margin-left:196px;
  507. margin-top:220px;
  508. position:fixed;
  509.  
  510. }
  511.  
  512. #pic3 img {
  513. width:26px;
  514. opacity:0.8;
  515. }
  516.  
  517. /* Circle */
  518. #hover15 {
  519. position: relative;
  520. }
  521. #hover15:before {
  522. position: absolute;
  523. top: 50%;
  524. left: 50%;
  525. z-index: 2;
  526. display: block;
  527. content: '';
  528. width: 0;
  529. height: 0;
  530. background: rgba(255,255,255,.2);
  531. border-radius: 100%;
  532. -webkit-transform: translate(-50%, -50%);
  533. transform: translate(-50%, -50%);
  534. opacity: 0;
  535. }
  536. #hover15:hover::before {
  537. -webkit-animation: circle .75s;
  538. animation: circle .75s;
  539. }
  540. @-webkit-keyframes circle {
  541. 0% {
  542. opacity: 1;
  543. }
  544. 40% {
  545. opacity: 1;
  546. }
  547. 100% {
  548. width: 150%;
  549. height: 150%;
  550. opacity: 0;
  551. }
  552. }
  553. @keyframes circle {
  554. 0% {
  555. opacity: 1;
  556. }
  557. 40% {
  558. opacity: 1;
  559. }
  560. 100% {
  561. width: 150%;
  562. height: 150%;
  563. opacity: 0;
  564. }
  565. }
  566.  
  567.  
  568.  
  569. #descer {
  570. margin-left:315px;
  571. margin-top:276px;
  572. text-align: justify;
  573. position: fixed;
  574. z-index: 9;
  575. background-color: #fff;
  576. width: 110px;
  577. letter-spacing:0.1px;
  578. height: 74px;
  579. z-index:8;
  580.  
  581. color:black;
  582. padding: 9px;
  583. padding-left:10px;
  584. font-family:'Open Sans';
  585. text-transform: uppercase;
  586. font-size: 6.6px;
  587. }
  588.  
  589.  
  590.  
  591.  
  592. #lnks {
  593. position:fixed;
  594. margin-top:292px;
  595. margin-left:495px;
  596.  
  597. }
  598.  
  599. #lnks a {
  600. display: inline-block;
  601. background: #fff;color: #aaa;
  602. -webkit-transition: all 0.4s ease-out;
  603. -moz-transition: all 0.4s ease-out;
  604. color:#000;
  605. text-transform:uppercase;
  606. font-size:6.6px;
  607. font-family:'Open Sans';
  608. padding:5px;
  609. width:30px;
  610. line-height:120%;
  611. font-weight:normal;
  612. height:6px;
  613. line-height:8px;
  614. text-align:right;
  615. margin-left:-1px;
  616. }
  617.  
  618. #lnks a:hover {
  619. color:#fff;
  620. background:transparent;
  621.  
  622.  
  623. }
  624.  
  625. #lnks2 {
  626. position:fixed;
  627. margin-top:311px;
  628. margin-left:495px;
  629. }
  630.  
  631. #lnks2 a {
  632. display: inline-block;
  633. background: #fff;color: #aaa;
  634. -webkit-transition: all 0.4s ease-out;
  635. -moz-transition: all 0.4s ease-out;
  636. color:#000;
  637. text-transform:uppercase;
  638. font-size:6.6px;
  639. font-family:'Open Sans';
  640. padding:5px;
  641. width:30px;
  642. line-height:8px;
  643. font-weight:normal;
  644. height:6px;
  645. text-align:center;
  646. margin-left:-1px;
  647.  
  648. }
  649.  
  650. #lnks2 a:hover {
  651. color:#fff;
  652. background:transparent;
  653.  
  654.  
  655. }
  656.  
  657. #lnks3 {
  658. position:fixed;
  659. margin-top:330px;
  660. margin-left:495px;
  661. }
  662.  
  663. #lnks3 a {
  664. display: inline-block;
  665. background: #fff;color: #aaa;
  666. -webkit-transition: all 0.4s ease-out;
  667. -moz-transition: all 0.4s ease-out;
  668. color:#000;
  669. text-transform:uppercase;
  670. font-size:6.6px;
  671. font-family:'Open Sans';
  672. padding:5px;
  673. width:30px;
  674. line-height:8px;
  675. font-weight:normal;
  676. height:6px;
  677. text-align:center;
  678. margin-left:-1px;
  679.  
  680. }
  681.  
  682. #lnks3 a:hover {
  683. color:#fff;
  684. background:transparent;
  685.  
  686. }
  687.  
  688.  
  689. #lnks4{
  690. position:fixed;
  691. margin-top:349px;
  692. margin-left:495px;
  693. }
  694.  
  695. #lnks4 a {
  696. display: inline-block;
  697. background: #fff;color: #aaa;
  698. -webkit-transition: all 0.4s ease-out;
  699. -moz-transition: all 0.4s ease-out;
  700. color:#000;
  701. text-transform:uppercase;
  702. font-size:6.6px;
  703. font-family:'Open Sans';
  704. padding:5px;
  705. width:30px;
  706. line-height:8px;
  707. font-weight:normal;
  708. height:6px;
  709. text-align:center;
  710. margin-left:-1px;
  711.  
  712. }
  713.  
  714. #lnks4 a:hover {
  715. color:#fff;
  716. background:transparent;
  717.  
  718. }
  719.  
  720. #lnks5{
  721. position:fixed;
  722. margin-top:352px;
  723. margin-left:588px;
  724. }
  725.  
  726. #lnks5 a {
  727. display: inline-block;
  728. background: #fff;color: #aaa;
  729. -webkit-transition: all 0.4s ease-out;
  730. -moz-transition: all 0.4s ease-out;
  731. color:#000;
  732. text-transform:uppercase;
  733. font-size:6.6px;
  734. font-family:'Open Sans';
  735. padding:5px;
  736. width:72px;
  737. line-height:8px;
  738. font-weight:normal;
  739. height:6px;
  740. text-align:right;
  741. margin-left:-1px;
  742.  
  743. }
  744.  
  745. #lnks5 a:hover {
  746. color:#fff;
  747. background:transparent;
  748.  
  749. }
  750.  
  751. /* Bounce To Right */
  752. .hvr-bounce-to-right {
  753. display: inline-block;
  754. vertical-align: middle;
  755. -webkit-transform: translateZ(0);
  756. transform: translateZ(0);
  757. box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  758. -webkit-backface-visibility: hidden;
  759. backface-visibility: hidden;
  760. -moz-osx-font-smoothing: grayscale;
  761. position: relative;
  762. -webkit-transition-property: color;
  763. transition-property: color;
  764. -webkit-transition-duration: 0.5s;
  765. transition-duration: 0.5s;
  766. color:#fff;
  767.  
  768. }
  769. .hvr-bounce-to-right:before {
  770. content: "";
  771. position: absolute;
  772. z-index: -1;
  773. top: 0;
  774. left: 0;
  775. right: 0;
  776. bottom: 0;
  777. color:#fff;
  778. background: #000; /* Old browsers */
  779. -webkit-transform-origin: 0 50%;
  780. transform-origin: 0 50%;
  781. -webkit-transition-property: transform;
  782. transition-property: transform;
  783. -webkit-transition-duration: 0.5s;
  784. transition-duration: 0.5s;
  785. -webkit-transition-timing-function: ease-out;
  786. transition-timing-function: ease-out;
  787. }
  788. .hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active {
  789. color: white;
  790. }
  791. .hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before {
  792. -webkit-transform: scaleX(1);
  793. transform: scaleX(1);
  794. }
  795.  
  796. #lne1 {
  797. position:fixed;
  798. margin-top:406px;
  799. margin-left:374px;
  800. z-index:88;
  801. background-color: #fff;
  802. width: 3px;
  803. letter-spacing:0.2px;
  804. height: 24px;
  805. color: #000;
  806. padding: 5px;
  807. font-family:'Open Sans';
  808. line-height:4px;
  809. text-transform: uppercase;
  810. font-size: 6.5px;
  811. }
  812.  
  813. #lne2 {
  814. position:fixed;
  815. margin-top:406px;
  816. margin-left:390px;
  817. z-index:88;
  818. background-color: #fff;
  819. width: 3px;
  820. letter-spacing:0.2px;
  821. height: 24px;
  822. color: #000;
  823. padding: 5px;
  824. font-family:'Open Sans';
  825. line-height:4px;
  826. text-transform: uppercase;
  827. font-size: 6.5px;
  828. }
  829.  
  830. #lne3 {
  831. position:fixed;
  832. margin-top:406px;
  833. margin-left:406px;
  834. z-index:88;
  835. background-color: #fff;
  836. width: 3px;
  837. letter-spacing:0.2px;
  838. height: 24px;
  839. color: #000;
  840. padding: 5px;
  841. font-family:'Open Sans';
  842. line-height:4px;
  843. text-transform: uppercase;
  844. font-size: 6.5px;
  845. }
  846.  
  847. #lne4 {
  848. position:fixed;
  849. margin-top:406px;
  850. margin-left:422px;
  851. z-index:88;
  852. background-color: #fff;
  853. width: 3px;
  854. letter-spacing:0.2px;
  855. height: 24px;
  856. color: #000;
  857. padding: 5px;
  858. font-family:'Open Sans';
  859. line-height:4px;
  860. text-transform: uppercase;
  861. font-size: 6.5px;
  862. }
  863. }
  864.  
  865.  
  866. #linez {
  867. margin-left:253px;
  868. margin-top:190px;
  869. text-align: justify;
  870. position: fixed;
  871. z-index:88;
  872. background-color: #fff;
  873. width: 133px;
  874. letter-spacing:0.2px;
  875. height: 1px;
  876. color: #000;
  877. padding: 5px;
  878. font-family:'Open Sans';
  879. line-height:4px;
  880. text-transform: uppercase;
  881. font-size: 6.5px;
  882. }
  883.  
  884. #line1 {
  885. margin-left:291px;
  886. margin-top:212px;
  887. text-align: justify;
  888. position: fixed;
  889. z-index: 9;
  890. background-color: #fff;
  891. width: 32px;
  892. letter-spacing:0.4px;
  893. height: 60px;
  894. padding-right:16px;
  895. color: #888888;
  896. z-index:8;
  897. font-family:calibri;
  898. line-height:3px;
  899. text-transform: uppercase;
  900. font-size: 7px;
  901. }
  902.  
  903. #descer2 {
  904. margin-left:315px;
  905. margin-top:292px;
  906. text-align: justify;
  907. position: fixed;
  908. z-index: 8;
  909. background-color: #fff;
  910. width:138px;
  911. height:44px;
  912. letter-spacing:0.2px;
  913. color: #000;
  914. padding: 8px;
  915. padding-left:30px;
  916. font-family:'Open Sans';
  917. text-transform: uppercase;
  918. font-size: 6.6px;
  919. }
  920.  
  921. #descer3 {
  922. margin-left:472px;
  923. margin-top:212px;
  924. text-align: justify;
  925. position: fixed;
  926. z-index: 8;
  927. background-color: #fff;
  928. width: 41px;
  929. letter-spacing:0.2px;
  930. height: 44px;
  931. color: #000;
  932. padding: 8px;
  933. font-family:'Open Sans';
  934. text-transform: uppercase;
  935. font-size: 6.6px;
  936. }
  937.  
  938. #descer3 img {
  939. opacity:0.76;
  940. -webkit-filter:grayscale(75%);
  941. filter: grayscale(75%);
  942. }
  943. #descer3 a {
  944. color:#000;
  945. }
  946. #line3 {
  947. margin-left:215px;
  948. margin-top:416px;
  949. text-align: justify;
  950. position: fixed;
  951. padding:6px;
  952. background-color: #fff;
  953. width: 458px;
  954. font-weight:bold;
  955. letter-spacing:0.4px;
  956. LINE-HEIGHT:5px;
  957. height: 7px;
  958. color: #888888;
  959. font-family:calibri;
  960. text-transform: uppercase;
  961. font-size: 7px;
  962. }
  963.  
  964. #line4 {
  965. margin-left:215px;
  966. margin-top:436px;
  967. text-align: justify;
  968. position: fixed;
  969. padding:2px;
  970. background-color: #fff;
  971. width: 466px;
  972. font-weight:bold;
  973. letter-spacing:0.4px;
  974. LINE-HEIGHT:5px;
  975. height: 0px;
  976. color: #888888;
  977. font-family:calibri;
  978. text-transform: uppercase;
  979. font-size: 7px;
  980. }
  981.  
  982. #ifnt{
  983. margin-top:368px;
  984. text-align: right;
  985. position: fixed;
  986. z-index: 9;
  987. margin-left:315px;
  988. background:#fff;
  989. letter-spacing:0.4px;
  990. padding:9px;
  991. padding-left:40px;
  992. width: 171px;
  993. line-height: 5px;
  994. height: 5px;
  995. color: #000;
  996. font-family:'Open Sans';
  997. text-transform: uppercase;
  998. font-size: 7px;
  999. -webkit-filter:grayscale(100%);
  1000. filter: grayscale(100%);
  1001. }
  1002.  
  1003. #ifnt a {
  1004. color:#000;
  1005. }
  1006.  
  1007. #ifnty a {
  1008. margin-left:459px;
  1009. margin-top:390px;
  1010. text-align: justify;
  1011. position: fixed;
  1012. padding-left:200px;
  1013. z-index: 999999;
  1014. background:transparent;
  1015. width: 33px;
  1016. letter-spacing:0.4px;
  1017. padding:3px;
  1018. height: 37px;
  1019. color: #888888;
  1020. font-family:calibri;
  1021. -webkit-filter:grayscale(90%);
  1022. filter: grayscale(85%);
  1023. text-transform: uppercase;
  1024. font-size: 7px;
  1025. }
  1026.  
  1027. #statss{
  1028. margin-top:442px;
  1029. position: fixed;
  1030. font-weight:400em;
  1031. z-index: 9;
  1032. padding-bottom:6px;
  1033. margin-left:459px;
  1034. background:#fff;
  1035. width: 33px;
  1036. letter-spacing:0.4px;
  1037. border:4px solid #fff;
  1038. text-align:center;
  1039. line-height:3px;
  1040. padding:3px;
  1041. font-family:'Open Sans';
  1042. height: 1px;
  1043. color: #000;
  1044. font-size:6.6px;
  1045. text-transform: uppercase;
  1046. -webkit-filter:grayscale(100%);
  1047. filter: grayscale(100%);
  1048. }
  1049.  
  1050.  
  1051. #statz a {
  1052. color:#000;
  1053. }
  1054.  
  1055. #squirt {
  1056. margin-left:455px;
  1057. margin-top:373px;
  1058. text-align: center;
  1059. border-radius:0px 0px 0px 0px;
  1060. position: fixed;
  1061. z-index: 9;
  1062. background-color: #fff;
  1063. width: 9px;
  1064. padding:8px;
  1065. line-height:5px;
  1066. font-size:6.6px;
  1067. height: 3px;
  1068. color: #000;
  1069. font-family:'Open Sans';
  1070. text-transform: uppercase;
  1071. font-size: 9px;
  1072. }
  1073.  
  1074. #squirty {
  1075. margin-left:235px;
  1076. margin-top:290px;
  1077. text-align: center;
  1078. position: fixed;
  1079. z-index: 8888;
  1080. background-color:transparent;
  1081. width: 9px;
  1082. padding:8px;
  1083. line-height:5px;
  1084. font-size:6.6px;
  1085. opacity:1;
  1086. height: 3px;
  1087. color: #fff;
  1088. font-family:'Open Sans';
  1089. text-transform: uppercase;
  1090. font-size: 9px;
  1091.  
  1092. }
  1093.  
  1094. #squirty a {
  1095. color:#000;
  1096. }
  1097.  
  1098. #descer4bg {
  1099. margin-left:590px;
  1100. margin-top:181px;
  1101. text-align: justify;
  1102. position: fixed;
  1103. padding-left:180px;
  1104. z-index: -9;
  1105. background-color: #fff;
  1106. width: 34px;
  1107. letter-spacing:0.4px;
  1108. padding:8px;
  1109. height: 98px;
  1110. color: #888888;
  1111. font-family:calibri;
  1112. text-transform: uppercase;
  1113. font-size: 7px;
  1114. }
  1115.  
  1116. #count {
  1117. margin-left:253px;
  1118. margin-top:392px;
  1119. position: fixed;
  1120. text-align:left;
  1121. z-index: 9;
  1122. background-color: #fff;
  1123. width: 69px;
  1124. line-height:6px;
  1125. letter-spacing:0.4px;
  1126. padding:8px;
  1127. border-radius: 0px 0px 0px 10px;
  1128. height: 0px;
  1129. color: #888888;
  1130. font-family:calibri;
  1131. text-transform: uppercase;
  1132. font-size: 7px;
  1133. -webkit-filter:grayscale(85%);
  1134. filter: grayscale(85%);
  1135.  
  1136. }
  1137.  
  1138. #descer5 img{
  1139. position:fixed;
  1140. margin-left:263px;
  1141. margin-top:139px;
  1142. z-index:88888;
  1143. width:60px;
  1144. }
  1145.  
  1146. #descer52 img{
  1147. margin-left:314px;
  1148. margin-top:310px;
  1149. text-align: justify;
  1150. position: fixed;
  1151. z-index: 9;
  1152. background-color: #fff;
  1153. width: 52px;
  1154. letter-spacing:0.4px;
  1155. padding:4px;
  1156. height: 73px;
  1157. color: #888888;
  1158. font-family:calibri;
  1159. text-transform: uppercase;
  1160. font-size: 7px;
  1161. -webkit-filter:grayscale(85%);
  1162. filter: grayscale(85%);
  1163.  
  1164. }
  1165.  
  1166. #descer52a a{
  1167. margin-left:314px;
  1168. margin-top:310px;
  1169. text-align: justify;
  1170. position: fixed;
  1171. z-index: 99999;
  1172. background-color: transparent;
  1173. width: 52px;
  1174. letter-spacing:0.4px;
  1175. padding:4px;
  1176. height: 50px;
  1177. color: #888888;
  1178. font-family:calibri;
  1179. text-transform: uppercase;
  1180. font-size: 7px;
  1181. -webkit-filter:grayscale(85%);
  1182. filter: grayscale(85%);
  1183.  
  1184. }
  1185.  
  1186. #descer53 img{
  1187. margin-left:375px;
  1188. margin-top:310px;
  1189. text-align: justify;
  1190. position: fixed;
  1191. z-index: 9;
  1192. background-color: #fff;
  1193. width: 52px;
  1194. letter-spacing:0.4px;
  1195. padding:4px;
  1196. height: 73px;
  1197. color: #888888;
  1198. font-family:calibri;
  1199. text-transform: uppercase;
  1200. font-size: 7px;
  1201. -webkit-filter:grayscale(85%);
  1202. filter: grayscale(85%);
  1203.  
  1204. }
  1205.  
  1206.  
  1207. #search {
  1208. margin-left:550px;
  1209. margin-top:286px;
  1210. text-align: right;
  1211. position: fixed;
  1212. z-index: 9;
  1213. background-color: #fff;
  1214. width: 35px;
  1215. line-height:7px;
  1216. letter-spacing:0.4px;
  1217. padding:8px;
  1218. height: 4px;
  1219. color: #888888;
  1220. font-family:calibri;
  1221. text-transform: uppercase;
  1222. font-size: 7px;
  1223. }
  1224.  
  1225. #descer6{
  1226. margin-left:388px;
  1227. margin-top:268px;
  1228. text-align: right;
  1229. position: fixed;
  1230. padding-left:200px;
  1231. z-index: 9;
  1232. background-color: #fff;
  1233. width: 143px;
  1234. letter-spacing:0.4px;
  1235. padding:2px;
  1236. height: 33px;
  1237. line-height:2px;
  1238. color: #888888;
  1239. font-family:calibri;
  1240. text-transform: uppercase;
  1241. font-size: 7px;
  1242. }
  1243.  
  1244. #descer6bg {
  1245. margin-left:500px;
  1246. margin-top:307px;
  1247. text-align: justify;
  1248. position: fixed;
  1249. padding-left:200px;
  1250. z-index: 9;
  1251. background-color: #fff;
  1252. width: 140px;
  1253. letter-spacing:0.4px;
  1254. padding:8px;
  1255. height: 79px;
  1256. color: #888888;
  1257. font-family:calibri;
  1258. text-transform: uppercase;
  1259. font-size: 7px;
  1260. }
  1261.  
  1262.  
  1263. .musicplayer{
  1264. position:fixed;
  1265. margin-left:455px;
  1266. margin-top:371px;
  1267. overflow:hidden;
  1268. width:17px;
  1269. height:11px;
  1270. padding:4px;
  1271. z-index:8888;
  1272. background:transparent; /* This is the background color */
  1273. opacity:1;
  1274. -webkit-transition: all 1s ease-in-out;
  1275. -moz-transition: all 1s ease-in-out;
  1276. transition: all 1s ease-in-out;
  1277. }
  1278.  
  1279. #icon{
  1280. /* This is for the positioning of the music gif: */
  1281. margin-top:3px;
  1282. margin-left:4px;
  1283. font-size:7.8px;
  1284. opacity:0.8;
  1285. -webkit-transition: all 0.5s linear;
  1286. -moz-transition: all 0.5s linear;
  1287. transition: all 0.5s linear;
  1288. }
  1289.  
  1290. .musicplayer:hover #icon{
  1291. margin-top:-20px;
  1292. -webkit-transition: all 0.5s linear;
  1293. -moz-transition: all 0.5s linear;
  1294. transition: all 0.5s linear;
  1295. }
  1296.  
  1297. #musicbox{
  1298. width:13px;
  1299. height:13px;
  1300. border-radius:0em;
  1301. overflow:hidden;
  1302. z-index:99999999;
  1303. /* This is for the positioning of the music player: */
  1304. margin-top:15px;
  1305. margin-left:8px;
  1306. }
  1307.  
  1308. #music2{
  1309. margin-top:-6px;
  1310. margin-left:-35px;
  1311. z-index:99999999;
  1312. border-radius:0em;
  1313. }
  1314.  
  1315.  
  1316. #marq {
  1317. position:fixed;
  1318. margin-top:355px;
  1319. margin-left:315px;
  1320. padding:5px;
  1321. padding-left:30px;
  1322. opacity:1;
  1323. line-height:5px;
  1324. font-size:6.6px;
  1325. text-align:left;
  1326. background:#fff;
  1327. font-family:'Open Sans';
  1328. letter-spacing:0.4;
  1329. width:141px;
  1330. color: #000;
  1331. height:0px;
  1332. z-index:8;
  1333. text-transform:uppercase;
  1334. }
  1335.  
  1336.  
  1337. #right1{
  1338. padding:9px;
  1339. width:120px;
  1340. height:120px;
  1341. background-color:#151616;
  1342. border:6px solid #fff;
  1343. background-size:cover;
  1344. z-index:999;
  1345. background-repeat:no-repeat;
  1346. margin-left:540px;
  1347. position:fixed;
  1348. margin-top:130px;
  1349. -webkit-filter:grayscale(90%);
  1350. filter: grayscale(85%);
  1351. TEXT-ALIGN:justify;
  1352. font-size:7px;
  1353. font-family:arial;
  1354. -webkit-border-radius: 200px;
  1355. -moz-border-radius: 200px;
  1356. border-radius: 200px;
  1357. background:url('http://i.imgur.com/xePZDZY.png');
  1358. -webkit-animation-name: fade-in;
  1359. -webkit-animation-duration: 1.5s;
  1360.  
  1361.  
  1362. }
  1363. #right1:hover {
  1364. -webkit-animation: swing 1s ease;
  1365. animation: swing 1s ease;
  1366. -webkit-animation-iteration-count: 1;
  1367. animation-iteration-count: 1;
  1368.  
  1369. }
  1370.  
  1371. @-webkit-keyframes swing
  1372. {
  1373. 15%
  1374. {
  1375. -webkit-transform: translateX(5px);
  1376. transform: translateX(5px);
  1377. }
  1378. 30%
  1379. {
  1380. -webkit-transform: translateX(-5px);
  1381. transform: translateX(-5px);
  1382. }
  1383. 50%
  1384. {
  1385. -webkit-transform: translateX(3px);
  1386. transform: translateX(3px);
  1387. }
  1388. 65%
  1389. {
  1390. -webkit-transform: translateX(-3px);
  1391. transform: translateX(-3px);
  1392. }
  1393. 80%
  1394. {
  1395. -webkit-transform: translateX(2px);
  1396. transform: translateX(2px);
  1397. }
  1398. 100%
  1399. {
  1400. -webkit-transform: translateX(0);
  1401. transform: translateX(0);
  1402. }
  1403. }
  1404. @keyframes swing
  1405. {
  1406. 15%
  1407. {
  1408. -webkit-transform: translateX(5px);
  1409. transform: translateX(5px);
  1410. }
  1411. 30%
  1412. {
  1413. -webkit-transform: translateX(-5px);
  1414. transform: translateX(-5px);
  1415. }
  1416. 50%
  1417. {
  1418. -webkit-transform: translateX(3px);
  1419. transform: translateX(3px);
  1420. }
  1421. 65%
  1422. {
  1423. -webkit-transform: translateX(-3px);
  1424. transform: translateX(-3px);
  1425. }
  1426. 80%
  1427. {
  1428. -webkit-transform: translateX(2px);
  1429. transform: translateX(2px);
  1430. }
  1431. 100%
  1432. {
  1433. -webkit-transform: translateX(0);
  1434. transform: translateX(0);
  1435. }
  1436. }
  1437.  
  1438.  
  1439. #statz {
  1440. margin-left:286px;
  1441. margin-top:401px;
  1442. text-align: justify;
  1443. position: fixed;
  1444. z-index: 999;
  1445. background:#fff;
  1446. line-height:4px;
  1447. width: 85px;
  1448. letter-spacing:0.4px;
  1449. padding:8px;
  1450. opacity:1;
  1451. height: 3px;
  1452. color: #888888;
  1453. font-family:calibri;
  1454. -webkit-filter:grayscale(85%);
  1455. filter: grayscale(85%);
  1456. text-transform: uppercase;
  1457. font-size: 6.7px;
  1458. }
  1459.  
  1460.  
  1461.  
  1462. .popup_block{
  1463. display: none;
  1464. background: #fff;
  1465. padding: 5px;
  1466. text-transform:uppercase;
  1467. font-size:8px;
  1468. position: fixed;
  1469. left:443px;
  1470. text-align:center;
  1471. height:13px;
  1472. bottom:141px;
  1473. color:#000;
  1474. z-index: 8888888888888888888888888;
  1475. -webkit-animation: fadeInDown·2s;
  1476. -moz-animation: fadeInDown 2s;
  1477. -ms-animation: fadeInDown 2s;
  1478. -o-animation: fadeInDown 2s;
  1479. animation: fadeInDown 2s;
  1480.  
  1481. }
  1482.  
  1483.  
  1484. .popup_block2{
  1485. display: none;
  1486. background:#fff;
  1487. padding: 5px;
  1488. text-transform:uppercase;
  1489. font-size:6.6px;
  1490. position: fixed;
  1491. left:194px;
  1492. text-align:center;
  1493. height:13px;
  1494. bottom:141px;
  1495. color:#000;
  1496. z-index: 8888888888888888888888888;
  1497. -webkit-animation: fadeInDown·2s;
  1498. -moz-animation: fadeInDown 2s;
  1499. -ms-animation: fadeInDown 2s;
  1500. -o-animation: fadeInDown 2s;
  1501. animation: fadeInDown 2s;
  1502.  
  1503. }
  1504.  
  1505. .popup_block a {
  1506. color:#6a6462;
  1507. }
  1508.  
  1509. #fade {
  1510. display:none;
  1511. position:fixed;
  1512. left:0px;
  1513. top:0px;
  1514. width:100%;
  1515. height:100%;
  1516. z-index:99999;
  1517. background:transparent; ; /* change to #fff for solid white */
  1518. opacity:1; /* change to opacity:1; */
  1519. }
  1520.  
  1521. .pulse2 {
  1522. -webkit-animation: pulse2 1s linear infinite;
  1523. -moz-animation: pulse2 1s linear infinite;
  1524. -ms-animation: pulse2 1s linear infinite;
  1525. animation: pulse2 1s linear infinite;
  1526. }
  1527.  
  1528. @keyframes "pulse2" {
  1529. 0% {
  1530. -webkit-transform: scale(1.1);
  1531. -moz-transform: scale(1.1);
  1532. -o-transform: scale(1.1);
  1533. -ms-transform: scale(1.1);
  1534. transform: scale(1.1);
  1535. }
  1536. 50% {
  1537. -webkit-transform: scale(0.8);
  1538. -moz-transform: scale(0.8);
  1539. -o-transform: scale(0.8);
  1540. -ms-transform: scale(0.8);
  1541. transform: scale(0.8);
  1542. }
  1543. 100% {
  1544. -webkit-transform: scale(1);
  1545. -moz-transform: scale(1);
  1546. -o-transform: scale(1);
  1547. -ms-transform: scale(1);
  1548. transform: scale(1);
  1549. }
  1550.  
  1551. }
  1552.  
  1553. @-moz-keyframes pulse2 {
  1554. 0% {
  1555. -moz-transform: scale(1.1);
  1556. transform: scale(1.1);
  1557. }
  1558. 50% {
  1559. -moz-transform: scale(0.8);
  1560. transform: scale(0.8);
  1561. }
  1562. 100% {
  1563. -moz-transform: scale(1);
  1564. transform: scale(1);
  1565. }
  1566.  
  1567. }
  1568.  
  1569. @-webkit-keyframes "pulse2" {
  1570. 0% {
  1571. -webkit-transform: scale(1.1);
  1572. transform: scale(1.1);
  1573. }
  1574. 50% {
  1575. -webkit-transform: scale(0.8);
  1576. transform: scale(0.8);
  1577. }
  1578. 100% {
  1579. -webkit-transform: scale(1);
  1580. transform: scale(1);
  1581. }
  1582.  
  1583. }
  1584.  
  1585. @-ms-keyframes "pulse2" {
  1586. 0% {
  1587. -ms-transform: scale(1.1);
  1588. transform: scale(1.1);
  1589. }
  1590. 50% {
  1591. -ms-transform: scale(0.8);
  1592. transform: scale(0.8);
  1593. }
  1594. 100% {
  1595. -ms-transform: scale(1);
  1596. transform: scale(1);
  1597. }
  1598.  
  1599.  
  1600.  
  1601. </style>
  1602. </head>
  1603. <body>
  1604.  
  1605. <div id="pic1"><img src="http://i.imgur.com/ZWtUCXr.png"></div>
  1606. <div id="lnks"><div class="hvr-bounce-to-right"><a href="">일. home</i></a></div></div>
  1607. <div id="lnks2"><div class="hvr-bounce-to-right"><a href="/ask">이. ask</a></div></div>
  1608. <div id="lnks3"><div class="hvr-bounce-to-right"><a href="/synopsis.">삼. info</a></div></div>
  1609. <div id="lnks4"><div class="hvr-bounce-to-right"><a href="/etc.">사. more</a></div></div>
  1610. <div id="ifnt">ESTABLISHED JUNE 2016 // <script language="JavaScript">var fhs = document.createElement('script');var fhs_id = "5364445";
  1611. var ref = (''+document.referrer+'');var pn = window.location;var w_h = window.screen.width + " x " + window.screen.height;
  1612. fhs.src = "//s1.freehostedscripts.net/ocounter.php?site="+fhs_id+"&e1=&e2=&r="+ref+"&wh="+w_h+"&a=1&pn="+pn+"";
  1613. document.head.appendChild(fhs);document.write("<span id='o_"+fhs_id+"'></span>");
  1614. </script> OUT OF <script language="JavaScript">var fhsh = document.createElement('script');var fhs_id_h = "3177525";
  1615. fhsh.src = "//s1.freehostedscripts.net/ocount.php?site="+fhs_id_h+"&name=&a=1";
  1616. document.head.appendChild(fhsh);document.write("<span id='h_"+fhs_id_h+"'></span>");
  1617. </script></a></div></div>
  1618. <div id="squirty"><a href="#?w=auto" rel="box2" class="poplight"><div class="pulse2"><i style="color:#ffffff;" class="fa fa-heart" aria-hidden="true"></i></a></div></div>
  1619. <div id="botm2"></div>
  1620. <div id="botm3"></div>
  1621. <div id="botm4"></div>
  1622. <div id="botm5"></div>
  1623.  
  1624.  
  1625.  
  1626.  
  1627. <div id="descer2">KIM MYUNGSOO ( 김명수 )<span style="font-size:7px"> !</span> SEOUL NATIVE BORN ON THE 13TH OF MARCH. VOCALIST, VISUAL. INFINITE'S cat enthusiast AND your local anime nerd.</div>
  1628.  
  1629. <div id="marq"> </div>
  1630.  
  1631.  
  1632.  
  1633. <div id="box1" class="popup_block">
  1634. <div style="font-family:'Open Sans'; font-size:6.6px; letter-spacing:0.4px; color:#000; text-transform:uppercase; text-align:center; padding:2px;">KSG. JDW. NWH. LHW. LSY. KMS. LSJ.</div></center>
  1635.  
  1636. </div>
  1637.  
  1638. <div id="box2" class="popup_block2">
  1639. <div style="font-family:'Open Sans'; font-size:6.6px; letter-spacing:0.4px; color:#000; text-transform:uppercase; text-align:center; padding:2px;">i love <a href="http://chaeyxon.tumblr.com/">you</a>.</div>
  1640.  
  1641. </div>
  1642.  
  1643. </div></div></div></div></div></div></div></div></div></div>
  1644. <div id="center">
  1645.  
  1646.  
  1647.  
  1648. <div id="content">
  1649. {block:Posts}
  1650. <div class="entry">
  1651.  
  1652. {block:Text}
  1653. <div class="bx">
  1654. {block:Title}<h2>{Title}</h2>{/block:Title}
  1655. <div class="txt">{Body}</div>
  1656. </div>
  1657. {/block:Text}
  1658.  
  1659. {block:Link}
  1660. <div class="bx">
  1661. <h2><a title="{URL}" href="{URL}">{Name} <i class="fa fa-angle-right"></i></a></h2>
  1662. {block:Description}<div class="txt">{Description}</div>{/block:Description}
  1663. </div>
  1664. {/block:Link}
  1665.  
  1666. {block:Photo}
  1667. <div class="bx"><a href="{Permalink}"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></a></div>
  1668. {block:ifCaptions}{block:Caption}<div class="cap">{Caption}</div>{/block:Caption}{/block:ifCaptions}
  1669. {/block:Photo}
  1670.  
  1671. {block:Photoset}
  1672. <div class="bx">
  1673. <div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>
  1674. </div>
  1675. {block:ifCaptions}{block:Caption}<div class="cap">{Caption}</div>{/block:Caption}{/block:ifCaptions}
  1676. {/block:Photoset}
  1677.  
  1678. {block:Quote}
  1679. <div class="qut_hold">
  1680. {block:Source}<div class="src">{Source}</div>{/block:Source}
  1681. <div class="qut">{Quote}</div>
  1682. </div>
  1683. {/block:Quote}
  1684.  
  1685. {block:Chat}
  1686. <div class="chat">
  1687. {block:Title}<h2>{Title}</h2>{/block:Title}
  1688. {block:Lines}<div class="lines {Alt}"><div class="{Alt} user_{UserNumber}">{block:Label}<b>{Label}</b> {/block:Label}{Line}</div></div>{/block:Lines}
  1689. </div>
  1690. {/block:Chat}
  1691.  
  1692. {block:Audio}
  1693. <div class="audio">
  1694. {block:AudioPlayer}<div class="play">{AudioPlayerGrey}</div>{/block:AudioPlayer}
  1695. <div class="au">
  1696. {block:TrackName}<span class="tn">{TrackName}</span>{/block:TrackName}
  1697. {block:Artist}<span>by {Artist}</span>{/block:Artist}
  1698. </div>
  1699. </div>
  1700. {block:ifCaptions}{block:Caption}<div class="au_cap">{Caption}</div>{/block:Caption}{/block:ifCaptions}
  1701.  
  1702. {/block:Audio}
  1703.  
  1704. {block:Video}
  1705. <div class="video">{Video-500}</div>
  1706. {block:ifCaptions}{block:Caption}<div class="cap">{Caption}</div>{/block:Caption}{/block:ifCaptions}
  1707. {/block:Video}
  1708.  
  1709. {block:Answer}
  1710. <div class="ask_hold">
  1711. <div class="aske">
  1712. <div class="ap"><img src="{AskerPortraitURL-30}"></div>
  1713. <h2>{Asker}:</h2>
  1714. </div>
  1715. <div class="ask">{Question}</div>
  1716. </div>
  1717. <div class="ans">{Answer}</div>
  1718. {/block:Answer}
  1719.  
  1720. {block:IndexPage}<div class="p">
  1721. <a href="{Permalink}">{ShortDayofWeek}</a> <b>:</b>
  1722. <a href="{Permalink}">{NoteCount}</a> <b>:</b>
  1723. <a href="{ReblogURL}">reblog</a>
  1724.  
  1725. {block:HasTags}<div class="tags {select:Tags}">{block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1726. </div>{/block:IndexPage}
  1727.  
  1728.  
  1729.  
  1730. {block:PermalinkPage}
  1731. {block:Date}
  1732. <div class="pph">
  1733. <div class="perma">
  1734. posted {TimeAgo} on {DayofMonthWithSuffix} {Month}
  1735. {block:RebloggedFrom}<br>
  1736. via <a href="{ReblogParentURL}">{ReblogParentName}</a> &nbsp;&nbsp;&nbsp;
  1737. source <a href="{ReblogRootURL}">{ReblogRootName}</a>
  1738. {/block:RebloggedFrom}
  1739.  
  1740. {block:HasTags}<div class="pmt">tags: &nbsp;
  1741. {block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags}
  1742. </div>{/block:HasTags}
  1743. </div>
  1744.  
  1745. <a href="#" class="pnh">View {NoteCountWithLabel}</a>
  1746.  
  1747. {block:PostNotes}
  1748. <div class="pn">{PostNotes}</div>
  1749. {/block:PostNotes}
  1750.  
  1751. </div>
  1752. {/block:Date}
  1753. {/block:PermalinkPage}
  1754.  
  1755. {block:ContentSource}
  1756. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1757. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1758. {/block:SourceLogo}
  1759. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1760. {/block:ContentSource}
  1761.  
  1762. <!--{block:NoRebloggedFrom}{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}{/block:NoRebloggedFrom} -->
  1763.  
  1764. </div>
  1765. {/block:Posts}
  1766.  
  1767. {block:ifPaginate}
  1768. {block:Pagination}
  1769. <div class="pag">
  1770. {block:PreviousPage}
  1771. <a href="{PreviousPage}"><i class="fa fa-angle-left"></i> back</a>
  1772. {/block:PreviousPage}
  1773.  
  1774. <span class="cp">{CurrentPage} / {TotalPages}</span>
  1775.  
  1776. {block:NextPage}
  1777. <a href="{NextPage}">next <i class="fa fa-angle-right"></i></a>
  1778. {/block:NextPage}
  1779. </div>
  1780. {/block:Pagination}
  1781. {/block:ifPaginate}
  1782.  
  1783. </div>
  1784.  
  1785. {block:ifnotPaginate}
  1786. {block:Pagination}
  1787. <div class="pag">
  1788. {block:PreviousPage}
  1789. <a href="{PreviousPage}" class="prev">back</a>
  1790. {/block:PreviousPage}
  1791. {block:NextPage}
  1792. <a href="{NextPage}" class="next">next</a>
  1793. {/block:NextPage}
  1794. </div>
  1795. {/block:Pagination}
  1796. {/block:ifnotPaginate}
  1797.  
  1798. </div>
  1799.  
  1800. <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'></script>
  1801. <link href='http://static.tumblr.com/blpgwiz/Zjemijy8n/fade_in_down.css' rel='stylesheet' style='text/css'>
  1802. <script type="text/javascript" src="http://static.tumblr.com/iuggpng/bGqm4yfv9/jquery-1.7.2.js"></script>
  1803. <script type="text/javascript"
  1804. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  1805. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  1806. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1807. <script src="http://static.tumblr.com/qudkd6d/Az6nkemqr/pxuphotoset.min.js"></script>
  1808. <script src="http://static.tumblr.com/wgijwsy/u2vm2hxv6/jquery.infinitescroll.min.js"></script>
  1809. <script src ="//static.tumblr.com/fwgzvyf/l6jnyutne/shythemes.vr.js"></script>
  1810. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  1811.  
  1812. <script>
  1813. $(document).ready(function(){
  1814. $('.photo-slideshow').pxuPhotoset({
  1815. lightbox: true,
  1816. rounded: false,
  1817. gutter: '2px',
  1818. photoset: '.photo-slideshow',
  1819. photoWrap: '.photo-data',
  1820. photo: '.pxu-photo'
  1821. });
  1822. {block:ifnotPaginate}
  1823. var $container = $('#content');
  1824. $container.infinitescroll({
  1825. itemSelector: '.entry',
  1826. navSelector: '.pag',
  1827. nextSelector: '.next',
  1828. loadingImg: ' ',
  1829. loadingText: ' ',
  1830. donetext: 'No more posts' ,
  1831. bufferPx: 2000
  1832. },
  1833. function( newElements ) {
  1834. var $newElems = $( newElements );
  1835. $newElems.find('.photo-slideshow').pxuPhotoset({
  1836. lightbox: true,
  1837. rounded: false,
  1838. gutter: '2px',
  1839. photoset: '.photo-slideshow',
  1840. photoWrap: '.photo-data',
  1841. photo: '.pxu-photo'
  1842. });
  1843. resizeVideos();
  1844. });
  1845. {/block:ifnotPaginate}
  1846. });
  1847.  
  1848.  
  1849.  
  1850. // minimal soundcloud player © eoxk.tumblr
  1851. $(document).ready(function(){
  1852. var color = '{color:Link}'; // color of play button (hex)
  1853. $('.soundcloud_audio_player').each(function(){
  1854. $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=true&amp;origin=tumblr&amp;color=' + color.split('#')[1], height: 20, width: '100%' });
  1855. });
  1856. });
  1857.  
  1858.  
  1859. // drop links & post notes
  1860. $(document).ready(function(){
  1861. $(".pn").hide();
  1862. $(".pnh").show();$('.pnh').toggle(function(){
  1863. $(".pn").slideDown(function(){});
  1864. },function(){
  1865. $(".pn").slideUp(function(){});
  1866. });
  1867. $(".lb").hide();
  1868. $(".lh").show();$('.lh').toggle(function(){
  1869. $(".lb").slideDown(function(){});
  1870. },function(){
  1871. $(".lb").slideUp(function(){});
  1872. });
  1873. });
  1874.  
  1875.  
  1876. // tooltips
  1877. (function($){
  1878. $(document).ready(function(){
  1879. $("[title]").style_my_tooltips({
  1880. tip_delay_time:200,
  1881. tip_fade_speed:300
  1882. }
  1883. );
  1884. });
  1885. })(jQuery);
  1886.  
  1887. </script>
  1888. </body>
  1889. </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!