API tools faq
paste
6THEMES

JUNGWOO — THEME BY SIX.

6THEMES
Jul 31st, 2018
1,330
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.24 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.  
  4.  
  5.  
  6. ✱ khevinday.tumblr.com -- codes by six. ✱
  7.  
  8. - do not redistribute
  9. - do not copy any parts of the following code
  10.  
  11. ✱ thank you for using my themes! ✱
  12.  
  13.  
  14.  
  15.  
  16. -->
  17. <!DOCTYPE html>
  18. <head>
  19.  
  20. <title>{Title}</title>
  21. <link rel="shortcut icon" href="{Favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23.  
  24. <!-- tabs -->
  25.  
  26. <script>
  27. function openCity(evt, cityName) {
  28. var i, tabcontent, tablinks;
  29. tabcontent = document.getElementsByClassName("tabcontent");
  30. for (i = 0; i < tabcontent.length; i++) {
  31. tabcontent[i].style.display = "none";
  32. }
  33. tablinks = document.getElementsByClassName("tablinks");
  34. for (i = 0; i < tablinks.length; i++) {
  35. tablinks[i].className = tablinks[i].className.replace(" active", "");
  36. }
  37. document.getElementById(cityName).style.display = "block";
  38. evt.currentTarget.className += " active";
  39. }
  40. </script>
  41.  
  42. <script type="text/javascript">
  43. $(document).ready(function(){
  44.  
  45. $('ul.tabs li').click(function(){
  46. var tab_id = $(this).attr('data-tab');
  47.  
  48. $('ul.tabs li').removeClass('current');
  49. $('.tab-content').removeClass('current');
  50.  
  51. $(this).addClass('current');
  52. $("#"+tab_id).addClass('current');
  53. })
  54.  
  55. })
  56. </script>
  57.  
  58. <!-- CSS ICONS, SCRIPTS & GOOGLE FONTS -->
  59.  
  60. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  61. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  62.  
  63. <script>
  64. (function($){
  65. $(document).ready(function() {
  66. $("a[title]").style_my_tooltips({
  67. tip_follows_cursor:true,
  68. tip_delay_time:90,
  69. tip_fade_speed:600,
  70. attribute:"title"
  71. });
  72. });
  73. })(jQuery);
  74. </script>
  75.  
  76. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  77.  
  78. <script src ="//static.tumblr.com/fwgzvyf/Oj1o08f6h/shythemes.vr.js"></script>
  79.  
  80. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  81.  
  82. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
  83.  
  84. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
  85.  
  86. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  87.  
  88. <link href='https://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
  89.  
  90. <link href="https://fonts.googleapis.com/css?family=ABeeZee:400,400italic|Lato:400,400italic,700,700italic" rel="stylesheet">
  91.  
  92. <style type="text/css">
  93.  
  94. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop{ position:fixed; white-space:nowrap; -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); opacity:.2;transition: .8s ease-in-out; -webkit-transition: .8s ease-in-out;-moz-transition: .8s ease-in-out;-o-transition: .8s ease-in-out; margin-top:2px; z-index:999999999999999;}
  95.  
  96. #s-m-t-tooltip { max-width:300px; border-radius: 8px; padding:0px 5px; margin:25px 20px 5px 0px; color:#fff; background: #0f0f0f; z-index:99999; font-size:7px; text-transform:uppercase; font-family:arial; letter-spacing:2px; font-weight:bold; z-index:999999999999999; }
  97.  
  98. ::-webkit-scrollbar { width: 1px; height:3px; background: transparent;}
  99. ::-webkit-scrollbar-thumb { background-color: transparent; -webkit-border-radius: 1ex; }
  100.  
  101. /* ---- TEXTS & CUSTOM FONTS ----*/
  102.  
  103. a:link, a:active, a:visited { text-decoration:none; }
  104.  
  105. a:hover { color:#fff; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; }
  106.  
  107. @font-face{ font-family:"nouvelle"; src: url('https://dl.dropboxusercontent.com/s/ag5vx5qla7mrqg9/nouvelle_vague_final.ttf’)'); }
  108.  
  109. @font-face{ font-family:"signerica"; src: url('https://dl.dropboxusercontent.com/s/exj78lvoc594ylo/Signerica_Medium.ttf’)'); }
  110.  
  111. @font-face{ font-family:"primetime"; src: url('https://dl.dropboxusercontent.com/s/2b4vrdix7lxxfsw/PRIMETIME%20%E2%95%95%20PERSONAL%20USE%20ONLY.ttf’)'); }
  112.  
  113. @font-face{ font-family:"roboto"; src: url('https://dl.dropboxusercontent.com/s/i5x37kqbtb40s0b/Roboto-Light.ttf’)'); }
  114.  
  115. @font-face{ font-family:"robold"; src: url('https://dl.dropboxusercontent.com/s/qynix3bz0j8ppva/Roboto-BoldCondensed.ttf’)'); }
  116.  
  117. @font-face{ font-family:"hermes"; src: url('https://dl.dropboxusercontent.com/s/rhje42nhg8bamiq/Herrmes.otf’)'); }
  118.  
  119. @font-face{ font-family:"astronout"; src: url('https://dl.dropboxusercontent.com/s/v6587r3a6m8y5eh/Astronout.ttf’)'); }
  120.  
  121.  
  122. /* ---- BODY & CONTAINERS ---- */
  123.  
  124. body { font-family:helvetica; font-weight:100; font-size:11px; text-align:justify; margin:0; line-height:18px; background:#eaeaea; background-image:url('https://static.tumblr.com/0898063b3a275c468063e1b29621b838/lrp7gdv/tHgp510df/tumblr_static_1pi3ioh4o2tcwkk4occs04gwg.png'); }
  125.  
  126. #backbar { position:absolute; width:100%; height:300px; margin: auto; left:0; top:0; bottom:0; right:0; background-color:#0a0a0a; }
  127.  
  128. #holder { position:absolute; width:570px; height:420px; margin: auto; left:0; top:0; bottom:0; right:0; background-color:#0f0f0f; border-radius:15px; overflow: hidden; }
  129.  
  130. #sidebox { position: absolute; bottom:0px; left:0px; width:250px; height:420px; background-color:#437671; }
  131.  
  132. #topbox { position: absolute; top:0px; left:0px; width:250px; height:80px; background-color:#376661; }
  133.  
  134.  
  135.  
  136. #icon { position: absolute; top:30px; left:10px; width:80px; height:80px; background-color:#1d1d1d; border-radius:15px; border:5px solid #376661; overflow:hidden; }
  137.  
  138. #name { position: absolute; top:55px; right:0px; width:145px; height:80px; color:#fff; font-family:'robold'; font-size:18px; text-transform:uppercase; text-align:center; letter-spacing:7px; }
  139.  
  140. #quote { position: absolute; top:160px; left:0px; width:210px; height:auto; padding:5px 20px; color:#fff; font-family:'roboto'; font-size:11px; text-align:justify; letter-spacing:2px; font-style:italic; }
  141.  
  142. #fcs { position: absolute; left:0px; bottom:185px; width:210px; height:auto; padding:5px 20px; color:#fff; font-family:'robold'; font-size:7px; text-align:right; text-transform:uppercase; letter-spacing:2px; line-height:9px; }
  143.  
  144. #fcs b { color:#dbd300; }
  145.  
  146. #bottombox { position: absolute; bottom:0px; left:0px; width:250px; height:130px; background-color:#376661; }
  147.  
  148. #flap { position: absolute; margin:auto; bottom:60px; left:0px; right:0px; width:120px; height:80px; background-color:#376661; border-radius:300px;}
  149.  
  150. #form { position: absolute; top:15px; left:0px; width:210px; height:auto; padding:5px 20px; color:#fff; font-family:'roboto'; font-size:9px; text-align:justify; letter-spacing:2px; text-align:center; line-height:12px; }
  151.  
  152. #form b { color:#dbd300; font-weight:normal;}
  153.  
  154. #available { position: absolute; left:0px; bottom:10px; width:210px; height:auto; padding:5px 20px; color:#fff; font-family:'robold'; font-size:7px; text-align:center; text-transform:uppercase; letter-spacing:2px; line-height:9px; }
  155. #available i { letter-spacing:3px; }
  156. #available b { color:#dbd300; }
  157.  
  158.  
  159. #coverthree { position: absolute; width:320px; height:420px; right:0px; top:0px; }
  160.  
  161. #insta2pic { position: absolute; width:250px; height:360px; margin:auto; left:0px; right:0px; top:0px; bottom:0px; background-color:#171717; border-radius:10px; }
  162.  
  163. #insta2icon { position: absolute; width:25px; height:25px; left:10px; top:10px; border-radius:100px; overflow:hidden; }
  164.  
  165. #insta2icon img { width:25px; }
  166.  
  167. #insta2name { position:absolute; left:20px; top:14px; font-family:'roboto'; font-size:11px; font-weight:bold; overflow:hidden; padding:0px 23px; line-height:10px; color:#c4bf34; letter-spacing:1px; }
  168.  
  169. #insta2place { position:absolute; left:21px; top:25px; font-family:'robold'; font-size:7px; text-transform:uppercase; font-weight:bold; overflow:hidden; padding:0px 23px; line-height:10px; color:#d1ccaf; letter-spacing:.5px; }
  170.  
  171. #insta2place i { font-size:5px; }
  172.  
  173. #insta2dots { position:absolute; right:-12px; top:20px; font-family:'robold'; font-size:12px; text-transform:uppercase; font-weight:bold; overflow:hidden; padding:0px 23px; line-height:10px; color:#a3a3a3; letter-spacing:1.5px; }
  174.  
  175. #insta2img { position: absolute; width:250px; height:230px;left:0px; top:45px; background-color:#f5f5f5; background:#eaeaea;}
  176.  
  177. #iconrow2 { position:absolute; left:10px; bottom:62px; width: 250px; height:20px; overflow:hidden; letter-spacing:3px; line-height:30px; color:#ddd; }
  178.  
  179. #iconrow2 i { font-size: 14px; }
  180.  
  181. #bookmark { position:absolute; left:230px; bottom:62px; width: 250px; height:20px; overflow:hidden; font-size:14px; letter-spacing:3px; line-height:30px; color:#ddd; }
  182.  
  183. #insta2cap { position:absolute; left:0px; bottom:30px; font-family:'robold'; font-size:10px; font-weight:bold; text-transform:uppercase; overflow:hidden; line-height:12px; color:#c4bf34; letter-spacing:1px; padding:0px 10px;}
  184.  
  185. #insta2cap b { font-family:'roboto'; text-transform:lowercase; font-size:10px; font-weight:normal; color:#ddd;}
  186.  
  187. #insta2comm { position:absolute; left:0px; bottom:5px; font-family:'robold'; font-size:7px; font-weight:bold; text-transform:uppercase; overflow:hidden; line-height:12px; color:#ddd; letter-spacing:1px; padding:0px 10px;}
  188.  
  189.  
  190. /* ---- b o t t o m b a r & t a b s ---- */
  191.  
  192. #title { position: absolute; width:350px; width:360px; height:100px; margin: auto; left:0px; bottom:0; font-family:'astronout'; font-size:125px; font-weight:normal; color:#dcd7b2; text-align:center; line-height:100px; text-shadow: 3px 3px 3px #eaeaea;}
  193.  
  194. #subtitle { position: absolute; width:360px; height:20px; left:-5px; bottom:45px; font-family:'arial'; font-size:7px; font-style:italic; font-weight:bold; letter-spacing:2px; color:#c9c5a5; text-shadow: 0 0 0.4em #d4d1b6; text-transform:uppercase; text-align:center; line-height:80px; }
  195.  
  196. #links { position: absolute; width:150px; height:35px; right:-3px; top:80px; }
  197.  
  198. ul.tab { position:absolute; overflow:hidden; list-style-type: none; margin: 0; padding: 0; background-color: transparent; right:5px; top:5px; z-index:999999999; }
  199.  
  200. ul.tab li { width: 35px; float:left;}
  201.  
  202. ul.tab li a{ display:inline-block; color:#fff; font-size:15px; width:15px; height:15px; padding:5px; border-radius:10px; margin-right:5px; margin-bottom:5px; font-family: 'nouvelle'; font-weight:bold; text-transform:uppercase; text-align:center; letter-spacing:4px; line-height:15px; }
  203.  
  204. ul.tab li tt { font-size:7px; font-family: 'arial'; font-style:italic; font-weight:bold; letter-spacing:4px; color:#c9c5a5; text-shadow: 0 0 0.4em #d4d1b6; }
  205.  
  206. .close { position:absolute; top:10px; right:20px; font-weight:bold; color:#fff; z-index:9999999; }
  207. .close:hover { cursor: pointer; }
  208.  
  209. .tabcontent { display: none; height:375; width:360px; padding:0px; margin-left:292px; margin-top:0px; background-color:transparent; z-index:99999999999; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s; }
  210.  
  211. .tabcontent.current{ display: inherit; }
  212.  
  213. @-webkit-keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  214.  
  215. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;} }
  216.  
  217.  
  218.  
  219. /* ---- instagram tab ---- */
  220.  
  221. #connect { position:absolute; right:0px; top:0px; width: 320px; height:420px; background-color:#0f0f0f; overflow:hidden; }
  222.  
  223. #textbox1 { position:absolute; top:75px; left:20px; width:280px; height:115px; background-color:#bf3a56; border-radius:15px; }
  224.  
  225. #textbox2 { position:absolute; bottom:50px; left:20px; width:280px; height:115px; background-color:#bf3a56; border-radius:15px; }
  226.  
  227. #icon2 { position:absolute; top:-30px; left:20px; width:70px; height:130px; background-color:#1d1d1d; border-radius:15px; overflow:hidden;}
  228.  
  229. #icon3 { position:absolute; top:-30px; right:20px; width:70px; height:130px; background-color:#1d1d1d; border-radius:15px; overflow:hidden;}
  230.  
  231. #name2 { position: absolute; top:-10px; left:100px; height:80px; color:#fff; font-family:'robold'; font-size:26px; text-transform:uppercase; text-align:center; letter-spacing:3px; -webkit-text-stroke: 1px #c4bf34; -webkit-text-fill-color: rgba(0, 0, 0, 0);}
  232.  
  233. #name3 { position: absolute; top:-10px; right:100px; height:80px; color:#fff; font-family:'robold'; font-size:24px; text-transform:uppercase; text-align:center; letter-spacing:3px; -webkit-text-stroke: 1px #c4bf34; -webkit-text-fill-color: rgba(0, 0, 0, 0);}
  234.  
  235. #connection { position: absolute; top:20px; left:100px; width:160px; height:78px; color:#fff; font-family:'roboto'; font-size:9px; text-align:justify; text-transform:lowercase; letter-spacing:1px; line-height:15px; overflow:auto; }
  236.  
  237. #connection2 { position: absolute; top:20px; right:100px; width:160px; height:78px; color:#fff; font-family:'roboto'; font-size:9px; text-align:justify; letter-spacing:1px; line-height:15px; overflow:auto; text-transform:lowercase; }
  238.  
  239. /* ---- credit, do not delete unless you want these hands ---- */
  240.  
  241. #credit { position:fixed; bottom:10px; left:10px; font-size:7px; width:80px; height:12px; font-family:robold; font-weight:bold; text-transform:uppercase; letter-spacing: 0px; font-style:normal; background:#202020; border-radius:5px; padding:5px 0px; text-align:center;letter-spacing:2px; line-height:12px; }
  242.  
  243. #credit a { color:#f8f8f8; font-weight:bold; }
  244.  
  245. </style>
  246. </head>
  247.  
  248.  
  249.  
  250. <body>
  251.  
  252. <div id="holder">
  253.  
  254.  
  255. <div id="sidebox">
  256. <div id="topbox"> </div>
  257.  
  258. <div id="icon"> <img src="https://78.media.tumblr.com/29d5c6858e1d91d74c0908154c92e967/tumblr_inline_p55ehiU1V91v5fcgo_500.png"></div>
  259.  
  260. <div id="name"> hermes.</div>
  261.  
  262.  
  263. <div id="links">
  264. <ul class="tab">
  265.  
  266. <li><a href="#" class="tablinks" title="connections" onclick="openCity(event, 'connect')"> <i class="icon-share"></i> </a></li>
  267.  
  268. <li><a href="URL" class="tablinks" title="TITLE"> <i class="icon-grid"></i> </a></li>
  269.  
  270. <li><a href="URL" class="tablinks" title="TITLE"> <i class="icon-tag"></i> </a></li>
  271.  
  272. <li><a href="URL" class="TITLE" title="return to skeleton page"> <i class="icon-people"></i> </a></li>
  273. </ul>
  274. </div>
  275.  
  276.  
  277.  
  278. <div id="quote"> " a fleeting existence; you are here, then not. live fast, don’t die. " </div>
  279.  
  280. <div id="fcs"> <b>faiceclaim:</b> dong sicheng.</div>
  281.  
  282. <div id="bottombox">
  283. <div id="flap"> </div>
  284.  
  285. <div id="form"><b>hey, i know <i>junlei zhao</i>! he's been racing for <i>3</i> years hasn't he? and he's only <i>nineteen</i>! he looks so much like <i>dong sicheng</i>, it’s weird. anyway, see you tonight. you know the cash prize is 15k, don’t you?
  286. </b></div>
  287.  
  288. <div id="available">they are currently <i><b>un</b>available</i>.</div>
  289. </div>
  290.  
  291. </div>
  292.  
  293. <div id="coverthree">
  294. <div id="insta2pic">
  295.  
  296. <div id ="insta2icon"> <img src="https://78.media.tumblr.com/12200cbc5fb1089e25c23f06d5b8447e/tumblr_inline_p55e75dSAK1v5fcgo_500.png"> </div>
  297.  
  298. <div id="insta2name">hermes</div>
  299.  
  300. <div id="insta2place"> HONG KONG, CHINA <i class="icon-arrow-right"></i></div>
  301.  
  302. <div id="insta2dots"> •••</div>
  303. <div id="insta2img"> <img src="https://78.media.tumblr.com/60f01b80c40af0fd165331afcdd3e7b8/tumblr_inline_p55e7bnJTQ1v5fcgo_500.png"> </div>
  304.  
  305. <div id="iconrow2"><i class="icon-heart"></i> <i class="icon-bubbles"></i> <i class="icon-paper-plane"></i></div>
  306. <div id="bookmark"><span class="lnr lnr-bookmark"></div>
  307.  
  308. <div id="insta2cap"> hermes <b> sick of this city. </b></div>
  309.  
  310. <div id="insta2comm">view all 35,856 comments <i class="icon-arrow-right"></i></div>
  311. </div>
  312.  
  313. <div id="connect" class="tabcontent">
  314. <span onclick="this.parentElement.style.display='none'" class="close"> x </span>
  315.  
  316. <div id="textbox1">
  317.  
  318. <div id="icon2"> <img src="https://78.media.tumblr.com/70a83ffecfd1e895f49bc94d3255c102/tumblr_inline_p55ee99Qga1v5fcgo_500.png"> </div>
  319.  
  320. <div id="name2"> hades</div>
  321.  
  322. <div id="connection"> Hades and Hermes have extreme chemistry, but it’s limited to the bedroom. When they’re not mixed up in each other's sheets, they’re either yelling or avoiding each other like the plague. They’re friends with benefits, if you just take away the friend part.
  323. </div>
  324. </div>
  325.  
  326.  
  327. <div id="textbox2">
  328.  
  329. <div id="icon3"><img src="https://78.media.tumblr.com/2ea14459784664f10de3f625ac023fb2/tumblr_inline_p55e9kuJ9j1v5fcgo_500.png"></div>
  330.  
  331. <div id="name3">dionysus</div>
  332.  
  333. <div id="connection2"> dionysus and hermes share a fierce loyalty that makes sense to few. if you come for one, you end up coming for both. It’s known throughout their illegal community that they come as a pair and no one goes against that.
  334. </div>
  335. </div>
  336.  
  337. </div>
  338.  
  339. </div>
  340.  
  341. <!-- PLEASE DO NOT REMOVE MY CREDIT -->
  342.  
  343. <div id="credit"><a href="http://internetsmom.tumblr.com/" title="credit"> code by six.</span></a></div>
  344.  
  345. <!-- YOU CAN TOUCH THE REST IF U WANT THO LMAO -->
  346.  
  347. </body>
  348. </html>
Advertisement
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!