API tools faq
paste
Advertisement
silbrigthemes

Regenbogen (Page #14)

silbrigthemes
Jul 3rd, 2018
188
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.18 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. REGENBOGEN
  7. Page #14 by @silbrigthemes
  8.  
  9. A simple FAQ page.
  10.  
  11. Features:
  12. Custom scrollbar, tooltips, text selection and mobile toolbar.
  13. Responsive layout.
  14. Combined ask and submit.
  15. FAQ section.
  16. Icon navigation.
  17.  
  18. Rules:
  19. 1) Do not edit beyond recogniton.
  20. 2) Do not steal (parts of) the code.
  21. 3) Do not claim as your own.
  22. 4) Do not delete the credit.
  23. 5) Please like / reblog if using.
  24.  
  25. The code has been annotated to make customization easier.
  26. If you have any questions, need help or notice any oddities, please feel free to contact me:
  27.  
  28. silbrigthemes.tumblr.com/ask
  29. silbrigsupport.tumblr.com
  30.  
  31. Have fun with this page!
  32.  
  33. -->
  34.  
  35. <head>
  36.  
  37. <meta charset="utf-16">
  38. <title>Contact | FAQ</title> <!-- Change title here. -->
  39. <link rel="shortcut icon" href="{Favicon}"/>
  40. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  41. <link rel="apple-touch-icon-precomposed" href="{PortraitURL-128}">
  42.  
  43. <!-- Necessary for the theme to be responsive. -->
  44. <meta name="viewport" content="width=device-width, initial-scale=1">
  45.  
  46. <!-- Necessary for the icon font to work. -->
  47. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  48.  
  49. <!-- Tooltips Script -->
  50. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  51. <script src="https://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  52. <script>
  53. (function($){
  54. $(document).ready(function(){
  55. $("[title]").style_my_tooltips({
  56. tip_follows_cursor:true,
  57. tip_delay_time:200,
  58. tip_fade_speed:300
  59. }
  60. );
  61. });
  62. })(jQuery);
  63. </script>
  64.  
  65. <!-- Changes the toolbar color on mobile. -->
  66. <meta name="theme-color" content="#61b4ff"/>
  67.  
  68. <!-- Custom font: Lato -->
  69. <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&amp;subset=latin-ext" rel="stylesheet">
  70.  
  71. <!-- Custom font: Playfair Display -->
  72. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700&amp;subset=cyrillic,latin-ext,vietnamese" rel="stylesheet">
  73.  
  74. <style>
  75.  
  76. /* Global Settings */
  77. body{
  78. margin:0; /* don't delete, it's important */
  79. color:#3d3e3f; /* blueish-black text color */
  80. font-size:1em; /* 1em = 16px */
  81. font-family:"Lato", Verdana;
  82. /* custom font Lato, fallback Verdana */
  83. overflow-x:hidden;
  84. }
  85.  
  86. /* Bold Text */
  87. b, strong{
  88. font-weight:700; /* bold */
  89. }
  90.  
  91. /* Italic Text */
  92. i, em{
  93. font-weight:300; /* thin */
  94. font-style:italic;
  95. }
  96.  
  97. /* Marked Text */
  98. mark{
  99. background-color:#add8ff; /* blue background */
  100. padding:0 0.25em; /* top/bottom and left/right padding */
  101. border-radius:1em; /* rounded corners */
  102. }
  103.  
  104. /* Underlined Text */
  105. u{
  106. text-decoration:none; /* no text-decoration */
  107. border-bottom:2px solid #3d3e3f; /* height type color */
  108. }
  109.  
  110. /* Links */
  111. a{
  112. text-decoration:none;
  113. color:#3d3e3f;
  114. border-bottom:2px solid #61b4ff;
  115. transition:0.5s;
  116. -moz-transition:0.5s;
  117. -o-transition:0.5s;
  118. -webkit-transition:0.5s;
  119. }
  120.  
  121. a:hover{
  122. border-bottom:2px solid #3d3e3f;
  123. transition:0.5s;
  124. -moz-transition:0.5s;
  125. -o-transition:0.5s;
  126. -webkit-transition:0.5s;
  127. }
  128.  
  129. /* Custom Tooltips */
  130. #s-m-t-tooltip{
  131. max-width:300px;
  132. margin:15px;
  133. padding:0.5em;
  134. background:white; /* tooltip background color */
  135. color:#61b4ff; /* toolip text color */
  136. z-index:999999;
  137. font-size:12px; /* tooltip font size */
  138. text-transform:uppercase;
  139. font-weight:300; /* thin */
  140. }
  141.  
  142. /* Custom Text Selection */
  143. ::selection{
  144. background-color:#61b4ff; /* blue background */
  145. color:white; /* white text color */
  146. }
  147.  
  148. ::-moz-selection{
  149. background-color: #61b4ff;
  150. color:white;
  151. }
  152.  
  153. ::-o-selection{
  154. background-color: #61b4ff;
  155. color:white;
  156. }
  157.  
  158. ::-webkit-selection{
  159. background-color: #61b4ff;
  160. color:white;
  161. }
  162.  
  163. /* Custom Scrollbar */
  164. ::-webkit-scrollbar{
  165. width:10px;
  166. background-color:#add8ff;
  167. border:4px solid white;
  168. }
  169.  
  170. ::-webkit-scrollbar-thumb{
  171. width:10px;
  172. background-color:white;
  173. border:4px solid #add8ff;
  174. border-radius:5px;
  175. }
  176.  
  177. /* LEFT SIDE */
  178. #left{
  179. width:50vw;
  180. height:100vh;
  181. background-color:#add8ff; /* lightblue background */
  182. display:flex;
  183. align-items:center;
  184. justify-content:center;
  185. flex-direction:column;
  186. }
  187.  
  188. #left iframe{
  189. margin-left:-25%;
  190. }
  191.  
  192. /* Navigation */
  193. #navbar{
  194. width:50vw;
  195. height:auto;
  196. display:flex;
  197. align-items:space-evenly;
  198. justify-content:space-evenly;
  199. flex-wrap:wrap;
  200. position:absolute;
  201. bottom:0;
  202. left:0;
  203. border-top:4px solid #61b4ff; /* blue top border */
  204. background-color:#e0f0ff; /* lightblue background */
  205. }
  206.  
  207. a.navlink{
  208. text-decoration:none;
  209. border-bottom:none;
  210. }
  211.  
  212. .navcircle{
  213. width:38px;
  214. height:38px;
  215. margin:0.5em;
  216. border-radius:50%; /* circle */
  217. background-color:#61b4ff; /* blue background */
  218. color:white; /* white text */
  219. display:flex;
  220. align-items:center;
  221. justify-content:center;
  222. transition:0.5s;
  223. -moz-transition:0.5s;
  224. -o-transition:0.5s;
  225. -webkit-transition:0.5s;
  226. }
  227.  
  228. .navcircle:hover{
  229. color:#61b4ff; /* blue text color */
  230. background-color:white; /* white background */
  231. transform:scale(1.1); /* increase size by 10% */
  232. transition:0.5s;
  233. -moz-transition:0.5s;
  234. -o-transition:0.5s;
  235. -webkit-transition:0.5s;
  236. }
  237.  
  238. .navcircle i.fas{
  239. font-size:1em;
  240. }
  241.  
  242. /* RIGHT SIDE */
  243. #right{
  244. width:50vw;
  245. height:100vh;
  246. background-color:white; /* white background */
  247. margin-left:50vw;
  248. margin-top:-100vh;
  249. display:flex;
  250. align-items:center;
  251. justify-content:center;
  252. }
  253.  
  254. /* START FAQ */
  255. #faq-contain{
  256. width:80%;
  257. height:auto;
  258. max-height:80%;
  259. overflow-y:scroll; /* faq overflows */
  260. }
  261.  
  262. .faq{
  263. position: relative;
  264. margin-bottom: 1px;
  265. width: 100%;
  266. color: #fff; /* white text color */
  267. overflow: hidden;
  268. }
  269.  
  270. input {
  271. position: absolute;
  272. opacity: 0;
  273. z-index: -1;
  274. }
  275.  
  276. label {
  277. position: relative;
  278. display: block;
  279. padding: 0 0 0 1em;
  280. font-weight: bold;
  281. line-height: 3;
  282. cursor: pointer;
  283. font-family:"Playfair Display", Verdana;
  284. }
  285.  
  286. label.one{
  287. background-color:red; /* red background */
  288. text-shadow:1px 1px 1px #cc0000;
  289. }
  290.  
  291. label.two{
  292. background-color:orange; /* orange background */
  293. text-shadow:1px 1px 1px #cc8500;
  294. }
  295.  
  296. label.three{
  297. background-color:#fcde00; /* yellow background */
  298. text-shadow:1px 1px 1px #ccb400;
  299. }
  300.  
  301. label.four{
  302. background-color:#1bdf23; /* green background */
  303. text-shadow:1px 1px 1px #16b61c;
  304. }
  305.  
  306. label.five{
  307. background-color:blue; /* blue background */
  308. text-shadow:1px 1px 1px #0000cc;
  309. }
  310.  
  311. label.six{
  312. background-color:#7700ff; /* purple background */
  313. text-shadow:1px 1px 1px #5f00cc;
  314. }
  315.  
  316. .answer{
  317. max-height:0;
  318. overflow:hidden;
  319. height:auto;
  320. background: #f8f9fa; /* lightgray background */
  321. color:#3d3e3f; /* blueish-black text color */
  322. -webkit-transition: max-height .5s;
  323. -o-transition: max-height .5s;
  324. transition: max-height .5s;
  325. text-align:justify;
  326. padding:0 0.5em;
  327. }
  328.  
  329. .answer p {
  330. margin: 1em;
  331. }
  332.  
  333. /* :checked */
  334. input:checked ~ .answer {
  335. height: auto;
  336. max-height:15em;
  337. }
  338.  
  339. /* Icon */
  340. label::after {
  341. position: absolute;
  342. right: 0;
  343. top: 0;
  344. display: block;
  345. width: 3em;
  346. height: 3em;
  347. line-height: 3;
  348. text-align: center;
  349. -webkit-transition: all .35s;
  350. -o-transition: all .35s;
  351. transition: all .35s;
  352. }
  353.  
  354. input[type=checkbox] + label::after {
  355. content: "+";
  356. }
  357.  
  358. input[type=checkbox]:checked + label::after {
  359. transform: rotate(315deg);
  360. }
  361.  
  362. /* Hides the tumblr app button. By @yeoli-thm */
  363. .tmblr-iframe--app-cta-button {
  364. display: none!important;
  365. }
  366.  
  367. /* Hides standard tumblr controls */
  368. body > iframe:first-child {
  369. display: none !important;
  370. }
  371.  
  372. @media only screen and (max-width:800px){
  373. #left{
  374. width:100vw;
  375. }
  376.  
  377. #navbar{
  378. width:100vw;
  379. }
  380.  
  381. #right{
  382. width:100vw;
  383. margin-left:0;
  384. margin-top:0;
  385. }
  386. }
  387.  
  388. </style>
  389. </head>
  390.  
  391. <body>
  392.  
  393. <div id="left">
  394. <!-- Iframe for Askbox -->
  395. <p><iframe frameborder="0" scrolling="no" width="150%" height="150" src="http://www.tumblr.com/ask_form/{Name}.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>
  396.  
  397. <!-- Iframe for submitbox -->
  398. <p><iframe frameborder="0" scrolling="no" width="150%" height="400" id="submit_form" src="http://www.tumblr.com/submit_form/{Name}.tumblr.com" style="background-color:transparent; overflow:hidden;"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('submit_form').allowTransparency=true;</script><![endif]--></p>
  399.  
  400. <div id="navbar">
  401. <a class="navlink" href="/" title="index">
  402. <div class="navcircle">
  403. <i class="fas fa-home"></i>
  404. </div>
  405. </a>
  406.  
  407. <a class="navlink" href="/ask" title="ask">
  408. <div class="navcircle">
  409. <i class="fas fa-envelope"></i>
  410. </div>
  411. </a>
  412.  
  413. <a class="navlink" href="/archive" title="archive">
  414. <div class="navcircle">
  415. <i class="fas fa-archive"></i>
  416. </div>
  417. </a>
  418.  
  419. <a class="navlink" href="/" title="link">
  420. <div class="navcircle">
  421. <i class="fas fa-link"></i>
  422. </div>
  423. </a>
  424.  
  425. <a class="navlink" href="/" title="link">
  426. <div class="navcircle">
  427. <i class="fas fa-link"></i>
  428. </div>
  429. </a>
  430.  
  431. <a class="navlink" href="/" title="link">
  432. <div class="navcircle">
  433. <i class="fas fa-link"></i>
  434. </div>
  435. </a>
  436.  
  437. <a class="navlink" href="https://silbrigthemes.tumblr.com/" title="page by @silbrigthemes">
  438. <div class="navcircle">
  439. <i class="fas fa-code"></i>
  440. </div>
  441. </a>
  442. </div>
  443.  
  444. </div>
  445.  
  446. <div id="right">
  447. <div id="faq-contain">
  448. <div class="faq">
  449. <input id="question-one" type="checkbox" name="tabs">
  450. <label class="one" for="question-one">Question 1</label>
  451. <div class="answer">
  452. <p>Answer 1</p>
  453. </div>
  454. </div>
  455.  
  456. <div class="faq">
  457. <input id="question-two" type="checkbox" name="tabs">
  458. <label class="two" for="question-two">Question 2</label>
  459. <div class="answer">
  460. <p>Answer 2</p>
  461. </div>
  462. </div>
  463.  
  464. <div class="faq">
  465. <input id="question-three" type="checkbox" name="tabs">
  466. <label class="three" for="question-three">Question 3</label>
  467. <div class="answer">
  468. <p>Answer 3</p>
  469. </div>
  470. </div>
  471.  
  472. <div class="faq">
  473. <input id="question-four" type="checkbox" name="tabs">
  474. <label class="four" for="question-four">Question 4</label>
  475. <div class="answer">
  476. <p>Answer 4</p>
  477. </div>
  478. </div>
  479.  
  480. <div class="faq">
  481. <input id="question-five" type="checkbox" name="tabs">
  482. <label class="five" for="question-five">Question 5</label>
  483. <div class="answer">
  484. <p>Answer 5</p>
  485. </div>
  486. </div>
  487.  
  488. <div class="faq">
  489. <input id="question-six" type="checkbox" name="tabs">
  490. <label class="six" for="question-six">Question 6</label>
  491. <div class="answer">
  492. <p>Answer 6</p>
  493. </div>
  494. </div>
  495.  
  496. <!-- To add more questions to the accordion, just copy and paste this code:
  497.  
  498. <div class="faq">
  499. <input id="question-[number]" type="checkbox" name="tabs">
  500. <label class="[number]" for="question-six">Question NUMBER</label>
  501. <div class="answer">
  502. <p>Answer NUMBER</p>
  503. </div>
  504. </div>
  505.  
  506. -->
  507.  
  508. </div>
  509. </div>
  510.  
  511. </body>
  512. </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!