SHARE
TWEET

THEME #16 * - FEEL SPECIAL

codesbyjack Oct 18th, 2019 (edited) 27 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2.  
  3.     <!--
  4.  
  5.                      -` feel special by jinsoouls ´-
  6.                     you know the deal, the usual rules
  7.                        apply, don't remove credit,
  8.                       repost or claim as your own!
  9.    
  10.     -->
  11.  
  12.     <meta name="color:background" content="#eeeeee"/>
  13.     <meta name="color:container" content="#ffffff"/>
  14.     <meta name="color:posts" content="#ffffff"/>
  15.     <meta name="color:border" content="#eeeeee"/>
  16.     <meta name="color:accent" content="#c6afaa"/>
  17.     <meta name="color:text" content="#757575"/>
  18.     <meta name="color:accent text" content="#ffffff"/>
  19.     <meta name="color:bold" content="#c6afaa"/>
  20.     <meta name="color:italic" content="#c6afaa"/>
  21.     <meta name="color:link" content="#c6afaa"/>
  22.     <meta name="color:link hover" content="#c6afaa"/>
  23.    
  24.     <meta name="if:muse tab" content="1"/>
  25.     <meta name="if:custom title" content="1"/>
  26.     <meta name="if:custom description" content="1"/>
  27.    
  28.     <meta name="select:navigate icon" content="lnr-cloud" title="cloud">
  29.     <meta name="select:navigate icon" content="lnr-star" title="star">
  30.     <meta name="select:navigate icon" content="lnr-moon" title="moon">
  31.     <meta name="select:navigate icon" content="lnr-heart" title="heart">
  32.     <meta name="select:navigate icon" content="lnr-cog" title="gear">
  33.     <meta name="select:navigate icon" content="lnr-map" title="map">
  34.     <meta name="select:navigate icon" content="lnr-earth" title="earth">
  35.    
  36.     <meta name="select:fourth link icon" content="lnr-heart" title="heart">
  37.     <meta name="select:fourth link icon" content="lnr-cloud" title="cloud">
  38.     <meta name="select:fourth link icon" content="lnr-moon" title="moon">
  39.     <meta name="select:fourth link icon" content="lnr-star" title="star">
  40.     <meta name="select:fourth link icon" content="lnr-user" title="user">
  41.     <meta name="select:fourth link icon" content="lnr-users" title="users">
  42.     <meta name="select:fourth link icon" content="lnr-cog" title="gear">
  43.    
  44.    
  45.     <meta name="image:background" content=""/>
  46.     <meta name="image:sidebar" content=""/>
  47.     <meta name="image:nav" content=""/>
  48.    
  49.     <meta name="image:muse 1" content=""/>
  50.     <meta name="image:muse 2" content=""/>    
  51.     <meta name="image:muse 3" content=""/>
  52.     <meta name="image:muse 4" content=""/>    
  53.     <meta name="image:muse 5" content=""/>
  54.     <meta name="image:muse 6" content=""/>    
  55.     <meta name="image:muse 7" content=""/>
  56.     <meta name="image:muse 8" content=""/>
  57.    
  58.     <meta name="text:description" content="this is your description keep it short">
  59.     <meta name="text:title" content="* feel special.">
  60.    
  61.     <meta name="text:free link" content="/">
  62.     <meta name="text:free link title" content="free link.">
  63.    
  64.     <meta name="text:link 1" content="/">
  65.     <meta name="text:link 1 title" content="link one.">
  66.     <meta name="text:link 2" content="/">
  67.     <meta name="text:link 2 title" content="link two.">
  68.     <meta name="text:link 3" content="/">
  69.     <meta name="text:link 3 title" content="link three.">
  70.     <meta name="text:link 4" content="/">
  71.     <meta name="text:link 4 title" content="link four.">
  72.     <meta name="text:link 5" content="/">
  73.     <meta name="text:link 5 title" content="link five.">
  74.     <meta name="text:link 6" content="/">
  75.     <meta name="text:link 6 title" content="link six.">
  76.    
  77. <head>
  78. <title>{Title}</title>
  79. <link rel="shortcut icon" href="{Favicon}">
  80. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  81. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  82.  
  83. <!-- jquery -->
  84. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  85.  
  86. <!-- script for tooltips -->
  87. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  88.  
  89. <!-- google fonts -->
  90. <link href="https://fonts.googleapis.com/css?family=Maven+Pro:400,500,700,900&display=swap" rel="stylesheet">
  91.  
  92. <!-- photoset.css by annathms and espoirthemes -->
  93. <link href="https://static.tumblr.com/0podkko/oDSpg7y88/photosets.css" rel="stylesheet">
  94.  
  95. <!-- autoresize video script by shythemes -->
  96. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  97.  
  98. <!-- honeybee by suiomi -->
  99. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  100.  
  101. <!-- linear icons font -->
  102. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  103.  
  104. <!-- animate.css -->
  105. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  106. <script>
  107.  
  108. /* photoset script by annathms and espoirthemes */
  109. function gatherData(images, arr) {
  110.   for (let i = 0; i < images.length; i++) {
  111.     let currentData = {
  112.       "width": images[i].getAttribute('data-width'),
  113.       "height": images[i].getAttribute('data-height'),
  114.       "low_res": images[i].getAttribute('data-lowres'),
  115.       "high_res": images[i].getAttribute('data-highres')
  116.     };
  117.     arr.push(currentData);
  118.   }
  119. }
  120. function getIndex(elem) {
  121.   let i = 0;
  122.   while( (elem = elem.previousElementSibling) != null ) i++;
  123.   return i;
  124. }
  125. function lightbox(elem) {
  126.   let currentPhotoset = elem.parentNode;
  127.   let photosetPhotos = currentPhotoset.getElementsByTagName('div');
  128.   let data = [];
  129.   gatherData(photosetPhotos, data);
  130.   Tumblr.Lightbox.init(data, getIndex(elem) + 1);
  131. }
  132.  
  133. /* side tab script */
  134. function openCity(evt, cityName) {
  135.     var i, tabcontent, tablinks;
  136.     tabcontent = document.getElementsByClassName("tabcontent");
  137.     for (i = 0; i < tabcontent.length; i++) {
  138.         tabcontent[i].style.display = "none";
  139.     }
  140.     tablinks = document.getElementsByClassName("tablinks");
  141.     for (i = 0; i < tablinks.length; i++) {
  142.         tablinks[i].className = tablinks[i].className.replace(" active", "");
  143.     }
  144.     document.getElementById(cityName).style.display = "block";
  145.     evt.currentTarget.className += " active";
  146. }
  147.  
  148. /* tooltip script */
  149. (function($){
  150.     $(document).ready(function(){
  151.         $("a[title]").style_my_tooltips({
  152.             tip_follows_cursor:true,
  153.             tip_delay_time:90,
  154.             tip_fade_speed:600,
  155.             attribute:"title"
  156.         });
  157.     });
  158. })(jQuery);
  159.  
  160. /* audio player color script by shudesigns */
  161. ($(document).ready(function() {
  162.     $('iframe.tumblr_audio_player').load( function() {
  163.         $('iframe.tumblr_audio_player').contents().find("head")
  164.             .append($("<style type='text/css'> .audio-player{background:{color:accent} !important} </style>"));
  165.         });
  166.     })
  167. )(jQuery);
  168.  
  169. </script>
  170.  
  171. <style>
  172.  
  173. @font-face { font-family: "mont light"; src: url(" https://dl.dropboxusercontent.com/s/j70rskvhq3j3tv2/Mont-ExtraLightDEMO.otf"); }
  174. @font-face { font-family: "mont heavy"; src: url(" https://dl.dropboxusercontent.com/s/gw86uuuybwd8c96/Mont-HeavyDEMO.otf"); }
  175.  
  176. ::-webkit-scrollbar {
  177.     width: 4px;
  178.     height: 1px;
  179.     background: transparent;
  180. }
  181.  
  182. ::-webkit-scrollbar-thumb {
  183.     background: transparent;
  184. }
  185.  
  186. ::selection {
  187.     color:{color:accent text};
  188.     background-color: {color:accent};
  189. }
  190.  
  191. ::-moz-selection {
  192.     color:{color:accent text};
  193.     background-color: {color:accent};
  194. }
  195.  
  196. #s-m-t-tooltip {
  197.     max-width:300px;
  198.     padding:8px 10px 9px 10px;
  199.     margin:20px 7px 2px 20px;
  200.     background-color:{color:bold};
  201.     font-size:11px;
  202.     text-transform:lowercase;
  203.     letter-spacing:0.7px;
  204.     color:{color:accent text};
  205.     z-index:999999999999999999999999999999999999;
  206.     border-radius:5px;
  207.     font-weight:500;
  208. }
  209.  
  210. body {
  211.     background:{color:background};
  212.     background-image:url({image:background});
  213.     margin:0px;
  214.     color:{color:text};
  215.     font-family: 'Maven Pro', sans-serif;
  216.     font-size:11px;
  217.     line-height:100%;
  218. }
  219.  
  220. small {font-size:11px;}
  221.  
  222. blockquote {
  223.     padding-left:20px;
  224.     margin-left:10px;
  225.     width:90%;
  226.     border-left:1px solid {color:border};
  227. }
  228.  
  229. blockquote blockquote {
  230.     padding-left:20px;
  231.     margin-left:10px;
  232.     border-left:1px solid {color:border};
  233. }
  234.  
  235. h1 {
  236.     font-size:30px;
  237.     color:{color:accent};
  238.     text-align:center;
  239.     line-height:100%;
  240.     text-transform:lowercase;
  241.     margin:5px;
  242.     font-family: "mont light";
  243. }
  244.  
  245. h2 {
  246.     font-size:14px;
  247.     color:{color:accent};
  248.     font-weight:bolder;
  249.     text-align:center;
  250.     text-transform:lowercase;
  251.     font-family: "mont light";
  252. }
  253.  
  254. a {
  255.     padding:0px 1px 1px 1px;
  256.     color:{color:link};
  257.     text-decoration:none;
  258.     border-bottom:1px solid {color:posts};
  259.     -moz-transition-duration:0.8s;
  260.     -webkit-transition-duration:0.8s;
  261.     -o-transition-duration:0.8s;
  262. }
  263.  
  264. a:hover {
  265.     color:{color:link hover};
  266.     border-bottom:1px solid {color:link hover};
  267.     -moz-transition-duration:0.8s;
  268.     -webkit-transition-duration:0.8s;
  269.     -o-transition-duration:0.8s;
  270. }
  271.  
  272. b {
  273.     color:{color:bold};
  274.     font-weight:bold;
  275.     letter-spacing:1px;
  276. }
  277.  
  278. i {color:{color:italic};letter-spacing:0.7px;}
  279. sub {font-size:11px;}
  280. sup {font-size:11px;}
  281. small{font-size:10px}
  282.  
  283. .container {
  284.     width:850px;
  285.     height:550px;
  286.     position: absolute;
  287.     margin:auto;
  288.     background-color:{color:container};
  289.     overflow:hidden;
  290.     left:0px;right:0px;top:0px; bottom:0px;
  291.     border-radius:5px;
  292. }
  293.  
  294. .entries {
  295.     position:absolute;
  296.     width:500px;
  297.     height:550px;
  298.     overflow:scroll;
  299.     margin:0px 0px 0px 350px;
  300. }
  301.  
  302. .post {
  303.     padding:10px;
  304.     width:420px;
  305.     background-color:{color:posts};
  306.     margin:30px;
  307.     border-radius:5px;
  308.     line-height:130%;
  309. }
  310.  
  311. .post img {
  312.     position:static;
  313.     height:auto;
  314.     width:auto;
  315.     max-width:100%;
  316.     border-radius:0px;
  317. }
  318.  
  319. .postinfo {
  320.     text-transform:uppercase;
  321.     font-size:10px;
  322.     letter-spacing:0.5px;
  323.     margin-left:-10px;
  324.     padding:10px;
  325.     width:100%;
  326.     border-top:1px solid {color:border};
  327. }
  328.  
  329.  
  330. .rebloglink {
  331.     background-color:{color:accent};
  332.     color:{color:accent text};
  333.     padding:3px 6px;
  334.     border:none;
  335.     border-radius:10px;
  336.     font-weight:500;
  337.    
  338. }
  339.  
  340. .rebloglink:hover {
  341.     color:{color:accent};
  342.     border:none;
  343.     background:{color:background};
  344. }
  345.  
  346. .tags {
  347.     width:100%;
  348.     padding:6px 10px 2px 10px;
  349.     font-size:9px;
  350.     margin-bottom:-5px;
  351.     text-align:center;
  352.     margin-left:-10px;
  353.     border-top:1px solid {color:border};
  354.     text-transform:uppercase;
  355. }
  356.  
  357. .tags b {
  358.     color:{color:accent};
  359.     font-size:12px;
  360. }
  361.  
  362. .tags  a {
  363.     color:{color:text};
  364.     border:none;
  365.     padding:none;
  366.     margin:none;
  367.     opacity:1;
  368. }
  369.  
  370. .tags a:hover {
  371.     background-color:transparent;
  372.     opacity:0.6;
  373. }
  374.  
  375. .postnote {
  376.     margin-top:10px;
  377.     text-transform:lowercase;
  378.     letter-spacing:0px;
  379.     font-size:10px;
  380.     text-align:left;
  381. }
  382.  
  383. /* different post types css */
  384. .question {
  385.     width:402px;
  386.     background-color:{color:accent};
  387.     color:{color:accent text};
  388.     padding:20px 20px 25px 20px;
  389.     margin:-11px 0px 0px -11px;
  390.     border-radius:5px 5px 0px 0px;
  391.     text-align:center;
  392. }
  393.  
  394. .askerdiv {
  395.     padding:5px;
  396.     margin-top:-12.5px;
  397.     text-align:center;
  398.     border:1px solid {color:border};
  399.     background-color:{color:container};
  400.     color:{color:accent};
  401.     border-radius:50px;
  402.     text-transform:lowercase;
  403. }
  404.  
  405. .askerdiv a {
  406.     color:{color:accent};
  407.     background-color:transparent;
  408.     font-weight:700;
  409.     padding:none;
  410.     border:none;
  411.     margin:none;
  412. }
  413.  
  414. .answer {margin:10px;}
  415.  
  416. .quotepost {text-align:center; padding:10px;}
  417.  
  418. .quotediv {
  419.     font-size:20px;
  420.     width:412px;
  421.     line-height:100%;
  422.     background-color:{color:accent};
  423.     color:{color:accent text};
  424.     padding:15px 15px 30px 15px;
  425.     text-transform:lowercase;
  426.     margin:-21px 0px 0px -21px;
  427.     border-radius:5px 5px 0px 0px;
  428. }
  429.  
  430. .quoteinfo {
  431.     margin-top:-15px;
  432.     border:1px solid {color:border};
  433.     color:{color:accent};
  434.     font-weight:600;
  435.     padding:5px 10px;
  436.     background-color:{color:posts};
  437.     margin-bottom:10px;
  438.     text-transform:lowercase;
  439.     font-size:13px;
  440. }
  441.  
  442. .chat {padding:20px;}
  443.  
  444. .audioplayer {
  445.     text-align:left;
  446.     width:432px;
  447.     background-color:{color:accent};
  448.     padding:15px 0px 15px 10px;
  449.     height:27.5px;
  450.     margin:-11px 0px 0px -11px;
  451.     border-radius:5px 5px 0px 0px;
  452. }
  453.  
  454. .audioinfo {
  455.     color:{color:accent text};
  456.     width:98%;
  457.     font-size:11px;
  458.     text-align:right;
  459.     margin-top:-30px;
  460.     letter-spacing:0.4px;
  461.     font-weight:600;
  462.     font-family: "mont light";
  463.     line-height:90%;
  464. }
  465.  
  466. .audioinfo div {
  467.     font-family: "mont heavy";
  468.     font-size:15px;
  469.     margin-top:2px;
  470. }
  471.  
  472. .readmore {
  473.     width:100%;
  474.     text-align:center;
  475.     padding:10px 0px;
  476.     margin-bottom:10px;
  477. }
  478.  
  479. .readmore a {
  480.     background-color:{color:accent};
  481.     border-radius:20px;
  482.     padding:3px 20px;
  483.     color:{color:accent text};
  484.     border:none;
  485.     text-transform:uppercase;
  486.     font-weight:500;
  487. }
  488.  
  489. .readmore a:hover {
  490.     color:{color:accent};
  491.     background-color:{color:background};
  492.     border:none;
  493. }
  494.  
  495.  
  496. .photoset-grid {grid-gap: 2px;}
  497. [photoset-layout] div {
  498.   cursor: pointer;
  499. }
  500.  
  501. .tit {
  502.     background-color:{color:container};
  503.     color:{color:accent};
  504.     border:1px solid {color:border};
  505.     font-size:25px;
  506.     text-align:center;
  507.     padding:16px 0px 14px 0px;
  508.     font-weight:500;
  509.     font-family: "mont light";
  510.     text-transform:lowercase;
  511. }
  512.  
  513. .pagination {
  514.     width:100%;
  515.     text-align:center;
  516.     margin-top:-10px;
  517.     margin-bottom:20px;
  518. }
  519.  
  520. /* sidebar css */
  521. .sidebar {
  522.     width:255px;
  523.     height:550px;
  524.     position:fixed;
  525.     background-color:{color:posts};
  526.     z-index:3333;
  527.     border-radius:5px 0px 0px 5px;
  528. }
  529.  
  530. .sidebarbox {
  531.     position:absolute;
  532.     width:220px;
  533.     padding:15px;
  534.     height:175px;
  535.     border-radius:5px;
  536.     margin:150px 0px 0px 100px;
  537.     background:{color:accent};
  538. }
  539.  
  540. .sideimg {
  541.     position:absolute;
  542.     width:100px;
  543.     height:175px;
  544.     border-radius:5px;
  545.     background:grey;
  546.     overflow:hidden;
  547. }
  548.  
  549. .sideimg img {
  550.     width:100%;
  551.     height:100%;
  552.     border-radius:5px;
  553. }
  554.  
  555. .sidetit {
  556.     position:absolute;
  557.     width:110px;
  558.     height:65px;
  559.     border-radius:5px;
  560.     color:{color:accent text};
  561.     font-size:30px;
  562.     margin-top:5px;
  563.     line-height:100%;
  564.     margin-left:110px;
  565.     font-family: "mont light";
  566. }
  567.  
  568. .sidedesc {
  569.     position:absolute;
  570.     width:120px;
  571.     height:50px;
  572.     font-size:10.5px;
  573.     letter-spacing:0.5px;
  574.     border-radius:5px;
  575.     color:{color:accent text};
  576.     margin-top:70px;
  577.     line-height:120%;
  578.     margin-left:110px;
  579.     overflow:hidden;
  580. }
  581.  
  582. .sidelinks {
  583.     position:absolute;
  584.     width:70px;
  585.     height:100px;
  586.     font-size:10px;
  587.     letter-spacing:0.5px;
  588.     border-radius:5px;
  589.     margin-top:120px;
  590.     font-size:18px;
  591.     line-height:100%;
  592.     margin-left:165px;
  593. }
  594.  
  595. .sidelinks a {
  596.     border:none;
  597.     color:{color:accent text};
  598. }
  599.  
  600. .sidelinks a:hover {
  601.     color:{color:bold};
  602. }
  603.  
  604. .sidelinks div {
  605.     display:inline-block;
  606.     width:25px;
  607.     margin:5px 2px;
  608.     text-align:center;
  609. }
  610.  
  611. .sidelinks div:hover {
  612.     cursor:pointer;
  613.     animation: jello 1s;
  614. }
  615.  
  616. /* side tab control css */
  617. .tabcontent {
  618.     position:absolute;
  619.     width:500px;
  620.     height:550px;
  621.     margin:0px 0px 0px 350px;
  622.     background-color:{color:container};
  623.     z-index:999999999;
  624.     display:none;
  625.     animation: fadeIn 0.8s;
  626. }
  627.  
  628. .close {
  629.     position:absolute;
  630.     font-size:17px;
  631.     color:{color:accent};
  632.     margin:20px 0px 0px 470px;
  633.     z-index:9999999;
  634.     -moz-transition-duration:0.8s;
  635.     -webkit-transition-duration:0.8s;
  636.     -o-transition-duration:0.8s;
  637. }
  638. .close:hover {
  639.     cursor: pointer;
  640.     color:{color:bold};
  641.     animation: jello 1s;
  642.     -moz-transition-duration:0.8s;
  643.     -webkit-transition-duration:0.8s;
  644.     -o-transition-duration:0.8s;
  645. }
  646.  
  647. /* nav tab css */
  648. .navs {
  649.     position:absolute;
  650.     width:310px;
  651.     padding:20px;
  652.     height:255px;
  653.     background-color:{color:posts};
  654.     margin:auto;
  655.     border-radius:5px;
  656.     top:0;bottom:0;right:0;left:0;
  657. }
  658.  
  659. .navimg {
  660.     position:absolute;
  661.     background-color:grey;
  662.     width:310px;
  663.     height:100px;
  664.     border-radius:5px;
  665.     overflow:hidden;
  666. }
  667.  
  668. .navimg img {
  669.     width:100%;
  670.     height:100%;
  671. }
  672.  
  673. .navlinks {
  674.     position:absolute;
  675.     width:310px;
  676.     margin:115px 0px 0px 0px;
  677.     height:210px;
  678.     text-align:center;
  679. }
  680.  
  681. .navlinks a {color:{color:accent text}; border:none;}
  682. .navlinks a:hover {color:{color:accent text}; border:none;}
  683.  
  684. .navlinks div {
  685.     display:inline-block;
  686. }
  687.  
  688. .navlink {
  689.     color:{color:accent text};
  690.     width:120px;
  691.     height:40px;
  692.     font-size:14px;
  693.     text-align:center;
  694.     border-radius:5px;
  695.     line-height:300%;
  696.     background-color:{color:accent};
  697.     padding:0px 10px 0px 10px;
  698.     margin:4px;
  699.     font-family: "mont light";
  700.     -moz-transition-duration:0.8s;
  701.     -webkit-transition-duration:0.8s;
  702.     -o-transition-duration:0.8s;
  703. }
  704.  
  705. .navlink span {
  706.     font-family: "mont heavy";
  707. }
  708.  
  709. .navlink:hover {
  710.     animation: pulse 1s;
  711.     background-color:{color:bold};
  712.     color:{color:accent};
  713.     -moz-transition-duration:0.8s;
  714.     -webkit-transition-duration:0.8s;
  715.     -o-transition-duration:0.8s;
  716. }
  717.  
  718. .navlink b + .navlink:hover{
  719.     color:{color:accent};
  720.     -moz-transition-duration:0.8s;
  721.     -webkit-transition-duration:0.8s;
  722.     -o-transition-duration:0.8s;
  723. }
  724.  
  725. .navtit {
  726.     position:absolute;
  727.     width:143px;
  728.     text-transform:lowercase;
  729.     margin:120px 0px 0px -5px;
  730.     height:210px;
  731.     font-size:20px;
  732.     line-height:150%;
  733.     color:{color:bold};
  734.     text-align:right;
  735.     font-family: "mont light";
  736. }
  737.  
  738. /* muse tab css */
  739. .muses {
  740.     position:absolute;
  741.     width:300px;
  742.     border:20px solid {color:posts};
  743.     height:305px;
  744.     background-color:{color:posts};
  745.     margin:auto;
  746.     border-radius:5px;
  747.     top:0;bottom:0;right:0;left:0;
  748.     overflow:scroll;
  749.     text-align:center;
  750. }
  751.  
  752. .muses a {border:none;padding:none;}
  753. .muses a:hover {border:none;padding:none;
  754.     cursor:pointer;}
  755.  
  756. .muse {
  757.     width:290px;
  758.     height:90px;
  759.     display:inline-block;
  760.     margin:6px 3px;
  761.     border-radius:5px;
  762.     background-color:{color:container};
  763.     overflow:hidden;
  764.     -webkit-filter: grayscale(0%);
  765.     filter: grayscale(0%);
  766.     -moz-transition-duration:0.8s;
  767.     -webkit-transition-duration:0.8s;
  768.     -o-transition-duration:0.8s;
  769. }
  770.  
  771. .muses img {
  772.     float:left;
  773. }
  774.  
  775. .musename {
  776.     position:absolute;
  777.     font-size:25px;
  778.     width:225px;
  779.     margin-left:70px;
  780.     margin-top:15px;
  781.     color:{color:accent};
  782.     z-index:4;
  783.     text-align:center;
  784.     font-family: "mont light";
  785. }
  786.  
  787. .muselinks {
  788.     position:absolute;
  789.     width:100%;
  790.     height:15px;
  791.     margin-top:75px;
  792.     background-color:{color:accent};
  793.     text-transform:uppercase;
  794.     letter-spacing:1px;
  795.     font-size:8px;
  796.     color:{color:accent text};
  797.     line-height:15px;
  798. }
  799.  
  800. .muselinks a {
  801.     padding:0px;
  802.     border:0px;
  803.     color:{color:accent text};
  804. }
  805.  
  806. .muselinks a:hover {
  807.     border:0px;
  808. }
  809.  
  810. .musestats {
  811.     position:absolute;
  812.     background-color:{color:posts};
  813.     text-transform:uppercase;
  814.     letter-spacing:1px;
  815.     padding:0px 5px;
  816.     font-size:8px;
  817.     width:185px;
  818.     margin:32.5px 0px 0px 85px;
  819.     z-index:3;
  820. }
  821.  
  822. .musetrait {
  823.     position:absolute;
  824.     width:225px;
  825.     margin-left:70px;
  826.     text-align:center;
  827.     font-size:10px;
  828.     margin-top:46.5px;
  829. }
  830.  
  831. .musetrait b {
  832.     color:{color:accent};
  833. }
  834.  
  835. /* tumblr controls styling by cyantists */
  836. iframe.tmblr-iframe {
  837.     z-index:99999999999999!important;
  838.     top:0!important;
  839.     right:0!important;
  840.     opacity:0.4;
  841.     /* delete invert(1) from here */
  842.         filter:invert(1) contrast(150%);
  843.         -webkit-filter:invert(1) contrast(150%);
  844.         -o-filter:invert(1) contrast(150%);
  845.         -moz-filter:invert(1) contrast(150%);
  846.         -ms-filter:invert(1) contrast(150%);
  847.     /* to here if your blog has a dark background */
  848.     transform:scale(0.65);
  849.     transform-origin:100% 0;
  850.     -webkit-transform:scale(0.65);
  851.     -webkit-transform-origin:100% 0;
  852.     -o-transform:scale(0.65);
  853.     -o-transform-origin:100% 0;
  854.     -moz-transform:scale(0.65);
  855.     -moz-transform-origin:100% 0;
  856.     -ms-transform:scale(0.65);
  857.     -ms-transform-origin:100% 0;}
  858.  
  859. iframe.tmblr-iframe:hover {
  860.     opacity:0.6!important;}
  861. /* end control styling */
  862.  
  863. /* please please PLEASE don't remove this :) */
  864. .credit {
  865.     position: fixed;
  866.     bottom: 10px;
  867.     right: 10px;
  868.     font-size:14px;
  869.     background-color:{color:posts};
  870.     padding:5px 6px 5px 6px;
  871.     border-radius:5px;
  872.     border:none;
  873. }
  874.  
  875. .credit:hover {
  876.     color:{color:accent};
  877.     border:none;
  878. }
  879.  
  880. .creditinfo {
  881.     display:none;
  882.     padding:5px;
  883.     text-align:center;
  884.     position: fixed;
  885.     bottom: 40px;
  886.     right: 10px;
  887.     height:22px;
  888.     font-size:9px;
  889.     border-radius:5px;
  890.     background-color:{color:posts};
  891.     animation: bounceIn 0.8s;
  892. }
  893.  
  894. .credit:hover + .creditinfo {
  895.     display:block;
  896. }
  897.  
  898. .fancyfont {
  899.     text-transform:uppercase;
  900.     font-weight:900;
  901.     color:{color:accent};
  902.     font-style: italic;
  903. }
  904. /* end of credit */
  905.  
  906. </style>
  907. </head>
  908. <body>
  909. <div class="container">
  910.     <div class="sidebar">
  911.         <div class="sidebarbox">
  912.             <div class="sideimg"><img src="{image:sidebar}"></div>
  913.             <div class="sidetit">
  914.             {block:IfCustomTitle}{text:title}{block:IfCustomTitle}
  915.             {block:IfNotCustomTitle}{Title}{block:IfNotCustomTitle}
  916.             </div>
  917.             <div class="sidedesc">
  918.             {block:IfCustomDescription}{text:description}{/block:IfCustomDescription}
  919.             {block:IfNotCustomDescription}{Description}{/block:IfNotCustomDescription}
  920.             </div>
  921.             <div class="sidelinks">
  922.                 <a href="/" title="refresh."><div><span class="lnr lnr-home"></span></div></a>
  923.                 <a href="/ask" title="inbox."><div><span class="lnr lnr-bubble"></span></div></a>
  924.                 <a class="tablinks" onclick="openCity(event, 'navtab');" title="navigate."><div><span class="lnr {select:navigate icon}"></span></div></a>
  925.                 {block:IfMuseTab}<a class="tablinks" onclick="openCity(event, 'musetab');" title="muses."><div><span class="lnr lnr-heart"></span></div></a>{/block:IfMuseTab}
  926.                 {block:IfNotMuseTab}<a href="{text:free link}" title="{text:free link title}"><div><span class="lnr {select:fourth link icon}"></span></div></a>{/block:IfNotMuseTab}
  927.             </div>
  928.         </div>
  929.     </div>
  930.        
  931. <!-- this is the nav tab! -->
  932. <div id="navtab" class="tabcontent">
  933.     <span onclick="this.parentElement.style.display='none'" class="close">x</span>
  934.     <div class="navs">
  935.         <div class="navimg"><img src="{image:nav}"></div>
  936.         <div class="navlinks">
  937.             <a href="{text:link 1}"><div class="navlink"><span>01</span>. {text:link 1 title}</div></a>
  938.             <a href="{text:link 2}"><div class="navlink"><span>02</span>. {text:link 2 title}</div></a>
  939.             <a href="{text:link 3}"><div class="navlink"><span>03</span>. {text:link 3 title}</div></a>
  940.             <a href="{text:link 4}"><div class="navlink"><span>04</span>. {text:link 4 title}</div></a>
  941.             <a href="{text:link 5}"><div class="navlink"><span>05</span>. {text:link 5 title}</div></a>
  942.             <a href="{text:link 6}"><div class="navlink"><span>06</span>. {text:link 6 title}</div></a>
  943.         </div>
  944.     </div>
  945. </div>          
  946.  
  947. <!-- this is the muse tab! -->
  948. <div id="musetab" class="tabcontent">
  949.     <span onclick="this.parentElement.style.display='none'" class="close">x</span>
  950.     <div class="muses">
  951.         <!-- muse one -->
  952.         <div class="muse">
  953.             <img src="{image:muse 1}">
  954.             <div class="musename">gabriel lui.</div>
  955.             <div class="musestats">lee minho. 20. idol.</div>
  956.             <div class="musetrait"><b>+</b> dedicated, creative, kind-hearted<br><b>-</b> naive, sensitive, softheaded</div>
  957.             <div class="muselinks">
  958.                 <a href="">threads.</a>&nbsp;&nbsp;
  959.                 <a href="">visage.</a>&nbsp;&nbsp;
  960.                 <a href="">musings.</a>&nbsp;&nbsp;
  961.                 <a href="">pinterest.</a>
  962.             </div>
  963.         </div>
  964.         <!-- muse two -->
  965.         <div class="muse">
  966.             <img src="{image:muse 2}">
  967.             <div class="musename">first last.</div>
  968.             <div class="musestats">faceclaim. age. occupation.</div>
  969.             <div class="musetrait">
  970.             <b>+</b> trait, trait, trait
  971.             <br>
  972.             <b>-</b> trait, trait, trait</div>
  973.             <div class="muselinks">
  974.                 <a href="THREAD LINK HERE">threads.</a>&nbsp;&nbsp;
  975.                 <a href="VISAGE LINK HERE">visage.</a>&nbsp;&nbsp;
  976.                 <a href="MUSING LINK HERE">musings.</a>&nbsp;&nbsp;
  977.                 <a href="PINTEREST LINK HERE">pinterest.</a>
  978.             </div>
  979.         </div>
  980.         <!-- muse three -->
  981.         <div class="muse">
  982.             <img src="{image:muse 3}">
  983.             <div class="musename">first last.</div>
  984.             <div class="musestats">faceclaim. age. occupation.</div>
  985.             <div class="musetrait">
  986.             <b>+</b> trait, trait, trait
  987.             <br>
  988.             <b>-</b> trait, trait, trait</div>
  989.             <div class="muselinks">
  990.                 <a href="THREAD LINK HERE">threads.</a>&nbsp;&nbsp;
  991.                 <a href="VISAGE LINK HERE">visage.</a>&nbsp;&nbsp;
  992.                 <a href="MUSING LINK HERE">musings.</a>&nbsp;&nbsp;
  993.                 <a href="PINTEREST LINK HERE">pinterest.</a>
  994.             </div>
  995.         </div>
  996.         <!-- muse four -->
  997.         <div class="muse">
  998.             <img src="{image:muse 4}">
  999.             <div class="musename">first last.</div>
  1000.             <div class="musestats">faceclaim. age. occupation.</div>
  1001.             <div class="musetrait">
  1002.             <b>+</b> trait, trait, trait
  1003.             <br>
  1004.             <b>-</b> trait, trait, trait</div>
  1005.             <div class="muselinks">
  1006.                 <a href="THREAD LINK HERE">threads.</a>&nbsp;&nbsp;
  1007.                 <a href="VISAGE LINK HERE">visage.</a>&nbsp;&nbsp;
  1008.                 <a href="MUSING LINK HERE">musings.</a>&nbsp;&nbsp;
  1009.                 <a href="PINTEREST LINK HERE">pinterest.</a>
  1010.             </div>
  1011.         </div>
  1012.         <!-- muse five -->
  1013.         <div class="muse">
  1014.             <img src="{image:muse 5}">
  1015.             <div class="musename">first last.</div>
  1016.             <div class="musestats">faceclaim. age. occupation.</div>
  1017.             <div class="musetrait">
  1018.             <b>+</b> trait, trait, trait
  1019.             <br>
  1020.             <b>-</b> trait, trait, trait</div>
  1021.             <div class="muselinks">
  1022.                 <a href="THREAD LINK HERE">threads.</a>&nbsp;&nbsp;
  1023.                 <a href="VISAGE LINK HERE">visage.</a>&nbsp;&nbsp;
  1024.                 <a href="MUSING LINK HERE">musings.</a>&nbsp;&nbsp;
  1025.                 <a href="PINTEREST LINK HERE">pinterest.</a>
  1026.             </div>
  1027.         </div>
  1028.         <!-- muse six -->
  1029.         <div class="muse">
  1030.             <img src="{image:muse 6}">
  1031.             <div class="musename">first last.</div>
  1032.             <div class="musestats">faceclaim. age. occupation.</div>
  1033.             <div class="musetrait">
  1034.             <b>+</b> trait, trait, trait
  1035.             <br>
  1036.             <b>-</b> trait, trait, trait</div>
  1037.             <div class="muselinks">
  1038.                 <a href="THREAD LINK HERE">threads.</a>&nbsp;&nbsp;
  1039.                 <a href="VISAGE LINK HERE">visage.</a>&nbsp;&nbsp;
  1040.                 <a href="MUSING LINK HERE">musings.</a>&nbsp;&nbsp;
  1041.                 <a href="PINTEREST LINK HERE">pinterest.</a>
  1042.             </div>
  1043.         </div>
  1044.         <!-- muse seven -->
  1045.         <div class="muse">
  1046.             <img src="{image:muse 7}">
  1047.             <div class="musename">first last.</div>
  1048.             <div class="musestats">faceclaim. age. occupation.</div>
  1049.             <div class="musetrait">
  1050.             <b>+</b> trait, trait, trait
  1051.             <br>
  1052.             <b>-</b> trait, trait, trait</div>
  1053.             <div class="muselinks">
  1054.                 <a href="THREAD LINK HERE">threads.</a>&nbsp;&nbsp;
  1055.                 <a href="VISAGE LINK HERE">visage.</a>&nbsp;&nbsp;
  1056.                 <a href="MUSING LINK HERE">musings.</a>&nbsp;&nbsp;
  1057.                 <a href="PINTEREST LINK HERE">pinterest.</a>
  1058.             </div>
  1059.         </div>
  1060.         <!-- muse eight -->
  1061.         <div class="muse">
  1062.             <img src="{image:muse 8}">
  1063.             <div class="musename">first last.</div>
  1064.             <div class="musestats">faceclaim. age. occupation.</div>
  1065.             <div class="musetrait">
  1066.             <b>+</b> trait, trait, trait
  1067.             <br>
  1068.             <b>-</b> trait, trait, trait</div>
  1069.             <div class="muselinks">
  1070.                 <a href="THREAD LINK HERE">threads.</a>&nbsp;&nbsp;
  1071.                 <a href="VISAGE LINK HERE">visage.</a>&nbsp;&nbsp;
  1072.                 <a href="MUSING LINK HERE">musings.</a>&nbsp;&nbsp;
  1073.                 <a href="PINTEREST LINK HERE">pinterest.</a>
  1074.             </div>
  1075.         </div>
  1076.         <!-- copy and paste the below to add more muses
  1077.         <div class="muse">
  1078.             <img src="IMAGE URL">
  1079.             <div class="musename">first last.</div>
  1080.             <div class="musestats">faceclaim. age. occupation.</div>
  1081.             <div class="musetrait">
  1082.             <b>+</b> trait, trait, trait
  1083.             <br>
  1084.             <b>-</b> trait, trait, trait</div>
  1085.             <div class="muselinks">
  1086.                 <a href="THREAD LINK HERE">threads.</a>&nbsp;&nbsp;
  1087.                 <a href="VISAGE LINK HERE">visage.</a>&nbsp;&nbsp;
  1088.                 <a href="MUSING LINK HERE">musings.</a>&nbsp;&nbsp;
  1089.                 <a href="PINTEREST LINK HERE">pinterest.</a>
  1090.             </div>
  1091.         </div>
  1092.         -->
  1093.     </div>
  1094. </div>    
  1095.        
  1096. <!-- entries start -->
  1097.  
  1098. <div class="entries">
  1099.  
  1100. {block:Posts}
  1101. <div class="post" id="{PostID}">
  1102.  
  1103. {block:Text}
  1104.     {block:Title}<div class="tit">{Title}</div>{/block:Title}
  1105.     <div style="padding:10px; padding-top:0px">{Body}</div>
  1106. {/block:Text}
  1107.  
  1108. {block:Quote}
  1109. <div class="quotepost">
  1110.     <div class="quotediv">" {Quote} "</div>
  1111.     {block:Source}
  1112.     <div class="quoteborder"></div>
  1113.     <div class="quoteinfo">— {Source}</div>
  1114.     {/block:Source}
  1115. </div>
  1116. {/block:Quote}
  1117.  
  1118. {block:Chat}
  1119. <div class="chat">
  1120.     {block:Title}<div class="tit">{Title}</div>{/block:Title}
  1121.     {block:Lines}
  1122.     {block:Label}<b>{Label}</b>{/block:Label}
  1123.     {Line}<br>
  1124.     {/block:Lines}
  1125. </div>
  1126. {/block:Chat}
  1127.  
  1128. {block:Video}
  1129.     <div class="video">{Video-500}</div>
  1130.     {block:Caption}{Caption}{/block:Caption}
  1131. {/block:Video}
  1132.  
  1133. {block:Photo}
  1134.     <img src="{PhotoURL-500}" style="width:100%">
  1135.     {block:Caption}{Caption}{/block:Caption}
  1136. {/block:Photo}
  1137.  
  1138. {block:Photoset}
  1139. <div class="photoset-grid" photoset-layout="{PhotosetLayout}">{block:Photos}<div data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" data-lowres="{PhotoURL-500}" data-highres="{PhotoURL-HighRes}" onclick="lightbox(this)"><img src="{PhotoURL-HighRes}" /></div>{/block:Photos}</div>
  1140.     {block:Caption}{Caption}{/block:Caption}<br>
  1141. {/block:Photoset}
  1142.  
  1143. {block:Link}
  1144.     <h1><a href="{URL}" {Target}>{Name}</a></h1>
  1145.     {block:Description}{Description}{/block:Description}
  1146. {/block:Link}
  1147.  
  1148. {block:More}
  1149. <div class="readmore">
  1150.     <a href="{Permalink}" class="more-btn">read more</a>
  1151. </div>
  1152. {/block:More}
  1153.  
  1154.  
  1155. {block:AudioPlayer}
  1156. <div class="audioplayer">{AudioPlayer}
  1157.     <div class="audioinfo">
  1158.         {block:TrackName}<div>{TrackName}</div>{/block:TrackName}
  1159.         {block:Artist}<br/>{Artist}{/block:Artist}
  1160.     </div>
  1161. </div>
  1162. {block:Caption}{Caption}{/block:Caption}
  1163. {/block:AudioPlayer}
  1164.  
  1165. {block:Answer}
  1166. <div class="question">{Question}</div>
  1167. <div class="askerdiv">asked by <b>{Asker}</b></div>
  1168. <div class="answer">{Answer}</div>
  1169. {/block:Answer}
  1170.  
  1171. <!-- to hide source and via on posts-->
  1172. {block:ContentSource}<div style="display: none;">{SourceURL}</div>{/block:ContentSource}
  1173. {block:NoRebloggedFrom}<div style="display: none;">{block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}</div>{/block:NoRebloggedFrom}
  1174.  
  1175.  
  1176. {block:Date}<div class="postinfo">
  1177.         <a href="{Permalink}">{TimeAgo}</a>
  1178.     {block:NoteCount}
  1179.          • <a href="{Permalink}">{NoteCountWithLabel}</a>
  1180.     {/block:NoteCount}
  1181.     <span style="float:right; marign-right:25px">
  1182.         <a href="{ReblogURL}" class="rebloglink">reblog</a>
  1183.     </span>
  1184. </div>{/block:Date}
  1185.  
  1186.  
  1187. {block:HasTags}
  1188. <div class="tags">
  1189. {block:Tags}<b>#</b><a href="{TagURL}">{Tag}</a>&nbsp;&nbsp;{/block:Tags}
  1190. </div>
  1191. {/block:HasTags}
  1192.  
  1193. </div>
  1194.  
  1195. <div class="postnote">
  1196.     {block:PostNotes}{PostNotes}{/block:PostNotes}
  1197. </div>
  1198.  
  1199. {/block:Posts}
  1200.  
  1201. {block:Pagination}<div class="pagination">
  1202.     {block:PreviousPage}<a href="{PreviousPage}">PREV</a>{/block:PreviousPage}
  1203.     {block:NextPage}<a href="{NextPage}">NEXT</a>{/block:NextPage}
  1204. </div>{/block:Pagination}
  1205.  
  1206. </div>
  1207. <!-- do not touch pls -->
  1208. <a href="https://jinsoouls.tumblr.com/" class="credit">
  1209.     <span class="th th-latte-o"></span>
  1210. </a>
  1211. <div class="creditinfo">
  1212.     coded by <br><span class="fancyfont">jinsoouls</span>
  1213. </div>
  1214. <!-- credit end-->
  1215.  
  1216. </body>
  1217. </html>
RAW Paste Data
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
 
Top