API tools faq
paste
loranhale

jeju-do

loranhale
Aug 9th, 2020 (edited)
1,900
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.53 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!---
  5.  
  6. jeju-do
  7.  
  8. @aaronellas / wanderlusthemes
  9.  
  10. --->
  11.  
  12. <title>{Title}</title>
  13. <link rel="shortcut icon" href="{Favicon}">
  14. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  15.  
  16. <link href="https://fonts.googleapis.com/css?family=Overpass|Lora:400,400i,700,700i|Source+Sans+Pro:400,400i,600,600i" rel="stylesheet">
  17. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  18. <script src="https://unpkg.com/feather-icons"></script>
  19.  
  20. <style type="text/css">
  21.  
  22. /* scrollbar */
  23.  
  24. ::-webkit-scrollbar { height:5px; width:1px; background:#fff; }
  25. ::-webkit-scrollbar-thumb { background:#eee; }
  26.  
  27. /* tumblr controls */
  28.  
  29. iframe.tmblr-iframe {
  30. z-index:99999999999999!important;
  31. top:0!important;
  32. right:0!important;
  33. opacity:0.4;
  34. /* delete invert(1) from here */
  35. filter:invert(1) contrast(150%);
  36. -webkit-filter:invert(1) contrast(150%);
  37. -o-filter:invert(1) contrast(150%);
  38. -moz-filter:invert(1) contrast(150%);
  39. -ms-filter:invert(1) contrast(150%);
  40. /* to here if your blog has a dark background */
  41. transform:scale(0.65);
  42. transform-origin:100% 0;
  43. -webkit-transform:scale(0.65);
  44. -webkit-transform-origin:100% 0;
  45. -o-transform:scale(0.65);
  46. -o-transform-origin:100% 0;
  47. -moz-transform:scale(0.65);
  48. -moz-transform-origin:100% 0;
  49. -ms-transform:scale(0.65);
  50. -ms-transform-origin:100% 0;
  51. transition:all .6s ease;
  52. }
  53.  
  54. iframe.tmblr-iframe:hover { opacity:0.6!important; }
  55.  
  56. /* tooltips */
  57.  
  58. #s-m-t-tooltip {
  59. max-width:300px;
  60. margin:15px;
  61. padding:6px 8px;
  62. z-index:99999999;
  63. color:#000;
  64. border:1px solid #eee;
  65. background:#fafafa;
  66. border-radius:3px;
  67. }
  68.  
  69. /* body */
  70.  
  71. body {
  72. background:#fff;
  73. color:#555;
  74. letter-spacing:.5px;
  75. font-family:'source sans pro', arial, sans-serif;
  76. font-size:12px;
  77. line-height:130%;
  78. -moz-osx-font-smoothing:grayscale;
  79. -webkit-font-smoothing:antialiased;
  80. font-smoothing:antialiased;
  81. }
  82.  
  83. a {
  84. color:#f39997; /* links */
  85. text-decoration:none;
  86. transition:all .6s ease;
  87. }
  88.  
  89. a:hover { color:#222; }
  90.  
  91. blockquote { padding-left:10px; border-left:2px solid #eee; }
  92.  
  93. h1 {
  94. font-size:13px;
  95. color:#444;
  96. font-weight:600;
  97. text-transform:uppercase;
  98. letter-spacing:1px;
  99. }
  100.  
  101. b { font-style:bold; }
  102. i { font-style:italic; }
  103.  
  104. /* container */
  105.  
  106. section {
  107. width:620px;
  108. height:auto;
  109. box-sizing:border-box;
  110. margin:120px auto;
  111. counter-reset:section;
  112. }
  113.  
  114. /*main content */
  115.  
  116. .con {
  117. margin-left:calc(100% - 75%);
  118. padding:20px;
  119. border-radius:3px;
  120. border:1px solid #eee;
  121. }
  122.  
  123. /* title */
  124.  
  125. .title {
  126. margin-bottom:15px;
  127. margin-left:calc(100% - 75%);
  128. border-radius:3px;
  129. border:1px solid #eee;
  130. padding:15px 20px;
  131. font-weight:700;
  132. font-size:17px;
  133. font-style:italic;
  134. font-family:'lora';
  135. color:#222;
  136. }
  137.  
  138. /* tabs navigation */
  139.  
  140. nav { float:left; width:20%; height:auto; }
  141. ul#tab { list-style-type: none; margin:0; padding:0; }
  142. ul#tabs { list-style-type:none; padding:0; margin-top:0px; }
  143. .tabs-container { background:#fff; }
  144.  
  145. ul#tabs .th {
  146. width:18px; height:18px;
  147. vertical-align:-4px;
  148. color:#222;
  149. display:inline;
  150. transition:all .4s ease;
  151. margin-right:10px;
  152. }
  153.  
  154. ul#tabs li {
  155. font-size:13px;
  156. margin-bottom:10px;
  157. display:block;
  158. transition:all .4s ease;
  159. border:1px solid transparent;
  160. border-radius:3px;
  161. padding:10px;
  162. color:#444; /* tabs font colour */
  163. background:#fefefe; /* tabs background colour */
  164. font-weight:600;
  165. }
  166.  
  167. ul#tabs li:last-of-type { margin-right:0; }
  168. ul#tabs li:before { display:none!important; }
  169.  
  170. ul#tabs li:hover {
  171. cursor:pointer;
  172. background:none;
  173. border:1px solid #d7dbf5; /* tabs border on hover */
  174. color:#222; /* tabs font colour on hover */
  175. }
  176.  
  177. ul#tabs li.active {
  178. background:none;
  179. color:#c0afdd; /* active tab font colour */
  180. border:1px solid #c0afdd; /* active tab border colour */
  181. }
  182.  
  183. .fadeIn {
  184. -webkit-animation-name: fadeIn;
  185. animation-name: fadeIn;
  186. -webkit-animation-duration: 2s;
  187. animation-duration: 2s;
  188. -webkit-animation-fill-mode: both;
  189. animation-fill-mode: both;
  190. }
  191.  
  192. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  193. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  194. @-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  195. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  196.  
  197.  
  198. /* about section */
  199.  
  200. .icon { display:inline; margin-right:10px; }
  201. .icon img {
  202. width:45px;
  203. height:45px;
  204. border-radius:50%;
  205. }
  206.  
  207. .text { padding-top:5px; margin-bottom:20px; }
  208.  
  209. /* intro heading */
  210. .t {
  211. text-transform:capitalize;
  212. font-size:22px;
  213. color:#333;
  214. letter-spacing:1px;
  215. font-weight:600;
  216. display:inline;
  217. vertical-align:17px;
  218. }
  219.  
  220. .t b {
  221. font-size:11.5px;
  222. text-transform:lowercase;
  223. letter-spacing:.5px;
  224. color:#666;
  225. vertical-align:3px;
  226. margin-left:10px;
  227. }
  228.  
  229. /* about tags */
  230. .at { margin-top:10px; }
  231. .at .th {
  232. font-size:15px;
  233. margin-right:10px;
  234. vertical-align:-2.5px;
  235. }
  236.  
  237. .at a { border-bottom:1px solid #eee; margin-right:8px; }
  238. .at a:hover { border-bottom:1px solid #222; }
  239.  
  240.  
  241. /* navigation section */
  242.  
  243. .box { margin-bottom:10px; }
  244. .box:last-of-type { margin-bottom:0; }
  245.  
  246. .tt {
  247. font-size:12.5px;
  248. font-weight:600;
  249. color:#222; /* tags title */
  250. display:block;
  251. margin-bottom:10px;
  252. }
  253.  
  254. .tags a {
  255. display:inline-block;
  256. margin-right:10px;
  257. margin-bottom:8px;
  258. color:#666;
  259. }
  260.  
  261. .tags a:before { content:none; }
  262. .tags a:hover { color:#ff6f61; }
  263.  
  264. /* inbox/faq section */
  265.  
  266. .faq { display:block; margin-bottom:10px; }
  267.  
  268. .faq:before {
  269. counter-increment:section;
  270. content:'0'counter(section);
  271. margin-right:10px;
  272. color:#555;
  273. font-weight:600;
  274. display:inline;
  275. }
  276.  
  277. .qn {
  278. margin-right:10px;
  279. display:inline;
  280. font-style:none;
  281. color:#333;
  282. font-weight:600;
  283. }
  284.  
  285. .faq a { font-weight:600; color:#91a8d0; }
  286. .faq a:hover { color:#222; }
  287.  
  288. /* blogroll section */
  289.  
  290. .blogroll { max-height:450px; overflow-y:scroll; }
  291. .b a { vertical-align:-5px!important; display:inline; color:#777; }
  292. .b a:hover { color:#f7cac9; }
  293.  
  294. .user {
  295. width:calc(620px / 3);
  296. height:25px;
  297. overflow:hidden;
  298. font-weight:600;
  299. display:inline-block;
  300. margin:0 0px 10px 0px;
  301. transition:all .4s ease;
  302. -webkit-transition:all .4s ease;
  303. -moz-transition:all .4s ease;
  304. -o-transition:all .4s ease;
  305. }
  306.  
  307. .user img {
  308. float:left;
  309. width:25px;
  310. height:25px;
  311. border-radius:50%;
  312. margin-right:10px;
  313. }
  314.  
  315. /* socials section */
  316.  
  317. h3 {
  318. font-size:14px;
  319. margin-bottom:10px;
  320. margin-top:0;
  321. color:#222;
  322. }
  323.  
  324. .social, .blogs { margin-bottom:10px; }
  325.  
  326. .social a {
  327. width:calc(330px / 3);
  328. display:inline-block;
  329. margin-right:10px;
  330. border:1px solid #eee;
  331. padding:7px 10px;
  332. color:#444;
  333. background:#fafafa;
  334. margin-bottom:10px;
  335. }
  336.  
  337. .social a .th {
  338. margin-right:5px;
  339. width:15px;
  340. height:15px;
  341. transition:all .6s ease;
  342. vertical-align:-4px;
  343. }
  344.  
  345. .social a:nth-child(3n) { margin-right:0; }
  346. .social a:hover { color:#ff6f61; background:#fff; }
  347.  
  348. /* blogs */
  349. .blogs a b {
  350. display:block;
  351. font-weight:400;
  352. font-style:italic;
  353. font-size:10.5px;
  354. color:#ff6f61;
  355. margin-top:-2px;
  356. }
  357.  
  358. .blogs a:nth-child(2n) { margin-right:0!important; }
  359. .blogs a {
  360. width:calc(405px / 2);
  361. height:35px;
  362. font-weight:600;
  363. display:inline-block;
  364. margin-right:10px;
  365. margin-bottom:15px;
  366. color:#444;
  367. }
  368.  
  369. .bn { margin-top:3px; }
  370.  
  371. .blogs a img {
  372. float:left;
  373. width:35px;
  374. height:35px;
  375. border-radius:50%;
  376. margin-right:10px;
  377. }
  378.  
  379. /* networks */
  380. .net a { display:inline-block; margin-right:10px; color:#666; }
  381. .net a:hover { color:#ff6f61; }
  382.  
  383.  
  384. /* do not disturb */
  385. .lo { bottom:20px; right:20px; position:fixed; }
  386. .lo a { text-transform:uppercase; font-size:12px; }
  387.  
  388. </style>
  389. </head>
  390.  
  391. <body>
  392. <section>
  393.  
  394. <nav>
  395. <!-- more icons at https://feathericons.com/ -->
  396.  
  397. <ul id="tabs">
  398. <li data-tabs="t1" class="active">
  399. <span class="th" data-feather="user"></span> about</li>
  400.  
  401. <li data-tabs="t2">
  402. <span class="th" data-feather="compass"></span> navigate</li>
  403.  
  404. <li data-tabs="t3">
  405. <span class="th" data-feather="message-circle"></span> message</li>
  406.  
  407. <li data-tabs="t4">
  408. <span class="th" data-feather="heart"></span> blogroll</li>
  409.  
  410. <li data-tabs="t5">
  411. <span class="th" data-feather="smartphone"></span> social</li>
  412.  
  413. <li><a href="/" style="color:#222;"><span class="th" data-feather="home"></span> return</a></li>
  414.  
  415. </ul>
  416.  
  417. </nav>
  418.  
  419. <!----- TITLE ----->
  420. <div class="title">[heading/title]</div>
  421.  
  422.  
  423. <div class="con">
  424. <ul id="tab">
  425.  
  426. <!------------------------- ABOUT SECTION --------------------------->
  427. <li class="content" id="t1">
  428. <div class="about">
  429.  
  430. <div class="icon">
  431. <a href="/"><img src="ICON URL" /></a></div>
  432.  
  433. <div class="t">
  434. name
  435. <b>short intro or maybe a quote </b>
  436. </div>
  437.  
  438. <div class="text">
  439. <p> brag about yourself. u r awesome :-) </p>
  440. </div>
  441.  
  442. <div class="at"><span class="th th-hashtag"></span>
  443. <a href="/tagged/">some</a>
  444. <a href="/tagged/">tags</a>
  445. <a href="/tagged/">about</a>
  446. <a href="/tagged/">you</a>
  447. </div>
  448.  
  449. </div>
  450. </li>
  451.  
  452. <!------------------------ NAVIGATION SECTION ---------------------------->
  453. <li class="content" id="t2">
  454.  
  455. <div class="box">
  456. <div class="tt">tag title</div>
  457. <div class="tags">
  458. <a href="/tagged/">tag name</a>
  459. <a href="/tagged/">tag name</a>
  460. <a href="/tagged/">tag name</a>
  461. <a href="/tagged/">tag name</a>
  462. </div>
  463. </div>
  464.  
  465. <div class="box">
  466. <div class="tt">tag title</div>
  467. <div class="tags">
  468. <a href="/tagged/">tag name</a>
  469. <a href="/tagged/">tag name</a>
  470. <a href="/tagged/">tag name</a>
  471. <a href="/tagged/">tag name</a>
  472. <a href="/tagged/">tag name</a>
  473. <a href="/tagged/">tag name</a>
  474. <a href="/tagged/">tag name</a>
  475. <a href="/tagged/">tag name</a>
  476. </div>
  477. </div>
  478.  
  479. <div class="box">
  480. <div class="tt">tag title</div>
  481. <div class="tags">
  482. <a href="/tagged/">tag name</a>
  483. <a href="/tagged/">tag name</a>
  484. <a href="/tagged/">tag name</a>
  485. </div>
  486. </div>
  487.  
  488. <div class="box">
  489. <div class="tt">tag title</div>
  490. <div class="tags">
  491. <a href="/tagged/">tag name</a>
  492. <a href="/tagged/">tag name</a>
  493. <a href="/tagged/">tag name</a>
  494. <a href="/tagged/">tag name</a>
  495. <a href="/tagged/">tag name</a>
  496. <a href="/tagged/">tag name</a>
  497. </div>
  498. </div>
  499.  
  500. </li>
  501.  
  502.  
  503. <!--------------------------- INBOX/FAQ SECTION --------------------------->
  504. <li class="content" id="t3">
  505.  
  506. <div class="faq">
  507. <div class="qn">question</div>
  508. answer
  509. </div>
  510.  
  511. <div class="faq">
  512. <div class="qn">question</div>
  513. answer
  514. </div>
  515.  
  516. <div class="faq">
  517. <div class="qn">question</div>
  518. answer
  519. </div>
  520.  
  521. <div class="faq">
  522. <div class="qn"><i>some psa maybe</i></div>
  523. </div>
  524.  
  525. <iframe frameborder="0" scrolling="no" width="100%" max-height="180" src="https://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden; margin-top:5px" id="ask_form"></iframe>
  526. </li>
  527.  
  528.  
  529. <!----------------------- BLOGROLL SECTION -------------------------->
  530. <li class="content" id="t4">
  531. <div class="blogroll">
  532.  
  533. <div class="b">
  534. {block:Following}{block:Followed}<div class="user"><a href="{FollowedURL}"><img src="{FollowedPortraitURL-128}">{FollowedName}</a></div>{/block:Followed}{/block:Following}
  535. </div>
  536. </div>
  537. </li>
  538.  
  539.  
  540. <!------------------------ SOCIALS SECTION -------------------------->
  541. <li class="content" id="t5">
  542.  
  543. <h3>social media</h3>
  544. <div class="social">
  545. <a href="/">
  546. <span class="th" data-feather="twitter"></span> twitter </a>
  547.  
  548. <a href="/">
  549. <span class="th" data-feather="instagram"></span> instagram </a>
  550.  
  551. <a href="/">
  552. <span class="th" data-feather="image"></span> pinterest</a>
  553.  
  554. <a href="/">
  555. <span class="th" data-feather="bookmark"></span> goodreads</a>
  556.  
  557. <a href="/">
  558. <span class="th" data-feather="airplay"></span> link name</a>
  559.  
  560. <a href="/">
  561. <span class="th" data-feather="coffee"></span> link name</a>
  562. </div>
  563.  
  564.  
  565. <h3>blogs</h3>
  566. <div class="blogs">
  567. <a href="BLOG URL">
  568. <img src="ICON URL" />
  569. <div class="bn">blog name <b>blog type</b></div></a>
  570.  
  571. <a href="BLOG URL">
  572. <img src="ICON URL" />
  573. <div class="bn">blog name <b>blog type</b></div></a>
  574.  
  575. <a href="BLOG URL">
  576. <img src="ICON URL" />
  577. <div class="bn">blog name <b>blog type</b></div></a>
  578.  
  579. <a href="BLOG URL">
  580. <img src="ICON URL" />
  581. <div class="bn">blog name <b>blog type</b></div></a>
  582. </div>
  583.  
  584.  
  585. <h3>networks</h3>
  586. <div class="net">
  587. <a href="/">network name</a>
  588. <a href="/">network name</a>
  589. <a href="/">network name</a>
  590. </div>
  591. </div>
  592. </li>
  593.  
  594.  
  595. </ul>
  596. </div>
  597.  
  598. </section>
  599.  
  600. <!----------- scripts (DO NOT DISTURB) ---------->
  601. <script>feather.replace()</script>
  602. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  603.  
  604. <script>
  605. // TABS SHORTCODE tweaked by hermionegrangcr
  606. $(function(e) {
  607. $('.content').hide().filter(':first').show();
  608. $('ul#tabs li[data-tabs]').on('click', function () {
  609. $(this).siblings().removeClass('active');
  610. $('.content').hide();
  611. var tab = $(this).data('tabs');
  612. $(this).addClass('active');
  613. $('#' + tab).fadeIn().show();
  614. });
  615.  
  616. $("#tabs li").click(function(){
  617. var cur =$("#tabs li").index(this);
  618. var elm = $('.content:eq('+cur+')');
  619. elm.addClass("fadeIn");
  620. setTimeout(function() {
  621. elm.removeClass("fadeIn");
  622. }, 220);
  623. });
  624. });
  625. </script>
  626.  
  627. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  628. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  629. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  630. <script>
  631. jQuery.noConflict();
  632. (function($){
  633. $(document).ready(function(){
  634. $("a[title],img[title],[title]").style_my_tooltips({
  635. tip_follows_cursor:true,
  636. tip_delay_time:200,
  637. tip_fade_speed:300,
  638. attribute:"title"
  639. });
  640. });
  641. })(jQuery);
  642. </script>
  643.  
  644. <div class="lo"><a href="https://aaronellas.tumblr.com" title="wanderlusthemes">j</a></div>
  645.  
  646. </body>
  647. </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!