daily pastebin goal
8%
SHARE
TWEET

About Page [04]: Kuebiko

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