API tools faq
paste
Advertisement
destinatia

「 ✩ * º ╳ HUFFLEPUFF by becca. 」

destinatia
Nov 10th, 2016
2,913
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 36.80 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. ✧ * ☾ destinatiia.tumblr.com * ✧
  8.  
  9. - you're allowed edit as much as you want, but don't repost and claim as your own afterwards.
  10. - don't move the credit or put it in another page
  11. - don't take fragments from this code and paste it on your own. it's rude as i worked real hard on this one so.
  12. - enjoy !! and if you have any questions and/or problems just hmu
  13.  
  14. -->
  15.  
  16. {block:Description}
  17. <meta name="description" content="{MetaDescription}" />
  18. {/block:Description}
  19. <meta charset="utf-8">
  20. <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  21. <title>{Title}{block:TagPage} // {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
  22. <link rel="shortcut icon" href="{Favicon}">
  23. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24.  
  25. <meta name="color:background" content="#ffffff" />
  26. <meta name="color:links" content="#000000" />
  27. <meta name="color:links hover" content="#a0a0a0" />
  28. <meta name="color:text" content="#000000" />
  29. <meta name="color:posts" content="#ffffff" />
  30. <meta name="color:wrap borders" content="#ccc" />
  31. <meta name="color:accent" content="#ffffff" />
  32. <meta name="color:wrap" content="#aaa" />
  33. <meta name="color:description box" content="#fff" />
  34. <meta name="color:description text" content="#aaa" />
  35. <meta name="color:screen accent" content="#fff" />
  36.  
  37. <meta name="text:navi text" content="" />
  38. <meta name="text:tab title 1" content="one" />
  39. <meta name="text:tab title 2" content="two" />
  40. <meta name="text:tab title 3" content="one" />
  41. <meta name="text:tab title 4" content="two" />
  42. <meta name="text:layers link" content="/" />
  43. <meta name="text:question mark link" content="/" />
  44. <meta name="text:heart link" content="/" />
  45. <meta name="text:rocket link" content="/" />
  46. <meta name="text:link 1" content="/" />
  47. <meta name="text:link 2" content="/" />
  48. <meta name="text:link 3" content="/" />
  49. <meta name="text:link 4" content="/" />
  50. <meta name="text:link 5" content="/" />
  51. <meta name="text:link 6" content="/" />
  52. <meta name="text:link 7" content="/" />
  53. <meta name="text:link 8" content="/" />
  54. <meta name="text:link 9" content="/" />
  55. <meta name="text:link 1 text" content="link one" />
  56. <meta name="text:link 2 text" content="link two" />
  57. <meta name="text:link 3 text" content="link three" />
  58. <meta name="text:link 4 text" content="link four" />
  59. <meta name="text:link 5 text" content="link five" />
  60. <meta name="text:link 6 text" content="link six" />
  61. <meta name="text:link 7 text" content="link seven" />
  62. <meta name="text:link 8 text" content="link eight" />
  63. <meta name="text:link 9 text" content="link nine" />
  64.  
  65. <meta name="image:sbicon" content="" />
  66. <meta name="image:phone wallpaper" content="" />
  67. <meta name="image:background" content="" />
  68.  
  69. <meta name="if:tabs" content="1"/>
  70.  
  71.  
  72. <!------------------------ ✕ tooltip script ✕ -------------------------->
  73.  
  74.  
  75. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  76. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  77. <script>
  78. (function($){
  79. $(document).ready(function(){
  80. $("a[title]").style_my_tooltips({
  81. tip_follows_cursor:true,
  82. tip_delay_time:90,
  83. tip_fade_speed:600,
  84. attribute:"title"
  85. });
  86. });
  87. })(jQuery);
  88. </script>
  89.  
  90. <!--------------------- ✕ date and time script ✕ ---------------------->
  91.  
  92. <script type="text/javascript">
  93. function display_ct() {
  94. var strcount
  95. var x = new Date()
  96. var x1=x.getHours( )+ ":" + x.getMinutes();
  97. document.getElementById('ct').innerHTML = x1;
  98.  
  99. tt=display_c();
  100. }
  101. </script>
  102.  
  103. <script type="text/javascript">
  104. var tday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
  105. var tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
  106.  
  107. function GetClock(){
  108. var d=new Date();
  109. var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate();
  110.  
  111. document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+"";
  112. }
  113.  
  114. window.onload=function(){
  115. GetClock();
  116. setInterval(GetClock,1000);
  117. }
  118. </script>
  119.  
  120. <!-------------- ✕ scripts that make everything work ✕ ---------------->
  121.  
  122. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  123.  
  124. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  125.  
  126. <script src="http://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
  127.  
  128. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  129.  
  130. <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  131.  
  132. <link href="https://fonts.googleapis.com/css?family=Cookie|Great+Vibes|Yesteryear" rel="stylesheet">
  133.  
  134. <link href="https://fonts.googleapis.com/css?family=Heebo:100" rel="stylesheet">
  135.  
  136. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  137.  
  138. <script src="https://cdn.linearicons.com/free/1.0.0/svgembedder.min.js"></script>
  139.  
  140. <!-- ✕ tab script . don't delete ,, they won't work without this ! ✕ -->
  141.  
  142. <script type="text/javascript">
  143. $(document).ready(function(){
  144.  
  145. $('ul.tabs li').click(function(){
  146. var tab_id = $(this).attr('data-tab');
  147.  
  148. $('ul.tabs li').removeClass('current');
  149. $('.tab-content').removeClass('current');
  150.  
  151. $(this).addClass('current');
  152. $("#"+tab_id).addClass('current');
  153. })
  154.  
  155. })
  156. </script>
  157.  
  158. <style type="text/css">
  159.  
  160. /* ---------------------- ✕ selection tool ! ✕ ---------------------- */
  161.  
  162. ::-moz-selection {
  163. background: {color:accent};
  164. color: {color:background};
  165. }
  166.  
  167. ::selection {
  168. background: {color:accent};
  169. color: {color:background};
  170. }
  171.  
  172. /* ------------------------- ✕ scrollbar ! ✕ ------------------------- */
  173.  
  174. ::-webkit-scrollbar {
  175. width: 1px;
  176. }
  177.  
  178. /* Track */
  179. ::-webkit-scrollbar-track {
  180. background:{color:wrap borders};
  181. border-radius:50%;
  182. }
  183.  
  184. ::-webkit-scrollbar-thumb {
  185. background:{color:accent};
  186. }
  187.  
  188. ::-webkit-scrollbar-thumb:window-inactive {
  189. background: transparent;
  190. }
  191.  
  192. /* -------------------------- ✕ tooltip ! ✕ -------------------------- */
  193.  
  194. #s-m-t-tooltip {
  195. max-width:300px;
  196. padding:5px;
  197. border-bottom:3px solid {color:accent};
  198. margin:10px 0px 0px 10px;
  199. background-color:{color:wrap borders};
  200. font-size:7px;
  201. z-index:999999999999999999999999999999999999;
  202. }
  203.  
  204.  
  205. /* -------------------------- ✕ basics ! ✕ -------------------------- */
  206.  
  207. body {
  208. background-color:{color:background};
  209. color: {color:text};
  210. overflow-y:hidden;
  211. overflow-x:auto;
  212. font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  213. font-size: 9px;
  214. text-transform:uppercase;
  215. margin: 0;
  216. letter-spacing:2px;
  217. padding: 0;
  218. word-wrap: break-word;
  219. line-height:160%;
  220. background-image:url('{image:background}');
  221. }
  222.  
  223. sup, sub, small {
  224. font-size:9px;
  225. }
  226.  
  227. h1 {
  228. font-family:'montserrat', sans serif;
  229. font-size:24px;
  230. text-align:center;
  231. color: {color:accent};
  232. }
  233.  
  234.  
  235. h2 {
  236. font-family:'montserrat', sans serif;
  237. font-size:18px;
  238. font-style:italic;
  239. text-align:center;
  240. color: {color:accent};
  241. }
  242.  
  243. blockquote {
  244. background:{color:wrap};
  245. border-left:{color:links hover} 1px solid;
  246. margin: 10px;
  247. padding-left:20px;
  248. padding-top:10px;
  249. padding-right:20px;
  250. padding-bottom:10px;
  251. }
  252.  
  253. iframe, img, embed, object, video {
  254. max-width: 100%;
  255. }
  256. p{
  257. margin-bottom:10px;
  258. }
  259.  
  260. h1{
  261. text-transform:uppercase;
  262. font-size:13px;
  263. }
  264.  
  265. ul{
  266. list-style-type:circle;
  267. }
  268.  
  269. ol{
  270. list-style-type:;
  271. }
  272.  
  273. /* ------------------------- ✕ text styles ✕ ------------------------ */
  274.  
  275. a {
  276. color: {color:links};
  277. text-decoration: none;
  278. text-transform:uppercase;
  279. -webkit-transition: all .3s;
  280. -moz-transition: all .3s;
  281. -o-transition: all .3s;
  282. -ms-transition: all .3s;
  283. transition: all .3s;
  284. }
  285.  
  286. a:hover{
  287. color:{color:links hover};
  288. -webkit-transition: all .7s;
  289. -moz-transition: all .7s;
  290. -o-transition: all .7s;
  291. -ms-transition: all .7s;
  292. transition: all .7s;
  293. }
  294.  
  295. b, strong {
  296. color: {color:accent};
  297. font-family:'montserrat', sans serif;
  298.  
  299. }
  300.  
  301. i, em,italic {
  302. color: {color:accent};
  303. font-family:'montserrat', sans serif;
  304.  
  305. }
  306.  
  307. s, strike {
  308. color: {color:accent};
  309. font-family:'montserrat', sans serif;
  310.  
  311. }
  312.  
  313. u,underline {
  314. color: {color:accent};
  315. font-family:'montserrat', sans serif;
  316.  
  317. }
  318.  
  319. /* --------------------------- ✕ posts ! ✕ -------------------------- */
  320.  
  321. article {
  322. float:left;
  323. background:{color:posts};
  324. padding: 10px;
  325. width: 400px;
  326. z-index:9;
  327. text-align:justify;
  328. margin-top:10px;
  329. margin-bottom:20px;
  330. }
  331.  
  332. /* ------------------------ ✕ POST TYPES ! ✕ ------------------------ */
  333.  
  334. /* ------------------------ ✕ chat posts ! ✕ ------------------------ */
  335.  
  336. .odd, .even {
  337. padding:5px;
  338. font-size:8px;
  339. padding:5px;
  340. color:{color:screen accent};
  341. background-color:{color:accent};
  342. }
  343. .odd {
  344. background-color:{color:wrap};
  345. color:{color:accent};
  346. font-size:8px;
  347. padding:5px;
  348. }
  349. ul.chat{
  350. list-style:none;
  351. margin-left:-40px;
  352. }
  353.  
  354. .chat span {
  355. float: left;
  356. }
  357.  
  358. /* -------------------------- ✕ quotes ! ✕ -------------------------- */
  359.  
  360. .quote{
  361. font-size:15px;
  362. padding:20px;
  363. line-height:150%;
  364. text-transform:uppercase;
  365. text-align:center;
  366. font-family: 'montserrat', sans serif;
  367. }
  368.  
  369. .quotesource{
  370. text-align:center;
  371. font-size:13px;
  372. padding:20px;
  373. opacity:0.7;
  374. border-top: 1px solid {color:accent};
  375. width:200px;
  376. margin:auto;
  377. font-family: 'montserrat', sans serif;
  378. text-transform:lowercase;
  379. }
  380.  
  381. /* ------------------------ ✕ ask posts ! ✕ ------------------------ */
  382.  
  383. .question{
  384. margin-bottom:15px;
  385. padding:10px;
  386. }
  387.  
  388. .answer {
  389. font-size:11px;
  390. }
  391.  
  392. .askerimg{
  393. position:relative;
  394. display:inline-block;
  395.  
  396. margin-right:10px;
  397. }
  398.  
  399. /* ------------------------ ✕ audio posts ! ✕ ------------------------ */
  400.  
  401. .playerbuttonbg {
  402. position: absolute;
  403. left: 20px;
  404. top: 20px;
  405. width: 19px;
  406. height: 19px;
  407. background-color: {color:posts};
  408. padding: 10px;
  409. -webkit-border-radius: 40px;
  410. -moz-border-radius: 40px;
  411. border-radius: 40px;
  412. opacity: .4;
  413. filter: alpha(opacity=40);
  414. -moz-opacity: 0.4;
  415. -khtml-opacity: 0.4;
  416. transition: opacity .7s ease-in-out;
  417. -moz-transition: opacity .7s ease-in-out;
  418. -webkit-transition: opacity .7s ease-in-out;
  419. }
  420.  
  421. .playerbuttonbg:hover {
  422. opacity: 1;
  423. filter: alpha(opacity=100);
  424. -moz-opacity: 1;
  425. -khtml-opacity: 1;
  426. }
  427.  
  428. .newplayerbutton {
  429. position: relative;
  430. width: 19px;
  431. height: 19px;
  432. overflow: hidden;
  433. }
  434.  
  435. .playerbuttonhug {
  436. position: absolute;
  437. top: -18px;
  438. left: -7px;
  439. }
  440.  
  441. .tumblr_audio_player {
  442. height: 90px;
  443. width: 270px;
  444. -moz-transform: scale(0.60, 0.60);
  445. -webkit-transform: scale(0.60, 0.60);
  446. -o-transform: scale(0.60, 0.60);
  447. -ms-transform: scale(0.60, 0.60);
  448. transform: scale(0.60, 0.60);
  449. -moz-transform-origin: top left;
  450. -webkit-transform-origin: top left;
  451. -o-transform-origin: top left;
  452. -ms-transform-origin: top left;
  453. transform-origin: top left;
  454. }
  455.  
  456. .audioimgwrapper {
  457. position: absolute;
  458. left: 0px;
  459. top: 0px;
  460. -webkit-border-radius: 40px;
  461. -moz-border-radius: 40px;
  462. border-radius: 40px;
  463. overflow: hidden;
  464. width: 79px;
  465. height: 79px;
  466. }
  467.  
  468. .audioimgwrapper img {
  469. width: 100%;
  470. height: auto;
  471. -webkit-border-radius: 40px;
  472. -moz-border-radius: 40px;
  473. border-radius: 40px;
  474. }
  475.  
  476. .trackdetails {
  477. width:180px;
  478. height:auto;
  479. margin-top:8px;
  480. background:{color:wrap borders};
  481. display:inline-block;
  482. margin-left: 90px;
  483. padding:10px;
  484. margin-bottom:17px;
  485. }
  486.  
  487. .audiowrapper {
  488. position: relative;
  489. display:inline-block;
  490. }
  491.  
  492. /* ------------------------ ✕ post info ! ✕ ------------------------ */
  493.  
  494. .postinfo{
  495. margin-top:10px;
  496. text-align:center;
  497. font-weight:bold;
  498. font-size:8.5px;
  499. padding-top:10px;
  500. text-transform:uppercase;
  501. letter-spacing:1px;
  502. }
  503.  
  504. .tags {
  505. margin-top:5px;
  506. background:{color:wrap};
  507. padding:5px;
  508. font-weight:normal;
  509. -webkit-transition: all .7s;
  510. -moz-transition: all .7s;
  511. -o-transition: all .7s;
  512. -ms-transition: all .7s;
  513. transition: all .7s;
  514. }
  515.  
  516. .tags a{
  517. color:{color:accent};
  518. }
  519.  
  520. .tags:hover{
  521. letter-spacing:1px;
  522. -webkit-transition: all .7s;
  523. -moz-transition: all .7s;
  524. -o-transition: all .7s;
  525. -ms-transition: all .7s;
  526. transition: all .7s;
  527. }
  528.  
  529. ol.notes {
  530. display:block;
  531. text-align:left;
  532. list-style-type:none;
  533. margin-left:-40px;
  534. }
  535.  
  536. ol.notes li.note{
  537. margin-bottom:5px;
  538. }
  539.  
  540. .pagenotes {
  541. text-align:left;
  542. margin-top:15px;
  543. }
  544.  
  545. .pagenotes img{
  546. padding-right:5px;
  547. padding-top:5px;
  548. margin-bottom:-5px;
  549. }
  550.  
  551. /* ------------------------ ✕ dont delete ! ✕ ------------------------ */
  552.  
  553. #yo {
  554. color: {color:accent};
  555. font-size:9px;
  556. float:right;
  557. right:0;
  558. bottom:0;
  559. margin-right:10px;
  560. height:15px;
  561. overflow:hidden;
  562. margin-bottom:20px;
  563. padding:10px;
  564. text-transform:uppercase;
  565. position:fixed;
  566. background-color:transparent;
  567. font-weight:bold;
  568. text-align:center;
  569. -webkit-transition: all .7s;
  570. -moz-transition: all .7s;
  571. -o-transition: all .7s;
  572. -ms-transition: all .7s;
  573. transition: all .7s;
  574.  
  575. }
  576.  
  577. #yo:hover{
  578. height:50px;
  579. -webkit-transition: all .7s;
  580. -moz-transition: all .7s;
  581. -o-transition: all .7s;
  582. -ms-transition: all .7s;
  583. transition: all .7s;
  584. }
  585.  
  586.  
  587. .menu-item,
  588. .menu-open-button {
  589. background: {color:posts};
  590. border-radius: 100%;
  591. width: 80px;
  592. height: 80px;
  593. margin-left:-390px;
  594. margin-top:-152px;
  595. position: fixed;
  596. color: {color:accent};
  597. text-align: center;
  598. line-height: 80px;
  599. -webkit-transform: translate3d(0, 0, 0);
  600. transform: translate3d(0, 0, 0);
  601. -webkit-transition: -webkit-transform ease-out 200ms;
  602. transition: -webkit-transform ease-out 200ms;
  603. transition: transform ease-out 200ms;
  604. transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
  605. }
  606.  
  607. /* ---------------------------- ✕ title ✕ --------------------------- */
  608.  
  609. .remus{
  610. width:410px;
  611. margin-top:-10px;
  612. margin-left:-200px;
  613. z-index:999999;
  614. color:{color:accent};
  615. word-spacing:1px;
  616. top:50%;
  617. left:50%;
  618. transform:translate(-50%,-50%)
  619. height:110px;
  620. font-size:40px;
  621. height:14px;
  622. letter-spacing:0.5px;
  623. text-align:center;
  624. font-family: 'yesteryear', cursive;
  625. position:fixed;
  626. -webkit-transition: all .7s;
  627. -moz-transition: all .7s;
  628. -o-transition: all .7s;
  629. -ms-transition: all .7s;
  630. transition: all .7s;
  631. }
  632.  
  633. .remus a{
  634. color:{color:accent};
  635. }
  636.  
  637. .remus a:hover{
  638. letter-spacing:2px;
  639. -webkit-transition: all .7s;
  640. -moz-transition: all .7s;
  641. -o-transition: all .7s;
  642. -ms-transition: all .7s;
  643. transition: all .7s;
  644. }
  645.  
  646. /* ----------------------- ✕ description box ✕ ---------------------- */
  647.  
  648. .mierdita{
  649. width:390px;
  650. height:50px;
  651. float:left;
  652. overflow:auto;
  653. text-transform:uppercase;
  654. padding-right:10px;
  655. z-index:9;
  656. font-size:8px;
  657. text-align:justify;
  658. margin-left:80px;
  659. margin-top:23px;
  660. color:{color:description text};
  661. background-color:transparent;
  662. -webkit-transition: all .7s;
  663. -moz-transition: all .7s;
  664. -o-transition: all .7s;
  665. -ms-transition: all .7s;
  666. transition: all .7s;
  667. }
  668.  
  669. /* -------------------------- ✕ containers ✕ ------------------------- */
  670.  
  671. #postcontainer {
  672. position:fixed;
  673. z-index:999;
  674. margin-top:05px;
  675. margin-right:auto;
  676. width:420px;
  677. height: 360px;
  678. overflow-y:auto;
  679. position:fixed;
  680. padding-bottom:10px;
  681. background-color:transparent;
  682. overflow-x:hidden;
  683. }
  684.  
  685. #cont {
  686. position:fixed;
  687. top:50%;
  688. left:50%;
  689. transform:translate(-50%,-50%);
  690. z-index:9;
  691. margin-right:auto;
  692. width:420px;
  693. height: 430px;
  694. overflow-y:auto;
  695. position:fixed;
  696. padding-bottom:100px;
  697. border-radius:7px;
  698. border: 5px solid {color:wrap borders};
  699. background-color:transparent;
  700. overflow-x:hidden;
  701. margin-bottom:200px;
  702. }
  703.  
  704. /* -------------------------- ✕ pagination ✕ ------------------------- */
  705.  
  706. .moony {
  707. width:420px;
  708. height:20px;
  709. padding:4px;
  710. background:{color:description box};
  711. text-transform:uppercase;
  712. text-align:center;
  713. font-size:8px;
  714. letter-spacing:2px;
  715. margin-top:100px;
  716. margin-bottom:20px;
  717. color:{color:description text};
  718. }
  719.  
  720. /* ------------------------- ✕ sidebar icon ✕ ------------------------ */
  721.  
  722. #sbicon {
  723. top:50%;
  724. left:50%;
  725. transform:translate(-50%,-50%);
  726. position:fixed;
  727. margin-top:150px;
  728. z-index:9999;
  729. }
  730.  
  731. #sbicon img {
  732. width:70px;
  733. height:70px;
  734. border-radius:50%;
  735. border: 6px {color:wrap borders} solid;
  736. }
  737.  
  738.  
  739. /* ----------------------------- ✕ tabs ✕ ---------------------------- */
  740.  
  741. #tabcont {
  742. margin-left:5px;
  743. margin-top:-120px;
  744. z-index:999;
  745. position:fixed;
  746. top:50%;
  747. left:50%;
  748. transform:translate(-50%,-50%);
  749. }
  750.  
  751. ul.tabs{
  752. margin: 0px;
  753. padding: 1px;
  754. background: {color:description box};
  755. list-style: none;
  756. }
  757.  
  758. ul.tabs li{
  759. background-color: {color:wrap borders};
  760. color: {color:accent};
  761. border-bottom:3px {color:description box} solid;
  762. {block:ifnottabs}
  763. border-bottom:3px {color:accent} solid;
  764. -webkit-transition: all .7s;
  765. -moz-transition: all .7s;
  766. -o-transition: all .7s;
  767. -ms-transition: all .7s;
  768. transition: all .7s;
  769. {/block:ifnottabs}
  770. width:91px;
  771. margin-left:-1px;
  772. font-size:11px;
  773. height:10px;
  774. z-index:9999;
  775. margin-top:-2px;
  776. text-align:center;
  777. display: inline-block;
  778. padding: 5px 5px 13px 13px;
  779. cursor: pointer;
  780. }
  781.  
  782. {block:ifnottabs}
  783. ul.tabs li:hover{
  784. color:{color:posts};
  785. background-color: {color:accent};
  786. -webkit-transition: all .7s;
  787. -moz-transition: all .7s;
  788. -o-transition: all .7s;
  789. -ms-transition: all .7s;
  790. transition: all .7s;
  791. }
  792. {/block:ifnottabs}
  793.  
  794. ul.tabs li.current{
  795. {block:iftabs}
  796. background: {color:wrap};
  797. color: {color:text};
  798. border-bottom:3px {color:accent} solid;
  799. {/block:iftabs}
  800. }
  801.  
  802. .tab-content{
  803. display: none;
  804. width:430px;
  805. margin-top:170px;
  806. background: {color:wrap};
  807. height:390px;
  808. z-index:9999;
  809. overflow:auto;
  810. padding: 15px;
  811. }
  812.  
  813. .tab-content.current{
  814. display: inherit;
  815. }
  816.  
  817. /* -------------------------- ✕ navi page ✕ ------------------------- */
  818.  
  819. .linkbox {
  820. background:{color:description box};
  821. width:190px;
  822. height:100px;
  823. margin-left:20px;
  824. text-align:center;
  825. margin-top:35px;
  826. }
  827.  
  828. .linkbox a {
  829. width:100%;
  830. padding-bottom:5px;
  831. border-bottom: 1px solid {color:accent};
  832. display: inline-block;
  833. text-align:center;
  834. margin-top:10px;
  835. }
  836.  
  837. #screenbox {
  838. width:170px;
  839. height:240px;
  840. float:right;
  841. margin-right:-58px;
  842. margin-top:-181px;
  843. top:50%;
  844. left:50%;
  845. transform:translate(-50%,-50%);
  846. background-image:url('{image:phone wallpaper}');
  847. background-color:{color:description box};
  848. }
  849.  
  850. #screenbox i {
  851. color:{color:screen accent};
  852. }
  853.  
  854. #tab-3 a {
  855. font-size:8.5px;
  856. }
  857.  
  858. .screenhour {
  859. font-family: 'Heebo', sans-serif;
  860. font-size:50px;
  861. margin-top:40px;
  862. text-align:center;
  863. width:150px;
  864. margin-left:11px;
  865. height:170px;
  866. color:{color:screen accent};
  867. }
  868.  
  869. /* -------------------------- ✕ muse page ✕ ------------------------- */
  870.  
  871. #tab-4 img{
  872. border: 6px solid {color:wrap borders};
  873. }
  874.  
  875. .minfo {
  876. width:136px;
  877. font-size:8px;
  878. height:15px;
  879. padding:3px;
  880. text-align:center;
  881. color:{color:text};
  882. background-color:{color:wrap borders};
  883. }
  884.  
  885. /* --------------------------- Custom CSS -------------------------- */
  886. {CustomCSS}
  887. </style>
  888. </head>
  889.  
  890. <body onload=display_ct();>
  891.  
  892.  
  893. <div style="position:fixed;">
  894.  
  895. <div style="width:423px;height:30px;position:fixed;z-index:9999;margin-top:-240px;background-color:{color:wrap borders};top:50%; left:50%; transform:translate(-50%,-50%);padding-bottom:10px;padding-top:10px;border-radius:0px;margin-left:1px;margin-left:-1px;">
  896. <div class="remus">
  897. <a style="text-transform:lowercase;"href="/">{title}</a></div></div>
  898.  
  899. <div id="sbicon"><img src="{image:sbicon}"></div>
  900.  
  901. <div id="cont">
  902.  
  903. <div class="moony"style="margin-top:505px;position:fixed;z-index:99999"> {block:Pagination}
  904. {block:PreviousPage}
  905. <a style="padding:0px;margin-top:0px;margin-left:0px;border:none;background:transparent;color:{color:accent}"href="{PreviousPage}"><</a>{/block:PreviousPage} PAGE {CurrentPage} OF {TotalPages}. {block:NextPage}<a href="{NextPage}"style="padding:0px;margin-top:0px;margin-left:3px;border:none;background:transparent;color:{color:accent}">></a> {/block:NextPage}
  906. {/block:Pagination}</div>
  907.  
  908. <div id="spoopy" style="width:550px;height:100px;position:fixed;z-index:9999;margin-top:215px;border-top:2px solid {color:wrap borders};;background-color:{color:description box};top:50%; left:50%; transform:translate(-50%,-50%);border-radius:0px;margin-left:1px">
  909. <div class="mierdita">
  910. {description}
  911. </div>
  912.  
  913.  
  914. <a href="{text:link 1}" class="menu-item blue"> <span class="lnr lnr-home"></span> </a>
  915. <a href="{text:link 2}" class="menu-item green"> <span class="lnr lnr-envelope"></span> </a>
  916. <a href="{text:link 3}" style="visibility:hidden" class="menu-item green"> <i class="fa fa-coffee"></i> </a>
  917. <a href="{text:link 4}" class="menu-item red"> <i class="fa fa-heart"></i> </a>
  918.  
  919.  
  920. </div>
  921.  
  922.  
  923. <div id="tabcont"style="z-index:9999">
  924. <ul class="tabs" style="margin-top:562px;position:fixed;margin-left:15px">
  925. {block:ifnottabs}
  926.  
  927. <a href="{text:layers link}"><li class="tab-link current" data-tab="tab-1">{text:tab title 1}</li></a>
  928.  
  929. <a href="{text:question mark link}"><li class="tab-link" data-tab="tab-2">{text:tab title 2}</li></a>
  930.  
  931. <a href="{text:heart link}"><li style="margin-left:-12px" class="tab-link" data-tab="tab-3">{text:tab title 3}</li></a>
  932.  
  933. <a href="{text:rocket link}"><li class="tab-link" data-tab="tab-4">{text:tab title 4}</li></a>
  934.  
  935. {/block:ifnottabs}
  936.  
  937. {block:iftabs}
  938. <li class="tab-link current" data-tab="tab-1">{text:tab title 1}</li>
  939.  
  940. <li class="tab-link" data-tab="tab-2">{text:tab title 2}</li>
  941.  
  942. <li class="tab-link" style="margin-left:-12px" data-tab="tab-3">{text:tab title 3}</li>
  943.  
  944. <li class="tab-link" style="margin-left:0px" data-tab="tab-4">{text:tab title 4}</li>
  945. {/block:iftabs}
  946.  
  947.  
  948. </ul>
  949.  
  950. <div id="tab-1" class="tab-content current">
  951.  
  952. <div id="postcontainer"style="background-color:{color:wrap};z-index:9999">
  953. {block:Posts}
  954.  
  955. <article>
  956.  
  957.  
  958.  
  959. <!--TEXT POST-->
  960. {block:Text}
  961. {block:Title}
  962. <h1 class="title" style="text-align:center;font-size:18px;line-height:100%;background:{color:wrap};padding:5px;width:auto;margin:auto;">
  963. <a href="{Permalink}">{Title}</a></h1>
  964. {/block:Title}
  965. {Body}
  966. {/block:Text}
  967.  
  968.  
  969. <!--PHOTO POST-->
  970. {block:Photo}
  971. {block:IndexPage}
  972. {LinkOpenTag}
  973. <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  974. {LinkCloseTag}
  975. {/block:IndexPage}
  976. {block:PermalinkPage}
  977. {LinkOpenTag}
  978. <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
  979. {LinkCloseTag}{/block:PermalinkPage}
  980. {/block:Photo}
  981.  
  982.  
  983. <!--PHOTOSET POST-->
  984. {block:Photoset}
  985. {block:IndexPage}{Photoset-500}{/block:IndexPage}
  986. {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
  987. {/block:Photoset}
  988.  
  989.  
  990. <!--QUOTE POST-->
  991. {block:Quote}
  992. <div class="quote">{Quote}</div>
  993. {block:Source}
  994. <div class="quotesource">{Source}</div>
  995. {/block:Source}
  996. {/block:Quote}
  997.  
  998.  
  999. <!--LINK POST-->
  1000. {block:Link}
  1001. <h1 class="title"><a href="{URL}">{Name}</a></h1>
  1002. {block:Description}{Description}{/block:Description}
  1003. {/block:Link}
  1004.  
  1005.  
  1006. <!--CHAT POST-->
  1007. {block:Chat}
  1008.  
  1009. {block:Title}
  1010. <h1 class="title" style="text-align:center;font-size:24px;line-height:100%;border-bottom:1px solid {color:accent};padding-bottom:15px;width:Auto;margin:auto;">
  1011. <a href="{Permalink}">{Title}</a></h1>
  1012. {/block:Title}
  1013.  
  1014. <ul class="chat">
  1015. {block:Lines}<li class="{Alt}">{block:Label}<span class="label" style="text-transform:uppercase; font-weight:bold; ">{Label}</span>{/block:Label}<div style="text-transform:uppercase;">&nbsp;{Line}</div></li>{/block:Lines}
  1016. </ul>
  1017. {/block:Chat}
  1018.  
  1019.  
  1020. <!--AUDIO POST-->
  1021. {block:AudioPlayer}
  1022. <div class="audiowrapper">
  1023. {block:AlbumArt}
  1024. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  1025. {/block:AlbumArt}
  1026.  
  1027. <div class="playerbuttonbg">
  1028. <div class="newplayerbutton">
  1029. <div class="playerbuttonhug">
  1030.  
  1031. {AudioPlayerWhite}
  1032.  
  1033. </div>
  1034. </div>
  1035. </div>
  1036.  
  1037. <div class="trackdetails">
  1038.  
  1039. {block:TrackName}{TrackName}{/block:TrackName}<br/>
  1040. {block:Artist}<b><i>artist:</i></b> {Artist}{/block:Artist}<br/>
  1041. {block:Album}<i><b>album:</i></b {Album}{/block:Album}<br/>
  1042. {PlayCountWithLabel}
  1043.  
  1044. </div>
  1045. </div>
  1046. {/block:AudioPlayer}
  1047.  
  1048. {block:Caption}{/block:Caption}
  1049.  
  1050.  
  1051. <!--VIDEO POST-->
  1052. {block:Video}
  1053. <div class="video" style="text-align:center;">{Video-250}</div>
  1054. {block:Caption}{/block:Caption}
  1055. {/block:Video}
  1056.  
  1057.  
  1058. <!--ANSWER POST-->
  1059. {block:Answer}
  1060. <div class="askerimg"><img src="{AskerPortraitURL-40}" style="border-radius:50px;margin-left:10px;"></div>
  1061. <div style="padding:10px; background:{color:wrap}; width:auto; height:auto;margin-left:60px;margin-top:-43px; margin-bottom:30px;text-transform:uppercase;">
  1062. <div style="padding-bottom:10px;border-bottom:solid 1px {color:accent}; text-align:center; font-size:16px; font-family:'montserrat',sans serif;"><b>{Asker} </b> whispered</span></div><br>
  1063. <span class="question"style="text-transform:none">{Question}</span></div>
  1064. <p><div class="answer">{Answer}</div>
  1065. {/block:Answer}
  1066.  
  1067. <!--CAPTIONS-->
  1068.  
  1069. {block:Caption}
  1070. {Caption}
  1071. {/block:Caption}
  1072.  
  1073. <!--POST INFORMATION-->
  1074. <div class="postinfo">
  1075.  
  1076. <!--PERMALINK-->
  1077. <i class="fa fa-calendar" aria-hidden="true"></i>
  1078. <a href="{Permalink}">
  1079. {block:Date}
  1080. {ShortMonth} {DayOfMonth}{DayOfMonthSuffix} {12Hour}:{Minutes} {AmPm}
  1081. {/block:Date}
  1082. </a>
  1083.  
  1084. <!--NOTES-->
  1085. {block:NoteCount}
  1086. <a href="{Permalink}"> <span class="lnr lnr-heart"></span> {NoteCount} </a>
  1087. {/block:NoteCount}
  1088.  
  1089. <!--VIA AND SOURCE-->
  1090. {block:RebloggedFrom}
  1091. <a href="{ReblogParentURL}"><span class="lnr lnr-map-marker"></span></a>
  1092. {/block:RebloggedFrom}
  1093. {block:ContentSource}
  1094. | <a href="{SourceURL}"><span class="lnr lnr-pushpin"></span></a>
  1095. {/block:ContentSource}
  1096. {block:RebloggedFrom} {/block:RebloggedFrom} | <a href="{ReblogURL}" target="_blank" class="details"><i class="fa fa-retweet" aria-hidden="true"></i></a>
  1097.  
  1098. <!--TAGS-->
  1099. {block:HasTags}
  1100. <div class="tags">
  1101. <b style="color:{color:accent};font-size:10px;text-transform:uppercase;"><i class="fa fa-tags" aria-hidden="true"></i></b>
  1102. {block:Tags}
  1103. <a href="{TagURL}"><i class="fa fa-angle-right" aria-hidden="true"></i> {Tag}</a>
  1104. {/block:Tags}
  1105. </div>
  1106. {/block:HasTags}
  1107.  
  1108. </div>
  1109.  
  1110. <!--POST NOTES-->
  1111. {block:PostNotes}
  1112. <div class="pagenotes">{PostNotes-16}</div>
  1113. {/block:PostNotes}
  1114.  
  1115.  
  1116.  
  1117.  
  1118. </article>
  1119. {/block:Posts}
  1120. </div>
  1121. </div>
  1122.  
  1123. <div id="tab-2" class="tab-content">
  1124. <p><iframe style="margin-left:17px;margin-top:15px"frameborder="0" scrolling="no" width="90%" height="260" src="http://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>
  1125. </div>
  1126.  
  1127. <div id="tab-3" class="tab-content"style="overflow:hidden">
  1128.  
  1129. <div class="linkbox"style="height:123px">
  1130.  
  1131. <a href="{text:link 1}">{text:link 1 text}</a>
  1132. <a href="{text:link 2}">{text:link 2 text}</a>
  1133. <a href="{text:link 3}">{text:link 3 text}</a>
  1134. <a href="{text:link 4}"style="border-bottom:none">{text:link 4 text}</a>
  1135.  
  1136. </div>
  1137.  
  1138. <div class="linkbox"style="margin-top:10px;height:65px;">
  1139.  
  1140. <a href="{text:link 5}">{text:link 5 text}</a>
  1141. <a href="{text:link 6}"style="border-bottom:none">{text:link 6 text}</a>
  1142.  
  1143. </div>
  1144.  
  1145. <div class="linkbox"style="margin-top:10px;height:93px;">
  1146.  
  1147. <a href="{text:link 7}">{text:link 7 text}</a>
  1148. <a href="{text:link 8}">{text:link 8 text}</a>
  1149. <a href="{text:link 9}"style="border-bottom:none">{text:link 9 text}</a>
  1150.  
  1151. </div>
  1152.  
  1153. <div id="screenbox">
  1154. <div style="position:fixed;color:{color:screen accent}">&nbsp;&nbsp;<i style="font-size:6px"class="fa fa-circle" aria-hidden="true"></i><i style="font-size:6px"class="fa fa-circle" aria-hidden="true"></i><i style="font-size:6px"class="fa fa-circle" aria-hidden="true"></i><i style="font-size:6px"class="fa fa-circle-thin" aria-hidden="true"></i><i style="font-size:6px"class="fa fa-circle-thin" aria-hidden="true"></i><i style="font-size:8px"class="fa fa-wifi" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i style="font-size:8px"class="fa fa-lock" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 70%<i class="fa fa-battery-three-quarters" aria-hidden="true"></i></div>
  1155. <div class="screenhour"><span id='ct'></span>
  1156. <br><br>
  1157. <div style="font-size:8px;margin-top:-2px;" id="clockbox">
  1158. </div></div>
  1159. <div style="text-align:center;color:{color:screen accent};font-size:8px">press home to unlock<br><i class="fa fa-circle" aria-hidden="true"></i> <i class="fa fa-circle" aria-hidden="true"></i> <i class="fa fa-camera" aria-hidden="true"></i></div>
  1160.  
  1161.  
  1162. </div>
  1163.  
  1164. <div class="mierdita" style="width:170px;height:65px;margin-top:-110px;margin-left:235px">
  1165. {text:navi text}
  1166. </div>
  1167.  
  1168. </div>
  1169.  
  1170. <div id="tab-4" class="tab-content" style="overflow:auto;">
  1171.  
  1172. <!-- muse page ! -->
  1173.  
  1174. <div style="margin-left:65px;margin-top:40px; margin-bottom:70px;">
  1175.  
  1176. <!-- muse -->
  1177.  
  1178. <div class="minfo"style="border-radius: 4px 4px 0px 0px">
  1179. first middle last
  1180. </div>
  1181.  
  1182. <img src="https://68.media.tumblr.com/294c0a3e66d501d57cf52a1119e072a5/tumblr_ogcnb5PnLh1vpdt81o3_250.png">
  1183.  
  1184. <div class="minfo"style="font-size:12px;padding-top:5px;margin-top:-10px;">
  1185. <a href="link" title="link title"><span class="lnr lnr-camera"></span></a>&nbsp;
  1186. <a href="link" title="link title"><span class="lnr lnr-text-align-center"></span>&nbsp;
  1187. <a href="link" title="link title"><span class="lnr lnr-paperclip"></span></a>&nbsp;
  1188. <a href="link" title="link title"><span class="lnr lnr-heart-pulse"></span></a>&nbsp;
  1189. <a href="link" title="link title"><span class="lnr lnr-tag"></span></a>
  1190. </div>
  1191.  
  1192. <!-- end of muse -->
  1193.  
  1194. <!-- muse -->
  1195.  
  1196. <div style="margin-top:-119px;margin-left:150px">
  1197. <div class="minfo"style="border-radius: 4px 4px 0px 0px">
  1198. first middle last
  1199. </div>
  1200.  
  1201. <img src="https://68.media.tumblr.com/9b85b57d6491a9ee5a2956eb1ba84491/tumblr_ogcnb5PnLh1vpdt81o4_250.png">
  1202.  
  1203. <div class="minfo"style="font-size:12px;padding-top:5px;margin-top:-10px;">
  1204. <a href="link" title="link title"><span class="lnr lnr-camera"></span></a>&nbsp;
  1205. <a href="link" title="link title"><span class="lnr lnr-text-align-center"></span>&nbsp;
  1206. <a href="link" title="link title"><span class="lnr lnr-paperclip"></span></a>&nbsp;
  1207. <a href="link" title="link title"><span class="lnr lnr-heart-pulse"></span></a>&nbsp;
  1208. <a href="link" title="link title"><span class="lnr lnr-tag"></span></a>
  1209. </div>
  1210. </div>
  1211.  
  1212. <!-- end of muse -->
  1213.  
  1214. <!-- muse -->
  1215.  
  1216. <div style="margin-top:7px;">
  1217. <div class="minfo"style="border-radius: 4px 4px 0px 0px">
  1218. first middle last
  1219. </div>
  1220.  
  1221. <img src="https://68.media.tumblr.com/2cdad9ea5dc448a15a05ceaf7ff7d3a7/tumblr_ogcnb5PnLh1vpdt81o2_250.png">
  1222.  
  1223. <div class="minfo"style="font-size:12px;padding-top:5px;margin-top:-10px;">
  1224. <a href="link" title="link title"><span class="lnr lnr-camera"></span></a>&nbsp;
  1225. <a href="link" title="link title"><span class="lnr lnr-text-align-center"></span>&nbsp;
  1226. <a href="link" title="link title"><span class="lnr lnr-paperclip"></span></a>&nbsp;
  1227. <a href="link" title="link title"><span class="lnr lnr-heart-pulse"></span></a>&nbsp;
  1228. <a href="link" title="link title"><span class="lnr lnr-tag"></span></a>
  1229. </div>
  1230. </div>
  1231.  
  1232. <!-- end of muse -->
  1233.  
  1234. <!-- muse -->
  1235.  
  1236. <div style="margin-top:-119px;margin-left:150px">
  1237. <div class="minfo"style="border-radius: 4px 4px 0px 0px">
  1238. first middle last
  1239. </div>
  1240.  
  1241. <img src="https://68.media.tumblr.com/01fcfbbfde24ca09e60f23b7c623d1db/tumblr_ogcnb5PnLh1vpdt81o1_250.png">
  1242.  
  1243. <div class="minfo"style="font-size:12px;padding-top:5px;margin-top:-10px;">
  1244. <a href="link" title="link title"><span class="lnr lnr-camera"></span></a>&nbsp;
  1245. <a href="link" title="link title"><span class="lnr lnr-text-align-center"></span>&nbsp;
  1246. <a href="link" title="link title"><span class="lnr lnr-paperclip"></span></a>&nbsp;
  1247. <a href="link" title="link title"><span class="lnr lnr-heart-pulse"></span></a>&nbsp;
  1248. <a href="link" title="link title"><span class="lnr lnr-tag"></span></a>
  1249. </div>
  1250. </div>
  1251.  
  1252. <!-- end of muse -->
  1253.  
  1254.  
  1255. </div>
  1256.  
  1257.  
  1258. </div>
  1259. </div>
  1260. </div>
  1261. </div>
  1262.  
  1263.  
  1264.  
  1265. <a href="http://destinatiia.tumblr.com/"target="_blank"><div id="yo"><span style="font-size:25px;"class="lnr lnr-leaf"></span><br>code by<br> becca
  1266. </div></a>
  1267. </body>
  1268.  
  1269.  
  1270. </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!