API tools faq
paste
Advertisement
mogimochi

FAQ Page [01] Kyusoku

mogimochi
Nov 21st, 2014
4,010
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.11 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!-----------------------------------------------------------------------
  6.  
  7. FAQ Page [01] Kyusoku
  8. by yukoki/s-ekki
  9.  
  10. 1. Light/Heavy CSS editting is allowed.
  11. 2. Do not use as base code.
  12. 3. Do not remove credit.
  13. 4. Do not claim theme as your own.
  14. 5. Do not redistribute.
  15.  
  16. --------------------------------------------------------------------------
  17.  
  18. Please look out for notes throughout the code
  19. to help you in customizing the page!!
  20.  
  21. --------------------------------------------------------------------------
  22.  
  23. --------------------------------------------------- UPDATE VER 150118 -->
  24.  
  25. <title>F.A.Q.</title>
  26. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  27. <link rel="shortcut icon" href="{Favicon}" />
  28.  
  29. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  30.  
  31. <script src="https://static.tumblr.com/ikeq9mi/DfYl6o46t/scrolltotop.min.js"></script>
  32.  
  33. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  34.  
  35. <script>
  36.  
  37. $(document).ready(function(){
  38.  
  39. // Select all links with hashes
  40. $('a[href*="#"]')
  41. // Remove links that don't actually link to anything
  42. .not('[href="#"]')
  43. .not('[href="#0"]')
  44. .click(function(event) {
  45. // On-page links
  46. if (
  47. location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
  48. &&
  49. location.hostname == this.hostname
  50. ) {
  51. // Figure out element to scroll to
  52. var target = $(this.hash);
  53. target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
  54. // Does a scroll target exist?
  55. if (target.length) {
  56. // Only prevent default if animation is actually gonna happen
  57. event.preventDefault();
  58. $('html, body').animate({
  59. scrollTop: target.offset().top
  60. }, 1000, function() {
  61. // Callback after animation
  62. // Must change focus!
  63. var $target = $(target);
  64. $target.focus();
  65. if ($target.is(":focus")) { // Checking if the target was focused
  66. return false;
  67. } else {
  68. $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
  69. $target.focus(); // Set focus again
  70. };
  71. });
  72. }
  73. }
  74. });
  75. });
  76. </script>
  77.  
  78. <style type="text/css">
  79.  
  80.  
  81.  
  82. /******************************************************** BACK TO TOP ARROW */
  83.  
  84. #scrollToTop:link, #scrollToTop:visited {
  85. color: #a1a1a1; /** colour of back to top arrow **/
  86. background-color: #f2f2f2; /** colour of back to top background **/
  87. display: none;
  88. position: fixed;
  89. bottom: 15px;
  90. left: 15px;
  91. width: 30px;
  92. height: 30px;
  93. line-height: 30px;
  94. text-align: center;
  95. font-size: 20px;
  96. transition: 0.8s;
  97. -moz-transition: 0.8s;
  98. -webkit-transition: 0.8s;
  99. -o-transition: 0.8s;
  100. }
  101.  
  102. #scrollToTop:link:hover {
  103. background-color: #000000; /** bg colour of back to top button when hovered **/
  104. color: #a1a1a1; /** colour of back to top arrow when hovered **/
  105. }
  106.  
  107.  
  108.  
  109.  
  110. /*********************************************** SCROLLBAR + TEXT SELECTION */
  111.  
  112. ::-webkit-scrollbar { width: 7px; }
  113. ::-webkit-scrollbar-track-piece {
  114. background-color: #000000; /** for scrollbar bg **/
  115. }
  116. ::-webkit-scrollbar-thumb:vertical {
  117. width: 1px;
  118. background-color: #FFEA4D; /** for scrollbar line colour **/
  119. border-top: 4px solid #000000; /** for scrollbar bg **/
  120. border-right: 3px solid #000000; /** for scrollbar bg **/
  121. border-bottom: 4px solid #000000; /** for scrollbar bg **/
  122. border-left: 3px solid #000000; /** for scrollbar bg **/
  123. }
  124.  
  125. ::selection {
  126. color: #ffffff; /** text selection text **/
  127. background-color: #FFEA4D; /** text selection bg **/
  128. }
  129.  
  130. ::-moz-selection {
  131. color: #ffffff; /** text selection text **/
  132. background-color: #FFEA4D; /** text selection bg **/
  133. }
  134.  
  135. ::-webkit-selection {
  136. color: #ffffff; /** text selection text **/
  137. background-color: #FFEA4D; /** text selection bg **/
  138. }
  139.  
  140.  
  141.  
  142.  
  143. /********************************************************************* BODY */
  144.  
  145. body {
  146. background-color: #ffffff; /** background colour **/
  147. background-attachment: fixed;
  148. margin: 0;
  149. word-wrap: break-word;
  150. }
  151. a { text-decoration:none; }
  152.  
  153.  
  154.  
  155.  
  156. /******************************************************************* HEADER */
  157.  
  158. #headerco {
  159. position: fixed;
  160. z-index: 10000;
  161. top: 0;
  162. left: 0;
  163. width: 100%;
  164. }
  165.  
  166. #header {
  167. background-color: #000000; /** header background colour **/
  168. padding: 20px;
  169. }
  170.  
  171. .headertxt {
  172. font-size: 10px;
  173. text-align: center;
  174. }
  175.  
  176. .headertitle {
  177. padding: 0 16px;
  178. letter-spacing: 3px;
  179. font-size: 10px;
  180. font-family: courier new;
  181. color: #ffffff; /** header title colour **/
  182. }
  183.  
  184. .navb {
  185. padding: 10px 26px;
  186. }
  187.  
  188. .navi {
  189. color: #ffffff; /** navigation icons colour **/
  190. transition: 0.3s;
  191. -moz-transition: 0.3s;
  192. -webkit-transition: 0.3s;
  193. -o-transition: 0.3s;
  194. }
  195.  
  196. .navit {
  197. width: 62px;
  198. margin-left: -26px;
  199. position: absolute;
  200. font-family: courier new;
  201. text-transform: uppercase;
  202. opacity: 0;
  203. color: #ffffff; /** nav icons text colour **/
  204. border-bottom: 4px solid #FFEA4D; /** nav icons hover bottom border **/
  205. padding-bottom: 16px;
  206. transition: 0.3s;
  207. -moz-transition: 0.3s;
  208. -webkit-transition: 0.3s;
  209. -o-transition: 0.3s;
  210. }
  211.  
  212. .navb:hover .navit {opacity: 1;}
  213. .navb:hover .navi {opacity: 0;}
  214.  
  215.  
  216.  
  217.  
  218. /************************************************************* MAIN CONTENT */
  219.  
  220. #content {
  221. width: 460px;
  222. margin-top: -330px;
  223. margin-bottom: 140px;
  224. padding: 30px;
  225. }
  226.  
  227. .block {
  228. border-top: 250px solid transparent;
  229. width: 460px;
  230. text-align: left;
  231. margin-top: 260px;
  232. }
  233.  
  234.  
  235.  
  236. /************************************************************* BLOCK TITLES **
  237.  
  238. THAT IS, the customization for those fancy decorative lines, the number on the left, as well as the block title itself, of course!
  239.  
  240. *****************************************************************************/
  241.  
  242. #blocktitle {
  243. margin: -30px -10px;
  244. float: left;
  245. }
  246.  
  247. .blockno {
  248. font-family: courier new;
  249. font-size: 40px;
  250. font-weight: 900;
  251. font-style: italic;
  252. position: absolute;
  253. margin: -20px -140px;
  254. color: #000000; /** colour of the number on the left **/
  255.  
  256. /** if you don't want the number on the left, add this line:
  257.  
  258. display: none;
  259.  
  260. ***********************************************************/
  261. }
  262.  
  263. .hori1 {
  264. background-color: #000000; /** BLACK horizontal line **/
  265. width: 90px;
  266. height: 3px;
  267. margin-left: -50px;
  268. }
  269.  
  270. .vert1, .vert2 {
  271. height: 150px;
  272. width: 3px;
  273. background-color: #000000; /** BLACK vertical longer line **/
  274. margin: -28px -22px;
  275. position: absolute;
  276. }
  277.  
  278. .vert2 {
  279. margin: -18px -36px;
  280. height: 100px;
  281. width: 2px;
  282. z-index: -1;
  283. background-color: #FFEA4D; /** YELLOW vertical shorter line **/
  284. }
  285.  
  286. .blocktitletxt {
  287. font-family: courier new;
  288. font-size: 30px;
  289. font-weight: 800;
  290. text-transform: uppercase;
  291. position: absolute;
  292. margin: -14px 56px;
  293. font-style: italic;
  294. color: #000000; /** block title text colour **/
  295. text-shadow: 2px 0 0 #FFEA4D; /** text shadow. if unwanted, delete. **/
  296. }
  297.  
  298. .blocknodeco {
  299. position: absolute;
  300. margin: -3px -30px;
  301. font-style: normal;
  302. color: #000000; /** the arrow deco next to the number. **/
  303.  
  304. /** if unwanted, add this line:
  305.  
  306. display: none;
  307.  
  308. *******************************/
  309. }
  310.  
  311.  
  312.  
  313.  
  314. /*************************************************************** BLOCK TEXT **
  315.  
  316. This is for your FAQ answers, as well as the text you can put under the section block titles.
  317.  
  318. *****************************************************************************/
  319.  
  320. .blocktext {
  321. text-align: left;
  322. font-family: courier new;
  323. font-size: 12px;
  324. color: #000000; /** text colour **/
  325. background-color: #f5f5f5; /** background of text. delete if unwanted. **/
  326. line-height: 20px;
  327. }
  328.  
  329. .blocktext a {
  330. text-decoration: underline;
  331. color: #777777; /** linked text **/
  332. }
  333.  
  334. .blocktext a:hover {
  335. color: #000000; /** linked text when hovered **/
  336. }
  337.  
  338. .blocktext b,strong {
  339. font-weight: 2000;
  340. text-shadow: 1px 0 0 #FFEA4D;
  341. }
  342.  
  343. .blocktext i,em {
  344. font-style: italic;
  345. color: #aaaaaa;
  346. }
  347.  
  348.  
  349. /******************************************************** TEXT MINI HEADERS **
  350.  
  351. This is for small mini headers you might want to put in. e.g, the 'FREQUENTLY ASKED QUESTIONS' text in the preview page.
  352.  
  353. *****************************************************************************/
  354.  
  355. .blocktextcuta {
  356. border-bottom: 3px solid #f1f1f1; /** mini header underline 1 **/
  357. padding: 3px 0;
  358. margin-top: 20px;
  359. margin-bottom: 10px;
  360. }
  361.  
  362. .blocktextcut {
  363. color: #000000; /** mini header text colour **/
  364. border-bottom: 3px solid #FFEA4D; /** mini header underline 2 **/
  365. font-family: courier new;
  366. font-size: 14px;
  367. text-transform: uppercase;
  368. padding: 3px 10px;
  369. letter-spacing: 1px;
  370. font-style: italic;
  371. }
  372.  
  373.  
  374.  
  375.  
  376. /***************************************************************** FAQ LINK **
  377.  
  378. In the section header. This is the styling for the faq list there.
  379.  
  380. *****************************************************************************/
  381.  
  382. .faqlink {
  383. background-color: #f1f1f1; /** background colour of faq link **/
  384. color: #777777; /** text colour of faq link **/
  385. font-family: courier new;
  386. font-size: 11px;
  387. padding: 6px 20px 6px 70px;
  388. text-transform: uppercase;
  389. margin-bottom: 5px;
  390. }
  391.  
  392. .faqlink:hover {
  393. text-decoration: line-through;
  394. }
  395.  
  396. .faqlinkicon {
  397. position: absolute;
  398. padding: 6px 20px;
  399. background-color: #e8e8e8; /** the left border **/
  400. color: #555; /** the left border icon **/
  401. margin: -6px -70px;
  402. transition: 0.2s;
  403. -moz-transition: 0.2s;
  404. -webkit-transition: 0.2s;
  405. -o-transition: 0.2s;
  406. }
  407.  
  408.  
  409.  
  410.  
  411. /************************************************************ SECTION LINKS **
  412.  
  413. Appears below the section header block, allows you to skip to different sections.
  414.  
  415. *****************************************************************************/
  416.  
  417. .sectlink {
  418. margin-right: 5px;
  419. background-color: #000000; /** link background colour **/
  420. color: #ffffff; /** link text colour **/
  421. float: left;
  422. font-family: courier new;
  423. font-size: 10px;
  424. text-transform: uppercase;
  425. text-align: center;
  426. padding: 6px 0;
  427. width: 111px;
  428. transition: 0.3s;
  429. -moz-transition: 0.3s;
  430. -webkit-transition: 0.3s;
  431. -o-transition: 0.3s;
  432. }
  433.  
  434. .sectionlinks {
  435. margin: 10px 0;
  436. float: left;
  437. width: 500px;
  438. }
  439.  
  440. .sectlink:hover {
  441. background-color: #f1f1f1; /** link background colour when hovered **/
  442. color: #bbbbbb; /** link text colour when hovered **/
  443. }
  444.  
  445.  
  446.  
  447.  
  448. /**************************************************************** FAQ BLOCK **
  449.  
  450. Your FAQ styling is here! Your answers are styled according to .blocktext, which was three sections up.
  451.  
  452. *****************************************************************************/
  453.  
  454. .bkt {
  455. background-color: #ffffff; /** question background colour **/
  456. color: #000000; /** question colour **/
  457. border-left: 24px solid #FFEA4D; /** question left border colour **/
  458. font-size: 20px;
  459. font-weight: 900;
  460. text-transform: uppercase;
  461. line-height: 26px;
  462. letter-spacing: 1px;
  463. padding: 0 15px 0 17px;
  464. margin-right: 5px;
  465. margin-bottom: 10px;
  466. }
  467.  
  468. .bracket1, .bracket2 {
  469. position: absolute;
  470. font-size: 50px;
  471. font-weight: 100;
  472. color: #e6e6e6; /** the bracket borders colours **/
  473. margin: -40px -50px;
  474. }
  475. .bracket2 {margin: 20px 480px;}
  476.  
  477. {CustomCSS}
  478.  
  479. </style>
  480. </head>
  481. <body>
  482.  
  483. <!------------ below line is for the scroll to top button ------------------>
  484. <a href="javascript:;" id="scrollToTop"><i class="fa fa-angle-double-up"></i></a>
  485.  
  486.  
  487. <!---------------------------------------------------------------------------
  488.  
  489. Below line is for the corner image change the value of
  490. "width: 440px;" for different widths.
  491. Replace the image link with your own. :v
  492.  
  493. ---------------------------------------------------------------------------->
  494. <img style="position:fixed;right:0;bottom:0; z-index:-1000; width:440px; " src="https://31.media.tumblr.com/31b8003c79213d16dbde09efd3087bf4/tumblr_inline_nfc8cll73X1rshr70.png">
  495.  
  496.  
  497. <center>
  498.  
  499. <div id="headerco">
  500. <div id="header">
  501. <div class="headertxt">
  502.  
  503. <span class="headertitle">「 FREQUENTLY ASKED QUESTIONS 」</span><!--header title-->
  504.  
  505. <a href="/"><span class="navb"><span class="navit">back</span><span class="navi"><i class="fa fa-exclamation-triangle"></i></span></a></span>
  506. <a href="#sect004"><span class="navb"><span class="navit">message</span><span class="navi"><i class="fa fa-envelope-o"></i></span></a></span>
  507. <a href="/archive"><span class="navb"><span class="navit">remember</span><span class="navi"><i class="fa fa-calendar"></i></span></a></span>
  508. <a href="http://yukoki.tumblr.com"><span class="navb"><span class="navit">credit</span><span class="navi"><i class="fa fa-code"></i></span></a></span>
  509. <span class="navb"><img src="http://media.tumblr.com/tumblr_meeq9hznHe1r7v6wt.gif"></span>
  510.  
  511. </div><!--headertxt-->
  512. </div><!--header-->
  513. </div><!--headerco-->
  514.  
  515.  
  516.  
  517.  
  518.  
  519. <div id="content">
  520.  
  521. <!---------------------------------------------------------------------------
  522.  
  523. Content blocks start with <div class="block">,
  524. ends with </div><!--block-- >.
  525. Your content for that particular block goes in between.
  526. If your content appears messed up / stuff appear out of
  527. line / bottom blocks have no styling,
  528. it's probably because you fit in an extra </div> somewhere.
  529.  
  530. First block is a tutorial block.
  531.  
  532. ---------------------------------------------------------------------------->
  533.  
  534. <div class="block"><!-- block for 001 : sector -->
  535. <a id="sect001"></a><!--sect001 is the target tag-->
  536.  
  537.  
  538.  
  539. <div id="blocktitle"><!-- fancy lines and the block title -->
  540. <div class="blockno"><span class="blocknodeco">»</span>001</div><!-- Don't forget to change the numbers!!-->
  541. <div class="blocktitletxt">sector one</div><!-- block title text -->
  542.  
  543. <div class="hori1"></div><div class="vert1"></div><div class="vert2"></div>
  544. </div><!--blocktitle-->
  545.  
  546.  
  547.  
  548. <span class="blocktext"><!--this text goes under the title-->
  549.  
  550. In this shaken, <strike>twisted</strike> world, I gradually become <i>transparent</i>, unable to be seen.
  551. <b>Please don't bother looking for me</b>; Don't stare at me...
  552. I merely don't want to <i>hurt</i> you, inside a world, that came out of <a href="">someone's imagination</a>.
  553. So please remember me; As vivid as I was.
  554.  
  555. [ <b>Bolded.</b>
  556. <i>Italized.</i>
  557. <a href="/">Linked.</a>
  558. <strike>Striked.</strike> ]
  559.  
  560. </span><!--end of the text block-->
  561.  
  562. <div class="blocktextcuta"><!--mini header-->
  563. <span class="blocktextcut">Frequently Asked Questions</span>
  564. </div>
  565.  
  566.  
  567. <!----------------------------------------------------------------------------
  568.  
  569. Default FAQ link:
  570.  
  571. <a href="#sec1_1"><div class="faqlink"><span class="faqlinkicon"><i class="fa fa-link"></i></span> YOUR QUESTION GOES HERE</div></a>
  572.  
  573. Please ensure that your targets match up!! For more info,
  574. check out nutty-themes' tutorial:
  575.  
  576. http://nutty-themes.tumblr.com/post/91582305562/reposting-this-tutorial-because-i-need-to-set-up-a
  577.  
  578. ---------------------------------------------------------------------------->
  579.  
  580.  
  581. <a href="#sec1_1"><div class="faqlink"><span class="faqlinkicon"><i class="fa fa-link"></i></span> Who is kaneki ken?</div></a>
  582.  
  583. <a href="#sec1_2"><div class="faqlink"><span class="faqlinkicon"><i class="fa fa-link"></i></span> Is he a human or ghoul?</div></a>
  584.  
  585. <a href="#sec1_3"><div class="faqlink"><span class="faqlinkicon"><i class="fa fa-link"></i></span> What is Kagune[赫子]?</div></a>
  586.  
  587.  
  588. <!----------------------------------------------------------------------------
  589.  
  590. Those black links that link to different sectors.
  591. You can change their titles & their quantity.
  592. Ensure the targets are linked properly.
  593.  
  594. Default:
  595.  
  596. <a href="#sect001"><div class="sectlink">sector one</div></a>
  597.  
  598. ----------------------------------------------------------------------------->
  599.  
  600. <div class="sectionlinks">
  601. <a href="#sect001"><div class="sectlink">sector one</div></a>
  602. <a href="#sect002"><div class="sectlink">sector two</div></a>
  603. <a href="#sect003"><div class="sectlink">guidelines</div></a>
  604. <a href="#sect004"><div class="sectlink">askbox</div></a>
  605. </div><!--sectionlinks-->
  606.  
  607. </div><!--end of the [001] sector one block-->
  608.  
  609.  
  610.  
  611.  
  612. <div class="block"><!--first FAQ question-->
  613. <a id="sec1_1"></a>
  614. <span class="blocktext">
  615. <span class="bracket1">┌</span>
  616. <span class="bkt">Who is Kaneki Ken?</span><br><!--your question-->
  617.  
  618. <!--below goes your answer-->
  619.  
  620. <b>Kaneki Ken</b> (金木 研) is the protagonist of <i>Tokyo Ghoul</i>. Formerly a human studying <i>Japanese Literature</i> at Kamii University's Department of Literature</i>, he was transplanted with <a href="http://tokyoghoul.wikia.com/wiki/Rize_Kamishiro">Rize</a>'s kakuhou and became a <b>One-Eyed Ghoul.</b> After joining <a href="http://tokyoghoul.wikia.com/wiki/Anteiku">Anteiku</a> as a part-time waiter, he learns how to live as a Ghoul and became known as <i>Eyepatch (眼帯)</i>.
  621.  
  622. <br><span class="bracket2">┘</span></span>
  623. </div><!--end of first FAQ question block-->
  624.  
  625.  
  626.  
  627.  
  628.  
  629. <div class="block"><!--second FAQ question-->
  630. <a id="sec1_2"></a>
  631. <span class="blocktext">
  632. <span class="bracket1">┌</span>
  633. <span class="bkt">Is he a human or a ghoul?</span><br><!--second question-->
  634.  
  635. <!--below goes your answer-->
  636.  
  637. Unknown, as he was originally a human, before having ghoul organs transplanted into him. As Kaneki said, <b>"My mind is that of a human's, but my body is that of a ghoul's."</b>
  638.  
  639. <br><span class="bracket2">┘</span></span>
  640. </div><!--end of second FAQ question block-->
  641.  
  642.  
  643.  
  644.  
  645.  
  646. <div class="block"><!--third faq question-->
  647. <a id="sec1_3"></a>
  648. <span class="blocktext">
  649. <span class="bracket1">┌</span>
  650. <span class="bkt">What is kagune[赫子]?</span><br><!--third question-->
  651.  
  652. <!--below goes your answer-->
  653.  
  654. A <b>Kagune</b> [赫子; shining child] is a ghoul's <i>predatory organ</i> and functions as their <a href="">weapon</a> and <a href="">claws</a>. It is usually as red as blood <strike>(the colours are varied in the anime to distinguish the kagune of each individual)</strike>; and flexible like the flow of water, but firm and sturdy.
  655.  
  656. <br><span class="bracket2">┘</span></span>
  657. </div><!--end of third FAQ question block-->
  658.  
  659.  
  660.  
  661.  
  662.  
  663.  
  664.  
  665. <div class="block"><!-- block for 002 : sector -->
  666. <a id="sect002"></a><!--sect002 is the target tag-->
  667.  
  668. <div id="blocktitle">
  669. <div class="blockno"><span class="blocknodeco">»</span>002</div>
  670. <div class="blocktitletxt">sector two</div>
  671. <div class="hori1"></div>
  672. <div class="vert1"></div><div class="vert2"></div>
  673. </div><!--blocktitle-->
  674.  
  675. <span class="blocktext">
  676.  
  677. Text here. Type whatever you want.
  678.  
  679. </span>
  680.  
  681. <div class="blocktextcuta">
  682. <span class="blocktextcut">more questions</span>
  683. </div>
  684.  
  685. <a href="#sec2_1"><div class="faqlink"><span class="faqlinkicon"><i class="fa fa-link"></i></span> QUESTION ONE</div></a>
  686. <a href="#sec2_2"><div class="faqlink"><span class="faqlinkicon"><i class="fa fa-link"></i></span> QUESTION TWO</div></a>
  687. <a href="#sec2_3"><div class="faqlink"><span class="faqlinkicon"><i class="fa fa-link"></i></span> QUESTION THREE</div></a>
  688. <a href="#sec2_4"><div class="faqlink"><span class="faqlinkicon"><i class="fa fa-link"></i></span> QUESTION FOUR</div></a>
  689.  
  690. <div class="sectionlinks">
  691. <a href="#sect001"><div class="sectlink">sector one</div></a>
  692. <a href="#sect002"><div class="sectlink">sector two</div></a>
  693. <a href="#sect003"><div class="sectlink">guidelines</div></a>
  694. <a href="#sect004"><div class="sectlink">askbox</div></a>
  695. </div><!--sectionlinks-->
  696.  
  697. </div><!--block-->
  698.  
  699.  
  700. <div class="block"><a id="sec2_1"></a>
  701. <span class="blocktext">
  702. <span class="bracket1">┌</span>
  703. <span class="bkt">QUESTION ONE</span><br>
  704.  
  705. <b>ANSWER ONE.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  706.  
  707. <br><span class="bracket2">┘</span>
  708. </span>
  709. </div><!--block-->
  710.  
  711.  
  712. <div class="block"><a id="sec2_2"></a>
  713. <span class="blocktext">
  714. <span class="bracket1">┌</span>
  715. <span class="bkt">QUESTION TWO</span><br>
  716.  
  717. <b>ANSWER TWO.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  718.  
  719. <br><span class="bracket2">┘</span>
  720. </span>
  721. </div><!--block-->
  722.  
  723.  
  724. <div class="block"><a id="sec2_3"></a>
  725. <span class="blocktext">
  726. <span class="bracket1">┌</span>
  727. <span class="bkt">QUESTION THREE</span><br>
  728.  
  729. <b>ANSWER THREE.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  730.  
  731. <br><span class="bracket2">┘</span>
  732. </span>
  733. </div><!--block-->
  734.  
  735.  
  736. <div class="block"><a id="sec2_4"></a>
  737. <span class="blocktext">
  738. <span class="bracket1">┌</span>
  739. <span class="bkt">QUESTION FOUR</span><br>
  740.  
  741. <b>ANSWER FOUR.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  742.  
  743. <br><span class="bracket2">┘</span>
  744. </span>
  745. </div><!--block-->
  746.  
  747.  
  748.  
  749.  
  750.  
  751.  
  752. <div class="block"><!-- block for 003 : guidelines -->
  753. <a id="sect003"></a><!--sect003 is the target tag-->
  754.  
  755. <div id="blocktitle">
  756. <div class="blockno"><span class="blocknodeco">»</span>003</div>
  757. <div class="blocktitletxt">guidelines</div>
  758. <div class="hori1"></div>
  759. <div class="vert1"></div><div class="vert2"></div>
  760. </div><!--blocktitle-->
  761.  
  762. <span class="blocktext">
  763. The FAQ links don't always have to be linked to FAQ blocks, they can be a list too, as follows:
  764. </span>
  765.  
  766. <div class="blocktextcuta">
  767. <span class="blocktextcut">example list</span>
  768. </div>
  769.  
  770. <!---------------------------------------------------------------------------
  771.  
  772. DEFAULT LIST:
  773.  
  774. <div class="faqlink"><span class="faqlinkicon"><i class="fa fa-angle-right"></i></span> LIST POINT HERE </div>
  775.  
  776. ---------------------------------------------------------------------------->
  777.  
  778. <div class="faqlink"><span class="faqlinkicon"><i class="fa fa-angle-right"></i></span> LIST POINT ONE </div>
  779. <div class="faqlink"><span class="faqlinkicon"><i class="fa fa-angle-right"></i></span> IMPORTANT POINT 2 </div>
  780. <div class="faqlink"><span class="faqlinkicon"><i class="fa fa-angle-right"></i></span> ポイント三 </div>
  781. <div class="faqlink"><span class="faqlinkicon"><i class="fa fa-angle-right"></i></span> FOUR FOUR FOUR FOUR</div>
  782. <div class="faqlink"><span class="faqlinkicon"><i class="fa fa-angle-right"></i></span> 第五号</div>
  783.  
  784.  
  785. <div class="sectionlinks">
  786. <a href="#sect001"><div class="sectlink">sector one</div></a>
  787. <a href="#sect002"><div class="sectlink">sector two</div></a>
  788. <a href="#sect003"><div class="sectlink">guidelines</div></a>
  789. <a href="#sect004"><div class="sectlink">askbox</div></a>
  790. </div><!--sectionlinks-->
  791.  
  792. </div><!--block-->
  793.  
  794.  
  795.  
  796. <div class="block"><!--004askbox--><a id="sect004"></a>
  797.  
  798. <div id="blocktitle">
  799. <div class="blockno"><span class="blocknodeco">»</span>004</div>
  800. <div class="blocktitletxt">contact</div>
  801. <div class="hori1"></div>
  802. <div class="vert1"></div><div class="vert2"></div>
  803. </div><!--blocktitle-->
  804.  
  805. <span class="blocktext">
  806.  
  807. To get your ask box up and running, please remember to paste in your url in the appropriate section!
  808.  
  809. </span>
  810.  
  811. <div class="blocktextcuta">
  812. <span class="blocktextcut">send a message</span>
  813. </div>
  814.  
  815.  
  816. <!---------------------------------------------------------------------------
  817.  
  818. FOR YOUR ASK BOX TO WORK, YOU MUST REMEMBER TO REPLACE YOUR OWN URL WITH THE WORD 'URL' IN THE BELOW CODE!!! IT IS FOUND AS FOLLOWS:
  819.  
  820. <iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/ URL .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]-->
  821.  
  822. <!--------------------------------------------------------------------------->
  823.  
  824. <iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/URL.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]-->
  825.  
  826.  
  827. <div class="sectionlinks">
  828. <a href="#sect001"><div class="sectlink">sector one</div></a>
  829. <a href="#sect002"><div class="sectlink">sector two</div></a>
  830. <a href="#sect003"><div class="sectlink">guidelines</div></a>
  831. <a href="#sect004"><div class="sectlink">askbox</div></a>
  832. </div><!--sectionlinks-->
  833.  
  834. </div><!--block-->
  835.  
  836.  
  837. </div><!--content-->
  838.  
  839. </center>
  840.  
  841. <script src="http://static.tumblr.com/whx9ghv/lSGm6k18m/jquery.scrollto-1.4.2-min.js"></script>
  842. <script src="http://static.tumblr.com/whx9ghv/GJEm6k188/jquery.localscroll-1.2.7-min.js"></script>
  843.  
  844. <script>
  845. $(document).ready(function () {
  846. $.localScroll();
  847. });
  848. </script>
  849.  
  850.  
  851. </body>
  852. </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!