Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-----------------------------------------------------------------------
- FAQ Page [02]
- Made by glenthemes
- Initial release: 2020/05/05
- Last updated: 2023/10/17
- What's new:
- β± rehosted the banner image
- TERMS OF USE:
- 1) Do not remove the credit.
- 2) Do not remove parts of the code without my permission.
- 3) Do not claim my codes as your own.
- 4) Do not use my works as base codes.
- 5) You may add widgets to my themes and pages.
- Customization pointers:
- πΏπΏπΏπΏπΏπΏπΏ = places to edit
- πππππππ = start of a section || start copy
- πππππππ = end of a section || end copy
- Editing Guide:
- https://docs.google.com/document/d/1m-aIrWXVtVn5zX-t_KUAK_kMdWyDfSJD0y5t-plHQW0/edit?usp=sharing
- ------------------------------------------------------------------------>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <!--------------------JAVASCRIPTS-------------------->
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
- <script>
- (function($){
- $(document).ready(function(){
- $("a[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:50,
- tip_fade_speed:0,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- <link href="https://fonts.googleapis.com/css?family=Work+Sans|PT+Serif|Karla|Libre+Franklin" rel="stylesheet">
- <script src="https://static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
- <!--scroll script by @annasthms-->
- <script src="//glen-themes.gitlab.io/faq-pages/02/annasthms_scroll.js"></script>
- <script>
- $(document).ready(function(){
- $(".banner").mousedown(function(){
- return false;
- });
- });
- </script>
- <!-------------------------------------------------------------------->
- <style type="text/css">
- @font-face { font-family: "canela"; src: url('//glen-assets.github.io/fonts/Canela-Regular-Web.ttf'); }
- /*--------------------TOOLTIPS--------------------*/
- #s-m-t-tooltip {
- padding:5px 10px;
- margin:20px;
- background-color:var(--Tooltips-BG);
- border-radius:2px;
- font-family:work sans;
- font-size:9px;
- letter-spacing:0.5px;
- text-transform:uppercase;
- color:var(--Tooltips-Text);
- z-index:99;
- max-width:40vw;
- }
- /*--------------------TUMBLR CONTROLS--------------------*/
- iframe#tumblr_controls, .iframe-controls--desktop {
- top:calc(var(--Top-Bar-Height) + 6px)!important;
- right:calc(17px + 2px)!important;
- position:fixed!important;
- transform:scale(0.7,0.7);
- -webkit-transform:scale(0.7,0.7);
- -moz-transform:scale(0.7,0.7);
- -o-transform:scale(0.7,0.7);
- -ms-transform:scale(0.7,0.7);
- transform-origin:100% 0;
- -webkit-transform-origin:100% 0;
- -moz-transform-origin:100% 0;
- -o-transform-origin:100% 0;
- -ms-transform-origin:100% 0;
- filter:invert(100%) hue-rotate(180deg);
- -webkit-filter:invert(100%) hue-rotate(180deg);
- z-index:999999!important;
- }
- /*--------------------SCROLLBAR--------------------*/
- ::-webkit-scrollbar {
- width:17px;
- height:17px;
- background-color:var(--Background);
- }
- ::-webkit-scrollbar-thumb {
- border:8px solid var(--Background);
- background-color:var(--Scrollbar-Thumb);
- }
- ::-webkit-scrollbar-track {
- border:8px solid var(--Background);
- background-color:var(--Scrollbar-Track);
- }
- ::-webkit-scrollbar-button {
- width:2px;
- height:2px;
- }
- /*--------------------TEXT HIGHLIGHT--------------------*/
- ::selection {
- background:#BBD3FD;
- }
- ::-moz-selection {
- background:#BBD3FD;
- }
- /*--------------------BASICS--------------------*/
- body {
- background:var(--Background) url('');
- background-attachment:fixed;
- background-repeat:repeat;
- line-height:1.6em;
- font-size:12px;
- text-align:left;
- overflow:hidden;
- }
- blockquote {
- padding-left:10px;
- margin-left:5px;
- border-left:1px solid;
- border-color:#aaa;
- margin:10px;
- }
- a {
- color:#fff;
- text-decoration:none;
- -webkit-transition: all 0.4s ease-in-out;
- -moz-transition: all 0.4s ease-in-out;
- -o-transition: all 0.4s ease-in-out;
- }
- pre, code {
- white-space:pre-wrap;
- }
- hr {
- width:70%;
- border-width:0px;
- height:1px;
- background-color:#bbb;
- }
- img {vertical-align:middle;}
- iframe {max-width:100%;}
- :root {
- /*--πΏπΏπΏπΏπΏπΏπΏ-->
- <!------------ CUSTOMIZATION OPTIONS ------------>
- <!-- colors, sizes, margins, etc -->
- /*---- GENERAL ----*/
- --Background:#fff;
- --Scrollbar-Track:#d5d5d5;
- --Scrollbar-Thumb:#777;
- --Tooltips-BG:#222;
- --Tooltips-Text:#eee;
- --Jump-Scroll-Speed:1000; /* in milliseconds. number only */
- --Credit-Color:#222;
- /*---- TOP BAR ----*/
- --Top-Bar-Height:65px;
- --Top-Bar-Background:#000;
- --Top-Bar-Links:#fff;
- --Top-Bar-Links-Font-Size:11px;
- --Top-Bar-Links-Spacing:13px;
- /*---- CONTAINER: GAPS ----*/
- --Window-Margin:80px; /* top & bottom of screen */
- --Sidebar-Right-Margin:75px;
- /*---- SIDEBAR (MENU) ----*/
- --Sidebar-Width:290px;
- --Sidebar-Heading-Border-Outer:#222;
- --Sidebar-Heading-Border-Inner:#fff;
- --Sidebar-Heading-Border-Size:2px;
- --Sidebar-Heading-Border-Spacing:2px;
- --Sidebar-Heading-Background:#000;
- --Sidebar-Heading-Padding:14px;
- --Sidebar-Heading-Font-Size:12px;
- --Sidebar-Heading:#eee;
- --Sidebar-Heading-Bottom-Gap:16px;
- --Sidebar-Bullet-Border-Outer:#222;
- --Sidebar-Bullet-Border-Inner:#fff;
- --Sidebar-Bullet-Border-Size:1px;
- --Sidebar-Bullet-Border-Spacing:1px;
- --Sidebar-Bullet-Size:11px;
- --Sidebar-Bullet:#222;
- --Sidebar-Bullet-Text-Left-Gap:10px;
- --Sidebar-Bullet-Text-Font-Size:12px;
- --Sidebar-Bullet-Text:#000;
- --Sidebar-Bullet-Row-Spacing:13px;
- /*---- MAIN CONTAINER (RIGHT) ----*/
- --Container-Width:590px;
- /*---- HEADER ----*/
- --Header-Text-Position-From-Top:114px;
- --Header-Text-Position-From-Left:32px;
- --Header-Text-Font-Size:26px;
- --Header-Text:#fefefe;
- --Header-Bottom-Gap:25px;
- /*---- QUESTIONS ----*/
- /* i.e. the question mark and its box; question text */
- --Question-Mark-Border-Outer:#222;
- --Question-Mark-Border-Inner:#fff;
- --Question-Mark-Border-Size:2px;
- --Question-Mark-Border-Spacing:2px;
- --Question-Mark-Background:#222;
- --Question-Mark-Padding:7px;
- --Question-Mark-Size:13px;
- --Question-Mark:#eee;
- --Question:#000;
- --Question-Font-Size:14px;
- --Question-Text-Left-Gap:13px;
- /*---- ANSWERS ----*/
- /* i.e. left border; answer text */
- --Answer-Line:#222;
- --Answer-Line-Thickness:2px;
- --Answer-Line-Stub-Size:6px;
- --Answer-Line-Stub:#222;
- --Answer:#555;
- --Answer-Font-Size:13px;
- --Question-Spacing:30px; /* gaps between each question */
- --Bold:#222;
- --Links:#000;
- --Links-Bottom-Border:#eee;
- --Special-Text-Background:#fafafa;
- --Special-Text-Border:#eee;
- --Special-Text:#444;
- }
- /*--------------- TOP BAR ---------------*/
- #topbar {
- position:fixed;
- top:0;left:0;
- width:100vw;
- height:var(--Top-Bar-Height);
- background:var(--Top-Bar-Background);
- display:table;
- overflow:hidden;
- z-index:69;
- }
- #hottopic {
- display:table-cell;
- vertical-align:middle;
- }
- .toplinks {
- text-align:center;
- }
- .toplinks a {
- margin:0 -4px;
- padding:calc((var(--Top-Bar-Height) - var(--Top-Bar-Links-Font-Size)) / 2) var(--Top-Bar-Links-Spacing);
- font-family:playfair display;
- font-size:var(--Top-Bar-Links-Font-Size);
- text-transform:uppercase;
- letter-spacing:2px;
- color:var(--Top-Bar-Links);
- line-height:1em;
- }
- /*--------------- CONTAINER ---------------*/
- #cont-a {
- position:absolute;
- top:0;left:0;right:0;
- margin:auto;
- margin-top:calc(var(--Top-Bar-Height) - 1px);
- height:calc(100vh - var(--Top-Bar-Height) + 1px);
- text-align:center;
- overflow-y:scroll;
- z-index:-1;
- }
- #cont-b {
- display:inline-block;
- margin-top:var(--Window-Margin);
- }
- /*--------------- SIDEBAR (MENU) ---------------*/
- #sb-menu {
- position:fixed;
- width:var(--Sidebar-Width);
- }
- .sb-out {
- margin-bottom:var(--Sidebar-Heading-Bottom-Gap);
- border:var(--Sidebar-Heading-Border-Size) solid var(--Sidebar-Heading-Border-Outer);
- }
- .sb-in {
- border:var(--Sidebar-Heading-Border-Spacing) solid var(--Sidebar-Heading-Border-Inner);
- padding:var(--Sidebar-Heading-Padding);
- background:var(--Sidebar-Heading-Background);
- }
- .sb-heading {
- font-family:playfair display;
- font-size:var(--Sidebar-Heading-Font-Size);
- text-transform:uppercase;
- letter-spacing:2px;
- color:var(--Sidebar-Heading);
- }
- .bullet-row {
- display:flex;
- align-items:center;
- margin-bottom:var(--Sidebar-Bullet-Row-Spacing);
- }
- .bullet-out {
- border:var(--Sidebar-Bullet-Border-Size) solid var(--Sidebar-Bullet-Border-Outer);
- }
- .bullet-in {
- border:var(--Sidebar-Bullet-Border-Spacing) solid var(--Sidebar-Bullet-Border-Inner);
- width:var(--Sidebar-Bullet-Size);
- height:var(--Sidebar-Bullet-Size);
- background:var(--Sidebar-Bullet);
- }
- .bullet-text {
- margin-left:var(--Sidebar-Bullet-Text-Left-Gap);
- font-family:libre franklin;
- font-size:var(--Sidebar-Bullet-Text-Font-Size);
- letter-spacing:.3px;
- }
- .bullet-text, .bullet-text a {
- color:var(--Sidebar-Bullet-Text);
- }
- /*----------- MAIN CONTAINER (RIGHT) -----------*/
- #maain {
- margin-left:calc(var(--Sidebar-Width) + var(--Sidebar-Right-Margin));
- margin-bottom:var(--Window-Margin);
- width:var(--Container-Width);
- text-align:left;
- }
- /*--------------- HEADER (BANNER) ---------------*/
- .header {
- margin-bottom:var(--Header-Bottom-Gap);
- overflow:hidden;
- }
- .header-text {
- position:absolute;
- margin-top:var(--Header-Text-Position-From-Top);
- margin-left:var(--Header-Text-Position-From-Left);
- width:calc(var(--Container-Width) - var(--Header-Text-Position-From-Left));
- font-family:canela;
- font-size:var(--Header-Text-Font-Size);
- text-transform:uppercase;
- letter-spacing:4px;
- color:var(--Header-Text);
- text-align:center;
- }
- .banner {
- width:100%;
- height:auto;
- }
- .banner[src*="VEqgFdA.gif" i]{
- margin-top:-69px;
- }
- /*--------------- QUESTIONS ---------------*/
- .one-question {
- margin-bottom:var(--Question-Spacing);
- }
- .one-question:last-of-type {margin-bottom:0;}
- .the-question {
- display:flex;
- align-items:baseline;
- }
- .q-out {
- border:var(--Question-Mark-Border-Size) solid var(--Question-Mark-Border-Outer);
- }
- .q-in {
- display:flex;
- align-items:center;
- justify-content:center;
- width:calc(var(--Question-Mark-Size) + (var(--Question-Mark-Padding) * 2));
- height:calc(var(--Question-Mark-Size) + (var(--Question-Mark-Padding) * 2));
- border:var(--Question-Mark-Border-Spacing) solid var(--Question-Mark-Border-Inner);
- background:var(--Question-Mark-Background);
- overflow:hidden;
- }
- .q-mark {
- font-family:work sans;
- font-size:var(--Question-Mark-Size);
- color:var(--Question-Mark);
- line-height:1em;
- }
- .question-text {
- margin-left:var(--Question-Text-Left-Gap);
- font-family:pt serif;
- font-size:var(--Question-Font-Size);
- color:var(--Question);
- }
- /*--------------- ANSWERS ---------------*/
- .the-answer {
- margin-left:calc((var(--Question-Mark-Border-Size) + var(--Question-Mark-Border-Spacing) + var(--Question-Mark-Padding) + (var(--Question-Mark-Size) / 2)) - (var(--Answer-Line-Thickness) / 2));
- padding-left:calc((var(--Question-Mark-Border-Size) + var(--Question-Mark-Border-Spacing) + var(--Question-Mark-Padding) + (var(--Question-Mark-Size) / 2)) + var(--Question-Text-Left-Gap));
- padding-top:5px;
- border-left:var(--Answer-Line-Thickness) solid var(--Answer-Line);
- font-family:karla;
- font-size:var(--Answer-Font-Size);
- color:var(--Answer);
- line-height:1.8em;
- }
- .the-answer p:last-child, .the-answer ul:last-of-type,
- .the-answer ol:last-of-type {
- margin-bottom:0;
- }
- .the-answer li {
- list-style:none;
- margin-left:-3px;
- padding-left:5px;
- }
- .the-answer ul li:before {
- content:"";
- position:absolute;
- margin-top:calc(var(--Answer-Font-Size) - 2px);
- margin-left:-24px;
- width:10px;
- height:1px;
- background:var(--Answer);
- opacity:0.69;
- }
- .sq {
- margin-left:calc((var(--Question-Mark-Border-Size) + var(--Question-Mark-Border-Spacing) + var(--Question-Mark-Padding) + (var(--Question-Mark-Size) / 2)) - (var(--Answer-Line-Stub-Size) / 2));
- width:var(--Answer-Line-Stub-Size);
- height:var(--Answer-Line-Stub-Size);
- background:var(--Answer-Line-Stub);
- border-radius:100%;
- }
- .the-answer a {
- margin:auto 1px;
- padding-bottom:1px;
- border-bottom:1px solid var(--Links-Bottom-Border);
- font-size:calc(var(--Answer-Font-Size) - 2px);
- font-weight:bold;
- text-transform:uppercase;
- letter-spacing:1px;
- color:var(--Links);
- }
- .the-answer b {
- color:var(--Bold);
- }
- .the-answer special {
- display:inline-block;
- margin:auto 1px;
- padding:2px 4px;
- background:var(--Special-Text-Background);
- border:1px solid var(--Special-Text-Border);
- border-radius:1px;
- font-size:calc(var(--Answer-Font-Size) - 2px);
- text-transform:uppercase;
- letter-spacing:1px;
- color:var(--Special-Text);
- line-height:1.4em;
- }
- .the-answer caps {
- font-size:calc(var(--Answer-Font-Size) - 2px);
- text-transform:uppercase;
- letter-spacing:1px;
- }
- .the-answer .uncaps {
- font-size:var(--Answer-Font-Size)!important;
- text-transform:none!important;
- letter-spacing:0px!important;
- }
- .glenjamin {
- position:fixed;
- bottom:0;padding-bottom:16px;
- right:0;padding-right:22px;
- }
- .glenjamin svg {
- width:11px;
- height:11px;
- color:var(--Credit-Color);
- }
- </style>
- </head>
- <body>
- <div id="topbar">
- <div id="hottopic">
- <div class="toplinks">
- <!--πΏπΏπΏπΏπΏπΏπΏ-->
- <!------ TOP BAR LINKS [CUSTOM LINKS] ------>
- <!-- put url between quote marks of href="" -->
- <!-- add / edit / delete as you like -->
- <a href="/">home</a>
- <a href="">custom link</a>
- <a href="">custom link</a>
- <a href="">custom link</a>
- </div>
- </div>
- </div>
- <div id="cont-a">
- <div id="cont-b">
- <div id="sb-menu">
- <div class="sb-out">
- <div class="sb-in">
- <!--πΏπΏπΏπΏπΏπΏπΏ-->
- <!------ SIDEBAR TITLE ------>
- <div class="sb-heading">sidebar title</div>
- </div>
- </div>
- <div class="hash-links">
- <!--πΏπΏπΏπΏπΏπΏπΏ-->
- <!------ SIDEBAR JUMP LINKS ------>
- <!--
- 1. put a name between the quote marks of href=""
- 2. remember to INCLUDE the hashtag!
- 3. you will have to use this name later
- -->
- <!--------------------------------->
- <!-- start one sidebar jump link -->
- <!--πππππππ-->
- <!--πΏπΏπΏπΏ-->
- <a class="bullet-row" href="#one">
- <div class="bullet-out">
- <div class="bullet-in"></div>
- </div>
- <!--πΏπΏπΏπΏ-->
- <div class="bullet-text">Example question 1</div>
- </a>
- <!--πππππππ-->
- <!-- end a sidebar jump link -->
- <!--------------------------------->
- <!--------------------------------->
- <!-- start one sidebar jump link -->
- <!--πππππππ-->
- <!--πΏπΏπΏπΏ-->
- <a class="bullet-row" href="#two">
- <div class="bullet-out">
- <div class="bullet-in"></div>
- </div>
- <!--πΏπΏπΏπΏ-->
- <div class="bullet-text">Example question 2</div>
- </a>
- <!--πππππππ-->
- <!-- end a sidebar jump link -->
- <!--------------------------------->
- <!--------------------------------->
- <!-- START ASKBOX JUMP LINK -->
- <!--πππππππ-->
- <!--πΏπΏπΏπΏ-->
- <a class="bullet-row" href="#askbox">
- <div class="bullet-out">
- <div class="bullet-in"></div>
- </div>
- <!--πΏπΏπΏπΏ-->
- <div class="bullet-text">Ask a question</div>
- </a>
- <!--πππππππ-->
- <!-- END ASKBOX JUMP LINK -->
- <!--------------------------------->
- </div><!--hash-links-->
- </div><!--end sidebar-->
- <div id="maain">
- <div class="header">
- <!--πΏπΏπΏπΏπΏπΏπΏ-->
- <!------ HEADER TITLE------>
- <div class="header-text">header title</div>
- <!--πΏπΏπΏπΏπΏπΏπΏ-->
- <!------ HEADER IMAGE ------>
- <!-- put the image url between quote marks of src="" -->
- <img class="banner" src="https://static.tumblr.com/snld4jp/hi0s2p1dd/veqgfda.gif">
- </div><!--do not delete this line-->
- <!--πΏπΏπΏπΏπΏπΏπΏ-->
- <!------ QUESTIONS & ANSWERS ------>
- <!--
- put the name that you'd assigned (to the sidebar jump links)
- between the quote marks of id="" (first line of each block)
- hashtag is NOT NEEDED HERE
- e.g. for the sidebar: href="#one"
- for this: id="one"
- -->
- <!------------------------------>
- <!-- start a question block -->
- <!--πππππππ-->
- <!--πΏπΏπΏπΏ-->
- <div id="one" class="one-question">
- <div class="the-question">
- <div class="q-out">
- <div class="q-in">
- <div class="q-mark">?</div>
- </div><!--q-in-->
- </div><!--q-out-->
- <!--πΏπΏπΏπΏ-->
- <div class="question-text">Example question 1</div>
- </div><!--end question text-->
- <div class="the-answer">
- <!--πΏπΏπΏπΏ-->
- An answer for example question 1.
- <p>
- <special>special text</special>
- <p>
- <a href="https://google.com">links</a> are capitalized.
- <br>
- To uncapitalize: <a class="uncaps" href="URL">links</a>
- <!-------------->
- </div><!--end answer text | do not delete this line-->
- <div class="sq"></div>
- </div>
- <!--πππππππ-->
- <!-- end a question block -->
- <!-------------------------->
- <!------------------------------>
- <!-- start a question block -->
- <!--πππππππ-->
- <!--πΏπΏπΏπΏ-->
- <div id="two" class="one-question">
- <div class="the-question">
- <div class="q-out">
- <div class="q-in">
- <div class="q-mark">?</div>
- </div><!--q-in-->
- </div><!--q-out-->
- <!--πΏπΏπΏπΏ-->
- <div class="question-text">Example question 2</div>
- </div><!--end question text-->
- <div class="the-answer">
- <!--πΏπΏπΏπΏ-->
- An answer for example question 2.
- <!-------------->
- </div><!--end answer text | do not delete this line-->
- <div class="sq"></div>
- </div>
- <!--πππππππ-->
- <!-- end a question block -->
- <!-------------------------->
- <!------------------------------>
- <!-- start askbox section -->
- <!--πππππππ-->
- <div id="askbox" class="one-question">
- <div class="the-question">
- <div class="q-out">
- <div class="q-in">
- <div class="q-mark">?</div>
- </div><!--q-in-->
- </div><!--q-out-->
- <!--πΏπΏπΏπΏ-->
- <div class="question-text">Ask a question</div>
- </div><!--end question text-->
- <div class="the-answer">
- <!--πΏπΏπΏπΏ-->
- <caps>Question guidelines:</caps>
- <ul>
- <li>some text to make sure people've read your faq
- <li>here's another line
- </ul>
- <!------------->
- <!--πΏπΏπΏπΏ-->
- <!------ THE ACTUAL ASKBOX ------>
- <!-- replace YOURBLOGURL (after /ask_form/ with your username -->
- <p><iframe frameborder="0" id="ask_form" scrolling="no"
- src="https://www.tumblr.com/ask_form/YOURBLOGURL.tumblr.com" style="background-color:transparent; overflow:hidden;"
- width="100%" height="260px">
- </iframe>
- <!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
- </div><!--end answer text-->
- <div class="sq"></div>
- </div><!--end one question-->
- <!--πππππππ-->
- <!-- end askbox section -->
- <!-------------------------->
- <!--do not delete below this line-->
- </div><!--maain-->
- </div><!--h-b-->
- </div><!--h-a-->
- <a class="glenjamin" href="//glenthemes.tumblr.com" title="page by glenthemes"><i data-feather="code"></i></a>
- <script>feather.replace()</script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment