hermionemessi

FAQ 01

Sep 9th, 2021 (edited)
376
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.61 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <!--Eudamia Page Pack: FAQ 01 Redarys by antoniosvivaldi / athenathms
  4.  
  5. antoniosvivaldi © 2021
  6.  
  7. Note:
  8.  
  9. - Optimised for modern browsers e.g. Google Chrome / Opera
  10. - Optimised for computer monitor sizes 13in. ~ 15in.
  11. - Common terms of use apply
  12. - Feel free to tweak the layout as long as the credit stays intact
  13.  
  14. -->
  15. <head>
  16.  
  17. <meta charset="UTF-8" />
  18. <meta https-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  19. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  20. <link rel="shortcut icon" href="{Favicon}">
  21.  
  22. <title>{Title}</title>
  23.  
  24.  
  25.  
  26.  
  27.  
  28. <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i" rel="stylesheet">
  29. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
  30. <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
  31. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700" rel="stylesheet">
  32.  
  33. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:700" rel="stylesheet">
  34. <link href="https://fonts.googleapis.com/css?family=Elsie:900" rel="stylesheet">
  35. <link href="https://fonts.googleapis.com/css?family=Unna:700" rel="stylesheet">
  36. <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:700" rel="stylesheet">
  37.  
  38. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  39. <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
  40.  
  41. <style type="text/css">
  42.  
  43. /*Customise stuff here*/
  44.  
  45. :root {
  46.  
  47. /*font size*/
  48. --fontsize:18px;
  49.  
  50. /*accent colours*/
  51. --accent: #53759b;
  52. --highlight: #cfe9f6;
  53.  
  54. /*accent colours with opacity*/
  55.  
  56. /*
  57. convert the accent & highlight hex codes to RGB values using the following website:
  58.  
  59. https://www.rapidtables.com/convert/color/hex-to-rgb.html
  60.  
  61. */
  62.  
  63. --accentalpha: 83, 117, 155;
  64. --highlightalpha: 207, 233, 246;
  65.  
  66. /* available blend modes:
  67.  
  68. - Normal
  69. - Multiply
  70. - Scren
  71. - Color Burn
  72. - Color Dodge
  73. - Overlay
  74. - Soft Light
  75. - Hard Light
  76. - Hue
  77. - Color
  78.  
  79.  
  80. */
  81.  
  82. --abtblend:multiply;
  83. --faqblend:multiply;
  84.  
  85.  
  86.  
  87. }
  88.  
  89. /*Available body fonts:
  90.  
  91. - Fira Sans
  92. - Open Sans
  93. - Karla
  94. - Source Sans Pro
  95.  
  96. */
  97.  
  98. body {
  99. font-family:'Fira Sans',sans-serif;
  100. }
  101.  
  102. /*Available heading fonts:
  103.  
  104. - Playfair Display
  105. - Elsie
  106. - Unna
  107. - Libre Baskerville
  108.  
  109. */
  110.  
  111. h1, h2, .tilter__title {font-family:'Playfair Display',serif;}
  112.  
  113. /*FAQ background*/
  114. article.faqbg {
  115. background-image: url('https://64.media.tumblr.com/7c29a2e824b9521c05054c115361f86f/4e8a6883106985ad-1d/s2048x3072/7a35f4e0e60ed72f6bdc469df7a3dfc53d9db1d0.jpg');
  116. }
  117.  
  118.  
  119.  
  120. </style>
  121.  
  122. <!--the rest of the CSS stylesheet-->
  123. <link rel="stylesheet" href="https://static.tumblr.com/hqib8pd/orEr5hqe4/eudamia-main-v2.css">
  124.  
  125. </head>
  126.  
  127. <!--How to use different theme modes: in the body tag below
  128.  
  129. Light theme: day-mode
  130. Dark theme: night-mode
  131. Alternating theme: remove day-mode / night-mode from the classname and uncomment the script at the end of the HTML
  132.  
  133. -->
  134. <body class="animsition day-mode">
  135.  
  136. <div class="topbar">
  137. <div class="topbar__inner">
  138.  
  139. <!--If you want to change the title, just replace the 3 "{Title}" below to your desired heading title-->
  140. <h1><a class="a-link tbrefresh" href="/">{Title}
  141. <span class="tbletters" data-letters="{Title}"></span>
  142. <span class="tbletters" data-letters="{Title}"></span>
  143. </a></h1>
  144.  
  145.  
  146. </div>
  147. </div>
  148.  
  149.  
  150. <main class="smooth">
  151. <div id="wrapper">
  152. <!--Posts and hero image-->
  153. <section class="tabs" id="tab1">
  154.  
  155.  
  156. <div class="faq_cont">
  157. <article class="faqstuff fask">
  158. <h1>FAQ</h1>
  159.  
  160. <div>
  161.  
  162. <!--Question + Answer 1-->
  163. <p class="tabq">This is a question?</p>
  164.  
  165. <p class="taba">This is an answer.</p>
  166.  
  167. <!--Question + Answer 2-->
  168. <p class="tabq">This is a question?</p>
  169.  
  170. <p class="taba">This is an answer.</p>
  171.  
  172. <!--Question + Answer 3-->
  173. <p class="tabq">This is a question?</p>
  174.  
  175. <p class="taba">This is an answer.</p>
  176.  
  177. <h2>{AskLabel}</h2>
  178. <p>
  179.  
  180. <iframe frameborder="0" scrolling="no" width="100%" height="320px" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:auto;" id="askbox"></iframe>
  181.  
  182. </p>
  183. </div>
  184.  
  185. </article>
  186. <article class="faqstuff faqbg"></article>
  187. </div>
  188.  
  189. <footer>
  190. <div>Theme by <a href="https://antoniosvivaldi.tumblr.com" class="a-link">antoniosvivaldi</a></div>
  191. </footer>
  192.  
  193. </section>
  194. <!--/Posts and hero image-->
  195.  
  196.  
  197.  
  198.  
  199.  
  200. </div>
  201. </main>
  202.  
  203.  
  204. <!--Please do not alter the credit!-->
  205. <div id="athena_wrapper">
  206. <a class="a-link" href="https://antoniosvivaldi.tumblr.com"><span>thm</span></a>
  207. </div>
  208. <!--/credit-->
  209.  
  210. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  211. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
  212.  
  213.  
  214.  
  215. <!-- animsition.js -->
  216. <script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/js/animsition.min.js"></script>
  217.  
  218.  
  219. <script>
  220. $(document).ready(function() {
  221.  
  222. $(".animsition").animsition({
  223. inClass: 'fade-in',
  224. outClass: 'fade-out',
  225. inDuration: 1500,
  226. outDuration: 800,
  227. linkElement: '.a-link',
  228. loading: true,
  229. loadingParentElement: 'body',
  230. loadingClass: 'animsition-loading',
  231. loadingInner: '',
  232. timeout: true,
  233. timeoutCountdown: 3000,
  234. onLoadEvent: true,
  235. browser: [ 'animation-duration', '-webkit-animation-duration'],
  236. overlay : false,
  237. overlayClass : 'animsition-overlay-slide',
  238. overlayParentElement : 'body',
  239. transition: function(url){ window.location.href = url; }
  240. });
  241.  
  242.  
  243. });
  244.  
  245. </script>
  246.  
  247.  
  248.  
  249. <!-- Uncomment this if you want to use alternating theme colours
  250.  
  251. <script>
  252.  
  253. (function($) {
  254.  
  255. var url, hour = new Date().getHours();
  256. if (hour > 18 || hour < 8) {
  257. jQuery('body').addClass('night-mode');
  258. } else {
  259. jQuery('body').addClass('day-mode');
  260. }
  261.  
  262. }(jQuery));
  263.  
  264.  
  265. </script>
  266.  
  267. -->
  268.  
  269. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  270.  
  271. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script><script>
  272. jQuery.noConflict();
  273. (function($){
  274.  
  275. $(document).ready(function(){
  276.  
  277. $("a[title],img[title],[title]").style_my_tooltips({
  278.  
  279. tip_follows_cursor:true,
  280.  
  281. tip_delay_time:30,
  282.  
  283. tip_fade_speed:300,
  284.  
  285. attribute:"title"
  286.  
  287. });
  288.  
  289. });
  290.  
  291. })(jQuery);
  292. </script>
  293.  
  294. </body>
  295. </html>
Add Comment
Please, Sign In to add comment