API tools faq
paste
quiddittch

Luna

quiddittch
Jan 30th, 2016
9,165
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 19.08 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.  
  5.  
  6. <!------------------------------------------------------------------
  7.  
  8. LUNA // all-in-one page by jaebium.tumblr.com
  9.  
  10. - dont steal
  11. - dont remove credit
  12. - ask me if you have any issues
  13.  
  14. -------------------------------------------------------------------->
  15.  
  16. <title>Atlas / {Title}</title>
  17. <link rel="shortcut icon" href="{Favicon}" />
  18. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  19. {block:Description}<meta name="description" content="{MetaDescription}"/>{/block:Description}
  20.  
  21. <!----jquery--->
  22.  
  23. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  24. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  25. <script type="text/javascript"
  26. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  27.  
  28. <!---tooltip--->
  29.  
  30. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  31.  
  32. <script>
  33. (function($){
  34. $(document).ready(function(){
  35. $("a[title]").style_my_tooltips({
  36. tip_follows_cursor:true,
  37. tip_delay_time:0,
  38. tip_fade_speed:300,
  39. attribute:"title"
  40. });
  41. });
  42. })(jQuery);
  43. </script>
  44.  
  45. <!-----google fonts---->
  46.  
  47. <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,400italic,300italic,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
  48.  
  49. <link href='https://fonts.googleapis.com/css?family=Karla:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  50.  
  51.  
  52. <style type="text/css">
  53.  
  54. /*---tumblr controls---*/
  55. .tmblr-iframe {
  56. white-space:nowrap; filter: invert(100%); -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%);opacity:1;
  57. }
  58. .tmblr-iframe {
  59. position:fixed !important;
  60. -webkit-filter: invert(100%)}
  61.  
  62. /*----tooltip----*/
  63.  
  64. #s-m-t-tooltip {
  65. position:absolute;
  66. color:#787878;
  67. background-color:rgba(255,255,255,.95);
  68. border-radius:2px;
  69. margin-top:20px;
  70. margin-left:10px;
  71. border:1px solid #f0f0f0;
  72. max-width:300px;
  73. z-index:9;
  74. font-size:8px;
  75. letter-spacing:1px;
  76. font-family:'open sans', sans-serif;
  77. padding:2px 5px;
  78. text-transform:uppercase;
  79. }
  80.  
  81. /*------scrollbar------*/
  82.  
  83. ::-webkit-scrollbar {
  84. width: 14px; height: 3px; background: white;
  85. }
  86.  
  87. ::-webkit-scrollbar-thumb {
  88. border:6px solid white;
  89. background-color:#f0f0f0;
  90. border-radius:15px;
  91. }
  92.  
  93. /*---body--*/
  94.  
  95. body {
  96. margin:0;
  97. line-height:17px;
  98. background:#f8f8f8;
  99. color:#9f9f9f;
  100. font-size:11px;
  101. font-family:'karla', sans-serif, arial, trebuchet ms, calibri;
  102. font-weight:400;
  103. }
  104.  
  105. a {
  106. text-decoration:none;
  107. color:#888;
  108. -webkit-transition:0.6s all;
  109. -moz-transition:0.6s all;
  110. -o-transition:0.6s all;
  111. transition:0.6s all;
  112. }
  113.  
  114. a:hover {
  115. color:#000000;
  116. cursor:help;
  117. }
  118.  
  119. h2 {
  120. font-weight:300;
  121. letter-spacing:1px;
  122. font-size:21px;
  123. color:#000;
  124. margin-bottom:45px;
  125. }
  126.  
  127. .header2 {
  128. /*accent color*/
  129. border-bottom:1px solid #000;
  130. padding-bottom:8px;
  131. }
  132.  
  133. blockquote {
  134. border-left:2px solid #e0e0e0;
  135. margin-left:0px;
  136. padding-left:20px;
  137. max-width: 100%;
  138. }
  139.  
  140. /*----content----*/
  141.  
  142. #center {
  143. position:absolute;
  144. width:640px;
  145. height:460px;
  146. left:50%;
  147. border:1px solid #f0f0f0;
  148. top:50%;
  149. overflow:hidden;
  150. margin-left:-320px;
  151. margin-top:-250px;
  152. }
  153.  
  154. #content {
  155. background:white;
  156. padding:32px 43px;
  157. border-top:4px solid white;
  158. border-bottom:4px solid white;
  159. overflow-x:auto;
  160. height:388px;
  161. width:378px;
  162. float:right;
  163. }
  164.  
  165.  
  166. #headr {
  167. padding:15px 35px;
  168. margin-top:2px;
  169. width:104px;
  170. background:white;
  171. height:100%;
  172. text-align:center;
  173. float:left;
  174. border-bottom:10px solid #f8f8f8;
  175. }
  176.  
  177. .first-link:before {content:'1 : ';display:inline;}
  178. .second-link:before {content:'2 : ';display:inline;}
  179. .third-link:before {content:'3 : ';display:inline;}
  180. .fourth-link:before {content:'4 : ';display:inline;}
  181.  
  182. #tabs-bar ul {
  183. display: block;
  184. list-style-type: none;
  185. text-align:left;
  186. margin:0px;
  187. padding:0px;
  188. font-family:'open sans', sans-serif;
  189. }
  190. #tabs-bar ul li {
  191. list-style-type: none;
  192. display: block;
  193. margin:0px;
  194. padding:0px;
  195. }
  196.  
  197. #tabs-nav li a {
  198. list-style-type: none;
  199. text-transform:uppercase;
  200. font-size:9px;
  201. letter-spacing:1px;
  202. display: block;
  203. border-bottom:1px solid #f0f0f0;
  204. padding:19px 0px;
  205. text-decoration: none;
  206. }
  207.  
  208. #tabs-nav li a.current {
  209. /*accent colors*/
  210. border-bottom:1px solid #000;
  211. color:#000;
  212. /**/
  213. padding-left:4px;
  214. }
  215.  
  216. #tabs-nav li a:hover {
  217. border-bottom:1px solid #d0d0d0;
  218. color:#000;
  219. padding-left:4px;
  220. }
  221.  
  222. #tabs-content-wrap {
  223. list-style-type: none;
  224. }
  225.  
  226. #tabs-content-wrap ul {
  227. display: block;
  228. list-style-type: none;
  229. padding:0px 15px;
  230. margin:0px;
  231. }
  232. #tabs-content-wrap ul li {
  233. width: 100%;
  234. list-style-type: none;
  235. display: block;
  236. }
  237.  
  238. .tab-content {
  239. border-radius: 2px;
  240. padding-bottom: 20px;
  241. }
  242.  
  243. /*links content*/
  244.  
  245. .links-wrap {
  246. margin-top:30px;
  247. font-family:'open sans', sans-serif;
  248. font-weight:300;
  249. line-height:22px;
  250. }
  251.  
  252. .links-title {
  253. display:inline;
  254. color:#000;
  255. padding-right:5px;
  256. font-weight:300;
  257. padding-bottom:15px;
  258. letter-spacing:1px;
  259. font-size:11px;
  260. text-transform:uppercase;
  261. }
  262.  
  263. .links {
  264. display:inline;
  265. font-size:11px;
  266. }
  267.  
  268. .links a {
  269. margin-right:7px;
  270. }
  271.  
  272. /*F.A.Q. content*/
  273.  
  274. .question {
  275. letter-spacing:1px;
  276. font-size:9px;
  277. padding:10px 0px;
  278. text-transform:uppercase;
  279. margin-bottom:12px;
  280. }
  281.  
  282. .question::before {
  283. content: '?';
  284. /*accent colors*/
  285. border:1px solid #000;
  286. color:#000;
  287. /**/
  288. float:left;
  289. font-family:arial;
  290. font-size:9px;
  291. font-weight:bold;
  292. padding:1px 6px;
  293. margin-top:-3px;
  294. border-radius:20px;
  295. margin-right:10px;
  296. }
  297.  
  298. .answer {
  299. background:#fbfbfb;
  300. border-left:1px solid #f0f0f0;
  301. padding:15px 15px;
  302. margin-bottom:30px;
  303. font-size:10px;
  304.  
  305. }
  306.  
  307. /*blogroll content*/
  308.  
  309. #br {
  310. width:370px;
  311. text-align-last:center;
  312. }
  313.  
  314. #following {
  315. font-size:10px;
  316. background:#fff;
  317. height:40px;
  318. width:40px;
  319. float:left;
  320. margin-right:15px;
  321. margin-bottom:15px;
  322. }
  323.  
  324. .followedname {
  325. font-weight:600;
  326. font-size:10px;
  327. }
  328.  
  329. .followedtitle {
  330. font-style:italic;
  331. font-size:7px;
  332. letter-spacing:1px;
  333. text-transform:uppercase;
  334. margin-top:0px;
  335. }
  336.  
  337. #following img {
  338. width:40px;
  339. border-radius:40px;
  340. opacity:.9;
  341. padding:5px;
  342. background:#fbfbfb;
  343. float:left;
  344. -webkit-filter: Grayscale(20%);
  345. -webkit-transition: all .5s ease-in-out;
  346. -moz-transition: all .5s ease-in-out;
  347. -o-transition: all .5s ease-in-out;
  348. transition: all .5s ease-in-out;
  349. }
  350.  
  351. #following:hover img {
  352. opacity:1;
  353. -webkit-filter: Grayscale(0%);
  354. }
  355.  
  356. /*-ask box-*/
  357.  
  358. #ask-box {
  359. border-top:1px solid #f0f0f0;
  360. padding-top:10px;
  361. }
  362.  
  363. /*sidebar picture*/
  364.  
  365. #pic {
  366. width:70px;
  367. padding:52px;
  368. background:white;
  369. text-align:center;
  370. }
  371.  
  372. #pic img {
  373. width:65px;
  374. height:65px;
  375. border-radius:60px;
  376. opacity:.7;
  377. -webkit-transition:0.7s all;
  378. -moz-transition:0.7s all;
  379. -o-transition:0.7s all;
  380. transition:0.7s all;
  381. }
  382.  
  383. #pic img:hover {
  384. opacity:.9;
  385. -webkit-transition:0.5s all;
  386. -moz-transition:0.5s all;
  387. -o-transition:0.5s all;
  388. transition:0.5s all;
  389. }
  390.  
  391. /*---navi---*/
  392. #navi {
  393. width:640px;
  394. top:50%;
  395. margin-top:250px;
  396. left:50%;
  397. margin-left:-320px;
  398. position:absolute;
  399. text-align:center;
  400. font-size:10px;
  401. text-transform:uppercase;
  402. letter-spacing:1px;
  403. word-spacing:10px;
  404. }
  405.  
  406. /*---credit---*/
  407.  
  408. #credit {
  409. position:fixed;
  410. font-size:7px;
  411. text-transform:uppercase;
  412. letter-spacing:1px;
  413. text-align:right;
  414. font-family:arial, trebuchet ms;
  415. }
  416.  
  417. #credit {
  418. bottom:20px;
  419. right:20px;
  420. font-weight:bold;
  421. }
  422.  
  423. #credit a {
  424. padding:4px 5px;
  425. border:1px solid #f0f0f0;
  426. border-radius:2px;
  427. background:white;
  428. }
  429.  
  430. #credit a:hover {
  431. border:1px solid #d0d0d0;
  432. }
  433.  
  434.  
  435. {CustomCSS}</style>
  436.  
  437. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  438.  
  439. <script>
  440. $(document).ready(function(){
  441. $(function () {
  442. $('.tab-content:not(:first)').hide();
  443. $('#tabs-nav a').bind('click', function (e) {
  444. e.preventDefault();
  445. $this = $(this);
  446. $target = $(this.hash);
  447. $('#tabs-nav a.current').removeClass('current');
  448. $('.tab-content:visible').fadeOut("normal", function () {
  449. $this.addClass('current');
  450. $target.fadeIn("normal");
  451. });
  452. }).filter(':first').click();
  453. });
  454. });
  455. </script>
  456.  
  457. </head><body>
  458.  
  459. <div id="center">
  460. <div id="content">
  461. <div id="tabs-content-wrap">
  462.  
  463. <ul>
  464.  
  465. <!--------------ABOUT ME CONTENT-------------->
  466. <li id="t1" class="tab-content">
  467.  
  468. <h2><span class="header2">About Me</span> <!--u can put your name after a "/" here if you want---> </h2>
  469.  
  470. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper hendrerit diam, vitae tempus ante porta nec.</p>
  471.  
  472. <p>Vestibulum a ex scelerisque metus finibus pellentesque sit amet vitae urna. Curabitur elementum est sed dolor congue, in aliquet ex viverra. Aenean lacinia dapibus lorem eu pulvinar. Vivamus non velit in ante dictum rhoncus vitae sed velit. </p>
  473.  
  474. <p>Fusce convallis gravida turpis vel eleifend. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ipsum quam.</p>
  475.  
  476. <p>Phasellus porta efficitur eros ut cursus.</p>
  477.  
  478. <p>Etiam congue fringilla felis quis tempor. Nam nec mattis velit. Cras rutrum, odio eu auctor dapibus, leo urna aliquam tellus, sit amet laoreet nisi odio in urna. Nulla at ipsum ultricies, tincidunt dui non, lacinia velit. Pellentesque sollicitudin condimentum purus id pharetras.</p>
  479.  
  480. </li>
  481. <!-----------END OF ABOUT ME CONTENT------------>
  482.  
  483.  
  484.  
  485.  
  486.  
  487. <!----------------LINKS CONTENT----------------->
  488.  
  489. <li id="t2" class="tab-content">
  490.  
  491. <h2><span class="header2">Links</span></h2>
  492.  
  493. <!--------to add/remove a section, copy/delete from here:------>
  494. <div class="links-wrap">
  495. <div class="links-title">Title</div>
  496. <div class="links">
  497. <a href="/" target="_blank">link</a>
  498. <a href="/" target="_blank">link</a>
  499. <a href="/" target="_blank">link</a>
  500. <a href="/" target="_blank">link</a>
  501. <a href="/" target="_blank">link</a>
  502. <a href="/" target="_blank">link</a>
  503. <a href="/" target="_blank">link</a>
  504. <a href="/" target="_blank">link</a>
  505. <a href="/" target="_blank">link</a>
  506. <a href="/" target="_blank">link</a>
  507. <a href="/" target="_blank">link</a>
  508. <a href="/" target="_blank">link</a>
  509. <a href="/" target="_blank">link</a>
  510. <a href="/" target="_blank">link</a>
  511. <a href="/" target="_blank">link</a>
  512. <a href="/" target="_blank">link</a>
  513. <a href="/" target="_blank">link</a>
  514. <a href="/" target="_blank">link</a>
  515. <a href="/" target="_blank">link</a>
  516. </div>
  517. </div>
  518. <!------------------------to here------------------------>
  519.  
  520. <div class="links-wrap">
  521. <div class="links-title">Title</div>
  522. <div class="links">
  523. <a href="/" target="_blank">link</a>
  524. <a href="/" target="_blank">link</a>
  525. <a href="/" target="_blank">link</a>
  526. <a href="/" target="_blank">link</a>
  527. <a href="/" target="_blank">link</a>
  528. <a href="/" target="_blank">link</a>
  529. <a href="/" target="_blank">link</a>
  530. <a href="/" target="_blank">link</a>
  531. <a href="/" target="_blank">link</a>
  532. <a href="/" target="_blank">link</a>
  533. <a href="/" target="_blank">link</a>
  534. <a href="/" target="_blank">link</a>
  535. <a href="/" target="_blank">link</a>
  536. <a href="/" target="_blank">link</a>
  537. <a href="/" target="_blank">link</a>
  538. <a href="/" target="_blank">link</a>
  539. <a href="/" target="_blank">link</a>
  540. <a href="/" target="_blank">link</a>
  541. <a href="/" target="_blank">link</a>
  542. </div>
  543. </div>
  544.  
  545. <div class="links-wrap">
  546. <div class="links-title">Title</div>
  547. <div class="links">
  548. <a href="/" target="_blank">link</a>
  549. <a href="/" target="_blank">link</a>
  550. <a href="/" target="_blank">link</a>
  551. <a href="/" target="_blank">link</a>
  552. <a href="/" target="_blank">link</a>
  553. <a href="/" target="_blank">link</a>
  554. <a href="/" target="_blank">link</a>
  555. <a href="/" target="_blank">link</a>
  556. <a href="/" target="_blank">link</a>
  557. <a href="/" target="_blank">link</a>
  558. <a href="/" target="_blank">link</a>
  559. <a href="/" target="_blank">link</a>
  560. <a href="/" target="_blank">link</a>
  561. <a href="/" target="_blank">link</a>
  562. <a href="/" target="_blank">link</a>
  563. <a href="/" target="_blank">link</a>
  564. <a href="/" target="_blank">link</a>
  565. <a href="/" target="_blank">link</a>
  566. <a href="/" target="_blank">link</a>
  567. </div>
  568.  
  569. <div class="links-wrap">
  570. <div class="links-title">Title</div>
  571. <div class="links">
  572. <a href="/" target="_blank">link</a>
  573. <a href="/" target="_blank">link</a>
  574. <a href="/" target="_blank">link</a>
  575. <a href="/" target="_blank">link</a>
  576. <a href="/" target="_blank">link</a>
  577. <a href="/" target="_blank">link</a>
  578. <a href="/" target="_blank">link</a>
  579. <a href="/" target="_blank">link</a>
  580. <a href="/" target="_blank">link</a>
  581. <a href="/" target="_blank">link</a>
  582. <a href="/" target="_blank">link</a>
  583. <a href="/" target="_blank">link</a>
  584. <a href="/" target="_blank">link</a>
  585. <a href="/" target="_blank">link</a>
  586. <a href="/" target="_blank">link</a>
  587. </div>
  588.  
  589. <div class="links-wrap">
  590. <div class="links-title">Title</div>
  591. <div class="links">
  592. <a href="/" target="_blank">link</a>
  593. <a href="/" target="_blank">link</a>
  594. <a href="/" target="_blank">link</a>
  595. <a href="/" target="_blank">link</a>
  596. <a href="/" target="_blank">link</a>
  597. <a href="/" target="_blank">link</a>
  598. <a href="/" target="_blank">link</a>
  599. <a href="/" target="_blank">link</a>
  600. <a href="/" target="_blank">link</a>
  601. <a href="/" target="_blank">link</a>
  602. <a href="/" target="_blank">link</a>
  603. <a href="/" target="_blank">link</a>
  604. <a href="/" target="_blank">link</a>
  605. <a href="/" target="_blank">link</a>
  606. <a href="/" target="_blank">link</a>
  607. <a href="/" target="_blank">link</a>
  608. <a href="/" target="_blank">link</a>
  609. <a href="/" target="_blank">link</a>
  610. <a href="/" target="_blank">link</a>
  611. </div>
  612. </li>
  613.  
  614. <!--------------END OF LINKS CONTENT------------->
  615.  
  616.  
  617.  
  618.  
  619.  
  620. <!-----------------F.A.Q CONTENT---------------->
  621.  
  622. <li id="t3" class="tab-content">
  623.  
  624. <h2><span class="header2">Message</span></h2>
  625.  
  626. <!----to add or remove a question copy/delete from here:------>
  627. <div class="question">This is an example of a question.</div>
  628. <div class="answer">And this is an answer.</div>
  629. <!-----to here------->
  630.  
  631. <div class="question">This is an example of a question.</div>
  632. <div class="answer">And this is an answer.</div>
  633.  
  634. <div class="question">This is an example of a question.</div>
  635. <div class="answer">And this is an answer.</div>
  636.  
  637. <div class="question">This is an example of a question.</div>
  638. <div class="answer">And this is an answer.</div>
  639.  
  640. <div class="question">This is an example of a question.</div>
  641. <div class="answer">And this is an answer.</div>
  642.  
  643. <div id="ask-box">
  644. <p><iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]--></p>
  645. </div>
  646. </li>
  647.  
  648. <!-------------END OF F.A.Q. CONTENT----------->
  649.  
  650.  
  651.  
  652.  
  653.  
  654. <!----------------BLOGROLL CONTENT-------------->
  655.  
  656. <li id="t4" class="tab-content">
  657. <h2><span class="header2">Blogroll</span></h2>
  658. <div id="br">
  659. {block:Following}
  660. {block:Followed}
  661. <div id="following">
  662. <a href="{FollowedURL}" target="_blank" title="{FollowedName}">
  663. <img src="{FollowedPortraitURL-40}" class="portrait"/></a>
  664. </div>
  665. {/block:Followed}
  666. {/block:Following}
  667. </div>
  668. </li>
  669.  
  670. <!-------------END OF BLOGROLL CONTENT----------->
  671.  
  672. </ul>
  673. </div>
  674. </div>
  675.  
  676. <!---------------------SIDEBAR-------------------->
  677.  
  678. <div id="pic">
  679.  
  680. <!----put image link here---->
  681. <img src="https://36.media.tumblr.com/b234a91e3625302d34e46e62f0bb3ce1/tumblr_o1ogvxce2q1sh0miso2_100.png">
  682.  
  683. </div>
  684.  
  685. <div id="headr">
  686. <div id="tabs-bar">
  687. <ul id="tabs-nav">
  688. <li><a href="#t1" class="first-link">About Me</a></li>
  689. <li><a href="#t2" class="second-link">Links</a></li>
  690. <li><a href="#t3" class="third-link">F.A.Q.</a></li>
  691. <li><a href="#t4" class="fourth-link">Blogroll</a></li>
  692. </ul>
  693. </div>
  694.  
  695.  
  696. </ul>
  697. </div>
  698. </div>
  699.  
  700. <div id="navi">
  701. <a href="/">< back</a>
  702. |
  703. <!----put your links here---->
  704. <a href="/">Link 1</a>
  705. |
  706. <a href="/">Link 2</a>
  707. |
  708. <!---------------------------->
  709. <a href="http://tumblr.com/dashboard">dash ></a>
  710. </div>
  711.  
  712.  
  713. <!-----theme credit (dont remove)----->
  714. <div id="credit">
  715. <a href="http://jaebium.tumblr.com" title="credit" target="_blank">J</a>
  716. </div>
  717.  
  718.  
  719. </body>
  720. </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!