API tools faq
paste
Advertisement
pneumathemes

all in one #01: primavera

pneumathemes
Feb 28th, 2025
241
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 39.06 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.      <!--change the title of the page here! this will appear as the title at your current tab.-->
  4.       <title>the rite of spring</title>
  5.    
  6.       <link rel="shortcut icon" href="{Favicon}" />
  7.       <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  8.       <meta charset="utf-8" />
  9.       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  10.    
  11.       <!--
  12.    
  13.        Page #04: Primavera
  14.        coded by pneuma-themes
  15.        
  16.        1. Don't remove the credit.
  17.        2. Don't move the credit. Just leave it there.
  18.        3. Don't use as a base code.
  19.        4. Please enjoy! If you find any bugs, please contact me! c:
  20.        
  21.        
  22.        This page has been heavily annotated to help you edit the page, so please look through the source code first before asking me for help!
  23.      -->
  24.    
  25.       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  26.       <script src="https://unpkg.com/@popperjs/core@2"></script>
  27.       <script src="https://unpkg.com/tippy.js@6"></script>
  28.      
  29.       <link href="https://dencar-icons.gitlab.io/i/icons.css" rel="stylesheet">
  30.        <script>
  31.       const storedTheme =
  32.         localStorage.getItem("theme") ||
  33.         (window.matchMedia("(prefers-color-scheme: dark)").matches
  34.           ? "dark"
  35.           : "light");
  36.       if (storedTheme)
  37.         document.documentElement.setAttribute("data-theme", storedTheme);
  38.     </script>
  39.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css">
  40.     <head>
  41.         <style type="text/css">
  42.             @import url(https://fonts.bunny.net/css?family=albert-sans:400,400i,700,700i|merriweather:400,400i,700,700i);
  43.             /*attention! to change the colors of the page, look below!*/
  44.       /*make changes here to change the colors on light mode. please leave LightOn and LightOff variables be!*/
  45.       :root,
  46.       html[data-theme="light"] {
  47.         --LightOn: flex;
  48.         --LightOff: none;
  49.         --accent: #b1c491;
  50.         --body: #1f1f1f;
  51.         --background: #fff;
  52.         --border: #eee;
  53.         --fontSize:13px;
  54.       }
  55.      
  56.       /*make changes here to change the colors on dark mode. please leave LightOn and LightOff variables be!*/
  57.       html[data-theme="dark"] {
  58.         --LightOn: none;
  59.         --LightOff: flex;
  60.         --body: #d3d4d4;
  61.         --border: #d3d4d4;
  62.         --background: #090909;
  63.       }
  64.  
  65.       html.theme-transition,
  66.       html.theme-transition *,
  67.       html.theme-transition *:before,
  68.       html.theme-transition *:after {
  69.         transition: 0s !important;
  70.         transition-delay: 0 !important;
  71.       }
  72.      
  73.       iframe.tmblr-iframe {
  74.           display: none;
  75.       }
  76.      
  77.       #tumblr-controls {
  78.           position: fixed;
  79.       }
  80.      
  81.       body{
  82.           margin:0;
  83.           padding:0;
  84.           font-family:'Albert Sans';
  85.           font-size:var(--fontSize);
  86.           color:var(--body);
  87.           background:var(--background);
  88.       }
  89.      
  90.       a{
  91.           text-decoration:none;
  92.           color:var(--body);
  93.       }
  94.      
  95.       .dark-switch {
  96.         position: fixed;
  97.         top: 20px;
  98.         left: 20px;
  99.         width: 20px;
  100.         padding:8px;
  101.         height: 20px;
  102.         font-size: 30px;
  103.         text-align: center;
  104.         color: var(--body);
  105.       }
  106.  
  107.       .light-on {
  108.         display: var(--LightOn);
  109.       }
  110.  
  111.       .light-off {
  112.         display: var(--LightOff);
  113.       }
  114.      
  115.       .tippy-box{
  116.           font-family:'Albert Sans';
  117.           font-size:calc(var(--fontSize) - 2px);
  118.           background:var(--background);
  119.           color:var(--body);
  120.           box-shadow:-2px -2px inset var(--accent);
  121.       }
  122.      
  123.       /*sidebars*/
  124.       .sidebar{
  125.           width:20%;
  126.           height:100%;
  127.           position:fixed;
  128.           top:0;
  129.           display:flex;
  130.           flex-wrap:wrap;
  131.           align-items:center;
  132.           background:var(--background);
  133.           justify-content:flex-start;
  134.       }
  135.      
  136.       .left{
  137.           left:0;
  138.           border-right:1px solid var(--border);
  139.       }
  140.      
  141.       .right{
  142.           right:0;
  143.           border-left:1px solid var(--border);
  144.       }
  145.      
  146.       .sidebar-content{
  147.           display:flex;
  148.           align-items:center;
  149.           justify-content:center;
  150.           width:100%;
  151.           flex-wrap:wrap;
  152.       }
  153.      
  154.       .navigation-links{
  155.           width:70%;
  156.           margin-bottom:20px;
  157.           display:flex;
  158.           align-items:center;
  159.           justify-content:space-between;
  160.       }
  161.      
  162.       .navigation-links .dencar-icons{
  163.           font-size:30px;
  164.       }
  165.      
  166.       .navigation-links a{
  167.           font-weight:700;
  168.           text-transform:capitalize;
  169.           font-size:calc(var(--fontSize) + 3px);
  170.       }
  171.      
  172.       /*main container*/
  173.       #main-container{
  174.           width:60%;
  175.           margin:0 auto;
  176.           position:relative;
  177.           display:flex;
  178.           align-items:center;
  179.           flex-wrap:wrap;
  180.           justify-content:center;
  181.           background:var(--background);
  182.       }
  183.      
  184.       header{
  185.           width:100%;
  186.           height:250px;
  187.       }
  188.      
  189.       header img{
  190.           width:100%;
  191.           height:100%;
  192.           object-fit:cover;
  193.       }
  194.      
  195.       /**icon and description**/
  196.       #description{
  197.           width:100%;
  198.           display:flex;
  199.           align-items:center;
  200.           flex-wrap:wrap;
  201.           border-bottom:1px solid var(--border);
  202.       }
  203.      
  204.       #description-icon{
  205.           width:64px;
  206.           margin-top:-20px;
  207.           height:64px;
  208.           border-radius:100%;
  209.           padding:8px;
  210.           background:var(--background);
  211.           margin-left:20px;
  212.           margin-right:20px;
  213.       }
  214.      
  215.       #description-icon img{
  216.           width:64px;
  217.           height:64px;
  218.           max-width:64px;
  219.           max-height:64px;
  220.           border-radius:100%;
  221.       }
  222.      
  223.       #title{
  224.           font-family:'Merriweather';
  225.           font-weight:700;
  226.           font-style:italic;
  227.           text-transform:lowercase;
  228.           box-shadow:0 -5px inset var(--accent);
  229.           margin-bottom:20px;
  230.           font-size:calc(var(--fontSize) + 5px);
  231.       }
  232.      
  233.       #description-box{
  234.           text-align:justify;
  235.           width:75%;
  236.           display:flex;
  237.           padding-top:20px;
  238.           flex-wrap:wrap;
  239.           align-items:center;
  240.       }
  241.      
  242.       #description-text{
  243.           padding-right:20px;
  244.           padding-bottom:20px;
  245.       }
  246.      
  247.       #description-text a{
  248.           color:var(--accent);
  249.       }
  250.      
  251.       #description-info{
  252.           display:flex;
  253.           align-items:center;
  254.           margin-top:20px;
  255.       }
  256.      
  257.       .description-label{
  258.           display:flex;
  259.           align-items:center;
  260.           justify-content:flex-start;
  261.           margin-right:20px;
  262.           color:#c3c3c3;
  263.       }
  264.      
  265.       .description-label .dencar-icons{
  266.           font-size:18px;
  267.           color:var(--accent);
  268.           margin-right:5px;
  269.       }
  270.      
  271.       /**tabs styling**/
  272.       .tabs{
  273.           display:flex;
  274.           width:100%;
  275.           position:sticky;
  276.           top:0;
  277.           z-index:99;
  278.           align-items:center;
  279.           justify-content:center;
  280.           border-bottom:1px solid var(--border) !important;
  281.           background:var(--background);
  282.       }
  283.      
  284.       .tabs a{
  285.           border-bottom:none !important;
  286.       }
  287.      
  288.       .tabs ul li a{
  289.           font-size:calc(var(--fontSize) + 2px) !important;
  290.       }
  291.      
  292.       .tabs ul li a:hover{
  293.           color:var(--accent) !important;
  294.           border-bottom:3px solid var(--accent) !important;
  295.       }
  296.      
  297.       .tabs ul li.is-active a{
  298.           color:var(--accent) !important;
  299.           font-weight:700;
  300.           border-bottom:3px solid var(--accent) !important;
  301.       }
  302.      
  303.       .tab-content{
  304.           display:none;
  305.           background:var(--background) !important;
  306.           width:100%;
  307.       }
  308.      
  309.       /**tab content styling**/
  310.       .tab-content.is-active{
  311.           display:flex;
  312.           flex-wrap:wrap;
  313.           align-items:flex-start;
  314.           justify-content:center;
  315.       }
  316.      
  317.       /**about**/
  318.       /**general styling for content block**/
  319.      
  320.       #about, #blogroll, #tags, #faq{
  321.           width:90%;
  322.       }
  323.      
  324.       #about-content, #blogroll-content, #tags-content, #faq-content{
  325.           padding:20px;
  326.           width:100%;
  327.       }
  328.      
  329.       #about-icon{
  330.           width:64px;
  331.           height:64px;
  332.           background:var(--background);
  333.           border-radius:100%;
  334.           border:3px solid var(--accent);
  335.           padding:5px;
  336.       }
  337.      
  338.       #about-text{
  339.           border-left:3px solid var(--accent);
  340.           padding-left:20px;
  341.           padding-top:20px;
  342.           margin-left:30px;
  343.           margin-top:-20px;
  344.       }
  345.      
  346.       #about-quote{
  347.           font-family:'Merriweather';
  348.           font-size:calc(var(--fontSize) + 3px);
  349.           font-weight:700;
  350.           font-style:italic;
  351.           text-transform:lowercase;
  352.           margin-left:10px;
  353.       }
  354.      
  355.       #about-info-panel{
  356.           display:flex;
  357.           width:90%;
  358.           align-items:center;
  359.           margin-left:15px;
  360.           justify-content:space-between;
  361.       }
  362.      
  363.       .about-box{
  364.           width:45%;
  365.       }
  366.      
  367.       .about-box-row{
  368.           display:flex;
  369.           align-items:center;
  370.           justify-content:space-between;
  371.           border-bottom:1px solid var(--border);
  372.           width:100%;
  373.           margin-bottom:10px;
  374.           padding-bottom:10px;
  375.       }
  376.      
  377.       .about-box-row:last-of-item{
  378.           margin-bottom:0 !important;
  379.       }
  380.      
  381.       .about-box-row .dencar-icons{
  382.           color:var(--accent);
  383.           font-size:calc(var(--fontSize) + 3px);
  384.       }
  385.      
  386.       #about-text-area{
  387.           margin-top:20px;
  388.       }
  389.      
  390.       #about-text-area p{
  391.           margin:10px;
  392.       }
  393.      
  394.       #about-text-area a{
  395.           color:var(--accent);
  396.       }
  397.      
  398.       #about-text-area blockquote{
  399.           padding-left:10px;
  400.           border-left:2px solid var(--accent);
  401.           margin:20px !important;
  402.       }
  403.      
  404.       #about-text-area ul{
  405.           list-style:disc !important;
  406.           margin-left:20px !important;
  407.           padding:10px !important;
  408.       }
  409.      
  410.       /**blogroll**/
  411.       #blogroll-content{
  412.           display:flex;
  413.           align-items:center;
  414.           justify-content:space-between;
  415.           flex-wrap:wrap;
  416.       }
  417.      
  418.       .blogroll-row{
  419.           display:flex;
  420.           align-items:center;
  421.           justify-content:space-between;
  422.           width:45%;
  423.           margin-bottom:20px;
  424.           border-radius:5px;
  425.           box-shadow: -5px -5px inset var(--accent);
  426.           padding:15px;
  427.           background:var(--background);
  428.       }
  429.      
  430.       .blogroll-img{
  431.           width:48px;
  432.           height:48px;
  433.           border-radius:100%;
  434.           border:2px solid var(--accent);
  435.           padding:5px;
  436.           background:var(--background);
  437.           margin-right:20px;
  438.       }
  439.      
  440.       .blogroll-info{
  441.           display:flex;
  442.           align-items:center;
  443.           justify-content:flex-end;
  444.           flex-wrap:wrap;
  445.           width:80%;
  446.       }
  447.      
  448.       .blogroll-info span.blog-title{
  449.           font-family:'Merriweather';
  450.           font-weight:700;
  451.           width:100%;
  452.           text-align:right;
  453.           text-transform:uppercase;
  454.       }
  455.      
  456.       .blogroll-name{
  457.           font-size:calc(var(--fontSize) - 2px);
  458.           text-transform:lowercase;
  459.           font-style:italic;
  460.       }
  461.      
  462.      
  463.       /**tags**/
  464.       .tags-grid{
  465.           display:flex;
  466.           align-items:center;
  467.           flex-wrap:wrap;
  468.           align-content:center;
  469.           width:100%;
  470.           justify-content:space-evenly;
  471.           border:1px solid var(--border);
  472.           border-radius:5px;
  473.           margin-bottom:50px;
  474.       }
  475.      
  476.       .tags-header{
  477.           font-family:'Merriweather';
  478.           display:flex;
  479.           padding:15px;
  480.           width:100%;
  481.           text-align:center;
  482.           justify-content:center;
  483.           font-size:calc(var(--fontSize) + 3px);
  484.           text-transform:lowercase;
  485.           border-bottom:1px solid var(--border);
  486.           font-style:italic;
  487.           font-weight:700;
  488.           align-items:center;
  489.       }
  490.      
  491.       .tags-box{
  492.           padding:15px;
  493.           display:flex;
  494.           flex-wrap:wrap;
  495.           width:45%;
  496.           justify-content:space-around;
  497.       }
  498.      
  499.       .tags-box a{
  500.           background:var(--accent);
  501.           color:#1f1f1f;
  502.           min-width:45%;
  503.           padding:4px;
  504.           font-size:calc(var(--fontSize) - 2px);
  505.           display:flex;
  506.           align-items:center;
  507.           margin-top:5px;
  508.           justify-content:space-around;
  509.           flex-wrap:wrap;
  510.           text-align:center;
  511.           margin-bottom:5px;
  512.       }
  513.      
  514.       /**faq**/
  515.       .faq-box{
  516.           display:flex;
  517.           width:100%;
  518.           flex-wrap:wrap;
  519.           align-items:center;
  520.           justify-content:center;
  521.           margin-bottom:50px;
  522.       }
  523.      
  524.       .ask, .answer{
  525.           width:100%;
  526.           padding:10px;
  527.           display:flex;
  528.           justify-content:space-between;
  529.       }
  530.      
  531.       .ask-icon{
  532.           position:relative;
  533.       }
  534.      
  535.       .ask-icon img, .answer-icon img{
  536.           width:64px;
  537.           height:64px;
  538.           border-radius:100%;
  539.           padding:5px;
  540.           border:2px solid var(--accent);
  541.           background:var(--background);
  542.       }
  543.      
  544.       .ask-icon .dencar-icons{
  545.           position:absolute;
  546.           bottom:0;
  547.           right:1px;
  548.           background:var(--background);
  549.           padding:3px;
  550.           font-size:calc(var(--fontSize) + 2px);
  551.           border-radius:100%;
  552.       }
  553.      
  554.       .ask-text, .answer-text{
  555.           width:calc(100% - 64px);
  556.           margin-left:10px;
  557.           border-radius:5px;
  558.           background:var(--accent);
  559.           color:#fff;
  560.           padding:15px;
  561.       }
  562.      
  563.      
  564.       .trig{
  565.           font-size:calc(var(--fontSize) + 10px);
  566.           color:var(--accent);
  567.           margin-left:-5px;
  568.       }
  569.         </style>
  570.     </head>
  571.    
  572.     <body>
  573.         <div class="left sidebar">
  574.             <!--left sidebar-->
  575.              <div class="dark-switch" id="theme-toggle">
  576.                   <i class="dencar-icons light-on" stroke="1.5" icon-name="moon" title="dark mode"></i>
  577.                   <i class="dencar-icons light-off" stroke="1.5" icon-name="sun-2" title="light mode"></i>
  578.             </div>
  579.            
  580.             <div class="sidebar-content">
  581.                 <div class="navigation-links">
  582.                     <i class="dencar-icons" stroke="1.5" icon-name="home"></i>
  583.                     <a href="/">home</a>
  584.                 </div><!--end nav links-->
  585.                 <div class="navigation-links">
  586.                     <i class="dencar-icons" stroke="1.5" icon-name="archive"></i>
  587.                     <a href="/archive">archive</a>
  588.                 </div><!--end nav links-->
  589.                 <div class="navigation-links">
  590.                     <i class="dencar-icons" stroke="1.5" icon-name="heart"></i>
  591.                     <a href="//tumblr.com/likes">likes</a>
  592.                 </div><!--end nav links-->
  593.                 <div class="navigation-links">
  594.                     <i class="dencar-icons" stroke="1.5" icon-name="users-group"></i>
  595.                     <a href="//tumblr.com/following">following</a>
  596.                 </div><!--end nav links-->
  597.                 <div class="navigation-links">
  598.                     <i class="dencar-icons" stroke="1.5" icon-name="pen-tool"></i>
  599.                     <a href="//pneuma-themes.tumblr.com" title="primavera by pneuma-themes">credit</a>
  600.                 </div><!--end nav links-->
  601.             </div><!--end sidebar-content-->
  602.         </div><!--end left sidebar-->
  603.        
  604.        
  605.         <div id="main-container">
  606.             <header>
  607.                 <img src="https://static.tumblr.com/r7bx1qs/Mjqsqqtxj/tumblr_80e3617bbd2f9224ea5a60142f48efa3_991dcdbb_1280.png"/>
  608.             </header>
  609.            
  610.             <div id="description">
  611.                 <div id="description-icon">
  612.                 <!--change your icon here! icon by @alydae-->
  613.                     <img src="https://i.imgur.com/FQCEiTn.png"/>
  614.                 </div>
  615.                
  616.                
  617.                 <div id="description-box">
  618.                 <div id="title">
  619.                     the rite of spring
  620.                 </div>
  621.                
  622.                 <div id="description-text">
  623.                 <!--change your description here-->
  624.                 always it’s spring, and everyone’s in love, and flowers pick themselves. --<i>e.e. cummings</i>
  625.     <br>
  626.     icon by <a href="//alydae.tumblr.com">@alydae</a> // header image by <a href="//tofuvi.tumblr.com">@tofuvi</a>
  627.    
  628.     <div id="description-info">
  629.         <div class="description-label">
  630.             <i class="dencar-icons" stroke="1.5" icon-name="location-target"></i> my location
  631.         </div>
  632.         <div class="description-label">
  633.             <i class="dencar-icons" stroke="1.5" icon-name="calendar"></i>est. 2025
  634.         </div>
  635.     </div>
  636. </div>
  637.  
  638.                 </div><!--end description box-->
  639.             </div>
  640.             <!--tabs area-->
  641.             <div class="tabs is-centered is-fullwidth">
  642.               <ul>
  643.                 <li class="is-active" data-tab="about"><a>About</a></li>
  644.                 <li data-tab="blogroll"><a>Blogroll</a></li>
  645.                 <li data-tab="tags"><a>Tags</a></li>
  646.                 <li data-tab="faq"><a>F.A.Q</a></li>
  647.               </ul>
  648.             </div>
  649.             <!--end tabs-->
  650.            
  651.             <div id="about" class="tab-content is-active" data-content="about">
  652.             <div id="about-content">
  653.                 <div style="display:flex;align-items:center;justify-content:flex-start;background:var(--background)">
  654.             <!--change your icon image here!-->
  655.                     <img id="about-icon" src="http://i.imgur.com/oGvzLZu.png"/>
  656.                     <div style="width:85%;background:var(--accent);padding:2px"></div>
  657.                     <div id="about-quote">primavera.</div>
  658.                 </div>
  659.                 <div id="about-text">
  660.                     <div id="about-info-panel">
  661.                         <div class="about-box">
  662.                        
  663.                         <!--to add or remove rows, copy/delete from here-->
  664.                             <div class="about-box-row">
  665.                                 <i class="dencar-icons" stroke="1.5" icon-name="user-circle"></i> rizu </div>
  666.                         <!--to here-->
  667.                        
  668.                                 <div class="about-box-row">
  669.                                 <i class="dencar-icons" stroke="1.5" icon-name="colors-three"></i>she/her/hers</div>
  670.                                 <div class="about-box-row">
  671.                                 <i class="dencar-icons" stroke="1.5" icon-name="gift"></i>25+</div>
  672.                        
  673.                         <!--if adding rows, copy and paste the row before this line. if deleting rows, make sure to keep this line-->    
  674.                         </div>
  675.                         <!--end about-box-->
  676.                        
  677.                         <div class="about-box">
  678.                             <div class="about-box-row">
  679.                                 <i class="dencar-icons" stroke="1.5" icon-name="pc-monitor"></i>ffxiv, metaphor re:fantazio, gbf</div>
  680.                                 <div class="about-box-row">
  681.                                 <i class="dencar-icons" stroke="1.5" icon-name="music-note-2"></i>lewis capaldi - strangers </div>
  682.                                 <div class="about-box-row">
  683.                                 <i class="dencar-icons" stroke="1.5" icon-name="book-open"></i>trying to write a novel</div>
  684.                    
  685.                    
  686.                     <!--if adding rows, copy and paste the row before this line-->    
  687.                         </div><!--end about-box-->
  688.                     </div><!--end info panel-->
  689.                    
  690.                     <div id="about-text-area">
  691.                         <!--this is your text area! you can be as long or as short as you like.-->
  692.                         <p>Welcome to the live preview of <a href="//pneuma-themes.tumblr.com">@pneuma-themes's</a> <i>first</i> all-in-one page, <b>Primavera</b>! As can be seen, this is yet another one of so many inspired Twitter (now X) layouts scattered around this website.</p>
  693.                         <blockquote><b>Primavera:</b> Also known as <i>la primavera</i>, meaning spring in many Romance languages. The title of many pieces of arts, including the title of Vivaldi's first concerto in The Four Seasons and the famous painting by Sandro Boticelli.</blockquote>
  694.                         <p>This is an all in one page containing the following sections: about, blogroll, tags, and FAQ. The first active tab will always be the <b>about</b> section, and provided that you know enough about HTML then you can change the first active tab to something else.</p>
  695.                         <p>Features included in this page:
  696.                             <ul>
  697.                                 <li>The ability to write as much or as slight as you want on the about page.</li>
  698.                                 <li>Fully customizable colors and icon fonts. Refer to the page post to see how to change the icons.</li>
  699.                                 <li>The ability to add as many questions and answers as you want on the FAQ page.</li>
  700.                                 <li>The ability to add as many tags and tags collections on the tags page.</li>
  701.                                 <li>A light-off and light-on color scheme.</li>
  702.                             </ul>
  703.                         </p>
  704.                         <p> As this is a <b>page</b> theme, your blog posts will <i>not</i> be displayed.</p>
  705.                         <p>The tabs are created by <a href="//bulma.io/documentation/components/tabs/">Bulma.css</a>, while the functionality is adapted from <a href="https://stackoverflow.com/questions/47591474/how-to-switch-through-tabs-in-bulma">this StackOverflow post.</a> Be warned that you will have to have the <b>JavaScript permission enabled</b> for your blog to use this page.</p>
  706.                         <p>Thank you for looking around and choosing to use this page! Please read through the code to find annotations inside to edit things, and if you encounter any difficulties or problems while using this page, please contact me!</p>
  707.                     </div>
  708.                    
  709.                 </div>
  710.             </div>
  711.                
  712.             </div>
  713.             <!--end about-->
  714.            
  715.             <!--start blogroll-->
  716.             <div id="blogroll" class="tab-content" data-content="blogroll">
  717.                 <div id="blogroll-content">
  718.                     {block:Following}
  719.                     {block:Followed}
  720.                     <div class="blogroll-row">
  721.                         <img src="{FollowedPortraitURL-128}" class="blogroll-img">
  722.                         <div class="blogroll-info">
  723.                         <span class="blog-title">{FollowedTitle}</span>
  724.                             <a href="{FollowedURL}" class="blogroll-name">@{FollowedName}</a>
  725.                         </div><!--end blogroll-info-->
  726.                     </div>
  727.                     {/block:Followed}
  728.                     {/block:Following}
  729.                 </div><!--end blogroll content-->
  730.             </div><!--end blogroll-->
  731.            
  732.             <div id="tags" class="tab-content" data-content="tags">
  733.                 <div id="tags-content">
  734.                 <!--to add more sections, copy from here-->
  735.                     <div class="tags-grid">
  736.                         <div class="tags-header">Games by tags</div>
  737.                        
  738.                         <!--to add more boxes inside the grid, copy from here-->
  739.                         <div class="tags-box">
  740.                             <a href="">Crisis Core: Final Fantasy VII Reunion</a>
  741.                             <a href="">Dissidia: Final Fantasy</a>
  742.                             <a href="">Dissidia Duodecim: Final Fantasy</a>
  743.                             <a href="">Final Fantasy VII Remake</a>
  744.                             <a href="">Final Fantasy VII Rebirth</a>
  745.                             <a href="">Final Fantasy XIV: A Realm Reborn</a>
  746.                             <a href="">Final Fantasy XVI</a>
  747.                         </div>
  748.                         <!--to here-->
  749.                        
  750.                         <div class="tags-box">
  751.                             <a href="">Devil Survivor: Overclocked</a>
  752.                             <a href="">Devil Survivor 2 Record Breaker</a>
  753.                             <a href="">Persona 3 Reload</a>
  754.                             <a href="">Persona 4 Golden</a>
  755.                             <a href="">Persona 5 Royal</a>
  756.                             <a href="">SMT V: Vengeance</a>
  757.                         </div>
  758.                        
  759.                         <div class="tags-box">
  760.                             <a href="">Metaphor Re:Fantazio</a>
  761.                             <a href="">Granblue Fantasy Relink</a>
  762.                             <a href="">Granblue Fantasy</a>
  763.                             <a href="">Ensemble Stars! Music</a>
  764.                             <a href="">A3!</a>
  765.                         </div>
  766.                         <!--before this line-->
  767.                     </div><!--end tags grid-->
  768.                     <!--to here-->
  769.                    
  770.                      <div class="tags-grid">
  771.                         <div class="tags-header">Favorite characters by tags</div>
  772.                        
  773.                         <!--to add more boxes inside the grid, copy from here-->
  774.                         <div class="tags-box">
  775.                             <a href="">Zack Fair</a>
  776.                             <a href="">Aymeric de Borel</a>
  777.                             <a href="">Estinien Wyrmblood</a>
  778.                             <a href="">Emet-Selch</a>
  779.                             <a href="">Hythlodaeus</a>
  780.                             <a href="">Venat</a>
  781.                             <a href="">Clive Rosfield</a>
  782.                             <a href="">Prompto Argentum</a>
  783.                             <a href="">Noctis Lucis Caelum</a>
  784.                             <a href="">Ignis Scientia</a>
  785.                         </div>
  786.                         <!--to here-->
  787.                        
  788.                         <div class="tags-box">
  789.                             <a href="">Amamiya Ren</a>
  790.                             <a href="">Makoto Yuuki</a>
  791.                             <a href="">Mitsuru Kirijo</a>
  792.                             <a href="">Hifumi Tougo</a>
  793.                             <a href="">Kotone Shiomi/Hamuko/P3P Protagonist</a>
  794.                             <a href="">Akihiko Sanada</a>
  795.                             <a href="">Shinjiro Aragaki</a>
  796.                             <a href="">Nanako Dojima</a>
  797.                             <a href="">Naoto Shirogane</a>
  798.                             <a href="">Yukiko Amagi</a>
  799.                             <a href="">Margaret (Velvet Room)</a>
  800.                             <a href="">Theodore (Velvet Room)</a>
  801.                            
  802.                         </div>
  803.                        
  804.                         <div class="tags-box">
  805.                             <a href="">Protagonist/Will (Metaphor)</a>
  806.                             <a href="">Eiselin Hulkenberg</a>
  807.                             <a href="">Akehoshi Subaru</a>
  808.                             <a href="">Yukishiro Azuma</a>
  809.                             <a href="">Leon Strohl</a>
  810.                             <a href="">Heismay Noctule</a>
  811.                             <a href="">Maria Alces</a>
  812.                         </div>
  813.                        
  814.                         <div class="tags-box">
  815.                             <a href="">Elmott</a>
  816.                             <a href="">Djeeta</a>
  817.                             <a href="">Charlotta</a>
  818.                             <a href="">Meteon</a>
  819.                             <a href="">Cain</a>
  820.                             <a href="">Pholia</a>
  821.                             <a href="">Sandalphon</a>
  822.                             <a href="">Raziel</a>
  823.                             <a href="">Michael</a>
  824.                             <a href="">Yuni</a>
  825.                         </div>
  826.                         <!--before this line-->
  827.                     </div><!--end tags grid-->
  828.                    
  829.                      <div class="tags-grid">
  830.                         <div class="tags-header">Favorite people by tags</div>
  831.                        
  832.                         <!--to add more boxes inside the grid, copy from here-->
  833.                         <div class="tags-box">
  834.                             <a href="">Kakihara Tetsuya</a>
  835.                             <a href="">Suzumura Kenichi</a>
  836.                             <a href="">Irino Miyu</a>
  837.                             <a href="">Sakamoto Maaya</a>
  838.                             <a href="">Horie Shun</a>
  839.                             <a href="">Uchiyama Kouki</a>
  840.                             <a href="">Romi Park</a>
  841.                             <a href="">Aoi Yuuki</a>
  842.                             <a href="">Kugimiya Rie</a>
  843.                             <a href="">Mizuki Nana</a>
  844.                         </div>
  845.                         <!--to here-->
  846.                        
  847.                         <div class="tags-box">
  848.                             <a href="">Lewis Capaldi</a>
  849.                             <a href="">Kygo</a>
  850.                             <a href="">OneRepublic</a>
  851.                             <a href="">Owl City</a>
  852.                             <a href="">Pernelle Music</a>
  853.                         </div>
  854.                         <!--before this line-->
  855.                     </div><!--end tags grid-->
  856.                     <!--before this line-->
  857.                 </div><!--end tags content-->
  858.             </div>
  859.             <!--end tags-->
  860.            
  861.             <div id="faq" class="tab-content" data-content="faq">
  862.             <!--to add more boxes to organize your FAQ, copy from here-->
  863.                 <div class="faq-box">
  864.                 <!--to add more questions and answers, copy from here-->
  865.                     <div class="ask">
  866.                         <div class="ask-icon">
  867.                             <img src="http://i.imgur.com/La7vyCv.png">
  868.                         <i class="dencar-icons" stroke="1.5" icon-name="mail-open"></i>
  869.                         </div>
  870.                         <div class="ask-text">This is the first question. What is this thing?</div>
  871.                     </div><!--end ask-->
  872.                     <div class="answer">
  873.                     <div class="answer-text"><strike>Good question, because I don't know either.</strike>
  874.                       <br>
  875.                       <br>
  876.                       Just kidding! This is the FAQ part of the page, where you can put anything you like here. Questions, answers, or just funny chat.
  877.                     </div>
  878.                     <span class="trig">▶</span>
  879.                     <div class="answer-icon">
  880.                             <img src="https://i.imgur.com/xBSPG2N.png">
  881.                         </div><!--end answer-->
  882.                     </div><!--to here-->
  883.                    
  884.                     <div class="ask">
  885.                         <div class="ask-icon">
  886.                             <img src="http://i.imgur.com/La7vyCv.png">
  887.                         <i class="dencar-icons" stroke="1.5" icon-name="mail-open"></i>
  888.                         </div>
  889.                         <div class="ask-text">What can I do here?</div>
  890.                     </div><!--end ask-->
  891.                     <div class="answer">
  892.                     <div class="answer-text">
  893.                         It's a place to put the frequently asked questions to rest. Your followers are required to read and scroll through this section before they can reach the ask box at the bottom of the page. While it won't prevent stray questions that have been answered from going into your inbox, at least the ask box at the bottom will ensure that people have to scroll before asking.
  894.                     </div>
  895.                     <span class="trig">▶</span>
  896.                     <div class="answer-icon">
  897.                             <img src="https://i.imgur.com/xBSPG2N.png">
  898.                         </div><!--end answer-->
  899.                     </div><!--to here-->
  900.                    
  901.                     <!--and paste it above this line!-->
  902.                    
  903.                 </div><!--end faq box-->
  904.                 <!--to here-->
  905.                
  906.                  <div class="faq-box">
  907.                 <!--to add more questions and answers, copy from here-->
  908.                     <div class="ask">
  909.                         <div class="ask-icon">
  910.                             <img src="http://i.imgur.com/La7vyCv.png">
  911.                         <i class="dencar-icons" stroke="1.5" icon-name="mail-open"></i>
  912.                         </div>
  913.                         <div class="ask-text">Ooh! Is this a new section?</div>
  914.                     </div><!--end ask-->
  915.                     <div class="answer">
  916.                     <div class="answer-text">You're right! This is a new section. You can add more boxes to do questions by sections of some sort. Think of this as some sort of a divider, so you can group your questions by box/sections.
  917.                     </div>
  918.                     <span class="trig">▶</span>
  919.                     <div class="answer-icon">
  920.                             <img src="https://i.imgur.com/xBSPG2N.png">
  921.                         </div><!--end answer-->
  922.                     </div><!--to here-->
  923.                    
  924.                     <div class="ask">
  925.                         <div class="ask-icon">
  926.                             <img src="http://i.imgur.com/La7vyCv.png">
  927.                         <i class="dencar-icons" stroke="1.5" icon-name="mail-open"></i>
  928.                         </div>
  929.                         <div class="ask-text">How many question can I add per box?</div>
  930.                     </div><!--end ask-->
  931.                     <div class="answer">
  932.                     <div class="answer-text">
  933.                        You can add however many you like. No matter how concise or how detailed you like to be, I'm confident you can find a use for this.
  934.                     </div>
  935.                     <span class="trig">▶</span>
  936.                     <div class="answer-icon">
  937.                             <img src="https://i.imgur.com/xBSPG2N.png">
  938.                         </div><!--end answer-->
  939.                     </div><!--to here-->
  940.                    
  941.                     <!--and paste it above this line!-->
  942.                 </div><!--end faq box-->
  943.                
  944.                     <div class="faq-box" id="ask-box">
  945.                     <!--change the pneuma-themes.tumblr.com part to YOUR BLOG URL. Make sure you have your ask box enabled!-->
  946.                         <iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/pneuma-themes.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]-->
  947.                     </div>
  948.                
  949.                 <!--and paste it before this line!-->
  950.             </div><!--end faq-->
  951.         </div><!--end main-container-->
  952.        
  953.         <!--right sidebar-->
  954.         <div class="right sidebar">
  955.              <div class="sidebar-content">
  956.                 <div class="navigation-links">
  957.                
  958.                 <!--add your custom links here!-->
  959.                     <a href="">Link One</a>
  960.                     <i class="dencar-icons" stroke="1.5" icon-name="link-1"></i>
  961.                 </div><!--end nav links-->
  962.                 <div class="navigation-links">
  963.                 <!--add your custom links here!-->
  964.                     <a href="">Link Two</a>
  965.                     <i class="dencar-icons" stroke="1.5" icon-name="link-1"></i>
  966.                 </div><!--end nav links-->
  967.                 <div class="navigation-links">
  968.                     <a href="">Link Three</a>
  969.                     <i class="dencar-icons" stroke="1.5" icon-name="link-1"></i>
  970.                 </div><!--end nav links-->
  971.                 <div class="navigation-links">
  972.                     <a href="">Link Four</a>
  973.                     <i class="dencar-icons" stroke="1.5" icon-name="link-1"></i>
  974.                 </div><!--end nav links-->
  975.                 <div class="navigation-links">
  976.                    <a href="">Link Five</a>
  977.                     <i class="dencar-icons" stroke="1.5" icon-name="link-1"></i>
  978.                 </div><!--end nav links-->
  979.             </div><!--end sidebar-content-->
  980.         </div>
  981.         <!--end right sidebar-->
  982.        
  983.     </body>
  984.     <script>
  985.       const toggle = document.getElementById("theme-toggle");
  986.       toggle.onclick = function () {
  987.         document.documentElement.classList.add("theme-transition");
  988.         let currentTheme = document.documentElement.getAttribute("data-theme");
  989.         let targetTheme = "light";
  990.         if (currentTheme === "light") {
  991.           targetTheme = "dark";
  992.         }
  993.  
  994.         window.setTimeout(function () {
  995.           document.documentElement.classList.remove("theme-transition");
  996.         }, 50);
  997.         document.documentElement.setAttribute("data-theme", targetTheme);
  998.         localStorage.setItem("theme", targetTheme);
  999.       };
  1000.      
  1001.       $(document).ready(function () {
  1002.         //adapted from https://stackoverflow.com/questions/47591474/how-to-switch-through-tabs-in-bulma
  1003.           $('.tabs li').on('click', function() {
  1004.             var tab = $(this).data('tab');
  1005.        
  1006.             $('.tabs li').removeClass('is-active');
  1007.             $(this).addClass('is-active');
  1008.        
  1009.             $('.tab-content').removeClass('is-active');
  1010.             $('[data-content="' + tab + '"]').addClass('is-active');
  1011.           });
  1012.  
  1013.       tippy("[title]", {
  1014.         // change these to your liking
  1015.         arrow: false,
  1016.         placement: "bottom", // top, right, bottom, left
  1017.         delay: 5, //ms
  1018.         offset: [0,20], //px or string
  1019.         maxWidth: 300, //px or string
  1020.  
  1021.         // leave these as they are
  1022.         followCursor: true,
  1023.         allowHTML: true,
  1024.         theme: "custom",
  1025.         ignoreAttributes: true,
  1026.         content(reference) {
  1027.           const title = reference.getAttribute("title");
  1028.           reference.removeAttribute("title");
  1029.           return title;
  1030.         },
  1031.       });
  1032.     });
  1033.     </script>
  1034. </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!