API tools faq
paste
Advertisement
ninchuser

All In One Page 1 - Discord - cactusthemes

ninchuser
Jun 7th, 2018
1,900
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 32.27 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <head>
  4.  
  5. <!--                                                ALL IN ONE PAGE - DISCORD
  6.                                                         by cactusthemes
  7. -->
  8.  
  9. <!-- CREDITS:
  10.                 - Tooltips by manos malihu
  11.                 - Icons by saturnthms
  12.                 - Popup by odeysseus
  13.                 - Cactus icon by https://thenounproject.com/smashicons/
  14. -->
  15.  
  16. <title>{Title}</title>
  17. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <meta name="description" content="{MetaDescription}">
  20. <meta name="viewport" content="width=device-width, initial-scale=1">
  21.  
  22. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  23.  
  24. <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  25.  
  26. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  27.  
  28. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  29.  
  30. <script>
  31. (function($){
  32. $(document).ready(function(){
  33. $("a[title]").style_my_tooltips({
  34. tip_follows_cursor:true,
  35. tip_delay_time:30,
  36. tip_fade_speed:300,
  37. attribute:"title"
  38. });
  39. });
  40. })(jQuery);
  41. </script>
  42.  
  43. <script>
  44. $(function(){
  45.     $('.desc,.fade').click(function() {
  46.     $('#pop').fadeToggle();
  47.     });
  48.     $( ".close" ).click(function() {
  49.        $('#pop').fadeToggle()
  50.        return false;
  51.     });
  52. });
  53. </script>
  54.  
  55. <style type="text/css">
  56.  
  57. /* IMPORTANT NOTE: IF YOU WANT THE LIGHT VERSION OF THIS PAGE, GO TO <body class="dark"> AND CHANGE IT TO <body class="light">. SAME PRINCIPLE IN REVERSE IF YOU HAVE A LIGHT PAGE BUT WANT IT TO GO BACK TO DARK */
  58.  
  59. /* PLEASE DON'T GO MESSING ABOUT IN THE CSS YOURSELF UNLESS YOU KNOW WHAT YOU'RE DOING, THANK YOU */
  60.  
  61. :root {
  62.     --font-size:14px; /* FONT SIZE FOR THE ENTIRE PAGE */
  63. }
  64.  
  65. body {
  66.     font-family:'Open Sans';
  67.     font-size:var(--font-size);
  68. }
  69.  
  70. body.dark {
  71.     background:#36393e;
  72. }
  73.  
  74. body.light {
  75.     background:#f0f0f0;
  76. }
  77.  
  78. .light::-webkit-scrollbar {
  79.     width:12px;
  80.     height:12px;
  81.     background:#d0d0d0;
  82.     border:3px solid #f0f0f0;
  83.     border-radius:10px;
  84. }
  85.  
  86. .light::-webkit-scrollbar-thumb {
  87.     background:#fff;
  88.     border:2px solid #f0f0f0;
  89.     border-top:4px solid #f0f0f0!important;
  90.     border-bottom:4px solid #f0f0f0!important;
  91.     border-radius:50px;
  92. }
  93.  
  94. body.dark::-webkit-scrollbar {
  95.     width:12px;
  96.     height:12px;
  97.     background:#2f3136;
  98.     border:3px solid #36393e;
  99.     border-radius:10px;
  100. }
  101.  
  102. body.dark::-webkit-scrollbar-thumb {
  103.     background:#1e2124;
  104.     border:2px solid #36393e;
  105.     border-top:4px solid #36393e!important;
  106.     border-bottom:4px solid #36393e!important;
  107.     border-radius:50px;
  108. }
  109.  
  110. iframe.tmblr-iframe {
  111.     white-space:nowrap!important;
  112.     z-index:99999999999999!important;
  113.     top:8px !important;
  114.     right:10px !important;
  115.     transition:all .5s ease-in-out;
  116.     -moz-transition:all .5s ease-in-out;
  117.     -o-transition:all .5s ease-in-out;
  118.     -webkit-transition:all .5s ease-in-out;
  119.     transform:scale(0.65);
  120.     transform-origin:100% 0;
  121.     -webkit-transform:scale(0.65);
  122.     -webkit-transform-origin:100% 0;
  123.     -o-transform:scale(0.65);
  124.     -o-transform-origin:100% 0;
  125.     -moz-transform:scale(0.65);
  126.     -moz-transform-origin:100% 0;
  127.     -ms-transform:scale(0.65);
  128.     -ms-transform-origin:100% 0;
  129. }
  130.  
  131. body.dark iframe.tmblr-iframe {
  132.     opacity:.8!important;
  133. }
  134.  
  135. body.dark iframe.tmblr-iframe:hover {
  136.     opacity:1!important;
  137. }
  138.  
  139. body.light iframe.tmblr-iframe {
  140.     filter:invert(1) contrast(150%)!important;
  141.     -webkit-filter:invert(1) contrast(150%)!important;
  142.     -o-filter:invert(1) contrast(150%)!important;
  143.     -moz-filter:invert(1) contrast(150%)!important;
  144.     -ms-filter:invert(1) contrast(150%)!important;
  145.     opacity:.6!important;
  146. }
  147.  
  148. body.light iframe.tmblr-iframe:hover {
  149.     opacity:.8!important;
  150. }
  151.  
  152. body.light div.status-indicator {
  153.     filter:invert(1)!important;
  154. }
  155.  
  156. #s-m-t-tooltip {
  157.     max-width:300px;
  158.     overflow-x:auto;
  159.     margin:25px 20px;
  160.     padding:7px;
  161.     font-size:var(--font-size);
  162.     height:auto;
  163.     word-wrap:break-word;
  164.     border-radius:5px;
  165.     z-index:9999!important;
  166.     text-transform:lowercase;
  167. }
  168.  
  169. body.dark #s-m-t-tooltip {
  170.     background:#000;
  171.     color:#fff;
  172. }
  173.  
  174. body.light #s-m-t-tooltip {
  175.     background:#ddd;
  176.     color:#666;
  177. }
  178.  
  179. a {
  180.     text-decoration:none;
  181. }
  182.  
  183. body.dark a {
  184.     color:#eee;
  185. }
  186.  
  187. body.light a {
  188.     color:#333;
  189. }
  190.  
  191. h1, h2, h3, h4, h5, h6 {
  192.     margin:0;
  193. }
  194.  
  195. input[type="radio"] {
  196.     display:none;
  197. }
  198.  
  199. nav.icons {
  200.     height:100vh;
  201.     width:70px;
  202.     position:fixed;
  203.     top:0;
  204.     left:0;
  205.     z-index:99!important;
  206. }
  207.  
  208. body.dark nav.icons {
  209.     background:#202225;
  210. }
  211.  
  212. nav.icons label {
  213.     display:flex;
  214.     display:-webkit-flex;
  215.     display:-ms-flexbox;
  216.     align-items:center;
  217.     -webkit-align-items:center;
  218.     -ms-flex-align:center;
  219.     justify-content:center;
  220.     -webkit-justify-content:center;
  221.     -ms-flex-pack:justify;
  222.     font-size:25px;
  223.     width:50px;
  224.     height:50px;
  225.     margin:15px 10px;
  226.     border-radius:50px;
  227.     position:relative;
  228.     transition:all .4s ease-in-out;
  229.     cursor:pointer;
  230.     z-index:99!important;
  231.     text-align:center;
  232. }
  233.  
  234. body.dark nav.icons label {
  235.     color:#fff;
  236.     background:#2f3136;
  237. }
  238.  
  239. body.light nav.icons label {
  240.     color:#666;
  241.     background:#ccc;
  242. }
  243.  
  244. nav.icons label .sf {
  245.     display:inline-block;
  246. }
  247.  
  248. nav.icons label .sf-tags-o {
  249.     margin-top:5px;
  250.     margin-left:-2px;
  251. }
  252.  
  253. nav.icons label .sf-user-o {
  254.     margin-top:2px;
  255. }
  256.  
  257. nav.icons label .sf-chat-bubbles-o {
  258.     margin-top:3px;
  259. }
  260.  
  261. nav.icons label .sf-group-1-o {
  262.     margin-top:3px;
  263. }
  264.  
  265. nav.icons label:hover, nav.icons label.active {
  266.     border-radius:15px;
  267. }
  268.  
  269. body.dark nav.icons label:hover, body.dark nav.icons label.active {
  270.     background:#7289da;
  271. }
  272.  
  273. body.light nav.icons label:hover, body.light nav.icons label.active {
  274.     background:#a1b0e6;
  275. }
  276.  
  277. nav.icons label.active::before {
  278.     height:40px;
  279. }
  280.  
  281. body.dark nav.icons label.active::before {
  282.     background:#fff;
  283. }
  284.  
  285. body.light nav.icons label.active::before {
  286.     background:#666;
  287. }
  288.  
  289. nav.icons label::before {
  290.     content:'';
  291.     height:10px;
  292.     width:5px;
  293.     border-bottom-right-radius:10px;
  294.     border-top-right-radius:10px;
  295.     position:absolute;
  296.     left:-10px;
  297.     transition:all .4s ease-in-out;
  298. }
  299.  
  300. body.dark nav.icons label::before {
  301.     background:#8a8e94;
  302. }
  303.  
  304. body.light nav.icons label::before {
  305.     background:#999;
  306. }
  307.  
  308. nav.icons label .tooltip {
  309.     position:absolute;
  310.     font-size:var(--font-size);
  311.     left:100%;
  312.     margin-left:10px;
  313.     padding:8px;
  314.     border-radius:5px;
  315.     opacity:0;
  316.     transition:all .2s ease-in-out;
  317. }
  318.  
  319. body.dark nav.icons label .tooltip {
  320.     background:#000;
  321.     color:#fff;
  322. }
  323.  
  324. body.light nav.icons label .tooltip {
  325.     background:#ddd;
  326.     color:#666;
  327. }
  328.  
  329. nav.icons label .tooltip::before {
  330.     content:'';
  331.     border-width:7px;
  332.     border-style:solid;
  333.     position:absolute;
  334.     left:-14px;
  335.     top:calc(50% - 7px);
  336. }
  337.  
  338. body.dark nav.icons label .tooltip::before {
  339.     border-color:transparent #000 transparent transparent;
  340. }
  341.  
  342. body.light nav.icons label .tooltip::before {
  343.     border-color:transparent #ddd transparent transparent;
  344. }
  345.  
  346. nav.icons label:hover .tooltip {
  347.     opacity:1;
  348. }
  349.  
  350. /*nav.icons label::after {
  351.     position:absolute;
  352.     background:#000;
  353. }
  354.  
  355. nav.icons label:nth-of-type(1)::after {
  356.     content:'about';
  357. }
  358.  
  359. nav.icons label:nth-of-type(2)::after {
  360.     content:'faq';
  361. }
  362.  
  363. nav.icons label:nth-of-type(3)::after {
  364.     content:'navigaton';
  365. }
  366.  
  367. nav.icons label:nth-of-type(4)::after {
  368.     content:'about';
  369. }*/
  370.  
  371. header {
  372.     position:fixed;
  373.     top:0;
  374.     left:70px;
  375.     height:51px;
  376.     width:calc(100% - 70px);
  377.     z-index:2;
  378. }
  379.  
  380. body.dark header {
  381.     background:#36393f;
  382.     box-shadow: 0 4px 2px -2px #222327;
  383. }
  384.  
  385. body.light header {
  386.     background:#f0f0f0;
  387.     box-shadow:0 4px 2px -2px #d8dcde;
  388. }
  389.  
  390. header h5 {
  391.     margin:0;
  392.     padding:15px;
  393.     box-sizing:border-box;
  394.     font-size:16px;
  395.     display:inline-block;
  396.     width:230px;
  397. }
  398.  
  399. body.dark header h5 {
  400.     background:#2f3136;
  401.     color:#fff;
  402. }
  403.  
  404. body.light header h5 {
  405.     background:#fafafa;
  406.     color:#4e545b;
  407. }
  408.  
  409. header #title {
  410.     display:inline-block;
  411.     font-weight:800;
  412.     margin-left:20px;
  413.     font-size:16px;
  414. }
  415.  
  416. body.dark header #title {
  417.     color:#fff;
  418. }
  419.  
  420. body.light header #title {
  421.     color:#4e545b;
  422. }
  423.  
  424. header #title .sign {
  425.     margin-right:2px;
  426. }
  427.  
  428. body.dark header #title .sign {
  429.     color:#8a8e94;
  430. }
  431.  
  432. body.light header #title .sign {
  433.     color:#8e9297;
  434. }
  435.  
  436. header #title .line {
  437.     margin:0px 10px 0px 10px;
  438. }
  439.  
  440. body.dark header #title .line {
  441.     color:#4a4c52;
  442. }
  443.  
  444. body.light header #title .line {
  445.     color:#8e9297;
  446. }
  447.  
  448. header .desc {
  449.     position:absolute;
  450.     display:inline-block;
  451.     white-space:nowrap;
  452.     overflow:hidden;
  453.     margin-top:17px;
  454.     margin-left:3px;
  455.     text-overflow:ellipsis;
  456.     width:520px;
  457.     height:25px;
  458.     font-size:14px;
  459.     cursor:pointer;
  460. }
  461.  
  462. body.dark header .desc {
  463.     color:#a9aaae;
  464. }
  465.  
  466. body.light header .desc {
  467.     color:#989ba2;
  468. }
  469.  
  470. header .desc a {
  471.     transition:all .5s ease-in-out;
  472.     padding:4px;
  473.     border-radius:5px;
  474. }
  475.  
  476. body.dark header .desc a {
  477.     color:#87898e;
  478. }
  479.  
  480. body.light header .desc a {
  481.     color:#999;
  482. }
  483.  
  484. body.dark header .desc a:hover {
  485.     color:#b9bbbe;
  486.     background:#42464d;
  487. }
  488.  
  489. body.light header .desc a:hover {
  490.     color:#444;
  491.     background:#ddd;
  492. }
  493.  
  494. header .sfm {
  495.     display:inline-block;
  496.     margin-left:43%;
  497.     position:absolute;
  498.     margin-top:11px;
  499. }
  500.  
  501. header .sfm input {
  502.     border:0;
  503.     position:relative;
  504.     float:right;
  505.     padding:6px 6px 6px 8px;
  506.     width:100%;
  507.     font-family:'Open Sans';
  508.     font-weight:600;
  509.     border-radius:5px;
  510. }
  511.  
  512. body.dark header .sfm input {
  513.     background:#4a4c52;  
  514.     color:#7e8084;
  515. }
  516.  
  517. body.light header .sfm input {
  518.     background:#cacaca;
  519.     color:#fff;
  520.     -webkit-text-fill-color:#fff!important;
  521. }
  522.  
  523. header .sfm input:focus {
  524.     outline:0;
  525. }
  526.  
  527. #pop {
  528.     width:100%;
  529.     height:100%;
  530.     top:0;
  531.     left:0;
  532.     position:fixed;
  533.     z-index:999;
  534.     display:none;
  535. }
  536.  
  537. body.dark #pop {
  538.     background:rgba(0,0,0,.7);
  539. }
  540.  
  541. body.light #pop {
  542.     background:rgba(255,255,255,.7);
  543. }
  544.  
  545. .fade {
  546.     top:0;
  547.     left:0;
  548.     position:fixed;
  549.     z-index:1000;
  550.     width:100%;
  551.     height:100%;
  552. }
  553.  
  554. .popup {
  555.     top:50%;
  556.     left:50%;
  557.     transform:translate(-50%,-50%);
  558.     position:fixed;
  559.     padding:30px;
  560.     z-index:10000;
  561.     max-width:500px;
  562.     border-radius:10px;
  563. }
  564.  
  565. body.dark .popup {
  566.     background:#36393f;
  567.     color:#c3c4c5;
  568. }
  569.  
  570. body.light .popup {
  571.     background:#f0f0f0;
  572.     color:#3e3e3e;
  573. }
  574.  
  575. .popup h5 {
  576.     text-transform:uppercase;
  577.     margin:0;
  578.     font-size:calc(var(--font-size) + 2px);
  579.     margin-bottom:30px;
  580.     display:inline;
  581. }
  582.  
  583. body.dark .popup h5 {
  584.     color:#fff;
  585. }
  586.  
  587. body.light .popup h5 {
  588.     color:#4e545b;
  589. }
  590.  
  591. .popup .sf {
  592.     float:right;
  593.     font-weight:800;
  594.     margin-top:-10px;
  595.     margin-right:-10px;
  596.     padding:10px 10px 7px 10px;
  597.     border-radius:5px;
  598.     font-size:var(--font-size);
  599.     transition:all .5s ease-in-out;
  600. }
  601.  
  602. body.dark .popup .sf {
  603.     color:#898a8e;
  604. }
  605.  
  606. body.light .popup .sf {
  607.     color:#999;
  608. }
  609.  
  610. body.dark .popup .sf:hover {
  611.     background:#3e4147;
  612.     color:#dcddde;
  613. }
  614.  
  615. body.light .popup .sf:hover {
  616.     color:#000;
  617.     background:#ddd;
  618. }
  619.  
  620. .popup p {
  621.     display:block;
  622.     margin-bottom:0;
  623.     font-size:var(--font-size);
  624. }
  625.  
  626. .popup p a {
  627.     transition:all .5s ease-in-out;
  628.     padding:4px;
  629.     border-radius:5px;
  630. }
  631.  
  632. body.dark .popup p a {
  633.     color:#87898e;
  634. }
  635.  
  636. body.light .popup p a {
  637.     color:#999;
  638. }
  639.  
  640. body.dark .popup p a:hover {
  641.     color:#b9bbbe;
  642.     background:#42464d;
  643. }
  644.  
  645. body.light .popup p a:hover {
  646.     color:#444;
  647.     background:#ddd;
  648. }
  649.  
  650. aside {
  651.     height:100vh;
  652.     width:230px;
  653.     position:fixed;
  654.     top:0;
  655.     left:70px;
  656. }
  657.  
  658. body.dark aside {
  659.     background:#2f3136;
  660. }
  661.  
  662. body.light aside {
  663.     background:#fafafa;
  664. }
  665.  
  666. aside nav.links {
  667.     margin-top:51px;
  668.     padding:15px 12px;
  669.     font-size:16px;
  670. }
  671.  
  672. aside nav.links a {
  673.     display:block;
  674.     padding:6px 13px;
  675.     border-radius:5px;
  676.     text-transform:lowercase;
  677.     margin-bottom:3px;
  678. }
  679.  
  680. body.dark aside nav.links a {
  681.     color:#606266;
  682. }
  683.  
  684. body.light aside nav.links a {
  685.     color:#757b81;
  686. }
  687.  
  688. body.dark aside nav.links a:hover {
  689.     background:#36393f;
  690.     color:#b9bbbe;
  691. }
  692.  
  693. body.light aside nav.links a:hover {
  694.     background:#e0e0e0;
  695.     color:#888;
  696. }
  697.  
  698. aside nav.links a::before {
  699.     content:'#';
  700.     margin-right:5px;
  701. }
  702.  
  703. body.dark aside nav.links a::before {
  704.     color:#606266!important;
  705. }
  706.  
  707. body.light aside nav.links a::before {
  708.     color:#dedee1;
  709. }
  710.  
  711. body.light aside nav.links a:hover::before {
  712.     color:#fafafa;
  713. }
  714.  
  715. aside #bn {
  716.     position:fixed;
  717.     bottom:0;
  718.     width:230px;
  719.     height:60px;
  720. }
  721.  
  722. body.dark aside #bn {
  723.     background:#2a2c31;
  724.     color:#fff;
  725. }
  726.  
  727. body.light aside #bn {
  728.     background:#fff;
  729.     box-shadow:0 0px 4px #d8dcde;
  730.     color:#666;
  731. }
  732.  
  733. aside #bn .info {
  734.     margin-top:10px;
  735.     margin-left:15px;
  736. }
  737.  
  738. aside #bn img {
  739.     height:40px;
  740.     width:40px;
  741.     vertical-align:top;
  742.     border-radius:100%;
  743. }
  744.  
  745. aside #bn .name {
  746.     vertical-align:top;
  747.     font-size:14px;
  748.     margin-left:5px;
  749.     display:inline-block;
  750. }
  751.  
  752. aside #bn .title {
  753.     position:absolute;
  754.     font-size:12px;
  755.     margin-top:-20px;
  756.     margin-left:45px;
  757. }
  758.  
  759. body.dark aside #bn .title {
  760.     color:#76787b;
  761. }
  762.  
  763. body.light aside #bn .title {
  764.     color:#999;
  765. }
  766.  
  767. input.switch:nth-of-type(1):checked ~ article.slide:nth-of-type(1) {
  768.     display:block;
  769. }
  770.  
  771. input.switch:nth-of-type(2):checked ~ article.slide:nth-of-type(2) {
  772.     display:block;
  773. }
  774.  
  775. input.switch:nth-of-type(3):checked ~ article.slide:nth-of-type(3) {
  776.     display:block;
  777. }
  778.  
  779. input.switch:nth-of-type(4):checked ~ article.slide:nth-of-type(4) {
  780.     display:block;
  781. }
  782.  
  783. @keyframes show {
  784.     0% {
  785.         opacity:0;
  786.     }
  787.    
  788.     100% {
  789.         opacity:1;
  790.     }
  791. }
  792.  
  793. article.slide {
  794.     display:none;
  795.     width:600px;
  796.     position:absolute;
  797.     animation:show .5s;
  798.     margin:80px 450px;
  799. }
  800.  
  801. article.slide .abt-title {
  802.     border-radius:20px 20px 0px 0px;
  803.     text-align:center;
  804.     padding:20px;
  805. }
  806.  
  807. body.dark article.slide .abt-title {
  808.     background:#202225;
  809. }
  810.  
  811. body.light article.slide .abt-title {
  812.     background:#f6f6f7;
  813. }
  814.  
  815. article.slide .abt-title img {
  816.     width:100px;
  817.     border-radius:50%;
  818. }
  819.  
  820. article.slide .abt-title h3 {
  821.     margin:5px 0px;
  822. }
  823.  
  824. body.dark article.slide .abt-title h3 {
  825.     color:#fff;
  826. }
  827.  
  828. body.light article.slide .abt-title h3 {
  829.     color:#4f545c;
  830. }
  831.  
  832. article.slide .abt-title h4 {
  833.     margin:3px 0px;
  834. }
  835.  
  836. body.dark article.slide .abt-title h4 {
  837.     color:#a4a4a4;
  838. }
  839.  
  840. body.light article.slide .abt-title h4 {
  841.     color:#bec0c2;
  842. }
  843.  
  844. article.slide .rest {
  845.     padding:20px;
  846.     border-radius:0px 0px 20px 20px;
  847. }
  848.  
  849. body.dark article.slide .rest {
  850.     background:#2f3136;
  851.     color:#969696;
  852. }
  853.  
  854. body.light article.slide .rest {
  855.     background:#fff;
  856.     color:#b5b5b5;
  857. }
  858.  
  859. article.slide .rest h5 {
  860.     text-transform:uppercase;
  861.     font-size:1em;
  862. }
  863.  
  864. body.dark article.slide .rest h5 {
  865.     color:#727272;
  866. }
  867.  
  868. body.light article.slide .rest h5 {
  869.     color:#72767d;
  870. }
  871.  
  872. article.slide .facts {
  873.     margin-left:-5px;
  874.     margin-top:10px;
  875.     margin-bottom:10px;
  876. }
  877.  
  878. article.slide .fact {
  879.     display:inline-flex;
  880.     display:-webkit-inline-flex;
  881.     display:-ms-inline-flexbox;
  882.     align-items:center;
  883.     -webkit-align-items:center;
  884.     -ms-flex-align:center;
  885.     border:1px solid #979797;
  886.     padding:5px 9px 5px 5px;
  887.     margin:5px;
  888.     border-radius:20px;
  889. }
  890.  
  891. body.dark article.slide .fact {
  892.     color:#d5d5d5;
  893. }
  894.  
  895. body.light article.slide .fact {
  896.     color:#7d8087;
  897. }
  898.  
  899. article.slide .fact::before {
  900.     content:'';
  901.     background:#979797;
  902.     width:15px;
  903.     height:15px;
  904.     border-radius:50px;
  905.     margin-right:5px;
  906.     display:inline-block;
  907. }
  908.  
  909. article.slide .fact.blue {
  910.     border-color:#3498db;
  911. }
  912.  
  913. article.slide .fact.blue::before {
  914.     background:#3498db;
  915. }
  916.  
  917. article.slide .fact.red {
  918.     border-color:#d7342a;
  919. }
  920.  
  921. article.slide .fact.red::before {
  922.     background:#d7342a;
  923. }
  924.  
  925. article.slide .fact.yellow {
  926.     border-color:#f1c40f;
  927. }
  928.  
  929. article.slide .fact.yellow::before {
  930.     background:#f1c40f;
  931. }
  932.  
  933. article.slide .fact.pink {
  934.     border-color:#fc74dc;
  935. }
  936.  
  937. article.slide .fact.pink::before {
  938.     background:#fc74dc;
  939. }
  940.  
  941. article.slide .fact.green {
  942.     border-color:#1f8b4c;
  943. }
  944.  
  945. article.slide .fact.green::before {
  946.     background:#1f8b4c;
  947. }
  948.  
  949. article.slide .fact.purple {
  950.     border-color:#9b59b6;
  951. }
  952.  
  953. article.slide .fact.purple::before {
  954.     background:#9b59b6;
  955. }
  956.  
  957. article.slide .fact.orange {
  958.     border-color:#e67e22;
  959. }
  960.  
  961. article.slide .fact.orange::before {
  962.     background:#e67e22;
  963. }
  964.  
  965. article.slide .fact.brown {
  966.     border-color:#8b4513;
  967. }
  968.  
  969. article.slide .fact.brown::before {
  970.     background:#8b4513;
  971. }
  972.  
  973. article.slide .abt-text {
  974.     margin-top:15px;
  975. }
  976.  
  977. article.slide .abt-text a:hover {
  978.     text-decoration:underline;
  979. }
  980.  
  981. article.slide .question > span, article.slide .answer > span {
  982.     display:inline-block;
  983. }
  984.  
  985. article.slide .question::after, article.slide .full::after {
  986.     width:calc(100vw - 470px);
  987.     content:'';
  988.     height:2px;
  989.     display:inline-block;
  990.     margin-left:-70px;
  991. }
  992.  
  993. body.dark article.slide .question::after, body.dark article.slide .full::after, body.dark article.slide iframe#ask_form::before {
  994.     background:#3e4146;
  995. }
  996.  
  997. body.light article.slide .question::after, body.light article.slide .full::after, body.light article.slide iframe#ask_form::before {
  998.     background:#dbdbdb;
  999. }
  1000.  
  1001. article.slide .question, article.slide .answer {
  1002.     padding-top:10px;
  1003.     min-height:40px;
  1004. }
  1005.  
  1006. article.slide .full:first-of-type .question {
  1007.     padding-top:0;
  1008. }
  1009.  
  1010. article.slide .question .sf {
  1011.     border-radius:50px;
  1012.     height:40px;
  1013.     width:40px;
  1014.     font-size:calc(var(--font-size) + 4px);
  1015.     display:inline-flex;
  1016.     display:-webkit-inline-flex;
  1017.     display:-ms-inline-flexbox;
  1018.     align-items:center;
  1019.     -webkit-align-items:center;
  1020.     -ms-flex-align:center;
  1021.     justify-content:center;
  1022.     -webkit-justify-content:center;
  1023.     -ms-flex-pack:justify;
  1024. }
  1025.  
  1026. body.dark article.slide .question .sf {
  1027.     color:#fff;
  1028.     background:#7289da;
  1029. }
  1030.  
  1031. body.light article.slide .question .sf {
  1032.     color:#444;
  1033.     background:#a1b0e6;
  1034. }
  1035.  
  1036. article.slide .answer img {
  1037.     width:40px;
  1038.     border-radius:50px;
  1039.     display:inline-block;
  1040. }
  1041.  
  1042. article.slide .question .question-title, article.slide .answer .answer-title {
  1043.     font-weight:bold;
  1044.     vertical-align:top;
  1045.     margin-left:10px;
  1046. }
  1047.  
  1048. body.dark article.slide .question .question-title, body.dark article.slide .answer .answer-title {
  1049.     color:#fff;
  1050. }
  1051.  
  1052. body.light article.slide .question .question-title, body.light article.slide .answer .answer-title {
  1053.     color:#444;
  1054. }
  1055.  
  1056. article.slide .question .question-text {
  1057.     display:block;
  1058.     margin-left:50px;
  1059.     margin-top:-15px;
  1060. }
  1061.  
  1062. body.dark article.slide .question .question-text, body.dark article.slide .answer .answer-text {
  1063.     color:#c3c4c5;
  1064. }
  1065.  
  1066. body.light article.slide .question .question-text, body.light article.slide .answer .answer-text {
  1067.     color:#666;
  1068. }
  1069.  
  1070. article.slide .answer .answer-text {
  1071.     display:block;
  1072.     margin-left:50px;
  1073.     margin-top:-20px;
  1074. }
  1075.  
  1076. article.slide iframe#ask_form::before {
  1077.     width:calc(100vw - 470px);
  1078.     content:'';
  1079.     height:2px;
  1080.     display:inline-block;
  1081.     margin-left:-70px;
  1082. }
  1083.  
  1084. article.slide iframe#ask_form {
  1085.     padding-top:10px;
  1086. }
  1087.  
  1088. article.slide .grid {
  1089.     display:grid;
  1090.     display:-ms-grid;
  1091.     grid-template-columns:auto auto auto;
  1092.     -ms-grid-columns:auto auto auto;
  1093.     grid-gap:10px;
  1094.     -ms-grid-gap:10px;
  1095.     width:700px;
  1096. }
  1097.  
  1098. article.slide .grid.first {
  1099.     grid-row-gap:30px;
  1100.     -ms-grid-row-gap:30px;
  1101.     grid-template-columns:226px 226px 226px;
  1102.     -ms-grid-columns:226px 226px 226px;
  1103. }
  1104.  
  1105. article.slide .navig {
  1106.     cursor:pointer;
  1107.     font-weight:bold;
  1108. }
  1109.  
  1110. body.dark article.slide .navig {
  1111.     color:#727272;
  1112. }
  1113.  
  1114. body.light article.slide .navig {
  1115.     color:#8f8f8f;
  1116. }
  1117.  
  1118. article.slide .navig .sf, article.slide .navig .nav-title {
  1119.     display:inline-block;
  1120. }
  1121.  
  1122. article.slide .navig .sf {
  1123.     font-size:calc(var(--font-size) - 4px);
  1124. }
  1125.  
  1126. article.slide .navig .nav-title {
  1127.     margin-left:5px;
  1128. }
  1129.  
  1130. article.slide a.follow img {
  1131.     width:30px;
  1132.     border-radius:50px;
  1133.     vertical-align:middle;
  1134. }
  1135.  
  1136. article.slide a.follow .followed {
  1137.     display:inline-block;
  1138.     font-weight:bold;
  1139.     vertical-align:middle;
  1140.     margin-left:10px;
  1141. }
  1142.  
  1143. body.dark article.slide a.follow {
  1144.     color:#fff;
  1145. }
  1146.  
  1147. body.light article.slide a.follow {
  1148.     color:#666;
  1149. }
  1150.  
  1151. article.slide .tags {
  1152.     display:none;
  1153.     width:85%;
  1154.     margin-top:10px;
  1155.     margin-left:10px;
  1156. }
  1157.  
  1158. article.slide .tags a.tag {
  1159.     display:block;
  1160.     padding:3px 7px;
  1161.     margin:3px;
  1162. }
  1163.  
  1164. body.dark article.slide .tags a.tag {
  1165.     color:#a6a6a6;
  1166. }
  1167.  
  1168. body.light article.slide .tags a.tag {
  1169.     color:#757b81;
  1170. }
  1171.  
  1172. article.slide .tags a.tag:hover {
  1173.     text-decoration:none;
  1174.     border-radius:5px;
  1175. }
  1176.  
  1177. body.dark article.slide .tags a.tag:hover {
  1178.     color:#b9bbbe;
  1179.     background:#42464d;
  1180. }
  1181.  
  1182. body.light article.slide .tags a.tag:hover {
  1183.     color:#888;
  1184.     background:#e0e0e0;
  1185. }
  1186.  
  1187. article.slide .tags a.tag::before {
  1188.     content:'#';
  1189.     margin-right:3px;
  1190. }
  1191.  
  1192. /* DO NOT TOUCH */
  1193.  
  1194. #credz {
  1195.     position:fixed;
  1196.     bottom:20px;
  1197.     right:15px;
  1198.     z-index:99!important;
  1199. }
  1200.  
  1201. #credz .ci {
  1202.     background:#fff;
  1203.     padding:7px 8px 5px 8px;
  1204.     border-radius:50px;
  1205.     box-shadow:0px 0px 1px rgba(0,0,0,.1);
  1206.     transition:all .5s ease-in-out;
  1207. }
  1208.  
  1209. #credz .ci:hover {
  1210.     transform:scale(1.1);
  1211. }
  1212.  
  1213. #credz img {
  1214.     width:35px;
  1215. }
  1216.  
  1217. </style>
  1218.  
  1219. </head>
  1220.  
  1221. <body class="dark">
  1222.  
  1223. <section id="car">
  1224.  
  1225. <!-- Radio Buttons, Do Not Remove -->
  1226.  
  1227. <input type="radio" id="abt" name="activator" checked="checked" class="switch">
  1228. <input type="radio" id="qs" name="activator" class="switch">
  1229. <input type="radio" id="nav" name="activator" class="switch">
  1230. <input type="radio" id="broll" name="activator" class="switch">
  1231.  
  1232. <nav class="icons">
  1233.  
  1234. <label for="abt" class="switchicon active">
  1235. <span class="tooltip">about</span> <!-- title on hover -->
  1236. <span class="sf sf-user-o" aria-hidden="true"></span> <!-- icon for about section -->
  1237. </label>
  1238. <label for="qs" class="switchicon">
  1239. <span class="tooltip">faq</span> <!-- title on hover -->
  1240. <span class="sf sf-chat-bubbles-o" aria-hidden="true"></span> <!-- icon for faq section -->
  1241. </label>
  1242. <label for="nav" class="switchicon">
  1243. <span class="tooltip">navigation</span> <!-- title on hover -->
  1244. <span class="sf sf-tags-o" aria-hidden="true"></span> <!-- icon for navi section -->
  1245. </label>
  1246. <!-- ICON + TITLE FOR BLOGROLL SECTION, DELETE IF THIS IS A SIDEBLOG -->
  1247. <label for="broll" class="switchicon">
  1248. <span class="tooltip">blogroll</span> <!-- title on hover -->
  1249. <span class="sf sf-group-1-o" aria-hidden="true"></span> <!-- icon for blog roll section -->
  1250. </label>
  1251. <!-- END ICON + TITLE FOR BLOGROLL SECTION, DELETE IF THIS IS A SIDEBLOG -->
  1252.  
  1253. </nav>
  1254.  
  1255. <!-- header, DON'T EDIT ANYTHING -->
  1256.  
  1257. <header>
  1258.  
  1259. <h5>{Title}</h5>
  1260.  
  1261. <div id="title">
  1262. <span class="sign">#</span>
  1263. <span class="ht">about</span>
  1264. <span class="line">|</span>
  1265. </div>
  1266.  
  1267. <div class="desc">
  1268. {Description}
  1269. </div>
  1270.  
  1271. <form action="/search" method="get" class="sfm">
  1272.      <input type="text" name="q" value="" id="sf" autocomplete="off" placeholder="Search"/>
  1273. </form>
  1274.  
  1275. </header>
  1276.  
  1277. <div id="pop"> <div class="fade"></div>
  1278.     <div class="popup">
  1279.     <h5>about</h5><a href="#" class="close"><span class="sf sf-cross"></span></a>
  1280.         <p>
  1281.         {Description}
  1282.         </p>
  1283.     </div>
  1284. </div>
  1285.  
  1286. <!-- aside, only edit the links -->
  1287.  
  1288. <aside>
  1289.  
  1290. <nav class="links">
  1291.  
  1292. <a href="/">home</a>
  1293. <a href="/ask">ask</a>
  1294. <a href="/">link 1</a> <!-- link 1 -->
  1295. <a href="/">link 2</a> <!-- link 2 -->
  1296. <a href="/">link 3</a> <!-- link 3 -->
  1297. <a href="/">link 4</a> <!-- link 4 -->
  1298.  
  1299. </nav>
  1300.  
  1301. <div id="bn">
  1302. <div class="info">
  1303. <img src="{PortraitURL-40}"><span class="name">{name}</span><br><span class="title">#{Title}</span>
  1304. </div>
  1305. </div>
  1306.  
  1307. </aside>
  1308.  
  1309. <!-- SLIDE ONE, THE ABOUT SECTION -->
  1310.  
  1311. <!-- if you don't want this slide, delete from <article class="slide"> to the first </article> you find. also be sure to delete the corresponding icon from <nav class="icons"> -->
  1312.  
  1313. <!-- please only edit the things i've annotated, i know it looks weird in the customize preview, but it'll look like it's supposed to on your blog -->
  1314.  
  1315. <article class="slide">
  1316.  
  1317. <div class="abt-title">
  1318. <img src="{PortraitURL-128}">
  1319. <h3>your name</h3> <!-- your name -->
  1320. <h4>{name}</h4>
  1321. </div>
  1322.  
  1323. <div class="rest">
  1324.  
  1325. <h5>facts</h5>
  1326. <div class="facts">
  1327. <!-- start of facts section! you can add as many of these as you like. use them in the format below for colors/right terminology etc. -->
  1328. <div class="fact blue">fact one</div>
  1329. <div class="fact red">fact two</div>
  1330. <div class="fact">fact three</div>
  1331. <div class="fact brown">fact four</div>
  1332. <div class="fact yellow">fact five</div>
  1333. <div class="fact pink">fact six</div>
  1334. <div class="fact">fact seven</div>
  1335. <div class="fact green">fact eight</div>
  1336. <div class="fact purple">fact nine</div>
  1337. <div class="fact orange">fact ten</div>
  1338. <!-- end of facts section -->
  1339. </div>
  1340.  
  1341. <h5>about</h5>
  1342. <div class="abt-text">
  1343. <!-- description -->
  1344. This is where you can put text! You can make this as long/short as you want, everything will fit ^^
  1345. <br><br>
  1346. Here, have some cool text effects:
  1347. <ul>
  1348. <li>list item</li>
  1349. <li>another list item</li>
  1350. </ul>
  1351. <ol>
  1352. <li>oooh numbers</li>
  1353. <li>how fancy</li>
  1354. </ol>
  1355. <i>You can have italic text</i>, <b>or bold text</b>, or <strike>strikethrough text</strike>. Maybe even <a href="/" title="link title on hover!">throw in a little link</a>.
  1356. <!-- end of description -->
  1357. </div>
  1358.  
  1359. </div>
  1360.  
  1361. </article>
  1362.  
  1363. <!-- END OF SLIDE ONE, ABOUT SECTION -->
  1364.  
  1365. <!-- SLIDE TWO, FAQ SECTION -->
  1366.  
  1367. <!-- if you don't want this slide, delete from <article class="slide"> to the first </article> you find. also be sure to delete the corresponding icon from <nav class="icons"> -->
  1368.  
  1369. <!-- please only edit the things i've annotated, i know it looks weird in the customize preview, but it'll look like it's supposed to on your blog -->
  1370.  
  1371. <article class="slide">
  1372.  
  1373. <!-- TEMPLATE FOR NEW QUESTIONS/ANSWERS -->
  1374.  
  1375. <!--
  1376. <div class="full">
  1377.  
  1378. <div class="question">
  1379. <span class="sf sf-question-mark" aria-hidden="true"></span><span class="question-title">question</span>
  1380. <span class="question-text">
  1381. this is your question
  1382. </span>
  1383. </div>
  1384.  
  1385. <div class="answer">
  1386. <img src="{PortraitURL-64}">
  1387. <span class="answer-title">{name}</span>
  1388. <span class="answer-text">
  1389. this is your answer
  1390. </span>
  1391. </div>
  1392.  
  1393. </div>
  1394. -->
  1395.  
  1396. <div class="full">
  1397.  
  1398. <div class="question">
  1399. <span class="sf sf-question-mark" aria-hidden="true"></span><span class="question-title">question</span>
  1400. <span class="question-text">
  1401. <!-- insert your question here -->
  1402. this is your question
  1403. <!-- end of question -->
  1404. </span>
  1405. </div>
  1406.  
  1407. <div class="answer">
  1408. <img src="{PortraitURL-64}">
  1409. <span class="answer-title">{name}</span>
  1410. <span class="answer-text">
  1411. <!-- insert your answer here -->
  1412. this is your answer
  1413. <!-- end of answer -->
  1414. </span>
  1415. </div>
  1416.  
  1417. </div>
  1418.  
  1419. <div class="full">
  1420.  
  1421. <div class="question">
  1422. <span class="sf sf-question-mark" aria-hidden="true"></span><span class="question-title">question</span>
  1423. <span class="question-text">
  1424. <!-- insert your question here -->
  1425. this is your question
  1426. <!-- end of question -->
  1427. </span>
  1428. </div>
  1429.  
  1430. <div class="answer">
  1431. <img src="{PortraitURL-64}">
  1432. <span class="answer-title">{name}</span>
  1433. <span class="answer-text">
  1434. <!-- insert your answer here -->
  1435. this is your answer
  1436. <!-- end of answer -->
  1437. </span>
  1438. </div>
  1439.  
  1440. </div>
  1441.  
  1442. <!-- the askbox, if you don't want it delete the iframe -->
  1443.  
  1444. <iframe frameborder="0" scrolling="no" width="500" height="190" src="https://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe>
  1445.  
  1446. </article>
  1447.  
  1448. <!-- END OF SLIDE TWO, FAQ SECTION -->
  1449.  
  1450. <!-- SLIDE THREE, NAVIGATION SECTION -->
  1451.  
  1452. <!-- if you don't want this slide, delete from <article class="slide"> to the first </article> you find. also be sure to delete the corresponding icon from <nav class="icons"> -->
  1453.  
  1454. <!-- please only edit the things i've annotated -->
  1455.  
  1456. <article class="slide">
  1457.  
  1458. <div class="grid first">
  1459.  
  1460. <!-- TEMPLATE FOR DROPDOWNS. you can add as many of these as you want -->
  1461.  
  1462. <!--
  1463.  
  1464. <div class="part">
  1465. <div class="navig"><span class="sf sf-chevron-right" aria-hidden="true"></span> <span class="nav-title">title</span>
  1466. </div>
  1467. <div class="tags">
  1468. <a href="/" class="tag">thing</a>
  1469. <a href="/" class="tag">thing</a>
  1470. <a href="/" class="tag">thing</a>
  1471. <a href="/" class="tag">thing</a>
  1472. </div>
  1473. </div>
  1474.  
  1475. -->
  1476.  
  1477. <!-- first dropdown -->
  1478. <div class="part">
  1479. <div class="navig"><span class="sf sf-chevron-right" aria-hidden="true"></span> <span class="nav-title">title 1</span> <!-- title of dropdown -->
  1480. </div>
  1481. <div class="tags">
  1482. <!-- start of the links. be sure to add class="tag" to all your links -->
  1483. <a href="/" class="tag">thing</a>
  1484. <a href="/" class="tag">thing</a>
  1485. <a href="/" class="tag">thing</a>
  1486. <a href="/" class="tag">thing</a>
  1487. <a href="/" class="tag">thing</a>
  1488. <a href="/" class="tag">thing</a>
  1489. <a href="/" class="tag">thing</a>
  1490. <a href="/" class="tag">thing</a>
  1491. <!-- end of the links -->
  1492. </div>
  1493. </div>
  1494. <!-- end of first dropdown -->
  1495.  
  1496. <!-- second dropdown -->
  1497. <div class="part">
  1498. <div class="navig"><span class="sf sf-chevron-right" aria-hidden="true"></span> <span class="nav-title">title 2</span> <!-- title of dropdown -->
  1499. </div>
  1500. <div class="tags">
  1501. <!-- start of the links. be sure to add class="tag" to all your links -->
  1502. <a href="/" class="tag">thing</a>
  1503. <a href="/" class="tag">thing</a>
  1504. <a href="/" class="tag">thing</a>
  1505. <a href="/" class="tag">thing</a>
  1506. <!-- end of the links -->
  1507. </div>
  1508. </div>
  1509. <!-- end of second dropdown -->
  1510.  
  1511. <!-- third dropdown -->
  1512. <div class="part">
  1513. <div class="navig"><span class="sf sf-chevron-right" aria-hidden="true"></span> <span class="nav-title">title 3</span> <!-- title of dropdown -->
  1514. </div>
  1515. <div class="tags">
  1516. <!-- start of the links. be sure to add class="tag" to all your links -->
  1517. <a href="/" class="tag">thing</a>
  1518. <a href="/" class="tag">thing</a>
  1519. <a href="/" class="tag">thing</a>
  1520. <a href="/" class="tag">thing</a>
  1521. <a href="/" class="tag">thing</a>
  1522. <a href="/" class="tag">thing</a>
  1523. <!-- end of the links -->
  1524. </div>
  1525. </div>
  1526. <!-- end of third dropdown -->
  1527.  
  1528. <!-- fourth dropdown -->
  1529. <div class="part">
  1530. <div class="navig"><span class="sf sf-chevron-right" aria-hidden="true"></span> <span class="nav-title">title 4</span> <!-- title of dropdown -->
  1531. </div>
  1532. <div class="tags">
  1533. <!-- start of the links. be sure to add class="tag" to all your links -->
  1534. <a href="/" class="tag">thing</a>
  1535. <a href="/" class="tag">thing</a>
  1536. <a href="/" class="tag">thing</a>
  1537. <a href="/" class="tag">thing</a>
  1538. <a href="/" class="tag">thing</a>
  1539. <a href="/" class="tag">thing</a>
  1540. <a href="/" class="tag">thing</a>
  1541. <a href="/" class="tag">thing</a>
  1542. <a href="/" class="tag">thing</a>
  1543. <a href="/" class="tag">thing</a>
  1544. <a href="/" class="tag">thing</a>
  1545. <a href="/" class="tag">thing</a>
  1546. <a href="/" class="tag">thing</a>
  1547. <a href="/" class="tag">thing</a>
  1548. <!-- end of the links -->
  1549. </div>
  1550. </div>
  1551. <!-- end of fourth dropdown -->
  1552.  
  1553. </div>
  1554.  
  1555. </article>
  1556.  
  1557. <!-- END OF SLIDE THREE, NAVIGATION SECTION -->
  1558.  
  1559. <!-- SLIDE FOUR, BLOGROLL SECTION. THIS DOES NOT WORK ON SIDEBLOGS, PLEASE DELETE IT IF THIS IS A SLIDEBLOG -->
  1560.  
  1561. <article class="slide">
  1562. <div class="grid">
  1563.  
  1564. {block:Following}
  1565. {block:Followed}
  1566. <a href="{FollowedURL}" class="follow">
  1567. <img src="{FollowedPortraitURL-40}">
  1568. <span class="followed">{FollowedName}</span>
  1569. </a>
  1570. {/block:Followed}
  1571. {/block:Following}
  1572.  
  1573. </div>
  1574.  
  1575. </article>
  1576.  
  1577. <!-- END OF SLIDE FOUR, BLOGROLL SECTION -->
  1578.  
  1579. </section>
  1580.  
  1581. <!-- DO NOT TOUCH THE CREDIT PLEASE AND THANK YOU -->
  1582.  
  1583. <div id="credz">
  1584. <a href="http://cactusthemes.tumblr.com" title="theme by cactusthemes">
  1585. <div class="ci">
  1586. <img src="https://static.tumblr.com/uxq3xua/6i1p5p058/cactus_icon_green.png">
  1587. </div>
  1588. </a>
  1589. </div>
  1590.  
  1591. </body>
  1592.  
  1593. <script src="https://static.tumblr.com/uxq3xua/cm6p9z9ta/cactusthemesaiodiscord.js"></script>
  1594.  
  1595. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!