SHARE
TWEET

theme 01: superhuman.

springdoy Jul 17th, 2019 (edited) 651 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!--
  2.  
  3. 1. PLEASE DON'T REMOVE THE CREDIT.
  4. 2. feel free to edit all the fonts and colors but don't claim as yours.
  5. 3. don't take parts of the code.
  6. 4. don't use it as a base.
  7.  
  8. made by: springdoy.
  9.  
  10. if you have any question i'll be happy to help you!
  11.  
  12. -->
  13.  
  14.  
  15. <html>
  16.     <head>
  17.         <title>{Title}</title>
  18.         <link rel="shortcut icon" href="{Favicon}">
  19.         <link rel="alternate" type="application/rss+xml" href="{RSS}">
  20.         {block:Description}
  21.             <meta name="description" content="{MetaDescription}" />
  22.         {/block:Description}
  23. <link href="https://fonts.googleapis.com/css?family=Istok+Web:400,400i,700,700i&display=swap" rel="stylesheet">
  24. <link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
  25.     <script src="https://kit.fontawesome.com/860e19f8d2.js"></script>
  26. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  27.    
  28.            
  29.     <meta name="color:bg" content="#e2e2e2"/>
  30.     <meta name="color:txt" content="#575757"/>
  31.     <meta name="color:accent" content="#7d93b0"/>
  32.     <meta name="color:posts" content="#f5f5f5"/>
  33.     <meta name="color:border" content="#d7d7d7"/>
  34.     <meta name="color:accent2" content="#b07b68"/>
  35.     <meta name="color:desc" content="#c3c3c3"/>      
  36.        
  37.     <meta name="image:sideim" content="https://placehold.it/270x360/7d93b0"/>
  38.     <meta name="image:sidenav" content="https://placehold.it/270x360/000000"/>
  39.    
  40.     <meta name="text:title" content="keep it long"/>
  41.     <meta name="text:description" content="/"/>
  42.    
  43.     <meta name="text:link1" content="/"/>
  44.     <meta name="text:link1 name" content="/"/>
  45.     <meta name="text:link2" content="/"/>        
  46.     <meta name="text:link2 name" content="/"/>
  47.     <meta name="text:link3" content="/"/>  
  48.     <meta name="text:link3 name" content="/"/>  
  49.    
  50.     <meta name="text:threads" content="00/00"/>  
  51.     <meta name="text:drafts" content="00/00"/>
  52.     <meta name="text:icon one" content="star"/>
  53.     <meta name="text:name one" content="name"/>    
  54.     <meta name="text:link one" content="/"/>
  55.     <meta name="text:icon two" content="skull-o"/>
  56.     <meta name="text:name two" content="name"/>    
  57.     <meta name="text:link two" content="/"/>
  58.     <meta name="text:icon three" content="rabbit"/>
  59.     <meta name="text:name three" content="name"/>    
  60.     <meta name="text:link three" content="/"/>
  61.     <meta name="text:icon four" content="fire"/>
  62.     <meta name="text:name four" content="name"/>
  63.     <meta name="text:link four" content="/"/>
  64.     <meta name="text:info" content="you can put ur name, timezone or a short bio here!"/>    
  65.     </head>
  66.    
  67.    
  68. <style type="text/css">
  69.  
  70. @font-face { font-family: hightide; src: url('https://dl.dropboxusercontent.com/s/94upkctje3nnnmx/High%20Tide%20-%20Demo.ttf') ; }
  71.  
  72.  
  73.  
  74. /* BASIC THINGS */
  75. .iframe-controls--desktop {
  76.    position:fixed;
  77.    top:0px;
  78.    right:0px;
  79.    z-index:214748364789123456789;
  80.    -webkit-transform:scale(0.6,0.6);
  81.    -webkit-transform-origin: 100% 0%;
  82.    -ms-transform-origin:100% 0%;
  83.    -ms-transform:scale(0.6,0.6);
  84.    transform:scale(0.6,0.6);
  85.    transform-origin:100% 0%;
  86. }
  87.  
  88. body {
  89.     background: {color:bg};
  90.     font-family: 'Istok Web', sans-serif;
  91.     font-size: 10px;
  92.     color: {color:txt};
  93.     letter-spacing: 0.4px;
  94.     text-transform: lowercase;
  95. }
  96.  
  97. b, bold, strong {
  98.     color: {color:accent};
  99.     font-weight: bold;
  100. }
  101.  
  102. i, italic {
  103.     color: {color:accent};
  104. }
  105.  
  106. small {
  107.     font-size: 10px;
  108. }
  109.  
  110. big {
  111.     font-size: 12px;
  112.     font-weight: bold;
  113.     color: {color:accent};
  114. }
  115.  
  116. a {
  117.    text-decoration:none;
  118.    color:{color:accent2};
  119.    text-transform: uppercase;
  120.    font-weight: bold;
  121.    letter-spacing: 1px;
  122.    font-size: 8px;
  123. }
  124.  
  125. a:hover {
  126.    color:{color:border};
  127. }
  128.  
  129. blockquote {
  130.    padding:2px 20px;
  131.    margin:3px 0 3px 8px;
  132.    border-left: 1px solid {color:border};
  133. }
  134.  
  135. #container {
  136.     left: 46%;
  137.     position: fixed;
  138.     background-color: transparent;
  139.     padding: 25px 25px;
  140.     height: 500px;
  141.     overflow: scroll;
  142.     margin-top: 30px;
  143.     overflow-x: hidden!important;
  144.     z-index: 999;
  145. }
  146.  
  147. .posts {
  148.     width: 300px!important;
  149.     height: auto!important;
  150.     background-color: {color:posts};
  151.     padding: 30px;
  152.     margin: 20px 0px;
  153.     border: 1px solid {color:border};
  154.  
  155. }
  156.  
  157. img {
  158.    max-width:100%;
  159.    height:auto;
  160. }
  161.  
  162. .video {
  163.    max-width:300px!important;
  164.    max-height: 150px!important;
  165.    
  166. }
  167.  
  168. .video iframe {
  169.    max-width:300px!important;
  170.    max-height: 150px!important;
  171.    
  172. }
  173.  
  174. ::-webkit-scrollbar {
  175.     display: none;
  176. }
  177.  
  178. .navbar {
  179.     width: 100%;
  180.     background: {color:posts};
  181.     height: auto;
  182.     bottom: 0%;
  183.     border: 1px solid {color:border};
  184.     border-bottom: none;
  185.     position: fixed;
  186.     left: 0%;
  187.     padding: 15px 50px;
  188. }
  189.  
  190. .nav {
  191.     font-size: 10px;
  192.     font-family: montserrat;
  193.     font-weight: 900;
  194.     display: inline-block;
  195.     margin: 0px 15px;
  196.     text-transform: lowercase!important;
  197.     z-index: 9999;
  198. }
  199.  
  200. .nav a {
  201.     font-size: 10px;
  202.     font-family: montserrat;
  203.     font-weight: 900;
  204.     display: inline-block;
  205.     margin: 0px 15px;
  206.     text-transform: lowercase!important;
  207.     z-index: 9999;
  208.     letter-spacing: 1px;
  209.     transition: 0.3s;
  210.     color: {color:accent};
  211. }
  212.  
  213. .bgim {
  214.     width: 270px!important;
  215.     height: 360px;
  216.     background: url({image:sideim});
  217.     position: absolute;
  218.     top: 115px;
  219.     left: 300px;
  220.     z-index: 1;
  221.     border: 1px solid {color:border};
  222.     overflow: hidden!important;
  223. }
  224.  
  225.  
  226. /* SIDEBAR */
  227.  
  228. .title {
  229.     width: 300px;
  230.     font-size: 70px;
  231.     color: {color:accent2};
  232.     font-family: 'Permanent Marker', cursive;
  233.     overflow: hidden!important;
  234.     text-align:center;
  235.     line-height: 90%;
  236.     opacity: 0.5;
  237.     transform: rotate(-13deg);
  238.     margin-top: 10px;
  239.     margin-left: -15px;
  240.     z-index: 3;
  241.  
  242. }
  243.  
  244. .side {
  245.     width: 180px!important;
  246.     height: 180px!important;
  247.     padding: 20px;
  248.     position: fixed;
  249.     top: 220px;
  250.     left: 325px;
  251.     z-index: 7;
  252.     overflow: hidden;
  253. }
  254.  
  255. .sides {
  256.     text-align: justify;
  257.     overflow: scroll;
  258.     margin-top: 55px;
  259.     width: 180px;
  260.     height: 135px;
  261.     color:{color:desc};
  262. }
  263.  
  264. /* audio */
  265.  
  266. .playbutton {
  267.    position:relative;
  268.    margin-top:10px;
  269.    margin-left:9px;
  270.    z-index:9;
  271.    width:33px;
  272.    height:40px;
  273.    overflow:hidden;
  274.    color: black;
  275.  
  276. }
  277.  
  278. .trackinfo {
  279.    margin-bottom:10px;
  280.    border: 1px solid {color:border};
  281.    top:-4px;
  282.    margin-left:0px;
  283.    height:48px;
  284.    margin-top:-50px;
  285. }
  286.  
  287. .trackname {
  288.    padding-top:13px;
  289.    text-align:center;
  290.    font-size:10px;
  291.    text-transform:uppercase;
  292.    font-weight: bold;
  293.    color: {color:accent};
  294.    font-family: montserrat;
  295.    letter-spacing:2px;
  296.    
  297. }  
  298.  
  299. .artist {
  300.    text-align:center;
  301.    font-size:8px;
  302.    text-transform:uppercase;
  303.    letter-spacing:4px;
  304.    color: {color:txt};
  305. }
  306.  
  307. .chat ul {
  308.     list-style: none;
  309.     margin: 0;
  310.     padding: 0;
  311. }
  312.  
  313. .chat li {
  314.     margin-bottom: 5px!important;
  315.     padding: 2% 5%;
  316.     width: 90%;
  317.     text-transform: uppercase;
  318.     font-size: 8px;
  319.     letter-spacing: 1px;
  320.     margin: auto;
  321. }
  322.  
  323. .chat .odd {
  324.     text-align:left;
  325. }
  326.  
  327. .chat .odd b, bold, strong {
  328.     color: {color:accent};
  329. }
  330.  
  331. .chat .even {
  332.     text-align: right;
  333. }
  334.  
  335. #pagination {
  336.    position:fixed;
  337.    bottom:160px;
  338.    left:405px;
  339.    padding: 0px 12px;
  340.    background-color: {color:posts};
  341.    border: 1px solid {color:border};
  342. }
  343.  
  344. .tags {
  345.    text-align:center;
  346.    margin-top: 30px;
  347. }
  348.  
  349. .tags a {
  350.    font-size: 8px;
  351.    text-transform: lowercase;
  352.    color:{color: border};
  353.    letter-spacing: 1px;
  354. }
  355.  
  356. .tags a:hover {
  357.    color {color:bg};
  358. }
  359.  
  360.  
  361. .permalink {
  362.    font-family: montserrat;
  363.    float: left;
  364.    margin-left: 50px;
  365.    margin-top: 20px;
  366. }
  367.  
  368. .permalink a {
  369.    color: {color:accent2};
  370. }
  371.  
  372. .notes a {
  373.    color: {color:accent2};
  374. }
  375.  
  376. .notes {
  377.    font-family: montserrat;
  378.    float: right;
  379.    margin-right: 50px;
  380.    margin-top: 20px;
  381. }
  382.  
  383. .asker {
  384.    font-size:10px;
  385.    text-align:right;
  386.    border-bottom:1px solid {color:border};
  387.    margin-bottom:0px;
  388.    padding-bottom:6px;
  389. }
  390.  
  391.  
  392. .question {
  393.    padding: 15px 30px;
  394.    background-color: {color:bg};
  395. }
  396.  
  397. .notes2 {
  398.  
  399.    font-size: 7px;
  400.    font-weight:normal;
  401.    letter-spacing: 1px;
  402.    margin: 10px;
  403.    padding: 5px;
  404.    display:inline-block;
  405. }
  406.  
  407. .notes2 img {
  408.    border-radius: 50%;
  409.    margin-right: 5px;
  410. }
  411.  
  412. .label{
  413.    font-weight: bold;
  414.    color: {color:accent};
  415. }
  416.  
  417. .quot {
  418.     font-family: montserrat;
  419.     font-size: 14px;
  420.     line-height: 110%;
  421.     text-align: justify;
  422.     font-weight: 700;
  423.     font-style: italic;
  424.     letter-spacing: 0.5px;
  425.     text-transform: lowercase;
  426.     margin-bottom: 15px;
  427.  
  428. }
  429.  
  430. .ptit {
  431.     color: {color:accent};
  432.     font-family: 'Permanent Marker', cursive;
  433.     font-size: 24px;
  434.     margin-bottom: 15px;
  435.     line-height: 110%;
  436.     text-align: center;
  437.     text-transform: lowercase;
  438.  
  439. }
  440.  
  441. .more-btn-wrap{
  442.    position: relative;
  443.    padding: 20px 0;
  444.    width: 100%;
  445. }
  446.  
  447. .more-btn-wrap a:link{
  448.    -webkit-transition: all 0.2s ease;
  449.    -moz-transition: all 0.2s ease;
  450.    -o-transition: all 0.2s ease;
  451.    transition: all 0.2s ease;
  452.    position: relative;
  453.    left: calc(50% - 50px);
  454.    padding: 4px 20px;
  455.    font-weight: bold;
  456.    border: 1px solid {color:border};
  457.    background: transparent;
  458. }
  459.  
  460. .cred {
  461.     width: 30px;
  462.     height: 30px;
  463.     border: 1px solid {color:border};
  464.     border-radius: 50%;
  465.     text-align: center;
  466.     font-size: 12px;
  467.     color: {color:accent};
  468.     margin-top: 41.5%;
  469.     margin-left: 5px;
  470.     position: absolute;
  471. }
  472.  
  473. /* tabs */
  474.  
  475. .tab {
  476.   overflow: hidden;
  477. }
  478.  
  479. .tab button {
  480.   background-color: transparent;
  481.   border: none;
  482.   outline: none;
  483.   cursor: pointer;
  484.   font-size: 10px;
  485.   font-weight: 900;
  486.   font-family: montserrat;
  487.   color: {color:accent};
  488.   margin-top: 10px;
  489.   position: relative;
  490.   letter-spacing: 1px;
  491.   transition: 0.3s;
  492. }
  493.  
  494.  
  495. .tabcontent {
  496.     display:none;
  497.     width: 270px!important;
  498.     height: 360px;
  499.     background: url({image:sidenav});
  500.     position: fixed;
  501.     top: 115px;
  502.     left: 300px;
  503.     z-index: 9;
  504.     border: 1px solid {color:border};
  505.     overflow: hidden!important;
  506.     overflow-x: hidden!important;
  507.   -webkit-animation: fadeEffect 1s;
  508.   animation: fadeEffect 1s;
  509. }
  510.  
  511. @-webkit-keyframes fadeEffect {
  512.   from {opacity: 0;}
  513.   to {opacity: 1;}
  514. }
  515.  
  516. @keyframes fadeEffect {
  517.   from {opacity: 0;}
  518.   to {opacity: 1;}
  519. }
  520.  
  521. .but {
  522.     font-size: 12px;
  523.     font-family: montserrat;
  524.     font-weight: bold;
  525.     float: right;
  526.     margin-top: 5px;
  527.     margin-right: 5px;
  528.     color: {color:accent};
  529.     z-index: 999999;
  530. }
  531.  
  532. .na {
  533.     width: 220px;
  534.     height: 260px;
  535.     padding: 50px 25px;
  536. }
  537.  
  538. .n {
  539.     width: 95px;
  540.     height: 50px;
  541.     margin: 15px 5px;
  542.     display: inline-block;
  543.     text-align:center;
  544. }
  545.  
  546. .nl {
  547.     font-family: montserrat;
  548.     font-size: 8px;
  549.     font-weight: 800;
  550.     color: {color:border};
  551.     text-transform: uppercase;
  552.     line-height: 15px;
  553. }
  554. </style>
  555.    
  556. <body>
  557. <script>
  558. $(document).ready(function() {
  559.  
  560.   var $audio = $('iframe.tumblr_audio_player');
  561.   $audio.load(function() {
  562.     $(this).contents().find('head').append('<style type="text/css">' +
  563.       '.audio-player { background: transparent!important; color: {color:accent} !important; }' +
  564.       '.audio-player .audio-info .track-artist { color: #fff !important; }' +
  565.     '</style>');
  566.   });
  567. });
  568.  
  569.  
  570. function openCity(evt, cityName) {
  571.  
  572.   var i, tabcontent, tablinks;
  573.  
  574.  
  575.   tabcontent = document.getElementsByClassName("tabcontent");
  576.   for (i = 0; i < tabcontent.length; i++) {
  577.     tabcontent[i].style.display = "none";
  578.   }
  579.  
  580.  
  581.   tablinks = document.getElementsByClassName("tablinks");
  582.   for (i = 0; i < tablinks.length; i++) {
  583.     tablinks[i].className = tablinks[i].className.replace(" active", "");
  584.   }
  585.  
  586.  
  587.   document.getElementById(cityName).style.display = "block";
  588.   evt.currentTarget.className += " active";
  589. }
  590.  
  591.  
  592. </script>
  593.  
  594. <a href="https://springdoy.tumblr.com/"><div class="cred"><div class="th th-stars" style="margin-top: 9px;"></div></div></a>
  595.  
  596. <!------- SIDEBAR -------->
  597. <div class="side"><div class="sides">{text:description}</div></div>
  598.  
  599.  
  600. <div class="navbar"><div class="tab">
  601. <div class="nav"><a href="{text:link1}">{text:link1 name}</a></div>
  602. <div class="nav"><button class="tablinks" onclick="openCity(event, 'nav')">navigation</button></div>
  603. <div class="nav"><a href="{text:link2}">{text:link2 name}</a></div>
  604. <div class="nav"><a href="{text:link3}">{text:link3 name}</a></div>
  605.  
  606. </div></div>
  607.  
  608. <div class="bgim"><div class="title">{text:title}</div></div><div class="bgi"></div>
  609.  
  610. <!--------- NAVIGATION TAB -------->
  611.  
  612. <div id="nav" class="tabcontent"><span onclick="this.parentElement.style.display='none'"><span class="but">x</span></span><br>
  613. <div class="na">
  614.  
  615. <div class="n"><span class="nl">
  616. <span class="th th-pencil" style="font-size: 25px; color: {color:accent2};"></span><br>
  617. {text:threads} threads</span></div>
  618.  
  619. <div class="n"><span class="nl">
  620. <span class="th th-list" style="font-size: 25px; color: {color:accent2};"></span><br>
  621. {text:drafts} drafts</span></div>
  622.  
  623. <div class="n"><span class="nl">
  624. <span class="th th-{text:icon one}" style="font-size: 25px; color: {color:accent2};"></span><br>
  625. <a href="{text:link one}">{text:name one}</a></span></div>
  626.  
  627. <div class="n"><span class="nl">
  628. <span class="th th-{text:icon two}" style="font-size: 25px; color: {color:accent2};"></span><br>
  629. <a href="{text:link two}">{text:name two}</a></span></div>
  630.  
  631. <div class="n"><span class="nl">
  632. <span class="th th-{text:icon three}" style="font-size: 25px; color: {color:accent2};"></span><br>
  633. <a href="{text:link three}">{text:name three}</a></span></div>
  634.  
  635. <div class="n"><span class="nl">
  636. <span class="th th-{text:icon four}" style="font-size: 25px; color: {color:accent2};"></span><br>
  637. <a href="{text:link four}">{text:name four}</a></span></div>
  638.  
  639. <div style="width: auto; height: auto; margin: auto; text-align: center; color: {color:desc};">{text:info}</div>    
  640. </div>
  641.  
  642.  
  643.  
  644. </div>
  645. <!------------------END OF TAB------------------>
  646.  
  647.  
  648. <div id="container">    
  649. {block:Posts}
  650. <div class="posts">
  651. {block:Text}{block:Title}<div class="ptit">{Title}</div>{/block:Title}{Body}
  652. {/block:Text}
  653.  
  654. {block:More}
  655. <div class="more-btn-wrap">
  656.     <a href="{Permalink}" class="more-btn">
  657.         Read More
  658.     </a>
  659. </div>
  660. {/block:More}
  661.  
  662. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  663.  
  664. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  665.  
  666. {block:Photoset}{Photoset}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  667.  
  668. {block:Quote}<div class="quot"><i class="fas fa-quote-left" style="color: {color:accent}; font-size: 15px;"></i> {Quote}</div> {/block:Quote}
  669.  
  670. {block:Link}<a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}
  671.  
  672.  
  673. {block:Chat}
  674. <div class="chat">
  675.     <ul>
  676.         {block:Lines}<li class="{Alt}">{block:Label} <span class="label">{Label}</span> {/block:Label}{Line}</li>{/block:Lines}
  677.     </ul>
  678. </div>
  679. {/block:Chat}
  680.                        
  681. {block:Video}<div class="video">{Video-500}</div>{block:Caption}{Caption}{/block:Caption}{/block:Video}
  682.  
  683. {block:Audio}
  684. {block:AudioPlayer}<div class="playbutton">{AudioPlayer}</div>
  685. <div class="trackinfo">
  686. <div class="trackname">
  687. {block:TrackName}{TrackName}{/block:TrackName}
  688. </div>
  689. <div class="artist">
  690. {block:Artist}{Artist}{/block:Artist}
  691. </div>
  692. </div>
  693. {block:Caption}{Caption}{/block:Caption}
  694. {/block:AudioPlayer}
  695. {/block:Audio}
  696.    
  697.  <div id="pagination">{block:Pagination}
  698. {block:PreviousPage}<a href="{PreviousPage}">prev</a>{/block:PreviousPage} {block:NextPage}<a href="{NextPage}">next</a>
  699. {/block:NextPage}
  700. {/block:Pagination}</div>
  701.  
  702. {block:Answer}
  703. <div class="asker">{Asker} asked: </div><div class="question">{Question}</div>
  704. {Answer}
  705. {/block:Answer}
  706.  
  707.  
  708. <div class="permin"><div class="permalink"><a href="{Permalink}">{Month} {DayOfMonthWithZero}</a></div> <div class="notes"><a href="{Permalink}">{block:NoteCount}{NoteCount}{/block:NoteCount} NOTES</a> <a href="{ReblogURL}"><span class="fas fa-retweet"></span></a></div>
  709. </div>
  710. <br>
  711. <div class="tags">{block:HasTags}{block:Tags}<i class="fas fa-tag" style="margin-right: 5px; margin-left: 9px; font-size: 6px; color: {color:accent};"></i><a href="{TagUrl}">{Tag}</a>{/block:Tags}{/block:HasTags}</div>
  712.  
  713. {block:PostNotes}<div class="notes2">{PostNotes-16}</div>{/block:PostNotes}    
  714. </div>
  715.  
  716.  
  717. {/block:Posts}
  718.  
  719. </div>
  720. </body>
  721. </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