Deprecated: The each() function is deprecated. This message will be suppressed on further calls in /home/zhenxiangba/zhenxiangba.com/public_html/phproxy-improved-master/index.php on line 456
FAQ Page [02] - Pastebin.com
[go: Go Back, main page]

glenthemes

FAQ Page [02]

May 4th, 2020 (edited)
4,788
1
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 23.08 KB | None | 1 0
  1. <!-----------------------------------------------------------------------
  2. FAQ Page [02]
  3. Made by glenthemes
  4.  
  5. Initial release: 2020/05/05
  6. Last updated: 2023/10/17
  7.  
  8. What's new:
  9. ✱ rehosted the banner image
  10.  
  11. TERMS OF USE:
  12. 1) Do not remove the credit.
  13. 2) Do not remove parts of the code without my permission.
  14. 3) Do not claim my codes as your own.
  15. 4) Do not use my works as base codes.
  16. 5) You may add widgets to my themes and pages.
  17.  
  18. Customization pointers:
  19. 🌿🌿🌿🌿🌿🌿🌿 = places to edit
  20. πŸ™πŸ™πŸ™πŸ™πŸ™πŸ™πŸ™ = start of a section || start copy
  21. πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘ = end of a section || end copy
  22.  
  23. Editing Guide:
  24. https://docs.google.com/document/d/1m-aIrWXVtVn5zX-t_KUAK_kMdWyDfSJD0y5t-plHQW0/edit?usp=sharing
  25. ------------------------------------------------------------------------>
  26.  
  27. <!DOCTYPE html>
  28. <html lang="en">
  29.  
  30. <head>
  31.  
  32. <title>{Title}</title>
  33.  
  34. <link rel="shortcut icon" href="{Favicon}">
  35.  
  36. <!--------------------JAVASCRIPTS-------------------->
  37. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  38. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  39. <script>
  40. (function($){
  41. $(document).ready(function(){
  42. $("a[title]").style_my_tooltips({
  43. tip_follows_cursor:true,
  44. tip_delay_time:50,
  45. tip_fade_speed:0,
  46. attribute:"title"
  47. });
  48. });
  49. })(jQuery);
  50. </script>
  51.  
  52. <link href="https://fonts.googleapis.com/css?family=Work+Sans|PT+Serif|Karla|Libre+Franklin" rel="stylesheet">
  53.  
  54. <script src="https://static.tumblr.com/2pnwama/DLppehqvd/feathericons.js"></script>
  55.  
  56. <!--scroll script by @annasthms-->
  57. <script src="//glen-themes.gitlab.io/faq-pages/02/annasthms_scroll.js"></script>
  58.  
  59. <script>
  60. $(document).ready(function(){
  61. $(".banner").mousedown(function(){
  62. return false;
  63. });
  64. });
  65. </script>
  66.  
  67. <!-------------------------------------------------------------------->
  68.  
  69. <style type="text/css">
  70.  
  71. @font-face { font-family: "canela"; src: url('//glen-assets.github.io/fonts/Canela-Regular-Web.ttf'); }
  72.  
  73. /*--------------------TOOLTIPS--------------------*/
  74. #s-m-t-tooltip {
  75. padding:5px 10px;
  76. margin:20px;
  77. background-color:var(--Tooltips-BG);
  78. border-radius:2px;
  79. font-family:work sans;
  80. font-size:9px;
  81. letter-spacing:0.5px;
  82. text-transform:uppercase;
  83. color:var(--Tooltips-Text);
  84. z-index:99;
  85. max-width:40vw;
  86. }
  87.  
  88. /*--------------------TUMBLR CONTROLS--------------------*/
  89. iframe#tumblr_controls, .iframe-controls--desktop {
  90. top:calc(var(--Top-Bar-Height) + 6px)!important;
  91. right:calc(17px + 2px)!important;
  92. position:fixed!important;
  93.  
  94. transform:scale(0.7,0.7);
  95. -webkit-transform:scale(0.7,0.7);
  96. -moz-transform:scale(0.7,0.7);
  97. -o-transform:scale(0.7,0.7);
  98. -ms-transform:scale(0.7,0.7);
  99.  
  100. transform-origin:100% 0;
  101. -webkit-transform-origin:100% 0;
  102. -moz-transform-origin:100% 0;
  103. -o-transform-origin:100% 0;
  104. -ms-transform-origin:100% 0;
  105.  
  106. filter:invert(100%) hue-rotate(180deg);
  107. -webkit-filter:invert(100%) hue-rotate(180deg);
  108.  
  109. z-index:999999!important;
  110. }
  111.  
  112. /*--------------------SCROLLBAR--------------------*/
  113. ::-webkit-scrollbar {
  114. width:17px;
  115. height:17px;
  116. background-color:var(--Background);
  117. }
  118.  
  119. ::-webkit-scrollbar-thumb {
  120. border:8px solid var(--Background);
  121. background-color:var(--Scrollbar-Thumb);
  122. }
  123.  
  124. ::-webkit-scrollbar-track {
  125. border:8px solid var(--Background);
  126. background-color:var(--Scrollbar-Track);
  127. }
  128.  
  129. ::-webkit-scrollbar-button {
  130. width:2px;
  131. height:2px;
  132. }
  133.  
  134. /*--------------------TEXT HIGHLIGHT--------------------*/
  135. ::selection {
  136. background:#BBD3FD;
  137. }
  138.  
  139. ::-moz-selection {
  140. background:#BBD3FD;
  141. }
  142.  
  143. /*--------------------BASICS--------------------*/
  144. body {
  145. background:var(--Background) url('');
  146. background-attachment:fixed;
  147. background-repeat:repeat;
  148. line-height:1.6em;
  149. font-size:12px;
  150. text-align:left;
  151. overflow:hidden;
  152. }
  153.  
  154. blockquote {
  155. padding-left:10px;
  156. margin-left:5px;
  157. border-left:1px solid;
  158. border-color:#aaa;
  159. margin:10px;
  160. }
  161.  
  162. a {
  163. color:#fff;
  164. text-decoration:none;
  165. -webkit-transition: all 0.4s ease-in-out;
  166. -moz-transition: all 0.4s ease-in-out;
  167. -o-transition: all 0.4s ease-in-out;
  168. }
  169.  
  170. pre, code {
  171. white-space:pre-wrap;
  172. }
  173.  
  174. hr {
  175. width:70%;
  176. border-width:0px;
  177. height:1px;
  178. background-color:#bbb;
  179. }
  180.  
  181. img {vertical-align:middle;}
  182. iframe {max-width:100%;}
  183.  
  184. :root {
  185. /*--🌿🌿🌿🌿🌿🌿🌿-->
  186. <!------------ CUSTOMIZATION OPTIONS ------------>
  187. <!-- colors, sizes, margins, etc -->
  188.  
  189. /*---- GENERAL ----*/
  190. --Background:#fff;
  191. --Scrollbar-Track:#d5d5d5;
  192. --Scrollbar-Thumb:#777;
  193. --Tooltips-BG:#222;
  194. --Tooltips-Text:#eee;
  195. --Jump-Scroll-Speed:1000; /* in milliseconds. number only */
  196. --Credit-Color:#222;
  197.  
  198. /*---- TOP BAR ----*/
  199. --Top-Bar-Height:65px;
  200. --Top-Bar-Background:#000;
  201. --Top-Bar-Links:#fff;
  202. --Top-Bar-Links-Font-Size:11px;
  203. --Top-Bar-Links-Spacing:13px;
  204.  
  205. /*---- CONTAINER: GAPS ----*/
  206. --Window-Margin:80px; /* top & bottom of screen */
  207. --Sidebar-Right-Margin:75px;
  208.  
  209. /*---- SIDEBAR (MENU) ----*/
  210. --Sidebar-Width:290px;
  211. --Sidebar-Heading-Border-Outer:#222;
  212. --Sidebar-Heading-Border-Inner:#fff;
  213. --Sidebar-Heading-Border-Size:2px;
  214. --Sidebar-Heading-Border-Spacing:2px;
  215. --Sidebar-Heading-Background:#000;
  216. --Sidebar-Heading-Padding:14px;
  217. --Sidebar-Heading-Font-Size:12px;
  218. --Sidebar-Heading:#eee;
  219. --Sidebar-Heading-Bottom-Gap:16px;
  220.  
  221. --Sidebar-Bullet-Border-Outer:#222;
  222. --Sidebar-Bullet-Border-Inner:#fff;
  223. --Sidebar-Bullet-Border-Size:1px;
  224. --Sidebar-Bullet-Border-Spacing:1px;
  225. --Sidebar-Bullet-Size:11px;
  226. --Sidebar-Bullet:#222;
  227.  
  228. --Sidebar-Bullet-Text-Left-Gap:10px;
  229. --Sidebar-Bullet-Text-Font-Size:12px;
  230. --Sidebar-Bullet-Text:#000;
  231.  
  232. --Sidebar-Bullet-Row-Spacing:13px;
  233.  
  234. /*---- MAIN CONTAINER (RIGHT) ----*/
  235. --Container-Width:590px;
  236.  
  237. /*---- HEADER ----*/
  238. --Header-Text-Position-From-Top:114px;
  239. --Header-Text-Position-From-Left:32px;
  240. --Header-Text-Font-Size:26px;
  241. --Header-Text:#fefefe;
  242. --Header-Bottom-Gap:25px;
  243.  
  244. /*---- QUESTIONS ----*/
  245. /* i.e. the question mark and its box; question text */
  246. --Question-Mark-Border-Outer:#222;
  247. --Question-Mark-Border-Inner:#fff;
  248. --Question-Mark-Border-Size:2px;
  249. --Question-Mark-Border-Spacing:2px;
  250. --Question-Mark-Background:#222;
  251. --Question-Mark-Padding:7px;
  252. --Question-Mark-Size:13px;
  253. --Question-Mark:#eee;
  254. --Question:#000;
  255. --Question-Font-Size:14px;
  256. --Question-Text-Left-Gap:13px;
  257.  
  258. /*---- ANSWERS ----*/
  259. /* i.e. left border; answer text */
  260. --Answer-Line:#222;
  261. --Answer-Line-Thickness:2px;
  262. --Answer-Line-Stub-Size:6px;
  263. --Answer-Line-Stub:#222;
  264. --Answer:#555;
  265. --Answer-Font-Size:13px;
  266. --Question-Spacing:30px; /* gaps between each question */
  267.  
  268. --Bold:#222;
  269.  
  270. --Links:#000;
  271. --Links-Bottom-Border:#eee;
  272.  
  273. --Special-Text-Background:#fafafa;
  274. --Special-Text-Border:#eee;
  275. --Special-Text:#444;
  276. }
  277.  
  278. /*--------------- TOP BAR ---------------*/
  279. #topbar {
  280. position:fixed;
  281. top:0;left:0;
  282. width:100vw;
  283. height:var(--Top-Bar-Height);
  284. background:var(--Top-Bar-Background);
  285. display:table;
  286. overflow:hidden;
  287. z-index:69;
  288. }
  289.  
  290. #hottopic {
  291. display:table-cell;
  292. vertical-align:middle;
  293. }
  294.  
  295. .toplinks {
  296. text-align:center;
  297. }
  298.  
  299. .toplinks a {
  300. margin:0 -4px;
  301. padding:calc((var(--Top-Bar-Height) - var(--Top-Bar-Links-Font-Size)) / 2) var(--Top-Bar-Links-Spacing);
  302. font-family:playfair display;
  303. font-size:var(--Top-Bar-Links-Font-Size);
  304. text-transform:uppercase;
  305. letter-spacing:2px;
  306. color:var(--Top-Bar-Links);
  307. line-height:1em;
  308. }
  309.  
  310. /*--------------- CONTAINER ---------------*/
  311. #cont-a {
  312. position:absolute;
  313. top:0;left:0;right:0;
  314. margin:auto;
  315. margin-top:calc(var(--Top-Bar-Height) - 1px);
  316. height:calc(100vh - var(--Top-Bar-Height) + 1px);
  317. text-align:center;
  318. overflow-y:scroll;
  319. z-index:-1;
  320. }
  321.  
  322. #cont-b {
  323. display:inline-block;
  324. margin-top:var(--Window-Margin);
  325. }
  326.  
  327. /*--------------- SIDEBAR (MENU) ---------------*/
  328. #sb-menu {
  329. position:fixed;
  330. width:var(--Sidebar-Width);
  331. }
  332.  
  333. .sb-out {
  334. margin-bottom:var(--Sidebar-Heading-Bottom-Gap);
  335. border:var(--Sidebar-Heading-Border-Size) solid var(--Sidebar-Heading-Border-Outer);
  336. }
  337.  
  338. .sb-in {
  339. border:var(--Sidebar-Heading-Border-Spacing) solid var(--Sidebar-Heading-Border-Inner);
  340. padding:var(--Sidebar-Heading-Padding);
  341. background:var(--Sidebar-Heading-Background);
  342. }
  343.  
  344. .sb-heading {
  345. font-family:playfair display;
  346. font-size:var(--Sidebar-Heading-Font-Size);
  347. text-transform:uppercase;
  348. letter-spacing:2px;
  349. color:var(--Sidebar-Heading);
  350. }
  351.  
  352. .bullet-row {
  353. display:flex;
  354. align-items:center;
  355. margin-bottom:var(--Sidebar-Bullet-Row-Spacing);
  356. }
  357.  
  358. .bullet-out {
  359. border:var(--Sidebar-Bullet-Border-Size) solid var(--Sidebar-Bullet-Border-Outer);
  360. }
  361.  
  362. .bullet-in {
  363. border:var(--Sidebar-Bullet-Border-Spacing) solid var(--Sidebar-Bullet-Border-Inner);
  364. width:var(--Sidebar-Bullet-Size);
  365. height:var(--Sidebar-Bullet-Size);
  366. background:var(--Sidebar-Bullet);
  367. }
  368.  
  369. .bullet-text {
  370. margin-left:var(--Sidebar-Bullet-Text-Left-Gap);
  371. font-family:libre franklin;
  372. font-size:var(--Sidebar-Bullet-Text-Font-Size);
  373. letter-spacing:.3px;
  374. }
  375.  
  376. .bullet-text, .bullet-text a {
  377. color:var(--Sidebar-Bullet-Text);
  378. }
  379.  
  380. /*----------- MAIN CONTAINER (RIGHT) -----------*/
  381. #maain {
  382. margin-left:calc(var(--Sidebar-Width) + var(--Sidebar-Right-Margin));
  383. margin-bottom:var(--Window-Margin);
  384. width:var(--Container-Width);
  385. text-align:left;
  386. }
  387.  
  388. /*--------------- HEADER (BANNER) ---------------*/
  389. .header {
  390. margin-bottom:var(--Header-Bottom-Gap);
  391. overflow:hidden;
  392. }
  393.  
  394. .header-text {
  395. position:absolute;
  396. margin-top:var(--Header-Text-Position-From-Top);
  397. margin-left:var(--Header-Text-Position-From-Left);
  398. width:calc(var(--Container-Width) - var(--Header-Text-Position-From-Left));
  399. font-family:canela;
  400. font-size:var(--Header-Text-Font-Size);
  401. text-transform:uppercase;
  402. letter-spacing:4px;
  403. color:var(--Header-Text);
  404. text-align:center;
  405. }
  406.  
  407. .banner {
  408. width:100%;
  409. height:auto;
  410. }
  411.  
  412. .banner[src*="VEqgFdA.gif" i]{
  413. margin-top:-69px;
  414. }
  415.  
  416. /*--------------- QUESTIONS ---------------*/
  417. .one-question {
  418. margin-bottom:var(--Question-Spacing);
  419. }
  420.  
  421. .one-question:last-of-type {margin-bottom:0;}
  422.  
  423. .the-question {
  424. display:flex;
  425. align-items:baseline;
  426. }
  427.  
  428. .q-out {
  429. border:var(--Question-Mark-Border-Size) solid var(--Question-Mark-Border-Outer);
  430. }
  431.  
  432. .q-in {
  433. display:flex;
  434. align-items:center;
  435. justify-content:center;
  436. width:calc(var(--Question-Mark-Size) + (var(--Question-Mark-Padding) * 2));
  437. height:calc(var(--Question-Mark-Size) + (var(--Question-Mark-Padding) * 2));
  438. border:var(--Question-Mark-Border-Spacing) solid var(--Question-Mark-Border-Inner);
  439. background:var(--Question-Mark-Background);
  440. overflow:hidden;
  441. }
  442.  
  443. .q-mark {
  444. font-family:work sans;
  445. font-size:var(--Question-Mark-Size);
  446. color:var(--Question-Mark);
  447. line-height:1em;
  448. }
  449.  
  450. .question-text {
  451. margin-left:var(--Question-Text-Left-Gap);
  452. font-family:pt serif;
  453. font-size:var(--Question-Font-Size);
  454. color:var(--Question);
  455. }
  456.  
  457. /*--------------- ANSWERS ---------------*/
  458. .the-answer {
  459. 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));
  460. 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));
  461. padding-top:5px;
  462. border-left:var(--Answer-Line-Thickness) solid var(--Answer-Line);
  463. font-family:karla;
  464. font-size:var(--Answer-Font-Size);
  465. color:var(--Answer);
  466. line-height:1.8em;
  467. }
  468.  
  469. .the-answer p:last-child, .the-answer ul:last-of-type,
  470. .the-answer ol:last-of-type {
  471. margin-bottom:0;
  472. }
  473.  
  474. .the-answer li {
  475. list-style:none;
  476. margin-left:-3px;
  477. padding-left:5px;
  478. }
  479.  
  480. .the-answer ul li:before {
  481. content:"";
  482. position:absolute;
  483. margin-top:calc(var(--Answer-Font-Size) - 2px);
  484. margin-left:-24px;
  485. width:10px;
  486. height:1px;
  487. background:var(--Answer);
  488. opacity:0.69;
  489. }
  490.  
  491. .sq {
  492. 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));
  493. width:var(--Answer-Line-Stub-Size);
  494. height:var(--Answer-Line-Stub-Size);
  495. background:var(--Answer-Line-Stub);
  496. border-radius:100%;
  497. }
  498.  
  499. .the-answer a {
  500. margin:auto 1px;
  501. padding-bottom:1px;
  502. border-bottom:1px solid var(--Links-Bottom-Border);
  503. font-size:calc(var(--Answer-Font-Size) - 2px);
  504. font-weight:bold;
  505. text-transform:uppercase;
  506. letter-spacing:1px;
  507. color:var(--Links);
  508. }
  509.  
  510. .the-answer b {
  511. color:var(--Bold);
  512. }
  513.  
  514. .the-answer special {
  515. display:inline-block;
  516. margin:auto 1px;
  517. padding:2px 4px;
  518. background:var(--Special-Text-Background);
  519. border:1px solid var(--Special-Text-Border);
  520. border-radius:1px;
  521. font-size:calc(var(--Answer-Font-Size) - 2px);
  522. text-transform:uppercase;
  523. letter-spacing:1px;
  524. color:var(--Special-Text);
  525. line-height:1.4em;
  526. }
  527.  
  528. .the-answer caps {
  529. font-size:calc(var(--Answer-Font-Size) - 2px);
  530. text-transform:uppercase;
  531. letter-spacing:1px;
  532. }
  533.  
  534. .the-answer .uncaps {
  535. font-size:var(--Answer-Font-Size)!important;
  536. text-transform:none!important;
  537. letter-spacing:0px!important;
  538. }
  539.  
  540. .glenjamin {
  541. position:fixed;
  542. bottom:0;padding-bottom:16px;
  543. right:0;padding-right:22px;
  544. }
  545.  
  546. .glenjamin svg {
  547. width:11px;
  548. height:11px;
  549. color:var(--Credit-Color);
  550. }
  551.  
  552. </style>
  553.  
  554. </head>
  555.  
  556. <body>
  557.  
  558. <div id="topbar">
  559. <div id="hottopic">
  560. <div class="toplinks">
  561.  
  562. <!--🌿🌿🌿🌿🌿🌿🌿-->
  563. <!------ TOP BAR LINKS [CUSTOM LINKS] ------>
  564. <!-- put url between quote marks of href="" -->
  565. <!-- add / edit / delete as you like -->
  566.  
  567. <a href="/">home</a>
  568. <a href="">custom link</a>
  569. <a href="">custom link</a>
  570. <a href="">custom link</a>
  571.  
  572. </div>
  573. </div>
  574. </div>
  575.  
  576. <div id="cont-a">
  577. <div id="cont-b">
  578.  
  579. <div id="sb-menu">
  580. <div class="sb-out">
  581. <div class="sb-in">
  582.  
  583. <!--🌿🌿🌿🌿🌿🌿🌿-->
  584. <!------ SIDEBAR TITLE ------>
  585. <div class="sb-heading">sidebar title</div>
  586.  
  587. </div>
  588. </div>
  589.  
  590. <div class="hash-links">
  591.  
  592. <!--🌿🌿🌿🌿🌿🌿🌿-->
  593. <!------ SIDEBAR JUMP LINKS ------>
  594. <!--
  595. 1. put a name between the quote marks of href=""
  596. 2. remember to INCLUDE the hashtag!
  597. 3. you will have to use this name later
  598. -->
  599.  
  600. <!--------------------------------->
  601. <!-- start one sidebar jump link -->
  602. <!--πŸ™πŸ™πŸ™πŸ™πŸ™πŸ™πŸ™-->
  603.  
  604. <!--🌿🌿🌿🌿-->
  605. <a class="bullet-row" href="#one">
  606. <div class="bullet-out">
  607. <div class="bullet-in"></div>
  608. </div>
  609.  
  610. <!--🌿🌿🌿🌿-->
  611. <div class="bullet-text">Example question 1</div>
  612. </a>
  613.  
  614. <!--πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘-->
  615. <!-- end a sidebar jump link -->
  616. <!--------------------------------->
  617.  
  618.  
  619.  
  620. <!--------------------------------->
  621. <!-- start one sidebar jump link -->
  622. <!--πŸ™πŸ™πŸ™πŸ™πŸ™πŸ™πŸ™-->
  623.  
  624. <!--🌿🌿🌿🌿-->
  625. <a class="bullet-row" href="#two">
  626. <div class="bullet-out">
  627. <div class="bullet-in"></div>
  628. </div>
  629.  
  630. <!--🌿🌿🌿🌿-->
  631. <div class="bullet-text">Example question 2</div>
  632. </a>
  633.  
  634. <!--πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘-->
  635. <!-- end a sidebar jump link -->
  636. <!--------------------------------->
  637.  
  638.  
  639.  
  640. <!--------------------------------->
  641. <!-- START ASKBOX JUMP LINK -->
  642. <!--πŸ™πŸ™πŸ™πŸ™πŸ™πŸ™πŸ™-->
  643.  
  644. <!--🌿🌿🌿🌿-->
  645. <a class="bullet-row" href="#askbox">
  646. <div class="bullet-out">
  647. <div class="bullet-in"></div>
  648. </div>
  649.  
  650. <!--🌿🌿🌿🌿-->
  651. <div class="bullet-text">Ask a question</div>
  652. </a>
  653.  
  654. <!--πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘-->
  655. <!-- END ASKBOX JUMP LINK -->
  656. <!--------------------------------->
  657. </div><!--hash-links-->
  658. </div><!--end sidebar-->
  659.  
  660.  
  661.  
  662.  
  663. <div id="maain">
  664.  
  665. <div class="header">
  666.  
  667. <!--🌿🌿🌿🌿🌿🌿🌿-->
  668. <!------ HEADER TITLE------>
  669. <div class="header-text">header title</div>
  670.  
  671. <!--🌿🌿🌿🌿🌿🌿🌿-->
  672. <!------ HEADER IMAGE ------>
  673. <!-- put the image url between quote marks of src="" -->
  674. <img class="banner" src="https://static.tumblr.com/snld4jp/hi0s2p1dd/veqgfda.gif">
  675.  
  676. </div><!--do not delete this line-->
  677.  
  678.  
  679.  
  680.  
  681.  
  682. <!--🌿🌿🌿🌿🌿🌿🌿-->
  683. <!------ QUESTIONS & ANSWERS ------>
  684. <!--
  685. put the name that you'd assigned (to the sidebar jump links)
  686. between the quote marks of id="" (first line of each block)
  687.  
  688. hashtag is NOT NEEDED HERE
  689.  
  690. e.g. for the sidebar: href="#one"
  691. for this: id="one"
  692. -->
  693.  
  694. <!------------------------------>
  695. <!-- start a question block -->
  696. <!--πŸ™πŸ™πŸ™πŸ™πŸ™πŸ™πŸ™-->
  697.  
  698. <!--🌿🌿🌿🌿-->
  699. <div id="one" class="one-question">
  700. <div class="the-question">
  701. <div class="q-out">
  702. <div class="q-in">
  703. <div class="q-mark">?</div>
  704. </div><!--q-in-->
  705. </div><!--q-out-->
  706.  
  707. <!--🌿🌿🌿🌿-->
  708. <div class="question-text">Example question 1</div>
  709. </div><!--end question text-->
  710.  
  711. <div class="the-answer">
  712. <!--🌿🌿🌿🌿-->
  713.  
  714. An answer for example question 1.
  715. <p>
  716. <special>special text</special>
  717. <p>
  718. <a href="https://google.com">links</a> are capitalized.
  719. <br>
  720. To uncapitalize: <a class="uncaps" href="URL">links</a>
  721.  
  722. <!-------------->
  723. </div><!--end answer text | do not delete this line-->
  724. <div class="sq"></div>
  725. </div>
  726.  
  727. <!--πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘-->
  728. <!-- end a question block -->
  729. <!-------------------------->
  730.  
  731.  
  732.  
  733.  
  734.  
  735. <!------------------------------>
  736. <!-- start a question block -->
  737. <!--πŸ™πŸ™πŸ™πŸ™πŸ™πŸ™πŸ™-->
  738.  
  739. <!--🌿🌿🌿🌿-->
  740. <div id="two" class="one-question">
  741. <div class="the-question">
  742. <div class="q-out">
  743. <div class="q-in">
  744. <div class="q-mark">?</div>
  745. </div><!--q-in-->
  746. </div><!--q-out-->
  747.  
  748. <!--🌿🌿🌿🌿-->
  749. <div class="question-text">Example question 2</div>
  750. </div><!--end question text-->
  751.  
  752. <div class="the-answer">
  753. <!--🌿🌿🌿🌿-->
  754.  
  755. An answer for example question 2.
  756.  
  757. <!-------------->
  758. </div><!--end answer text | do not delete this line-->
  759. <div class="sq"></div>
  760. </div>
  761.  
  762. <!--πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘-->
  763. <!-- end a question block -->
  764. <!-------------------------->
  765.  
  766.  
  767.  
  768.  
  769.  
  770. <!------------------------------>
  771. <!-- start askbox section -->
  772. <!--πŸ™πŸ™πŸ™πŸ™πŸ™πŸ™πŸ™-->
  773. <div id="askbox" class="one-question">
  774. <div class="the-question">
  775. <div class="q-out">
  776. <div class="q-in">
  777. <div class="q-mark">?</div>
  778. </div><!--q-in-->
  779. </div><!--q-out-->
  780.  
  781. <!--🌿🌿🌿🌿-->
  782. <div class="question-text">Ask a question</div>
  783. </div><!--end question text-->
  784.  
  785.  
  786. <div class="the-answer">
  787. <!--🌿🌿🌿🌿-->
  788.  
  789. <caps>Question guidelines:</caps>
  790.  
  791. <ul>
  792. <li>some text to make sure people've read your faq
  793. <li>here's another line
  794. </ul>
  795.  
  796. <!------------->
  797. <!--🌿🌿🌿🌿-->
  798. <!------ THE ACTUAL ASKBOX ------>
  799. <!-- replace YOURBLOGURL (after /ask_form/ with your username -->
  800.  
  801. <p><iframe frameborder="0" id="ask_form" scrolling="no"
  802.  
  803. src="https://www.tumblr.com/ask_form/YOURBLOGURL.tumblr.com" style="background-color:transparent; overflow:hidden;"
  804.  
  805. width="100%" height="260px">
  806.  
  807. </iframe>
  808. <!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  809. </div><!--end answer text-->
  810. <div class="sq"></div>
  811. </div><!--end one question-->
  812. <!--πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘πŸ›‘-->
  813. <!-- end askbox section -->
  814. <!-------------------------->
  815.  
  816.  
  817. <!--do not delete below this line-->
  818. </div><!--maain-->
  819. </div><!--h-b-->
  820. </div><!--h-a-->
  821.  
  822. <a class="glenjamin" href="//glenthemes.tumblr.com" title="page by glenthemes"><i data-feather="code"></i></a>
  823.  
  824. <script>feather.replace()</script>
  825. </body>
  826. </html>
Advertisement
Add Comment
Please, Sign In to add comment