daily pastebin goal
49%
SHARE
TWEET

About Page [04]: Kuebiko

glenthemes Jul 7th, 2018 (edited) 1,780 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-----------------------------------------------------------------------
  2. Abut Page [04]: Kuebiko
  3. Made by glenthemes
  4.  
  5. TERMS OF USE:
  6. 1) Do not remove the theme credit.
  7. 2) Do not repost/redistribute my themes.
  8. 3) Do not take parts of the code and use it as your own.
  9. 4) Do not use my themes as a base code.
  10. 5) Do not mix my themes together.
  11. ------------------------------------------------------------------------>
  12.  
  13. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  14. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  15.  
  16. <head>
  17.  
  18. <title>{Title}</title>
  19.  
  20. <link rel="shortcut icon" href="{Favicon}">
  21.  
  22. <!--------------------JAVASCRIPTS-------------------->
  23. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  24. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  25. <script>
  26. (function($){
  27. $(document).ready(function(){
  28. $("a[title]").style_my_tooltips({
  29. tip_follows_cursor:true,
  30. tip_delay_time:0,
  31. tip_fade_speed:250,
  32. attribute:"title"
  33. });
  34. });
  35. })(jQuery);
  36. </script>
  37.  
  38.  
  39. <script>
  40. $(document).ready(function(){
  41.     $(".open").click(function(){
  42.         $('#screen, .baguette').fadeIn('fast');
  43.     });
  44.    
  45.     $(".close, #screen").click(function(){
  46.         $('#screen, .baguette').fadeOut('fast');
  47.     });
  48. });
  49.  
  50. $(document).keydown(function (event) {
  51.     if (event.keyCode == 27) {
  52.         $('#screen, .baguette').fadeOut('fast');
  53.         return false;
  54.     }
  55. });
  56. </script>
  57.  
  58. <script src="https://static.tumblr.com/2pnwama/HGEpacv22/hearts.js"></script>
  59.  
  60. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.4/SmoothScroll.js"></script>
  61.  
  62. <link href="https://fonts.googleapis.com/css?family=Satisfy|Karla|Muli|Playfair+Display|Raleway:400,600" rel="stylesheet">
  63.  
  64. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  65.  
  66. <!-------------------------------------------------------------------->
  67.  
  68. <style type="text/css">
  69.  
  70. /*--------------------TOOLTIPS--------------------*/
  71. #s-m-t-tooltip {
  72.     padding:3.5px 8px;
  73.     margin:26px 9px 0px 15px;
  74.     background-color:#222; /* tooltip background color */
  75.     font-family:karla;
  76.     font-size:9px; /* tooltip font size */
  77.     letter-spacing:1px;
  78.     text-transform:uppercase;
  79.     color:#eee; /* tooltip text color */
  80.     z-index:99999999999999999999999999998!important;
  81.     max-width:40vw;
  82. }
  83.  
  84. /*--------------------TUMBLR CONTROLS--------------------*/
  85. iframe#tumblr_controls, .iframe-controls--desktop {
  86.     top:5px!important;
  87.     right:5px!important;
  88.     position:fixed!important;
  89.    
  90.     transform:scale(0.8,0.8);
  91.     -webkit-transform:scale(0.8,0.8);
  92.    
  93.     transform-origin:100% 0;
  94.     z-index:999999!important;
  95. }
  96.  
  97. /*--------------------TEXT HIGHLIGHT--------------------*/
  98. ::selection {
  99. background:#f0f0f0; /* text highlight background color */
  100. color:#666; /* text highlight text color */
  101. }
  102.  
  103. ::-moz-selection {
  104. background:#f0f0f0; /* text highlight background color */
  105. color:#666; /* text highlight text color */
  106. }
  107.  
  108. /*--------------------BASICS--------------------*/
  109. body {
  110.     background-image:url('https://www.toptal.com/designers/subtlepatterns/patterns/what-the-hex.png'); /* general background image */
  111.     background-color:#fefefe; /* general background color */
  112.     background-attachment:fixed;
  113.     background-repeat:repeat;
  114.     color:#888;
  115.     cursor:normal;
  116.     font-family:karla;
  117.     line-height:1.6em;
  118.     font-size:12px;
  119.     text-align:left;
  120.     overflow:hidden;
  121. }
  122.  
  123. a {
  124.     text-decoration:none;
  125.     cursor:pointer;
  126.     -webkit-transition: all 0.4s ease-in-out;
  127.     -moz-transition: all 0.4s ease-in-out;
  128.     -o-transition: all 0.4s ease-in-out;
  129. }
  130.  
  131. pre, code {
  132.     white-space:pre-wrap;
  133.     display:block;
  134. }
  135.  
  136. /*--------------------CONTAINER--------------------*/
  137. #container {
  138.     position:fixed;
  139.     top:50%;left:50%;
  140.     transform:translate(-50%,-50%);
  141. }
  142.  
  143. /*--------------------TOP BAR LINKS--------------------*/
  144. #barwrap {display:flex;}
  145.  
  146. #tabs a {
  147.     display:inline-block;
  148.     margin-right:15px;
  149.     width:100px;
  150.     padding:8px;
  151.     background-color:#f8f7f9; /* top links background color */
  152.     border:1px solid #eee; /* top links border */
  153.     font-family:raleway;
  154.     font-weight:600;
  155.     font-size:11px;
  156.     text-transform:uppercase;
  157.     letter-spacing:2px;
  158.     color:#777; /* top links text color */
  159.     text-align:center;
  160. }
  161.  
  162. #tabs a:hover {
  163.     background-color:#252036; /* top links background color on hover */
  164.     border:1px solid #252036; /* top links border on hover */
  165.     color:#e8e2eb; /* top links text color on hover */
  166. }
  167.  
  168. /*--------------------MUSIC PLAYER--------------------*/
  169. #music {
  170.     padding:9px 11px 8px 11px;
  171.     background-color:#f8f7f9; /* music box background color */
  172.     border:1px solid #eee; /* music box border */
  173. }
  174.  
  175. .playy, .pausee {
  176.     font-size:13px;
  177.     color:#777; /* music box controls color */
  178. }
  179.  
  180. .pausee {
  181.     display:none;
  182.     font-size:9px;
  183. }
  184.  
  185. /*--------------------LARGE/MAIN BOX--------------------*/
  186. #box, .sideimage, #leftcont {margin-top:20px;}
  187.  
  188. #box {
  189.     width:800px;
  190.     height:440px;
  191.     background-color:#f8f7f9; /* main box background color */
  192.     border:1px solid #eee; /* main box border */
  193.     color:#888; /* main box text color */
  194. }
  195.  
  196. .sideimage {
  197.     position:absolute;
  198.     right:0;margin-right:20px;
  199.     width:300px; /* sidebar image width */
  200.     height:400px; /* sidebar image height */
  201. }
  202.  
  203. #leftcont {
  204.     margin-left:20px;
  205.     width:calc(100% - 300px - 40px - 20px);
  206.     height:calc(100% - 40px);
  207. }
  208.  
  209. /*--------------------HEADING AND SUBTITLE--------------------*/
  210. .heading {
  211.     font-family:playfair display;
  212.     text-transform:uppercase;
  213.     line-height:1.15em;
  214.     font-size:25px;
  215.     color:#444; /* heading color */
  216. }
  217.  
  218. .subtitle {
  219.     font-family:raleway;
  220.     font-weight:400;
  221.     text-transform:uppercase;
  222.     font-size:11px;
  223.     letter-spacing:1px;
  224. }
  225.  
  226. .heading sub, .subtitle sub {
  227.     font-size:smaller;
  228.     vertical-align:baseline;
  229. }
  230.  
  231. /*--------------------BIOGRAPHY TEXT SECTION--------------------*/
  232. .biotext {
  233.     margin-top:10px;
  234.     max-height:168px;
  235.     overflow:auto;
  236.     font-family:muli;
  237.     text-align:justify;
  238.     padding-right:10px; /* delete this line if you don't need a scrollbar */
  239. }
  240.  
  241. .biotext a {
  242.     padding-bottom:1px;
  243.     border-bottom:1px solid #e3e3e3; /* links bottom border */
  244.     color:#111; /* links color */
  245. }
  246.  
  247. .biotext a:hover {color:#a7b2ba;} /* links color on hover */
  248.  
  249. .biotext b {
  250.     font-weight:bold;
  251.     color:#deb4b4; /* bold text color */
  252. }
  253.  
  254. .biotext i {
  255.     font-style:italic;
  256.     color:#b4aeaf; /* italicized text color */
  257. }
  258.  
  259. .biotext blockquote {
  260.     padding-left:10px;
  261.     margin-left:5px;
  262.     border-left:1px solid;
  263.     border-color:#ddd; /* blockquote color */
  264.     margin:10px;
  265. }
  266.  
  267. .biotext p:last-child {margin-bottom:0px;}
  268.  
  269. .biotext::-webkit-scrollbar {
  270.     width:5px;
  271.     height:5px;
  272. }
  273.  
  274. .biotext::-webkit-scrollbar-thumb {
  275.     background-color:#888; /* biography section scrollbar itself */
  276.     border:2px solid #f8f7f9; /* biography section scrollbar background */
  277. }
  278.  
  279. .biotext::-webkit-scrollbar-track {
  280.     background:#ddd; /* biography section scrollbar track */
  281.     border:2px solid #f8f7f9; /* biography section scrollbar background */
  282. }
  283.  
  284. /*--------------------QUOTE SECTION--------------------*/
  285. .midwrap {
  286.     display:flex;
  287.     margin-top:12px;
  288.     min-height:60px;
  289. }
  290.  
  291. .symbol {
  292.     -webkit-align-self:center;
  293.     align-self:center;
  294.    
  295.     /* uncomment the following 2 lines to activate symbol rotation */
  296.    
  297.     /* -webkit-transform: scale(-1,-1);
  298.     transform: scale(-1,-1); */
  299. }
  300.  
  301. .symbol .sf {
  302.     font-size:20px;
  303.     padding:21px 20px 15px 20px;
  304.     background-color:#252134; /* symbol icon background color */
  305.     color:#fbedf2; /* symbol icon color */
  306. }
  307.  
  308. .quote {
  309.     -webkit-align-self:center;
  310.     align-self:center;
  311.     margin-left:20px;
  312.     font-family:satisfy;
  313.     font-size:16px;
  314.     line-height:1.6em;
  315.     color:#999; /* quote text color */
  316. }
  317.  
  318. /*--------------------CUSTOM LINKS--------------------*/
  319. .customlinks {
  320.     margin-top:calc(10px + 3px);
  321.     width:calc(100% + 10px);
  322. }
  323.  
  324. .customlinks a {
  325.     display:inline-block;
  326.     margin:3.5px 2px;
  327.     width:calc((100% / 4) - 20px);
  328.     background-color:#252134; /* custom links background color */
  329.     padding:6px;
  330.     font-family:raleway;
  331.     font-weight:400;
  332.     font-size:8px;
  333.     text-transform:uppercase;
  334.     letter-spacing:1.5px;
  335.     color:#fbedf2; /* custom links color */
  336.     text-align:center;
  337.     -webkit-transition: all 0.8s ease-in-out;
  338.     -moz-transition: all 0.8s ease-in-out;
  339.     -o-transition: all 0.8s ease-in-out;
  340. }
  341.  
  342. .customlinks a:hover {
  343.     background-color:#ff545e; /* custom links background color on hover */
  344.     color:#fff; /* custom links color on hover */
  345. }
  346.  
  347. /*--------------------POPUP BOX--------------------*/
  348. #screen {
  349.     display:none;
  350.     position:fixed;
  351.     top:0;left:0;
  352.     width:100%;height:100vh;
  353.     background-color:#fff; /* screen background color on popup */
  354.     opacity:0.55; /* opacity of screen */
  355.     z-index:10;
  356. }
  357.  
  358. .baguette {
  359.     display:none;
  360.     position:fixed;
  361.     top:50%;left:50%;
  362.     transform:translate(-50%,-50%);
  363.     width:450px;
  364.     padding:25px;
  365.     background-color:#252036; /* popup box background color */
  366.     text-align:center;
  367.     z-index:11;
  368. }
  369.  
  370. .poptext {
  371.     margin-bottom:20px;
  372.     font-family:raleway;
  373.     font-weight:400;
  374.     text-transform:uppercase;
  375.     font-size:11.5px;
  376.     letter-spacing:1px;
  377.     color:#e8e2eb; /* popup box text color */
  378. }
  379.  
  380. .baguette a {
  381.     display:inline-block;
  382.     margin:0px 7px;
  383.     width:60px;
  384.     padding:6px 8px;
  385.     border:1px solid #999; /* popup box options border */
  386.     font-family:raleway;
  387.     font-weight:600;
  388.     text-transform:uppercase;
  389.     letter-spacing:1.5px;
  390.     font-size:9.5px;
  391.     color:#e8e2eb; /* popup box options text color */
  392.     -webkit-transition: all 0.15s ease-in-out;
  393.     -moz-transition: all 0.15s ease-in-out;
  394.     -o-transition: all 0.15s ease-in-out;
  395. }
  396.  
  397. .baguette a:hover {
  398.     background-color:#ff545e; /* popup box options background color on hover */
  399.     border:1px solid #ff545e; /* popup box options border on hover */
  400.     color:#fff; /* popup box options text on hover */
  401. }
  402.  
  403. </style>
  404.  
  405. </head>
  406.  
  407. <body>
  408.  
  409. <div id="screen"></div>
  410. <div class="baguette">
  411.     <!--exit page popup text-->
  412.     <div class="poptext">Are you sure you want to exit?</div>
  413.     <a href="/">yes</a>
  414.     <a class="close">no</a>
  415. </div><!--baguette-->
  416.  
  417.  
  418. <div id="container">
  419.  
  420.  
  421. <div id="barwrap">
  422. <div id="tabs">
  423.     <a class="open">index</a>
  424.     <a href="/ask">message</a>
  425.     <a href="/archive">archive</a>
  426.     <!--PLEASE DO NOT REMOVE THE CREDIT! THANK YOU-->
  427.     <!--seriously. don't be That Guy-->
  428.     <a href="http://glenthemes.tumblr.com" title="page by glenthemes">credit</a>
  429. </div><!--tabs-->
  430.  
  431. <div id="music">
  432.         <!--music hover title-->
  433.         <a title="blissful death" onclick="kaishi();">
  434.         <div class="playy">▷</div>
  435.         <div class="pausee">⌷⌷</div>
  436.         </a>
  437. </div><!--music-->
  438. </div><!--barwrap-->
  439.  
  440. <!--music URL-->
  441. <audio id="tune" src="https://dl.dropboxusercontent.com/s/t93a12m9qr6ejdc/Blissful%20Death.mp3" onended="restart();" type="audio"></audio>
  442.  
  443.  
  444. <div id="box">
  445.     <!--sidebar image URL-->
  446.     <img class="sideimage" src="https://78.media.tumblr.com/787f3b754f5636e27f3b6f6e4214352c/tumblr_pba8zpWzvr1qg2f5co2_640.png">
  447.    
  448.     <div id="leftcont">
  449.     <!--text title and subtitles-->
  450.     <!--use <sub> for smaller text-->
  451.         <div class="heading">your heading here</div>
  452.         <div class="subtitle">your subtitle here</div>
  453.        
  454.         <!--main biography text. looks best with 9 lines or more-->
  455.         <div class="biotext">
  456.         say whatever you want about yourself! :D
  457.         </div><!--do not delete this line-->
  458.        
  459.         <div class="midwrap">
  460.             <!--quote symbol icon-->
  461.             <!--go to the following site to choose an icon-->
  462.             <!--http://saturnthms.tumblr.com/font-->
  463.             <div class="symbol"><span class="sf sf-quotation-mark"></span></div>
  464.            
  465.             <!--quote text-->
  466.             <div class="quote">a quote goes here</div>
  467.         </div><!--midwrap-->
  468.        
  469.         <div class="customlinks">
  470.             <!--your custom links. looks best with 8-->
  471.             <a href="/">link one</a>
  472.             <a href="/">link two</a>
  473.             <a href="/">link three</a>
  474.             <a href="/">link four</a>
  475.             <a href="/">link five</a>
  476.             <a href="/">link six</a>
  477.             <a href="/">link seven</a>
  478.             <a href="/">link eight</a>
  479.         </div>
  480.        
  481.     </div><!--leftcont-->
  482. </div><!--box-->
  483. </div><!--container-->
  484.  
  485.  
  486. </body>
  487.  
  488. </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