API tools faq
paste
aeternaphantasia

faq page #01: river

aeternaphantasia
Jun 10th, 2019
1,336
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.79 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <title>seek all the answers.</title> <!--change the title of the page here! this will appear as the title at your current tab.-->
  4. <link rel="shortcut icon" href="{Favicon}">
  5.  
  6. <head>
  7. <!--
  8.  
  9. FAQ page #01 (Page #06): River
  10. coded by kuzuriha
  11.  
  12. 1. Don't remove the credit.
  13. 2. Don't move the credit. Just leave it there.
  14. 3. Don't use as a base code.
  15. 4. Please enjoy! If you find any bugs, please contact me! c:
  16.  
  17. -->
  18. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  19.  
  20. <script src="https://static.tumblr.com/wdp3vza/mAipd8pay/jquery.sticky-kit.min.js"></script>
  21.  
  22. <script src="https://static.tumblr.com/wdp3vza/pJvosgmgd/jquery.style-my-tooltips.js"></script>
  23.  
  24. <script>
  25.  
  26. (function($){
  27.  
  28. $(document).ready(function(){
  29.  
  30. $("a[title]").style_my_tooltips({
  31.  
  32. tip_follows_cursor:true,
  33.  
  34. tip_delay_time:0,
  35.  
  36. tip_fade_speed:0,
  37.  
  38. attribute:"title"
  39.  
  40. });
  41.  
  42. });
  43.  
  44. })(jQuery);
  45.  
  46. </script>
  47. <style type="text/css">
  48. @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
  49. /**variables**/
  50. :root{
  51. --body:#1F1F1F;
  52. --accent:#D6E8FF;
  53. --bg:#F6F6F6;
  54. }
  55.  
  56. iframe.tmblr-iframe {
  57. z-index:99999999999999!important;
  58. top:0!important;
  59. right:0!important;
  60. opacity:0.4;
  61. /* delete invert(1) from here */
  62. filter:invert(1) contrast(150%);
  63. -webkit-filter:invert(1) contrast(150%);
  64. -o-filter:invert(1) contrast(150%);
  65. -moz-filter:invert(1) contrast(150%);
  66. -ms-filter:invert(1) contrast(150%);
  67. /* to here if your blog has a dark background */
  68. transform:scale(0.65);
  69. transform-origin:100% 0;
  70. -webkit-transform:scale(0.65);
  71. -webkit-transform-origin:100% 0;
  72. -o-transform:scale(0.65);
  73. -o-transform-origin:100% 0;
  74. -moz-transform:scale(0.65);
  75. -moz-transform-origin:100% 0;
  76. -ms-transform:scale(0.65);
  77. -ms-transform-origin:100% 0;}
  78.  
  79. iframe.tmblr-iframe:hover {
  80. opacity:0.6!important;}
  81.  
  82. ::-webkit-scrollbar{
  83. width:6px;
  84. }
  85.  
  86. ::-webkit-scrollbar-thumb:vertical{
  87. background:var(--accent);
  88. height:auto;
  89. }
  90.  
  91. ::selection{
  92. background:var(--accent);
  93. }
  94.  
  95. ::-moz-selection{
  96. background:var(--accent);
  97. }
  98.  
  99. body{
  100. margin:0;
  101. padding:0;
  102. font-family:'Muli';
  103. font-size:11px;
  104. color:var(--body);
  105. background:var(--bg);
  106. }
  107.  
  108. a{
  109. text-decoration:none;
  110. color:var(--body);
  111. }
  112.  
  113. #container{
  114. width:650px;
  115. margin:0 auto;
  116. margin-top:50px;
  117. }
  118.  
  119. #header{
  120. background:#fff;
  121. width:100%;
  122. height:120px;
  123. }
  124.  
  125. #icon{
  126. float:left;
  127. padding:20px;
  128. width:64px;
  129. margin:10px;
  130. height:64px;
  131. }
  132.  
  133. #icon img{
  134. width:64px;
  135. height:64px;
  136. max-width:64px;
  137. max-height:64px;
  138. }
  139.  
  140. #desc{
  141. width:140px;
  142. height:40px;
  143. font-size:10px;
  144. float:left;
  145. padding:10px;
  146. margin-top:30px;
  147. font-style:italic;
  148. }
  149.  
  150. #navlink{
  151. padding:20px;
  152. margin-top:33px;
  153. float:left;
  154. }
  155.  
  156. .navlink a{
  157. display:inline-block;
  158. margin-right:10px;
  159. box-shadow:inset 0 -3px 0 var(--accent);
  160. }
  161.  
  162. .question, .answer, .askbox{
  163. width:500px;
  164. position:relative;
  165. margin:0 auto;
  166. margin-top:15px;
  167. min-height:60px;
  168. padding:20px;
  169. }
  170.  
  171. .answer{
  172. margin-bottom:15px;
  173. }
  174.  
  175. .questionicon, .answericon{
  176. width:48px;
  177. height:48px;
  178. float:left;
  179. }
  180.  
  181. .answericon{
  182. float:right;
  183. }
  184.  
  185. .questionicon img, .answericon img{
  186. width:48px;
  187. height:48px;
  188. max-width:48px;
  189. max-height:48px;
  190. }
  191.  
  192. .question_text, .answer_text{
  193. text-align:justify;
  194. padding:15px;
  195. width:80%;
  196. }
  197.  
  198. .question_text{
  199. float:left;
  200. margin-left:20px;
  201. background:var(--accent);
  202. min-height:30px;
  203. }
  204.  
  205. .question_text a{
  206. font-weight:700;
  207. }
  208.  
  209. .answer_text{
  210. background:#fff;
  211. min-height:30px;
  212. }
  213.  
  214. .answer_text a{
  215. font-weight:700;
  216. box-shadow:inset 0 -3px 0 var(--accent);
  217. }
  218.  
  219. .askbox{
  220. background:#fff;
  221. height:190px;
  222. margin-top:50px;
  223. margin-bottom:50px;
  224. }
  225.  
  226. #credit{
  227. position:fixed;
  228. bottom:10px;
  229. right:10px;
  230. padding:10px;
  231. text-align:center;
  232. min-width:30px;
  233. background:#fff;
  234. }
  235. </style>
  236. </head>
  237.  
  238. <body>
  239. <div id="container">
  240.  
  241. <div id="header">
  242. <div id="icon"><img src="https://i.imgur.com/Wh7jFSI.png"/><!--change the icon image here!--></div>
  243.  
  244. <div id="desc">
  245. <!--this is your description. keep it short, please!-->
  246. we have rivers running wild,
  247. <br>
  248. how could i have been so blind?
  249. </div><!--end desc-->
  250.  
  251. <div id="navlink">
  252. <div class="navlink">
  253. <a href="/">home</a>
  254. <a href="/archive">past</a>
  255. <!--you can have maximum of 7 links here.-->
  256. <a href="#">one</a>
  257. <a href="#">two</a>
  258. <a href="#">three</a>
  259. <a href="#">four</a>
  260. <a href="#">five</a>
  261. </div>
  262. </div><!--end navlink-->
  263.  
  264. </div><!--end header-->
  265.  
  266. <!--
  267.  
  268. Attention!
  269.  
  270. To use this page, you have to manually copy and paste the whole portion of code below. I've labeled the chuck of code you have to copy, and remember to copy them BEFORE the div where it says askbox.
  271.  
  272. -->
  273.  
  274. <!--start copying from here-->
  275. <div class="question">
  276. <div class="questionicon">
  277. <!--you can change the icon of the question (lefthand) here-->
  278. <img src="https://i.imgur.com/TNTGvR4.png"/></div>
  279. <!--this is where you put your question-->
  280. <div class="question_text">Hello, what is this?</div>
  281. </div>
  282.  
  283. <div class="answer">
  284. <!--you can change the icon of the answer (righthand) here-->
  285. <div class="answericon"><img src="https://i.imgur.com/OaO1UVp.png"/></div>
  286. <!--this is where you put your answer-->
  287. <div class="answer_text">This is <a href="//kuzuriha.tumblr.com">@kuzuriha's</a> first <b>faq</b> page, titled River. She needs to be more creative with her names, really.</div>
  288. </div>
  289. <!--end copying here-->
  290.  
  291. <!--start copying from here-->
  292. <div class="question">
  293. <div class="questionicon"><img src="https://i.imgur.com/TNTGvR4.png"/></div>
  294. <div class="question_text">Why did she make this page?</div>
  295. </div>
  296.  
  297. <div class="answer">
  298. <div class="answericon"><img src="https://i.imgur.com/OaO1UVp.png"/></div>
  299. <div class="answer_text">The reason is because she needs to submit her entry to <a href="//codingcabin.tumblr.com">@codingcabin's</a> <b>Pagecraft</b> challenge before she gets submerged again in her internship but she just absolutely had no idea what page would be good (she's scrapped a lot of pages that didn't work out) so she ended up with this page.</div>
  300. </div>
  301. <!--end copying here-->
  302.  
  303. <!--start copying from here-->
  304. <div class="question">
  305. <div class="questionicon"><img src="https://i.imgur.com/TNTGvR4.png"/></div>
  306. <div class="question_text">How do I use this page?</div>
  307. </div>
  308.  
  309. <div class="answer">
  310. <div class="answericon"><img src="https://i.imgur.com/OaO1UVp.png"/></div>
  311. <div class="answer_text">Go to your <b>Customize</b> page, select <b>Add a Page</b> and don't forget to select <i>Custom Layout</i> at the dropdown option. Copy the whole page and tweak according to your needs!</div>
  312. </div>
  313. <!--end copying here-->
  314.  
  315. <!--start copying from here-->
  316. <div class="question">
  317. <div class="questionicon"><img src="https://i.imgur.com/TNTGvR4.png"/></div>
  318. <div class="question_text">What are the features of this page?</div>
  319. </div>
  320.  
  321. <div class="answer">
  322. <div class="answericon"><img src="https://i.imgur.com/OaO1UVp.png"/></div>
  323. <div class="answer_text">Have as much questions and answers you need, askbox included. I believe this page covers all the basic features of a faq page...or so I think. Aside from that, you can have a maximum of 7 custom links up there in the navigation bar and a short description. Please <b>please</b> keep it short, 4 lines max.</div>
  324. </div>
  325. <!--end copying here-->
  326.  
  327. <!--start copying from here-->
  328. <div class="question">
  329. <div class="questionicon"><img src="https://i.imgur.com/TNTGvR4.png"/></div>
  330. <div class="question_text">What are the do's and the don'ts of this page?</div>
  331. </div>
  332.  
  333. <div class="answer">
  334. <div class="answericon"><img src="https://i.imgur.com/OaO1UVp.png"/></div>
  335. <div class="answer_text">All of the do's and the don'ts of using this page (or any of my codes, actually) can be found in my terms of use. To make it concise: do use, do tweak, do not steal. Also, do read the whole code and notes I've included here before asking me.</div>
  336. </div>
  337. <!--end copying here-->
  338.  
  339. <!--start copying from here-->
  340. <div class="question">
  341. <div class="questionicon"><img src="https://i.imgur.com/TNTGvR4.png"/></div>
  342. <div class="question_text">Where are the icons from?</div>
  343. </div>
  344.  
  345. <div class="answer">
  346. <div class="answericon"><img src="https://i.imgur.com/OaO1UVp.png"/></div>
  347. <div class="answer_text">They're all from the wonderful <a href="https://kyloren.tumblr.com/icons/misc">@kyloren</a>!</div>
  348. </div>
  349. <!--end copying here-->
  350.  
  351. <!--start copying from here-->
  352. <div class="question">
  353. <div class="questionicon"><img src="https://i.imgur.com/TNTGvR4.png"/></div>
  354. <div class="question_text">Anything else worth mentioning?</div>
  355. </div>
  356.  
  357. <div class="answer">
  358. <div class="answericon"><img src="https://i.imgur.com/OaO1UVp.png"/></div>
  359. <div class="answer_text">I hope you like this page and enjoy it as much as I did when I'm making this page! This is very simple compared to my usual style, so I'm pretty sure this looks pretty generic compared to my usual style (which is just about as generic anyway, lmao). Feel free to hit me up on my ask if anything goes wrong!</div>
  360. </div>
  361. <!--end copying here-->
  362.  
  363. <!--askbox-->
  364. <div class="askbox">
  365. <!--to enable the askbox, replace where it says YOUR URL HERE with your own blog URL. Bear in mind that you need to have your askbox enabled to enable this askbox.-->
  366.  
  367. <iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/YOUR_URL_HERE" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  368. </div>
  369.  
  370. </div><!--end container-->
  371.  
  372. <!--credit. please do not remove this!-->
  373. <div id="credit"><a href="//kuzuriha.tumblr.com">thm</a></div>
  374. </body>
  375. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!