API tools faq
paste
divinethm

volturnus — faq i

divinethm
Oct 7th, 2018
1,514
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.67 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5.  
  6. volturnus — faq i
  7. by divinethemes
  8.  
  9. › do not steal any part of this code
  10. › edit however you want, but only for personal use
  11. › send any questions to divinethemes.tumblr.com/ask
  12. › thank you for using! <3
  13.  
  14.  
  15. — customization —
  16.  
  17. › ctrl/command + f, type "#cfedeb" and replace with desired color to change the accent color
  18. › or you can use the up/down buttons and change them each into different colors if you want
  19. › note that the link border and hover color is different (#eee) for links in the question bubbles
  20. › also note that customization of link colors is different for ones in the questions/answers and ones in the note section
  21. › if you change the width of the chat bubbles and/or number of links, you'll have to adjust the width of the container, the link margins, and more stuff - instructions are not in the code bc it's so different for each combination of width, # of links, etc. so send an ask
  22.  
  23. -->
  24.  
  25. <title>faq — {Name}</title>
  26. <link rel="shortcut icon" href="{Favicon}">
  27.  
  28. <!-- tooltips script-->
  29.  
  30. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  31.  
  32. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  33. <script>
  34. (function($){
  35. $(document).ready(function(){
  36. $("[title]").style_my_tooltips({
  37. tip_follows_cursor:true,
  38. tip_delay_time:200,
  39. tip_fade_speed:300
  40. }
  41. );
  42. });
  43. })(jQuery);
  44. </script>
  45.  
  46. <!--font awesome -->
  47. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
  48.  
  49. <!--fonts-->
  50. <link href="https://fonts.googleapis.com/css?family=Fira+Sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  51.  
  52. <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
  53.  
  54. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">
  55.  
  56. <style type="text/css">
  57.  
  58. @keyframes fadein {from {opacity:0;}to {opacity:1;}}
  59. @-moz-keyframes fadein {from {opacity:0;}to {opacity:1;}}
  60. @-webkit-keyframes fadein {from {opacity:0;}to {opacity:1;}}
  61. @-o-keyframes fadein {from {opacity:0;}to {opacity: 1;}}
  62.  
  63. /*-- scrollbar --*/
  64. ::-webkit-scrollbar {
  65. width:11px;
  66. background:#eee;
  67. }
  68.  
  69. ::-webkit-scrollbar-thumb {
  70. background:#cfedeb;
  71. }
  72.  
  73. ::-webkit-scrollbar,::-webkit-scrollbar-thumb {
  74. border:5px solid #fff;
  75. }
  76.  
  77. /*-- selection --*/
  78. ::-moz-selection { background:#eaeaea; color:#222; }
  79. ::selection { background:#eaeaea; color:#222; }
  80.  
  81. /*-- hide tumblr controls --*/
  82. .tmblr-iframe, .iframe-controls–desktop {display:none !important;}
  83.  
  84. /*-- tooltips --*/
  85. #s-m-t-tooltip {
  86. position:absolute;
  87. padding:0px 5px 0px 5px;
  88. margin-top:30px;
  89. color:#444;
  90. background-color:#fafafa;
  91. font-family:'Fira Sans', sans-serif;
  92. font-size:9.5px;
  93. font-style:italic;
  94. text-transform:lowercase;
  95. text-align:center;
  96. border:1px solid #eee;
  97. letter-spacing:0.5px;
  98. z-index:999999;
  99. }
  100.  
  101. /*--general--*/
  102. body {
  103. background-color:#fff;
  104. font-family:'Fira Sans', sans-serif;
  105. font-size:10.5px;
  106. font-weight:400;
  107. line-height:190%;
  108. text-decoration:none;
  109. color:#555;
  110. -moz-osx-font-smoothing:grayscale;
  111. -webkit-font-smoothing:antialiased;
  112. font-smoothing:antialiased;
  113. animation: fadein 2s;
  114. -moz-animation: fadein 2s;
  115. -webkit-animation: fadein 2s;
  116. -o-animation: fadein 2s;
  117. }
  118.  
  119. body, * {
  120. cursor:auto;
  121. }
  122.  
  123. a {
  124. text-decoration:none;
  125. color:#c0c0c0; /* link color (for any links that appear in the note section) */
  126. -webkit-transition:0.4s ease-in;
  127. -moz-transition:0.4s ease-in;
  128. -o-transition:0.4s ease-in;
  129. }
  130.  
  131. a:hover {
  132. color:#cfedeb; /* link hover */
  133. text-decoration:none;
  134. cursor:pointer;
  135. -webkit-transition:0.4s ease-in;
  136. -moz-transition:0.4s ease-in;
  137. -o-transition:0.4s ease-in;
  138. }
  139.  
  140. b, strong {
  141. font-weight:700;
  142. color:#222;
  143. }
  144.  
  145. i, em {
  146. font-style:italic;
  147. }
  148.  
  149. blockquote {
  150. padding-left:10px;
  151. border-left:1px solid #eee;
  152. margin:0px;
  153. }
  154.  
  155. /*-- credit // no touch you mortal --*/
  156. .c {
  157. position:fixed;
  158. bottom:15px;
  159. right:20px;
  160. font-size:10.5px;
  161. -webkit-transition:0.7s ease-in;
  162. -moz-transition:0.7s ease-in;
  163. -o-transition:0.7s ease-in;
  164. }
  165.  
  166. .c:hover {
  167. transform:rotate(540deg);
  168. -webkit-transition:0.7s ease-in;
  169. -moz-transition:0.7s ease-in;
  170. -o-transition:0.7s ease-in;
  171. }
  172.  
  173. .c i:hover {
  174. cursor:pointer;
  175. }
  176.  
  177. /*-- containers --*/
  178. #container {
  179. width:500px; /* you have to edit positioning of the question bubbles if you change this */
  180. margin:auto;
  181. }
  182.  
  183. /*-- header --*/
  184. .header {
  185. position:relative;
  186. width:100%;
  187. margin-top:15%;
  188. height:100px;
  189. text-align:center;
  190. padding-left:14px;
  191. padding-right:14px;
  192. }
  193.  
  194. .header b {
  195. font-family:'Playfair Display', sans-serif;
  196. letter-spacing:1px;
  197. text-transform:lowercase;
  198. font-size:16px;
  199. font-weight:600;
  200. margin-right:26px;
  201. z-index:999;
  202. }
  203.  
  204. .header a {
  205. background:#cfedeb; /* header link color */
  206. border:1px solid #cfedeb; /* change this to the same color */
  207. display:inline-block;
  208. width:8px;
  209. height:8px;
  210. margin-right:28px;
  211. margin-bottom:1px;
  212. border-radius:2px;
  213. -webkit-transition:0.7s ease-in;
  214. -moz-transition:0.7s ease-in;
  215. -o-transition:0.7s ease-in;
  216. }
  217.  
  218. .header a:hover {
  219. background:#fff; /* header link hover color */
  220. transform:rotate(540deg);
  221. -webkit-transition:0.7s ease-in;
  222. -moz-transition:0.7s ease-in;
  223. -o-transition:0.7s ease-in;
  224. }
  225.  
  226. /*-- faq section --*/
  227. #faq {
  228. position:relative;
  229. margin-top:-30px;
  230. }
  231.  
  232. .question, .answer {
  233. position:relative;
  234. width:300px;
  235. border-radius:15px;
  236. padding:10px 15px;
  237. margin-bottom:25px;
  238. }
  239.  
  240. .question {
  241. background:#cfedeb; /* question bg */
  242. margin-left:calc(500px - 330px); /* container width - (chat bubble width + second padding value *2) */
  243. }
  244.  
  245. .question a {
  246. color:#444;
  247. border-bottom:1.5px solid #eee; /* question link border */
  248. }
  249.  
  250. .question a:hover {
  251. background:#eee; /* question link hover */
  252. }
  253.  
  254. .answer {
  255. background:#eee; /* answer bg */
  256. margin-left:0;
  257. }
  258.  
  259. .answer a {
  260. color:#444;
  261. border-bottom:1.5px solid #cfedeb; /* answer link border */
  262. }
  263.  
  264. .answer a:hover {
  265. background:#cfedeb; /* answer link hover */
  266. }
  267.  
  268. .answer blockquote {
  269. padding-left:10px;
  270. border-left:1px solid #cfedeb;
  271. margin:0px;
  272. }
  273.  
  274. /* don't touch these two except the colors */
  275. .question:after {
  276. content:'';
  277. bottom: 0;
  278. position:absolute;
  279. left:85%;
  280. width:0;
  281. height:0;
  282. margin-left:-10px;
  283. margin-bottom:-20px;
  284. border:20px solid transparent;
  285. border-bottom:0;
  286. border-right:0;
  287. border-top-color:#cfedeb; /* make this the same color as the question background */
  288. }
  289.  
  290. .answer:after {
  291. content:'';
  292. position: absolute;
  293. bottom:0;
  294. right:85%;
  295. width:0;
  296. height:0;
  297. margin-left:-10px;
  298. margin-bottom:-20px;
  299. border: 20px solid transparent;
  300. border-bottom:0;
  301. border-left:0;
  302. border-top-color:#eee; /* make this the same color as the answer background */
  303. }
  304.  
  305.  
  306. h1 {
  307. text-align:center;
  308. font-family:'Karla', sans-serif;
  309. text-transform:lowercase;
  310. font-size:12.5px; /* subtitle font size */
  311. font-weight:500;
  312. margin-bottom:25px;
  313. letter-spacing:0.5px;
  314. }
  315.  
  316. /*-- askbox --*/
  317. #ask {
  318. margin:70px auto;
  319. }
  320.  
  321. #ask h1 {
  322. font-weight:500;
  323. font-style:italic;
  324. font-family:'Karla', sans-serif;
  325. text-align:left;
  326. letter-spacing:0.5px;
  327. font-size:16px;
  328. margin-bottom:5px;
  329. }
  330.  
  331. .note {
  332. text-align:left;
  333. margin-bottom:10px;
  334. }
  335.  
  336. .note li {
  337. list-style:none;
  338. display:block;
  339. margin-left:8px;
  340. }
  341.  
  342. .note li:before {
  343. content:"✓";
  344. margin-right:7px;
  345. color:#cfedeb; /* check mark color */
  346. font-weight:700;
  347. }
  348.  
  349. .note li2 {
  350. list-style:none;
  351. display:block;
  352. margin-left:8px;
  353. }
  354.  
  355. .note li2:before {
  356. content:"✗";
  357. margin-right:7px;
  358. color:#cfedeb; /* ex mark color */
  359. font-weight:700;
  360. }
  361.  
  362.  
  363. </style>
  364. </head>
  365.  
  366. <body>
  367.  
  368. <div id="container">
  369.  
  370. <!------------------------------ header start --------------------------------->
  371. <div class="header">
  372.  
  373. <!-- if you add or delete links you'll have to adjust some margins - send an ask if you need help -->
  374.  
  375. <!-- links on the left -->
  376. <a title="index" href="/"></a>
  377. <a title="link 1" href=""></a>
  378. <a title="link 2" href=""></a>
  379. <!-- links on the left end -->
  380.  
  381. <b>frequently asked questions</b>
  382.  
  383. <!-- links on the right -->
  384. <a title="link 3" href=""></a>
  385. <a title="link 4" href=""></a>
  386. <a title="credit" target="_blank" href="http://divinethemes.tumblr.com"></a>
  387. <!-- links on the right end -->
  388.  
  389. </div>
  390. <!-------------------------------- header end --------------------------------->
  391.  
  392. <!----------------------------- faq section start -----------------------------> <div id="faq">
  393.  
  394. <!-- q&a 1 -->
  395. <div class="question">
  396. <b>bold</b>, <i>italic</i>, <small>small</small>, <s>strikethrough</s>, <a title="link title" href="/">link</a> <Br>
  397. <blockquote>blockquote</blockquote>
  398. < br > without the space to go to the next line
  399. <p>maybe a paragraph</p>
  400. <li>or</li>
  401. <li>a</li>
  402. <li>list</li>
  403. </div>
  404.  
  405. <div class="answer">
  406. thank you for using this! ilu have a great day and remember you can always send me an ask if you need help
  407. <p>your answers and questions can be any length, and you can add an unlimited amount of them</p>
  408. </div>
  409.  
  410.  
  411. <h1>subtitle</h1> <!-- use as a subtitle to categorize if you want - it's supposed to act as the date and time in text convos -->
  412.  
  413.  
  414. <!-- q&a 2 -->
  415. <div class="question">question bla bla bla bla</div>
  416.  
  417. <div class="answer">answer bla bla bla</div>
  418.  
  419.  
  420. <!-- q&a 3 -->
  421. <div class="question">question bla bla bla bla</div>
  422.  
  423. <div class="answer">answer bla bla bla</div>
  424.  
  425.  
  426. <!-- q&a 4 -->
  427. <div class="question">question bla bla bla bla</div>
  428.  
  429. <div class="answer">answer bla bla bla</div>
  430.  
  431.  
  432. <!-- feel free to add more! -->
  433.  
  434.  
  435. </div>
  436. <!------------------------------ faq section end ----------------------------->
  437.  
  438. <!-------------------------------- ask start --------------------------------->
  439. <div id="ask">
  440.  
  441. <h1>type a message...</h1>
  442.  
  443. <!-- note -->
  444. <div class="note">put a note or something here if you want
  445. <li>check mark for something like "requests open"</li>
  446. <li2>requests closed?</li2>
  447.  
  448. </div>
  449.  
  450. <!-- askbox // no need to insert your url! -->
  451. <p><iframe frameborder="0" scrolling="no" width="100%" height="190px" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe></p>
  452.  
  453. </div>
  454. <!--------------------------------- ask end ---------------------------------->
  455.  
  456. </div>
  457. <!-- end container -->
  458.  
  459. <!-- credit // no touch you mortal -->
  460. <div class="c"><a title="divine themes" target="_blank" href="http://divinethemes.tumblr.com"><i class="fas fa-crown"></i></a>
  461. </div>
  462.  
  463.  
  464. </body>
  465. </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!