API tools faq
paste
HellaBlind

fire unicron

HellaBlind
Apr 3rd, 2020 (edited)
50
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.64 KB | None | 0 0
raw download clone embed print report
  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:#4e3a7a; /* 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:#4e3a7a; /* text highlight background color */
  100. color:#338ACC; /* text highlight text color */
  101. }
  102.  
  103. ::-moz-selection {
  104. background:#4E3A7A; /* text highlight background color */
  105. color:#338ACC; /* text highlight text color */
  106. }
  107.  
  108. /*--------------------BASICS--------------------*/
  109. body {
  110. background-image:url('https://cdn.discordapp.com/attachments/376215349718155267/513834631297105962/231261.png'); /* general background image */
  111. background-color:#4E3A7A; /* 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:#4E3A7A; /* top links background color */
  152. border:1px solid #338ACC; /* 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:#338ACC; /* top links text color */
  159. text-align:center;
  160. }
  161.  
  162. #tabs a:hover {
  163. background-color:#338ACC; /* 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:#4E3A7A; /* music box background color */
  172. border:1px solid #338ACC ; /* music box border */
  173. }
  174.  
  175. .playy, .pausee {
  176. font-size:13px;
  177. color:#338ACC; /* 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:#4E3A7A; /* main box background color */
  192. border:1px solid # 338ACC; /* main box border */
  193. color:# 338ACC; /* main box text color */
  194. }
  195.  
  196. .sideimage {
  197. position:absolute;
  198. right:-10;margin-right:20px;
  199. width:320px; /* sidebar image width */
  200. height:400px; /* sidebar image height */
  201. }
  202.  
  203. #leftcont {
  204. margin-left:20px;
  205. width:calc(99% - 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:#338ACC; /* 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 #338ACC; /* links bottom border */
  244. color:#4E3A7A; /* links color */
  245. }
  246.  
  247. .biotext a:hover {color:#338ACC;} /* links color on hover */
  248.  
  249. .biotext b {
  250. font-weight:bold;
  251. color:#338ACC; /* 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:#338ACC ; /* 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:#4E3A7A ; /* 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:#4E3A7A; /* custom links background color on hover */
  344. color:#338ACC; /* 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:#4E3A7A ; /* 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:#4E3A7A ; /* 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 #4E3A7A /* 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:#338ACC; /* 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:#338ACC; /* popup box options background color on hover */
  399. border:1px solid #4E3A7A; /* 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">User error. Please select an option.</div>
  413. <a href="/">No.</a>
  414. <a class="close">Why me?</a>
  415. </div><!--baguette-->
  416.  
  417.  
  418. <div id="container">
  419.  
  420.  
  421. <div id="barwrap">
  422. <div id="tabs">
  423. <a class="open">clip clop.</a>
  424. <a target="_blank" href="https://www.youtube.com/watch?v=o6Y7aCT9kis">Fast af boi.</a>
  425. <a target="_blank" href="https://www.youtube.com/watch?v=mtfBcTvcilo">sick burn.</a>
  426. <!--PLEASE DO NOT REMOVE THE CREDIT! THANK YOU-->
  427. <!--seriously. don't be That Guy-->
  428. <a target="_blank" href="http://glenthemes.tumblr.com" title="page by glenthemes. OOCLY is also a unicron. Feed me sugar cubes in DMs.">dank codes.</a>
  429. </div><!--tabs-->
  430.  
  431. <div id="music">
  432. <!--music hover title-->
  433. <a title="Trololol" 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="http://k007.kiwi6.com/hotlink/qrsjhhtklr/Icon_For_Hire_-_Off_With_Her_Head.mp3" onended="restart();" type="audio"></audio>
  442.  
  443.  
  444. <div id="box">
  445. <!--sidebar image URL-->
  446. <img class="sideimage" src="https://cdn.discordapp.com/attachments/376215349718155267/513823335357087744/8c5b40384976ea1e65f70b963991a005.png">
  447.  
  448. <div id="leftcont">
  449. <!--text title and subtitles-->
  450. <!--use <sub> for smaller text-->
  451. <div class="heading">Shiny Rapidash.</div>
  452. <div class="subtitle">Gallop</div>
  453.  
  454. <!--main biography text. looks best with 9 lines or more-->
  455. <div class="biotext">
  456. <center>Gwen. 22. 5'7. Beauty school drop out. No trainer, no love interest. Isn't looking for either of them. Take a hike.<br>
  457. Any and all attempts at communication will be met with extreme sarcasm or feigned stupidity. You have been warned.<p>
  458. <a target="_blank" href="http://pokemondb.net/pokedex/rapidash"><img src="https://img.pokemondb.net/sprites/black-white/anim/shiny/rapidash.gif" alt="Rapidash"></a>
  459.  
  460.  
  461. </div><!--do not delete this line-->
  462.  
  463. <div class="midwrap">
  464. <!--quote symbol icon-->
  465. <!--go to the following site to choose an icon-->
  466. <!--http://saturnthms.tumblr.com/font-->
  467. <div class="symbol"><span class="sf sf-quotation-mark"></span></div>
  468.  
  469. <!--quote text-->
  470. <div class="quote"><center>like a tiny dancer in the soft rain; pour your spirit on me.</a></div>
  471. </div><!--midwrap-->
  472.  
  473. <div class="customlinks">
  474. <!--your custom links. looks best with 8-->
  475. <a href="/">Flame Body</a>
  476. <a href="/">Heat Wave</a>
  477. <a href="/">Drill Run</a>
  478. <a href="/">Smart Strike</a>
  479. <a href="/">H.I. - Charcoal</a>
  480. <a href="/">Flame Charge</a>
  481. <a href="/">Throat Chop</a>
  482. <a href="/">Poison Jab</a>
  483. </div>
  484.  
  485. </div><!--leftcont-->
  486. </div><!--box-->
  487. </div><!--container-->
  488.  
  489.  
  490. </body>
  491.  
  492. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!