API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 4th, 2016
94
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 31.57 KB | None | 0 0
raw download clone embed print report
  1. <!-- CELEBRATION THEME BY KWOSSO
  2. DO NOT STEAL
  3. BASE CODE BY THEMESREC -->
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6.  
  7. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  8.  
  9. <head>
  10.  
  11. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  12.  
  13. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  14.  
  15. <!--FONT AWESOME-->
  16.  
  17. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  18.  
  19. <!--GOOGLE FONTS-->
  20.  
  21. <link href='https://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
  22. <link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">
  23. <link href="https://fonts.googleapis.com/css?family=Mr+Dafoe" rel="stylesheet">
  24.  
  25. <!--TOOLTIP SCRIPT-->
  26.  
  27. <script>
  28.  
  29. (function($){
  30.  
  31. $(document).ready(function(){
  32.  
  33. $("a[title]").style_my_tooltips({
  34.  
  35. tip_follows_cursor:true,
  36.  
  37. tip_delay_time:90,
  38.  
  39. tip_fade_speed:600,
  40.  
  41. attribute:"title"
  42.  
  43. });
  44.  
  45. });
  46.  
  47. })(jQuery);
  48.  
  49. </script>
  50.  
  51. <!--POPUP SCRIPT-->
  52.  
  53. <script type="text/javascript"
  54. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  55. <script>
  56. $(document).ready(function() {
  57. //
  58. //When you click on a link with class of poplight and the href starts with a #
  59. $('a.poplight[href^=#]').click(function() {
  60. var popID = $(this).attr('rel'); //Get Popup Name
  61. var popURL = $(this).attr('href'); //Get Popup href to define size
  62.  
  63. //Pull Query & Variables from href URL
  64. var query= popURL.split('?');
  65. var dim= query[1].split('&');
  66. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  67.  
  68. //Fade in the Popup and add close button
  69. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://67.media.tumblr.com/0ae55605ee6744ec7f36528613887e13/tumblr_inline_npnjybsg441ry72eo_75sq.png" class="btn_close" title="Close Window" alt="Close" /></a>');
  70.  
  71. //Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
  72. var popMargTop = ($('#' + popID).height() + 80) / 2;
  73. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  74.  
  75. //Apply Margin to Popup
  76. $('#' + popID).css({
  77. 'margin-top' : -popMargTop,
  78. 'margin-left' : -popMargLeft
  79. });
  80. //Fade in Background
  81.  
  82. $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
  83.  
  84. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
  85. return false;
  86. });
  87. //Close Popups and Fade Layer
  88.  
  89. $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
  90. $('#fade , .popup_block').fadeOut(function() {
  91. $('#fade, a.close').remove(); //fade them both out
  92. });
  93. return false;
  94. });
  95. });
  96. </script>
  97.  
  98. <title>{Title}</title>
  99. <link rel="shortcut icon" href="{Favicon}">
  100. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  101.  
  102. <meta name="color:box background" content="#fff"/>
  103. <meta name="color:background" content="#575757" />
  104. <meta name="color:post" content="#fff" />
  105. <meta name="color:text" content="#595142" />
  106. <meta name="color:link" content="@c6a5a5"/>
  107. <meta name="color:link hover" content="#fff"/>
  108. <meta name="color:bold" content="#794b4b"/>
  109. <meta name="color:italic" content="#794b4b"/>
  110. <meta name="color:text background" content="#949494"/>
  111. <meta name="color:scrollbar" content="#949494"/>
  112. <meta name="color:main link" content="#9f8181"/>
  113.  
  114. <meta name="text:sidebar render size" content="300px"/>
  115.  
  116. <meta name="text:description" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis lorem odio, at dignissim dui interdum a. Mauris condimentum dui at elit sollicitudin pretium. Sed accumsan libero justo, sit amet imperdiet felis egestas eget. Quisque pharetra ligula eget blandit sodales. Nulla tortor mi, lobortis et nibh non, hendrerit consectetur purus." />
  117. <meta name="text:quote" content="Lorem ipsum dolor sit amet, consectetur."/>
  118. <meta name="text:character first name" content="park"/>
  119. <meta name="text:character last name" content="callie"/>
  120.  
  121. <meta name="text:title a" content="let's start"/>
  122. <meta name="text:title b" content="celebration"/>
  123.  
  124. <meta name="text:fact 1" content="fact"/>
  125. <meta name="text:fact 2" content="fact"/>
  126. <meta name="text:fact 3" content="fact"/>
  127. <meta name="text:fact 4" content="fact"/>
  128.  
  129. <meta name="text:hover 1" content="hover 1"/>
  130. <meta name="text:hover 2" content="hover 2"/>
  131. <meta name="text:hover 3" content="hover 3"/>
  132. <meta name="text:hover 4" content="hover 4"/>
  133. <meta name="text:hover 5" content="hover 5"/>
  134.  
  135. <meta name="image:background" content="" />
  136. <meta name="image:muse render" content="http://static.tumblr.com/yypmtpb/mprodyvg6/celepration_01.png"/>
  137. <meta name="image:muse picture" content="http://static.tumblr.com/yypmtpb/uB1odyvgo/celepration_02.png"/>
  138. <meta name="image:sidebar render" content="http://static.tumblr.com/yypmtpb/Mm8odyvh2/celebration_03.png"/>
  139.  
  140. <meta name="text:link url" content="link url"/>
  141. <meta name="text:link name" content="link name"/>
  142.  
  143. <style type="text/css">
  144.  
  145.  
  146. .tooltip{
  147. display: inline;
  148. position: relative;
  149. }
  150. #s-m-t-tooltip {
  151. max-width:300px; /*how big the tooltip can be at most*/
  152. border-radius: 0px 50px 50px 50px; /*change your border radius*/
  153. padding:3px 4px 5px 4px; /*padding inside tooltip*/
  154. margin:20px 7px -2px 20px; /*distance from word*/
  155. background-color:{color:box background}; /*background color*/
  156. border:1px solid {color:text background}; /*border info*/
  157. font-family:arial; /*tooltip font*/
  158. font-size:8px; /*tooltip font size*/
  159. letter-spacing:1px; /*tooltip letter spacing*/
  160. text-transform:uppercase; /*makes the tooltip title uppercase*/
  161. color:#000; /*tooltip font color*/
  162. z-index:9999999999999999999999999999999999999;
  163. }
  164.  
  165. @-webkit-keyframes tada {
  166. 0% {
  167. -webkit-transform: scale3d(1, 1, 1);
  168. transform: scale3d(1, 1, 1);
  169. }
  170. 10%, 20% {
  171. -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  172. transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  173. }
  174. 30%, 50%, 70%, 90% {
  175. -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  176. transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  177. }
  178. 40%, 60%, 80% {
  179. -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  180. transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  181. }
  182. 100% {
  183. -webkit-transform: scale3d(1, 1, 1);
  184. transform: scale3d(1, 1, 1);
  185. }
  186. }
  187. @keyframes tada {
  188. 0% {
  189. -webkit-transform: scale3d(1, 1, 1);
  190. transform: scale3d(1, 1, 1);
  191. }
  192. 10%, 20% {
  193. -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  194. transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  195. }
  196. 30%, 50%, 70%, 90% {
  197. -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  198. transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  199. }
  200. 40%, 60%, 80% {
  201. -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  202. transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  203. }
  204. 100% {
  205. -webkit-transform: scale3d(1, 1, 1);
  206. transform: scale3d(1, 1, 1);
  207. }
  208. }
  209.  
  210. ::-webkit-scrollbar {width: 4px; height: 3px; background:{color:background};}
  211. ::-webkit-scrollbar-thumb {background-color:{color:scrollbar} ;}
  212.  
  213. body {
  214. background: {color:background};
  215. background-image: url('{image:background}');
  216. margin: 0;
  217. padding: 0;
  218. font-family:arial;
  219. }
  220.  
  221. a {
  222. text-decoration:none;
  223. color:{color:link};
  224. -webkit-transition: all 1s ease-in-out;
  225. -moz-transition: all 1s ease-in-out;
  226. -o-transition: all 1s ease-in-out;
  227. -ms-transition: all 1s ease-in-out;
  228. transition: all 1s ease-in-out;
  229. }
  230.  
  231. a:hover {
  232. text-decoration:none;
  233. color:{color:link hover};
  234. }
  235.  
  236. b {
  237. color:{color:bold};
  238. font-weight:bold;
  239. font-family: 'Roboto', sans-serif;
  240. text-transform:uppercase;
  241. }
  242.  
  243. i, em {
  244. color:{color:italic};
  245. font-family: 'Mr Dafoe', cursive;
  246. font-size:14px;
  247. }
  248.  
  249. h2 {
  250. font-size:20px;
  251. text-transform:uppercase;
  252. }
  253.  
  254. blockquote {
  255. margin-left:15px;
  256. max-width:385px;
  257. }
  258.  
  259. blockquote img {
  260. max-width:300px;
  261. }
  262.  
  263. blockquote blockquote {
  264. max-width:370px;
  265. }
  266.  
  267.  
  268. #container {
  269. position:relative;
  270. left:800px;
  271. top:40px;
  272. width:500px;}
  273.  
  274. #entry {
  275. font-size:10px;
  276. margin-left:0px
  277. margin-top:50px;
  278. text-align: justify;
  279. }
  280.  
  281. #post {
  282. font-size:11px;
  283. padding: 15px;
  284. margin-bottom:30px;
  285. width: 400px;
  286. background-color:{color:post};
  287. color:{color:text};
  288. text-align: justify;
  289. }
  290.  
  291. .asker {
  292. font-size:15px;
  293. text-transform:uppercase;
  294. }
  295.  
  296. .ask {
  297. font-size:11px;
  298. margin-left:10px;
  299. background:{color:post};
  300. padding:20px;
  301. width:340px;
  302. border:1px solid {color:text background};
  303.  
  304. }
  305.  
  306. .playerbuttonbg {
  307. position: absolute;
  308. left: 20px;
  309. top: 20px;
  310. width: 19px;
  311. height: 19px;
  312. background-color:#fff;
  313. padding: 10px;
  314. -webkit-border-radius: 40px;
  315. -moz-border-radius: 40px;
  316. border-radius: 40px;
  317. opacity: .4;
  318. filter: alpha(opacity=40);
  319. -moz-opacity: 0.4;
  320. -khtml-opacity: 0.4;
  321. transition: opacity .7s ease-in-out;
  322. -moz-transition: opacity .7s ease-in-out;
  323. -webkit-transition: opacity .7s ease-in-out;
  324. }
  325.  
  326. .playerbuttonbg:hover {
  327. opacity: 1;
  328. filter: alpha(opacity=100);
  329. -moz-opacity: 1;
  330. -khtml-opacity: 1;
  331. }
  332.  
  333. .newplayerbutton {
  334. position: relative;
  335. width: 19px;
  336. height: 19px;
  337. overflow: hidden;
  338. }
  339.  
  340. .playerbuttonhug {
  341. position: absolute;
  342. top: -16px;
  343. left: -4px;
  344. }
  345.  
  346. .tumblr_audio_player {
  347. height: 90px;
  348. width: 270px;
  349. -moz-transform: scale(0.60, 0.60);
  350. -webkit-transform: scale(0.60, 0.60);
  351. -o-transform: scale(0.60, 0.60);
  352. -ms-transform: scale(0.60, 0.60);
  353. transform: scale(0.60, 0.60);
  354. -moz-transform-origin: top left;
  355. -webkit-transform-origin: top left;
  356. -o-transform-origin: top left;
  357. -ms-transform-origin: top left;
  358. transform-origin: top left;
  359. }
  360.  
  361. .audioimgwrapper {
  362. position: absolute;
  363. left: 0px;
  364. top: 0px;
  365. -webkit-border-radius: 40px;
  366. -moz-border-radius: 40px;
  367. border-radius: 40px;
  368. overflow: hidden;
  369. width: 79px;
  370. height: 79px;
  371. }
  372.  
  373. .audioimgwrapper img {
  374. width: 100%;
  375. height: auto;
  376. -webkit-border-radius: 40px;
  377. -moz-border-radius: 40px;
  378. border-radius: 40px;
  379. }
  380.  
  381. .trackdetails {
  382. width: auto;
  383. display:inline-block;
  384. margin-left: 90px;
  385. margin-top:15px;
  386. min-height: 70px;
  387. font-size:9px;
  388. text-transform:uppercase;
  389. padding:5px;
  390. }
  391.  
  392. .audiowrapper {
  393. position: relative;
  394. display:inline-block;
  395. }
  396.  
  397. .index {
  398. margin-left:-10px;
  399. position:absolute;
  400. margin-top: 15px;
  401. padding: 5px;
  402. color: {color:text};
  403. font-size: 9px;
  404. text-transform: uppercase;
  405. letter-spacing: 1;
  406. line-height: 100%;
  407. text-align: center;
  408. -moz-transition:all ease-in-out 1.2s;
  409. -webkit-transition:all ease-in-out 1.2s;
  410. -o-transition:all ease-in-out 1.2s;
  411. transition:all ease-in-out 1.2s;
  412. }
  413.  
  414. .index a {
  415. color:#fff;
  416. }
  417.  
  418. .index a:hover {
  419. color: {color:text};
  420. -moz-transition:all ease-in-out 1.2s;
  421. -webkit-transition:all ease-in-out 1.2s;
  422. -o-transition:all ease-in-out 1.2s;
  423. transition:all ease-in-out 1.2s;
  424. }
  425.  
  426. .info {
  427. font-size:10px;
  428. line-height: 100%;
  429. color: {color:main link};
  430. text-align: justify;
  431. word-wrap:break-word;
  432. margin-top: -35px;
  433. background-color:{color:post};
  434. width:400px;
  435. padding: 15px;
  436. -moz-transition:all ease-in-out 0.7s;
  437. -webkit-transition:all ease-in-out 0.7s;
  438. -o-transition:all ease-in-out 0.7s;
  439. transition:all ease-in-out 0.7s;
  440. }
  441.  
  442. .postnotes {
  443. background-color:{color:post};
  444. padding:5px;
  445. width:420px;
  446. word-wrap:break-word;
  447. }
  448.  
  449. #pagi {
  450. position:fixed;
  451. width:200px;
  452. height:30px;
  453. font-size:30px;
  454. bottom:50px;
  455. left:330px;
  456. }
  457.  
  458. #pagi a{
  459. color:{color:main link};
  460. }
  461.  
  462. #info {
  463. margin-top:20px;
  464. text-transform:uppercase;
  465. font-size:8px;
  466. text-align:left;
  467. }
  468.  
  469. #side {
  470. position:fixed;
  471. left:200px;
  472. top:145px;
  473. width:400px;
  474. height:400px;
  475. -webkit-animation-name: bounceInUp;
  476. animation-name: bounceInUp;
  477. -webkit-animation-duration: 3s;
  478. animation-duration: 3s;
  479. -webkit-animation-fill-mode: both;
  480. animation-fill-mode: both;
  481. }
  482.  
  483.  
  484.  
  485.  
  486. #bar {
  487. opacity:0;
  488. position:fixed;
  489. margin-left:40px;
  490. margin-top:0px;
  491. width:350px;
  492. height:350px;
  493. background:transparent;
  494. }
  495.  
  496. #side:hover #bar {
  497. opacity: 1;
  498. margin-left:0px;
  499. -webkit-transition: all 2s ease-in-out;
  500. -moz-transition: all 2s ease-in-out;
  501. -o-transition: all 2s ease-in-out;
  502. -ms-transition: all 2s ease-in-out;
  503. transition: all 2s ease-in-out; }
  504.  
  505. #dbox {
  506. position:fixed;
  507. margin-top:50px;
  508. margin-left:135px;
  509. padding:8px;
  510. height:73px;
  511. width:146px;
  512. background:{color:box background};
  513. }
  514.  
  515. #side:hover #dbox{
  516. -webkit-transition: all 1s ease-in-out;
  517. -moz-transition: all 1s ease-in-out;
  518. -o-transition: all 1s ease-in-out;
  519. -ms-transition: all 1s ease-in-out;
  520. transition: all 1s ease-in-out; }
  521.  
  522. #desc {
  523. position:fixed;
  524. margin-top:54px;
  525. margin-left:139px;
  526. height:73px;
  527. width:146px;
  528. overflow:auto;
  529. font-size:9px;
  530. line-height:90%;
  531. text-transform:uppercase;
  532. text-align:justify;
  533. padding:4px;
  534. }
  535.  
  536. #side:hover #desc{
  537. -webkit-transition: all 1s ease-in-out;
  538. -moz-transition: all 1s ease-in-out;
  539. -o-transition: all 1s ease-in-out;
  540. -ms-transition: all 1s ease-in-out;
  541. transition: all 1s ease-in-out; }
  542.  
  543. #box1 {
  544. position:fixed;
  545. margin-top:144px;
  546. margin-left:135px;
  547. padding:8px;
  548. height:80px;
  549. width:146px;
  550. background:{color:box background};
  551. }
  552.  
  553. #side:hover #box1{
  554. -webkit-transition: all 1s ease-in-out;
  555. -moz-transition: all 1s ease-in-out;
  556. -o-transition: all 1s ease-in-out;
  557. -ms-transition: all 1s ease-in-out;
  558. transition: all 1s ease-in-out; }
  559.  
  560. #facts{
  561. position:fixed;
  562. margin-top:185px;
  563. margin-left:98px;
  564. padding:4px;
  565. width:80px;
  566. height:20px;
  567. font-size:32px;
  568. text-transform:uppercase;
  569. font-weight:bold;
  570. letter-spacing:-3px;
  571. color:{color:text background};
  572. -webkit-transform: rotate(270deg);
  573. -moz-transform: rotate(270deg);
  574. -o-transform: rotate(270deg);
  575. writing-mode: lr-tb;
  576. }
  577.  
  578. #side:hover #facts{
  579. -webkit-transition: all 1s ease-in-out;
  580. -moz-transition: all 1s ease-in-out;
  581. -o-transition: all 1s ease-in-out;
  582. -ms-transition: all 1s ease-in-out;
  583. transition: all 1s ease-in-out; }
  584.  
  585. #factss {
  586. position:fixed;
  587. margin-top:148px;
  588. margin-left:164px;
  589. padding:4px;
  590. width:120px;
  591. height:80px;
  592. font-size:8px;
  593. line-height:20px;
  594. text-transform:uppercase;
  595. color:{color:box background};
  596. background:{color:text background};
  597. overflow-y:auto;
  598. }
  599.  
  600. #side:hover #factss{
  601. -webkit-transition: all 1s ease-in-out;
  602. -moz-transition: all 1s ease-in-out;
  603. -o-transition: all 1s ease-in-out;
  604. -ms-transition: all 1s ease-in-out;
  605. transition: all 1s ease-in-out; }
  606.  
  607. #hover1 {
  608. position:fixed;
  609. margin-top:245px;
  610. margin-left:135px;
  611. height:5px;
  612. width:35px;
  613. background:{color:main link};
  614. padding:4px;
  615. z-index:999999999;
  616. -webkit-transition: background 0.7s ease-in;
  617. -moz-transition: background 0.7s ease-in;
  618. -ms-transition: background 0.7s ease-in;
  619. -o-transition: background 0.7s ease-in;
  620. transition: background 0.7s ease-in;
  621. }
  622.  
  623. #hover1:hover {
  624. background:{color:text background};
  625. -webkit-animation-name: pulse;
  626. animation-name: pulse;
  627. -webkit-animation-duration: 1s;
  628. animation-duration: 1s;
  629. -webkit-animation-fill-mode: both;
  630. animation-fill-mode: both;
  631. }
  632.  
  633. #side:hover #hover1{
  634. -webkit-transition: all 1s ease-in-out;
  635. -moz-transition: all 1s ease-in-out;
  636. -o-transition: all 1s ease-in-out;
  637. -ms-transition: all 1s ease-in-out;
  638. transition: all 1s ease-in-out; }
  639.  
  640. #hover2 {
  641. position:fixed;
  642. margin-top:266px;
  643. margin-left:135px;
  644. height:5px;
  645. width:35px;
  646. background:{color:main link};
  647. padding:4px;
  648. z-index:999999999;
  649. -webkit-transition: background 0.7s ease-in;
  650. -moz-transition: background 0.7s ease-in;
  651. -ms-transition: background 0.7s ease-in;
  652. -o-transition: background 0.7s ease-in;
  653. transition: background 0.7s ease-in;
  654. }
  655.  
  656. #hover2:hover {
  657. background:{color:text background};
  658. -webkit-animation-name: pulse;
  659. animation-name: pulse;
  660. -webkit-animation-duration: 1s;
  661. animation-duration: 1s;
  662. -webkit-animation-fill-mode: both;
  663. animation-fill-mode: both;
  664. }
  665.  
  666. #side:hover #hover2{
  667. -webkit-transition: all 1s ease-in-out;
  668. -moz-transition: all 1s ease-in-out;
  669. -o-transition: all 1s ease-in-out;
  670. -ms-transition: all 1s ease-in-out;
  671. transition: all 1s ease-in-out; }
  672.  
  673. #hover3 {
  674. position:fixed;
  675. margin-top:285px;
  676. margin-left:135px;
  677. height:5px;
  678. width:35px;
  679. background:{color:main link};
  680. padding:4px;
  681. z-index:999999999;
  682. -webkit-transition: background 0.7s ease-in;
  683. -moz-transition: background 0.7s ease-in;
  684. -ms-transition: background 0.7s ease-in;
  685. -o-transition: background 0.7s ease-in;
  686. transition: background 0.7s ease-in;
  687. }
  688.  
  689. #hover3:hover {
  690. background:{color:text background};
  691. -webkit-animation-name: pulse;
  692. animation-name: pulse;
  693. -webkit-animation-duration: 1s;
  694. animation-duration: 1s;
  695. -webkit-animation-fill-mode: both;
  696. animation-fill-mode: both;
  697. }
  698.  
  699. #side:hover #hover3{
  700. -webkit-transition: all 1s ease-in-out;
  701. -moz-transition: all 1s ease-in-out;
  702. -o-transition: all 1s ease-in-out;
  703. -ms-transition: all 1s ease-in-out;
  704. transition: all 1s ease-in-out; }
  705.  
  706. #hover4 {
  707. position:fixed;
  708. margin-top:302px;
  709. margin-left:135px;
  710. height:5px;
  711. width:35px;
  712. background:{color:main link};
  713. padding:4px;
  714. z-index:999999999;
  715. -webkit-transition: background 0.7s ease-in;
  716. -moz-transition: background 0.7s ease-in;
  717. -ms-transition: background 0.7s ease-in;
  718. -o-transition: background 0.7s ease-in;
  719. transition: background 0.7s ease-in;
  720. }
  721.  
  722. #hover4:hover {
  723. background:{color:text background};
  724. -webkit-animation-name: pulse;
  725. animation-name: pulse;
  726. -webkit-animation-duration: 1s;
  727. animation-duration: 1s;
  728. -webkit-animation-fill-mode: both;
  729. animation-fill-mode: both;
  730. }
  731.  
  732. #side:hover #hover4{
  733. -webkit-transition: all 1s ease-in-out;
  734. -moz-transition: all 1s ease-in-out;
  735. -o-transition: all 1s ease-in-out;
  736. -ms-transition: all 1s ease-in-out;
  737. transition: all 1s ease-in-out; }
  738.  
  739. #hover5 {
  740. position:fixed;
  741. margin-top:318px;
  742. margin-left:135px;
  743. height:5px;
  744. width:35px;
  745. background:{color:main link};
  746. padding:4px;
  747. z-index:999999999;
  748. -webkit-transition: background 0.7s ease-in;
  749. -moz-transition: background 0.7s ease-in;
  750. -ms-transition: background 0.7s ease-in;
  751. -o-transition: background 0.7s ease-in;
  752. transition: background 0.7s ease-in;
  753. }
  754.  
  755. #hover5:hover {
  756. background:{color:text background};
  757. -webkit-animation-name: pulse;
  758. animation-name: pulse;
  759. -webkit-animation-duration: 1s;
  760. animation-duration: 1s;
  761. -webkit-animation-fill-mode: both;
  762. animation-fill-mode: both;
  763. }
  764.  
  765. #side:hover #hover5{
  766. opacity: 1;
  767. -webkit-transition: all 1s ease-in-out;
  768. -moz-transition: all 1s ease-in-out;
  769. -o-transition: all 1s ease-in-out;
  770. -ms-transition: all 1s ease-in-out;
  771. transition: all 1s ease-in-out; }
  772.  
  773.  
  774. #side:hover #ticker{
  775. -webkit-transition: all 1s ease-in-out;
  776. -moz-transition: all 1s ease-in-out;
  777. -o-transition: all 1s ease-in-out;
  778. -ms-transition: all 1s ease-in-out;
  779. transition: all 1s ease-in-out; }
  780.  
  781. #box2 {
  782. position:fixed;
  783. width:100px;
  784. height:70px;
  785. margin-top:245px;
  786. margin-left:183px;
  787. padding:8px;
  788. background:{color:box background};
  789. }
  790.  
  791. #side:hover #box2{
  792. -webkit-transition: all 1s ease-in-out;
  793. -moz-transition: all 1s ease-in-out;
  794. -o-transition: all 1s ease-in-out;
  795. -ms-transition: all 1s ease-in-out;
  796. transition: all 1s ease-in-out; }
  797.  
  798. #qb {
  799. position:fixed;
  800. width:100px;
  801. height:70px;
  802. overflow:auto;
  803. padding:4px;
  804. margin-top:249px;
  805. margin-left:187px;
  806. font-size:9px;
  807. line-height:90%;
  808. text-transform:uppercase;
  809. text-align:justify;
  810. }
  811.  
  812. #side:hover #qb{
  813. -webkit-transition: all 1s ease-in-out;
  814. -moz-transition: all 1s ease-in-out;
  815. -o-transition: all 1s ease-in-out;
  816. -ms-transition: all 1s ease-in-out;
  817. transition: all 1s ease-in-out; }
  818.  
  819. #pic1 {
  820. position:fixed;
  821. width:250px;
  822. height:301px;
  823. margin-left:-70px;
  824. margin-top:36px;
  825.  
  826. }
  827.  
  828. #side:hover #pic1{
  829. -webkit-transition: all 1s ease-in-out;
  830. -moz-transition: all 1s ease-in-out;
  831. -o-transition: all 1s ease-in-out;
  832. -ms-transition: all 1s ease-in-out;
  833. transition: all 1s ease-in-out; }
  834.  
  835. #titlea {
  836. position:fixed;
  837. margin-top:-30px;
  838. margin-left:-80px;
  839. color:{color:main link};
  840. font-size:40px;
  841. font-family: 'Mr Dafoe', cursive;
  842. width:300px;
  843. height:40px;
  844. }
  845.  
  846. #titleb {
  847. position:fixed;
  848. margin-top:0px;
  849. margin-left:-70px;
  850. color:{color:box background};
  851. font-size:50px;
  852. font-family: 'Roboto', sans-serif;
  853. text-transform:uppercase;
  854. width:300px;
  855. height:50px;
  856. }
  857.  
  858. #side:hover #titleu{
  859. -webkit-transition: all 1s ease-in-out;
  860. -moz-transition: all 1s ease-in-out;
  861. -o-transition: all 1s ease-in-out;
  862. -ms-transition: all 1s ease-in-out;
  863. transition: all 1s ease-in-out; }
  864.  
  865. #muse {
  866. position:fixed;
  867. margin-left:294px;
  868. margin-top:0px;
  869. }
  870.  
  871. #side:hover #muse{
  872. -webkit-transition: all 1s ease-in-out;
  873. -moz-transition: all 1s ease-in-out;
  874. -o-transition: all 1s ease-in-out;
  875. -ms-transition: all 1s ease-in-out;
  876. transition: all 1s ease-in-out; }
  877.  
  878. #links {
  879. position:fixed;
  880. margin-top:337px;
  881. margin-left:186px;
  882. background:transparent;
  883. width:117px;
  884. height:30px;
  885. z-index:99999;
  886. color:{main link};
  887. }
  888.  
  889. .link1 {
  890. position:fixed;
  891. margin-top:0px;
  892. margin-left:5px;
  893. width:20px;
  894. height:20px;
  895. background:transparent;
  896. color:{color:main link};
  897. line-height:26px;
  898. text-align:center;
  899. -webkit-transition: all 2s ease-out;
  900. -moz-transition: all 2s ease-out;
  901. -ms-transition: all 2s ease-out;
  902. -o-transition: all 2s ease-out;
  903. transition: all 2s ease-out;
  904. }
  905.  
  906. #side:hover .link1 {
  907. -webkit-transition: all 1s ease-in-out;
  908. -moz-transition: all 1s ease-in-out;
  909. -o-transition: all 1s ease-in-out;
  910. -ms-transition: all 1s ease-in-out;
  911. transition: all 1s ease-in-out; }
  912.  
  913. .link2 {
  914. position:fixed;
  915. margin-top:0px;
  916. margin-left:18px;
  917. width:20px;
  918. height:20px;
  919. background:transparent;
  920. color:{color:main link};
  921. text-align:center;
  922. -webkit-transition: all 2s ease-out;
  923. -moz-transition: all 2s ease-out;
  924. -ms-transition: all 2s ease-out;
  925. -o-transition: all 2s ease-out;
  926. transition: all 2s ease-out;
  927. }
  928.  
  929. #side:hover .link2{
  930. -webkit-transition: all 1s ease-in-out;
  931. -moz-transition: all 1s ease-in-out;
  932. -o-transition: all 1s ease-in-out;
  933. -ms-transition: all 1s ease-in-out;
  934. transition: all 1s ease-in-out; }
  935.  
  936.  
  937. #link3 {
  938. position:fixed;
  939. margin-top:0px;
  940. margin-left:50px;
  941. width:20px;
  942. height:20px;
  943. background:transparent;
  944. color:{color:main link};
  945. text-align:center;
  946. -webkit-transition: all 2s ease-out;
  947. -moz-transition: all 2s ease-out;
  948. -ms-transition: all 2s ease-out;
  949. -o-transition: all 2s ease-out;
  950. transition: all 2s ease-out;
  951. }
  952.  
  953.  
  954. #side:hover #link3{
  955. -webkit-transition: all 1s ease-in-out;
  956. -moz-transition: all 1s ease-in-out;
  957. -o-transition: all 1s ease-in-out;
  958. -ms-transition: all 1s ease-in-out;
  959. transition: all 1s ease-in-out; }
  960.  
  961. .link4 {
  962. position:fixed;
  963. margin-top:0px;
  964. margin-left:80px;
  965. width:20px;
  966. height:20px;
  967. background:transparent;
  968. color:{color:main link};
  969. text-align:center;
  970. -webkit-transition: all 2s ease-out;
  971. -moz-transition: all 2s ease-out;
  972. -ms-transition: all 2s ease-out;
  973. -o-transition: all 2s ease-out;
  974. transition: all 2s ease-out;
  975. }
  976.  
  977.  
  978. #side:hover .link4{
  979. -webkit-transition: all 1s ease-in-out;
  980. -moz-transition: all 1s ease-in-out;
  981. -o-transition: all 1s ease-in-out;
  982. -ms-transition: all 1s ease-in-out;
  983. transition: all 1s ease-in-out; }
  984.  
  985.  
  986.  
  987. .popupnavlinks {
  988. padding-top:5px;
  989. text-align:center; }
  990.  
  991.  
  992. .popupnavlinks a {
  993. display:inline-block;
  994. width:120px; height:8px;
  995. margin:2px; padding:6px 6px 10px;
  996. text-align:center;
  997. font-size:9px;
  998. text-transform:uppercase;
  999. letter-spacing:1px;
  1000. color:{color:link};
  1001. background:{color:post};
  1002. border:1px dotted;
  1003. border-color:{color:background};
  1004. }
  1005.  
  1006.  
  1007. .popupnavlinks a:hover {
  1008. display:inline-block;
  1009. width:120px; margin:2px;
  1010. padding:6px 6px 10px;
  1011. text-align:center;
  1012. font-family:'helvetica';
  1013. font-size:8px;
  1014. text-transform:uppercase;
  1015. letter-spacing:1px;
  1016. color:#2e2e2e;
  1017. background:transparent }
  1018.  
  1019.  
  1020. .popup_block{
  1021. display:none;
  1022. background:{color:post};
  1023. padding:16px;
  1024. border:1px solid {color:text background};
  1025. float: left;
  1026. font-size:9px;
  1027. text-transform:uppercase;
  1028. position:fixed;
  1029. top:50%;
  1030. left:76%;
  1031. z-index: 99999;
  1032.  
  1033. }
  1034.  
  1035. img.btn_close {
  1036. float:right;
  1037. margin:-5px -5px 0 0;
  1038.  
  1039. }
  1040.  
  1041. *html .popup_block {
  1042. position:absolute;
  1043.  
  1044. }
  1045.  
  1046. #fade {
  1047. display:none;
  1048. position:fixed;
  1049. left:0px;
  1050. top:0px;
  1051. width:100%;
  1052. height:100%;
  1053. z-index:9999;
  1054. background:{color:background}; /* change to #fff for solid white */
  1055. opacity:0.9; /* change to opacity:1; */
  1056. }
  1057.  
  1058.  
  1059. {CustomCSS}
  1060. </style>
  1061. </head>
  1062.  
  1063. <body>
  1064. <div id="pagi">{block:PreviousPage}<a href="{PreviousPage}"><font-size="12">«</font></a>{/block:PreviousPage} {block:NextPage} <a href="{NextPage}"><font-size="12">»</font></a>{/block:NextPage}</div>
  1065.  
  1066. <div id="side">
  1067.  
  1068.  
  1069.  
  1070. <div id="links">
  1071. <a href="/" title="refresh" class="link_1" style=""><i class="fa fa-refresh" aria-hidden="true" style="color:{color:main link};"></i></a>
  1072. <a href="/ask" title="inquire" class="link2"><i class="fa fa-comment" aria-hidden="true" style="color:{color:main link};"></i></a>
  1073. <a href="#?w=400" rel="box5" class="poplight" id="link3" title="map" href="{text:url 1}"><i class="fa fa-cog" aria-hidden="true" style="color:{color:main link};"></i></a>
  1074. <a class="link4" title="{text:link name}" href="{text:link url}"><i class="fa fa-heart" aria-hidden="true" style="color:{color:main link};"></i></a>
  1075. </div>
  1076.  
  1077. <div id="dbox"></div>
  1078. <div id="desc" style="background:{color:text background}">{text:description}</div>
  1079. <div id="box1"></div>
  1080. <div id="box2"></div>
  1081. <div id="qb" style="background:{color:text background}">{text:quote}</div>
  1082. <div id="facts">facts</div>
  1083. <div id="factss">1. {text:fact 1}<br>2. {text:fact 2}<br>3. {text:fact 3}<br>4. {text:fact 4}</div>
  1084.  
  1085. <a id="hover1" title="{text:hover 1}"></a>
  1086. <a id="hover2" title="{text:hover 2}"></a>
  1087. <a id="hover3" title="{text:hover 3}"></a>
  1088. <a id="hover4" title="{text:hover 4}"></a>
  1089. <a id="hover5" title="{text:hover 5}"></a>
  1090.  
  1091. <div id="titlea">{text:title a}</div>
  1092. <div id="titleb">{text:title b}</div>
  1093. <div id="pic1"><img src="{image:muse picture}" style="width:250px;height:301px"></div>
  1094. <div id="muse"><img src="{image:muse render}" style="height:350px"></div>
  1095. </div>
  1096. </div> </div>
  1097.  
  1098. <a href="http://kwosso.tumblr.com" title="by kwosso" style="position:fixed; left:5px; bottom:5px; padding:5px; text-transform:uppercase; font-size:8px">th.</a>
  1099.  
  1100. <div id="container">
  1101. <div id="entry">
  1102. {block:Posts}
  1103. <div id="post">
  1104.  
  1105. {block:ContentSource}
  1106. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  1107. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  1108. {/block:SourceLogo}
  1109. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1110.  
  1111. <!-- {ReblogParentURL}{block:ReblogParentLogo}<img src="{BlackLogoURL}"
  1112. width="{LogoWidth}" height="{LogoHeight}" alt="{ReblogParentTitle}" />
  1113. {/block:ReblogParentLogo}
  1114. {block:NoReblogParentLogo}{ReblogParentLink}{/block:NoReblogParentLogo} -->
  1115. {/block:ContentSource}
  1116.  
  1117. {block:Text}{Body}{/block:Text}
  1118.  
  1119. {block:Quote}<h2>“{Quote}”</h2><br> — {Source}{/block:Quote}
  1120.  
  1121. {block:Link}<a href="{URL}" class="link" {Target}> <h2>{Name}</h2></a>
  1122. {block:Description}<P>{Description}</p>{/block:Description}{/block:Link}
  1123.  
  1124. {block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>{/block:Photo}
  1125. {block:Photoset}<center>{Photoset-400}</center>{/block:Photoset}
  1126.  
  1127. {block:Chat}{block:Title}<t>{Title}</t><br>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  1128. {block:Video}{Video-400}{/block:Video}
  1129.  
  1130. {block:Answer}
  1131. <div class="question">
  1132. <div class="asker">{Asker} asked:</div><br>
  1133. <div class="ask">{Question}</div><br><br></div>{Answer}
  1134. {/block:Answer}
  1135.  
  1136.  
  1137.  
  1138. {block:AudioPlayer}
  1139. <div class="audiowrapper">
  1140. {block:AlbumArt}<div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  1141. <div class="playerbuttonbg"><div class="newplayerbutton"><div class="playerbuttonhug">{AudioPlayerWhite}</div></div></div>
  1142. <div class="trackdetails">{block:TrackName}{TrackName}{/block:TrackName}<br/>{block:Artist}Artist: {Artist}{/block:Artist}<br/>{block:Album}Album: {Album}{/block:Album}<br/></div></div>
  1143. {/block:AudioPlayer}
  1144. {block:Caption}{Caption}{/block:Caption}
  1145.  
  1146. {block:IndexPage}
  1147. <div class="index">
  1148. <a href="{Permalink}">{Month} {DayofMonth}, {Year}</a> {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}</div>
  1149. {/block:IndexPage}
  1150. </div><br>
  1151.  
  1152. {block:PermaLinkPage}
  1153. <div class="info">
  1154. <center>
  1155. <div id="permtitle">Posted on: {Month} {DayofMonth}, {Year}<br> {block:NoteCount}with {NoteCountWithLabel}{/block:NoteCount}</div>
  1156. {block:RebloggedFrom}
  1157. <div id="tags">Via:
  1158. <a href="{ReblogParentURL}">{ReblogParentName}</a> ||
  1159. Source: <a href="{ReblogRootURL}">{ReblogRootName}</a></div>
  1160. {/block:RebloggedFrom}
  1161. </center>
  1162. <br>
  1163. {block:HasTags}
  1164. <div id="tags">{block:Tags}#<a href="{TagURL}">{Tag}</a> &nbsp; {/block:Tags} </div>
  1165. {/block:HasTags}
  1166. </div>
  1167.  
  1168. {block:PostNotes}<div class="postnotes">{PostNotes}</div>{/block:PostNotes}
  1169. {/block:PermalinkPage}
  1170.  
  1171. {/block:Posts}
  1172.  
  1173.  
  1174. </div>
  1175. </div>
  1176.  
  1177. </body>
  1178.  
  1179. <div id="box5" class="popup_block">
  1180.  
  1181. <div style="width:auto;height:300px;overflow-y:scroll; overflow-x:hidden;padding:10px;">
  1182.  
  1183. <center>
  1184.  
  1185. <div class="popupnavlinks">
  1186.  
  1187.  
  1188. <a href="/tagged/link">LINK.</a>
  1189. <a href="/tagged/link">LINK.</a>
  1190. <br>
  1191. <a href="/tagged/link">LINK.</a>
  1192. <a href="/tagged/link">LINK.</a>
  1193. <br>
  1194. <a href="/tagged/link">LINK.</a>
  1195. <a href="/tagged/link">LINK.</a>
  1196. <br>
  1197.  
  1198.  
  1199. </div>
  1200. </div>
  1201. </div>
  1202.  
  1203. </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!