₊⁺✿˚
This commit is contained in:
parent
13121c918d
commit
6d6fb283a6
|
|
@ -0,0 +1,823 @@
|
|||
<!-----------------------------------------------------------------------
|
||||
FAQ Page [02]
|
||||
Made by glenthemes
|
||||
|
||||
Initial release: 2020/05/05
|
||||
Last updated: 2021/10/21
|
||||
|
||||
TERMS OF USE:
|
||||
1) Do not remove the page credit.
|
||||
2) Do not repost/redistribute my themes.
|
||||
3) Do not take parts of the code and use it as your own.
|
||||
4) Do not use my themes as a base code.
|
||||
5) Do not mix my themes together.
|
||||
|
||||
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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" 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="//glenthemes.s3.eu-west-2.amazonaws.com/faq-pages/02/annasthms_scroll.js"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$(".banner").mousedown(function(){
|
||||
return false;
|
||||
});
|
||||
|
||||
if ($(".banner").attr("src") == "https://i.imgur.com/VEqgFdA.gif"){
|
||||
$(".banner").css("margin-top","-69px");
|
||||
}
|
||||
});
|
||||
</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;
|
||||
}
|
||||
|
||||
/*--------------- 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://i.imgur.com/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>
|
||||
Loading…
Reference in New Issue