API tools faq
paste
Advertisement
Noir-Et-Blanc

Page 13. FAQ Page {What comes after 6?}

Noir-Et-Blanc
Aug 3rd, 2017
346
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.41 KB | None | 0 0
raw download clone embed print report
  1. <!-- Page 13
  2.  
  3. {. What comes after 6? .}
  4.  
  5. Page #13. (What comes after 6?)
  6. http://noiretblanc-themes.tumblr.com/
  7.  
  8. Please don't use this page as a base or claim it as your own.
  9. You are free to edit this page as much as you want, please just don't erase the credits.
  10. Take in mind that I won't provide assistance to heavy edited codes.
  11.  
  12. -->
  13.  
  14. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  15. <html xmlns="http://www.w3.org/1999/xhtml">
  16.  
  17. <head>
  18. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  19. <link rel="shortcut icon" href="{Favicon}">
  20.  
  21.  
  22. <!-- FontAwesome -->
  23. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  24. <!-- Jquery -->
  25. <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  26. <link href="https://fonts.googleapis.com/css?family=Michroma|Open+Sans" rel="stylesheet">
  27.  
  28. <title>{Title}</title>
  29.  
  30. <style>
  31. iframe.tmblr-iframe {
  32. z-index:99999999999999!important;
  33. }
  34.  
  35. ::-webkit-scrollbar-thumb {
  36. background-color: #ff94b1;
  37. border: 5px solid #40372e;
  38. }
  39.  
  40. ::-webkit-scrollbar-track {
  41. background-color: #40372e;
  42. }
  43.  
  44. ::-webkit-scrollbar {
  45. width: 12px;
  46. }
  47.  
  48. * {
  49. margin: 0;
  50. padding: 0;
  51. }
  52.  
  53. a {
  54. text-decoration: none;
  55. -moz-transition: all .5s ease-in-out;
  56. -webkit-transition: all .5s ease-in-out;
  57. -o-transition: all .5s ease-in-out;
  58. transition: all .5s ease-in-out;
  59. cursor: url(https://68.media.tumblr.com/6fb38fc5e97353c67e3fc3a2e2b29bf9/tumblr_inline_okvj5qqS8G1t4i7gb_540.png), progress !important;
  60. }
  61.  
  62. body {
  63. font-family: 'Open Sans', sans-serif;
  64. font-size: 12px;
  65. cursor: url(http://68.media.tumblr.com/tumblr_lqs4qdUu8n1qfoi4t.png), progress !important;
  66. background: url("https://i.imgur.com/J1n0XfZ.jpg")repeat center center fixed; /* Body Background image */
  67. background-color: #ebebeb; /* Body Background color */
  68. }
  69.  
  70. #bg-cont {
  71. position: fixed;
  72. top: 0;
  73. right: 100px;
  74. left: 100px;
  75. bottom: 0;
  76. z-index: -1;
  77. background: #fffef8; /* Content Background color */
  78. }
  79.  
  80. #head-foot {
  81. position: fixed;
  82. left: 100px;
  83. right: 100px;
  84. height: 50px;
  85. z-index: 100;
  86. background: #775659; /* Header and Footer Background color */
  87. }
  88.  
  89. .footer {
  90. bottom: 0;
  91. }
  92.  
  93. #nav-header {
  94. position: fixed;
  95. top: 50px;
  96. left: 100px;
  97. right: 100px;
  98. z-index: 999;
  99. }
  100.  
  101. h2.main-title {
  102. display: block;
  103. font-family: 'Michroma', sans-serif;
  104. font-weight: normal;
  105. font-size: 40px;
  106. padding: 10px;
  107. text-align: center;
  108. letter-spacing: 5px;
  109. background: #ff8a89; /* Title bg color */
  110. color: #ffffff; /* Title font color */
  111. }
  112.  
  113. .main-title img {
  114. height: 50px;
  115. border-radius: 50px;
  116. }
  117.  
  118. .main-title a {
  119. position: absolute;
  120. left: -25px;
  121. top: 15px;
  122. }
  123.  
  124. .back {
  125. position: absolute;
  126. left: -15px;
  127. top: -25px;
  128. font-size: 10px;
  129. width: 80px;
  130. height: 20px;
  131. line-height: 20px;
  132. z-index: 200;
  133. -moz-transition: all .5s ease-in-out;
  134. -webkit-transition: all .5s ease-in-out;
  135. -o-transition: all .5s ease-in-out;
  136. transition: all .5s ease-in-out;
  137. opacity: 0;
  138. border-radius: 3px;
  139. background: #5d3d40; /* Back button bg color */
  140. color: white;
  141. /* Back button font color */
  142. }
  143.  
  144. .back:after {
  145. top: 100%;
  146. left: 50%;
  147. border: solid transparent;
  148. content: " ";
  149. height: 0;
  150. width: 0;
  151. position: absolute;
  152. pointer-events: none;
  153. border-color: rgba(52, 52, 52, 0);
  154. border-width: 5px;
  155. margin-left: -5px;
  156. border-top-color: #5d3d40; /* Back button arrow bg color (needs to match back button bg color) */
  157. }
  158.  
  159. .main-title a:hover>.back {
  160. top: -30px;
  161. opacity: 1;
  162. }
  163.  
  164. .tabs {
  165. display: block;
  166. text-align: center;
  167. background: #ddb294; /* Tabs bg color */
  168. }
  169.  
  170. .tabs a {
  171. display: inline-block;
  172. position: relative;
  173. height: 40px;
  174. line-height: 40px;
  175. padding: 0 50px;
  176. z-index: 95;
  177. color: white; /* Tabs font color */
  178. }
  179.  
  180. .tabs a:before {
  181. content: "";
  182. position: absolute;
  183. width: 100%;
  184. height: 100%;
  185. bottom: 0;
  186. left: 0;
  187. -webkit-transform: scaleX(0);
  188. transform: scaleX(0);
  189. -webkit-transition: all 0.4s ease-in-out 0s;
  190. transition: all 0.4s ease-in-out 0s;
  191. z-index: -1;
  192. background-color: #775659; /* Active tab bg color */
  193. }
  194.  
  195. .tabs a:hover:before {
  196. -webkit-transform: scaleX(1);
  197. transform: scaleX(1);
  198. }
  199.  
  200. .tabs a.on:before {
  201. -webkit-transform: scaleX(1);
  202. transform: scaleX(1);
  203. }
  204.  
  205. .tab-content {
  206. position: absolute;
  207. top: 0;
  208. bottom: 0;
  209. left: 100px;
  210. right: 100px;
  211. padding: 20px;
  212. padding-top: 180px !important;
  213. }
  214.  
  215. .q-a {
  216. position: relative;
  217. display: block;
  218. margin: 10px 0;
  219. }
  220.  
  221. question {
  222. display: block;
  223. padding: 10px;
  224. font-size: 14px;
  225. font-weight: bold;
  226. background: #fff1e1; /* Question bg color */
  227. color: inherit; /* Question font color */
  228. }
  229.  
  230. question:before {
  231. font-family: FontAwesome;
  232. content: "\f059";
  233. margin-right: 4px;
  234. }
  235.  
  236. answer {
  237. display: block;
  238. padding: 10px 20px;
  239. color: inherit;
  240. /* Answer font color */
  241. }
  242.  
  243. .faq_content a {
  244. color: #d88e38; /* Answer's links color */
  245. }
  246.  
  247. .q-a:last-child {
  248. margin-bottom: 60px;
  249. }
  250.  
  251. .faq_content p {
  252. display: block;
  253. text-align: center;
  254. margin-bottom: 15px;
  255. }
  256.  
  257. .faq_content p::first-letter {
  258. color: #ff8a89; /* Description first leter color */
  259. }
  260.  
  261. answer img {
  262. max-height: 150px;
  263. }
  264.  
  265. #credit{
  266. position: fixed;
  267. bottom: 0;
  268. right: 0;
  269. }
  270.  
  271. #credit a{
  272. display: block;
  273. background: #775659;
  274. color: white;
  275. font-size: 10px;
  276. text-align: center;
  277. width: 80px;
  278. }
  279.  
  280. #credit a:hover{
  281. background: #ff8a89;
  282. }
  283.  
  284. .neb{
  285. display: block;
  286. text-align: center;
  287. background: #2a2424;
  288. color: #ffffff;
  289. -webkit-transition: all 0.6s ease-in-out 0s;
  290. transition: all 0.6s ease-in-out 0s;
  291. font-family: 'Michroma', sans-serif;
  292. font-size: 9px;
  293. }
  294.  
  295. #credit a:hover>.neb{
  296. background: #e8e8e8;
  297. color: #2a2424;
  298. }
  299. </style>
  300. </head>
  301.  
  302. <body>
  303. <div id="head-foot"></div>
  304. <div id="bg-cont"></div>
  305.  
  306. <div id="nav-header">
  307. <h2 class="main-title">
  308. <a href="/"><img src="AVATAR_URL"><span class="back">Back</span></a>FAQ</h2>
  309.  
  310. <div class="tabs">
  311. <a href="#General">General</a>
  312. <!--
  313. Add a new tab by copying:
  314. <a href="#TABNANE">NAME</a>
  315. TABNAME must match with the ID IN THE TAB CONTENT SECTION
  316. -->
  317. </div>
  318. </div>
  319.  
  320. <div class="tab-content">
  321. <!-- ALL TAB CONTENT MUST BE BELOW THIS CODE -->
  322.  
  323.  
  324. <!-- COPY FROM HERE TO CREATE A **NEW TAB*** -->
  325. <div id="General" class="faq_content">
  326. <p>General questions</p>
  327.  
  328.  
  329. <!-- COPY TO CREATE A NEW **QUESTION/ANSWER** -->
  330. <span class="q-a">
  331. <question>What's 3+4?</question>
  332. <answer><img src="https://img.buzzfeed.com/buzzfeed-static/static/2014-07/28/17/enhanced/webdr02/anigif_enhanced-buzz-20802-1406582704-22.gif"></answer>
  333. </span>
  334. <!-- END TO CREATE A NEW QUESTION/ANSWER -->
  335.  
  336.  
  337. </div>
  338. <!-- END TO CREATE A NEW TAB -->
  339.  
  340.  
  341. <!-- ALL TAB CONTENT MUST ABOVE BELOW THIS CODE -->
  342. </div>
  343.  
  344.  
  345. <div id="head-foot" class="footer"></div>
  346. <div id="credit"><a href="http://noiretblanc-themes.tumblr.com/">Coded by <span class="neb">Noir et Blanc</span></a></div>
  347.  
  348. <script>
  349. $('.tabs a').click(function(e) {
  350. if (!$(this).hasClass('on')) {
  351. $('.tabs a.on').removeClass('on');
  352. $('.faq_content:visible').hide();
  353. $(this.hash).fadeIn('slow');
  354. $(this).addClass('on');
  355. }
  356. e.preventDefault();
  357. return false;
  358. }).filter(':first').click();
  359.  
  360. </script>
  361. </body>
  362.  
  363. </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!