API tools faq
paste
Advertisement
oftenwrongthemes

FAQ Page 01

oftenwrongthemes
Nov 19th, 2015
702
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.47 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head><link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  4.  
  5. <title>Frequently Asked Questions</title>
  6.  
  7. <!---JQUERY--->
  8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  9.  
  10. <script type="text/javascript">
  11.  
  12. $(document).ready(function(){
  13. $(".cat").click(function(){
  14. $(this).find(".qsection").slideToggle("slow")
  15. });
  16. });
  17.  
  18. </script>
  19.  
  20. <!---CSS--->
  21.  
  22. <style type="text/css">
  23.  
  24. /*GLOBAL*/
  25.  
  26. body {
  27. background-image:url(http://oi63.tinypic.com/346up7o.jpg);
  28. background-color: #fff;
  29. font-size: 11px;
  30. color: #555;
  31. font-family: calibri;
  32. }
  33.  
  34. a {
  35. color: #D49C90;
  36. text-decoration: none;
  37. -moz-transition-duration: 0.5s;
  38. -o-transition-duration: 0.5s;
  39. -webkit-transition-duration: 0.5s;
  40. transition-duration: 0.5s;
  41. }
  42.  
  43. a:hover {
  44. color: #EBD6D1;
  45. -moz-transition-duration: 0.5s;
  46. -o-transition-duration: 0.5s;
  47. -webkit-transition-duration: 0.5s;
  48. transition-duration: 0.5s;
  49. }
  50.  
  51. .container {
  52. width: 600px;
  53. margin: auto;
  54. margin-top: 7%;
  55. background: #fff;
  56. padding: 10px;
  57. border: 1px solid #ddd;
  58. }
  59.  
  60. /*CATEGORIES*/
  61.  
  62. .category {
  63. background: #EBD6D1;
  64. color: #fff;
  65. width: 580px;
  66. height: 38px;
  67. padding-top: 12px;
  68. font-family: 'Montserrat', sans-serif;
  69. font-size: 20px;
  70. margin-bottom: 3px;
  71. padding-left: 20px;
  72. -moz-transition-duration: 0.5s;
  73. -o-transition-duration: 0.5s;
  74. -webkit-transition-duration: 0.5s;
  75. transition-duration: 0.5s;
  76. }
  77.  
  78. .category:hover {
  79. background: #D49C90;
  80. -moz-transition-duration: 0.5s;
  81. -o-transition-duration: 0.5s;
  82. -webkit-transition-duration: 0.5s;
  83. transition-duration: 0.5s;
  84. }
  85.  
  86. .cat { }
  87.  
  88. /*QUESTION AND ANSWER SECTION*/
  89.  
  90. .qsection {
  91. background: #f8f8f8;
  92. width: 560px;
  93. padding: 20px;
  94. display: none;
  95. margin-bottom: 5px;
  96. margin-top: -3px;
  97. }
  98.  
  99. .qsection b {
  100. color: #DEBDB6;
  101. padding-left: 20px;
  102. }
  103.  
  104. /*LINKS*/
  105.  
  106. .linkbox {
  107. width: 622px;
  108. margin: auto;
  109. height: 22px;
  110. background: #EBD6D1;
  111. text-align: center;
  112. padding-top: 8px;
  113. }
  114.  
  115. .linkbox a {
  116. text-decoration: none;
  117. color: #555;
  118. text-transform: uppercase;
  119. font-size: 10px;
  120. font-weight: bold;
  121. -moz-transition-duration: 0.5s;
  122. -o-transition-duration: 0.5s;
  123. -webkit-transition-duration: 0.5s;
  124. transition-duration: 0.5s;
  125. }
  126.  
  127. .linkbox a:hover {
  128. color: #ccc;
  129. -moz-transition-duration: 0.5s;
  130. -o-transition-duration: 0.5s;
  131. -webkit-transition-duration: 0.5s;
  132. transition-duration: 0.5s;
  133. }
  134.  
  135. .credit a {
  136. position: fixed;
  137. bottom: 10px;
  138. right: 12px;
  139. text-decoration: none;
  140. color: #555;
  141. font-size: 12px;
  142. -moz-transition-duration: 0.5s;
  143. -o-transition-duration: 0.5s;
  144. -webkit-transition-duration: 0.5s;
  145. transition-duration: 0.5s;
  146. }
  147.  
  148. .credit a:hover {
  149. color: #ccc;
  150. -moz-transition-duration: 0.5s;
  151. -o-transition-duration: 0.5s;
  152. -webkit-transition-duration: 0.5s;
  153. transition-duration: 0.5s;
  154. }
  155.  
  156. </style>
  157. </head>
  158.  
  159. <!---HTML--->
  160.  
  161. <body>
  162.  
  163. <div class="container">
  164.  
  165. <!---CATEGORY 1--->
  166.  
  167. <div class="cat">
  168. <div class="category">
  169. Category 1
  170. </div>
  171. <div class="qsection">
  172. <b>1. This is an example of a question.</b><p />
  173. This is an example of an answer. You can put as much in here as you want because all the box is going to do is expand and expand to accomodate as much as you need.<p />
  174. <b>2. In order to format questions they have to be bold.</b><p />
  175. And make sure to include you paragraph tags or otherwise everything will get squished together!<p />
  176. <b>3. This is an example of a question.</b><p />
  177. This is an example of an answer.<p />
  178. </div>
  179. </div>
  180.  
  181. <!---CATEGORY 2--->
  182.  
  183. <div class="cat">
  184. <div class="category">
  185. Category 2
  186. </div>
  187. <div class="qsection">
  188. <b>1. This is an example of a question.</b><p />
  189. This is an example of an answer.<p />
  190. <b>2. This is an example of a question.</b><p />
  191. This is an example of an answer.<p />
  192. </div>
  193. </div>
  194.  
  195. <!---CATEGORY 3--->
  196. <!---COPY AND PASTE THIS CODE TO MAKE MORE CATEGORIES--->
  197.  
  198. <div class="cat">
  199. <div class="category">
  200. Category 3
  201. </div>
  202. <div class="qsection">
  203. <b>1. This is an example of a question.</b><p />
  204. This is an example of an answer.<p />
  205. <b>2. This is an example of a question.</b><p />
  206. This is an example of an answer.<p />
  207. </div>
  208. </div>
  209.  
  210. <!---ASK BOX // REPLACE "YOURURLHERE" WITH YOUR URL--->
  211.  
  212. <p><iframe frameborder="0" scrolling="no" width="100%" height="149" src="http://www.tumblr.com/ask_form/YOURURLHERE.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]--></p>
  213.  
  214. </div>
  215.  
  216. <!---LINK BOX--->
  217.  
  218. <div class="linkbox">
  219. <a href="/">home</a> / <a href="http://tumblr.com/dashboard">back to dash</a>
  220. </div>
  221.  
  222. </body>
  223.  
  224. <div class="credit">
  225. <a href="http://bisexualamy.tumblr.com/">▲▲▲</a>
  226. </a>
  227.  
  228. </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!