API tools faq
paste
Advertisement
b0rn-to-be-wild

F.A.Q. PAGE (dark)

b0rn-to-be-wild
Mar 3rd, 2018
252
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.89 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!----
  4.  
  5. ©borntobewildcodes.tumblr.com | F.A.Q. PAGE (dark)
  6.  
  7. + Do not redistribute this page or remove the credits.
  8. + Edit as long as you keep the credits intact
  9. + Contact us if you have any questions or concerns.
  10. + If you want a custom theme you can commission us.
  11. + Thanks for using our page, we hope that you enjoy it.
  12.  
  13.  
  14. Other credits:
  15.  
  16. - Google fonts
  17. - Font Awesome icons
  18. - Jquery
  19. - Style my tooltips by Malihu
  20.  
  21. ---->
  22.  
  23. <html>
  24. <head>
  25.  
  26. <title>{Title}</title>
  27. <link rel="shortcut icon" href="{Favicon}">
  28. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  29.  
  30. </style>
  31. <style type="text/css">
  32.  
  33. /* ---------------------------- GENERAL ----------------------------- */
  34.  
  35. /* -------- BASICS ------- */
  36.  
  37. body {
  38. margin: 0;
  39. padding: 0;
  40. width: 100%;
  41. height: 100%;
  42. font-family: Helvetica;
  43. font-size: 12px;
  44. line-height: 17px;
  45. color: #777777;
  46. background-color: #f6f6f6;
  47. background-image: url('https://68.media.tumblr.com/45bd68cd2c48d145c5575e39eb461d14/tumblr_ovcb6mjQkS1w4d880o1_250.png');
  48. background-attachment: fixed;
  49. background-repeat: repeat;
  50. }
  51.  
  52. /* Fix */
  53.  
  54. iframe, img, embed, object, video {
  55. max-width: 100%;
  56. border: none;
  57. }
  58.  
  59. input, textarea, select, a { outline: none; }
  60.  
  61. /* Paragraph */
  62.  
  63. p {margin-top: 5px; margin-bottom: 5px;}
  64.  
  65. <--ses-->
  66. small{font-size: 90%;}
  67.  
  68. big{font-size: 110%;}
  69.  
  70. h1{
  71. margin: 0;
  72. margin-top: 10px;
  73. margin-bottom: 10px;
  74. color:#dddddd;
  75. font-family:'Marvel';
  76. font-size: 20px;
  77. line-height:25px;
  78. font-weight: normal;
  79. }
  80.  
  81. /* Captions */
  82.  
  83. h2 {
  84. font-family: Helvetica;
  85. font-size: 12px;
  86. line-height: 17px;
  87. color: #f1f1f1;
  88. background-color: #dddddd;
  89. font-weight: normal;
  90. }
  91.  
  92. /* Links */
  93.  
  94. a {
  95. color:#B9BC4B;
  96. text-decoration:none;
  97. }
  98.  
  99. a:hover {
  100. color: #f1f1f1;
  101. -webkit-transition: all .3s;
  102. -moz-transition: all .3s;
  103. -o-transition: all .3s;
  104. -ms-transition: all .3s;
  105. transition: all .3s;
  106. }
  107.  
  108. ul, ol, li {
  109. margin: 5px 10px;
  110. padding: 0px;
  111. }
  112.  
  113. /* Bold and italic */
  114.  
  115. b, strong {
  116. color: #555;
  117. }
  118.  
  119. i, em {
  120. color: #bbb;
  121. }
  122.  
  123. ul {
  124. margin: 0px;
  125. padding: 0px;
  126. }
  127.  
  128. a img {
  129. border: 0px;
  130. }
  131.  
  132. small {
  133. font-size: 90%;
  134. }
  135.  
  136. big {
  137. font-size: 110%;
  138. }
  139.  
  140. /* Selection */
  141.  
  142. ::-moz-selection {
  143. background: #81765A;
  144. color: #dddddd;
  145. }
  146.  
  147. ::selection {
  148. background: #81765A;
  149. color: #dddddd;
  150. }
  151.  
  152. /* Webkit scrollbar */
  153.  
  154. ::-webkit-scrollbar {
  155. width: 9px;
  156. height: 0px;
  157. }
  158.  
  159. ::-webkit-scrollbar-button:start:decrement,
  160. ::-webkit-scrollbar-button:end:increment {
  161. height: 0px;
  162. display: block;
  163. background-color: #000000;
  164. }
  165.  
  166. ::-webkit-scrollbar-track-piece {
  167. background-color: #000000;
  168. }
  169.  
  170. ::-webkit-scrollbar-thumb:vertical {
  171. height: 0px;
  172. background-color: #222222;
  173. border: 4px solid #000000;
  174. }
  175.  
  176. /* Tumblr controls */
  177.  
  178. iframe.tmblr-iframe {
  179. top:0px!important;
  180. right:33px!important;
  181. opacity:0.8;
  182. transform:scale(0.6);
  183. transform-origin:100% 0;
  184. -webkit-transform:scale(0.8);
  185. -webkit-transform-origin:100% 0;
  186. -o-transform:scale(0.8);
  187. -o-transform-origin:100% 0;
  188. -moz-transform:scale(0.8);
  189. -moz-transform-origin:100% 0;
  190. -ms-transform:scale(0.8);
  191. -ms-transform-origin:100% 0;
  192. z-index:100000!important;
  193. }
  194.  
  195. iframe.tmblr-iframe:hover {
  196. opacity:1!important;
  197. }
  198.  
  199. /* Tooltips */
  200.  
  201. #s-m-t-tooltip {
  202. max-width: 250px;
  203. margin: 10px;
  204. padding: 5px;
  205. color: #f1f1f1;
  206. font-size: 12px;
  207. line-height: 15px;
  208. background: #000000;
  209. border:1px solid #222222;
  210. z-index: 10000;
  211. }
  212.  
  213. /*------------ CONTAINER ------------*/
  214.  
  215. #container {
  216. position:fixed;
  217. top:50%;
  218. left:50%;
  219. width:623px;
  220. height:483px;
  221. padding-right:25px;
  222. padding-bottom:25px;
  223. -webkit-transform:translateX(-50%) translateY(-50%);
  224. -moz-transform:translateX(-50%) translateY(-50%);
  225. -ms-transform:translateX(-50%) translateY(-50%);
  226. transform:translateX(-50%) translateY(-50%);
  227. z-index:100;
  228. overflow:hidden;
  229. }
  230.  
  231. /*-- MENU --*/
  232.  
  233. #menu {
  234. position:absolute;
  235. margin-top:0px;
  236. margin-left:0px;
  237. height:30px;
  238. width:626px;
  239. padding:10px;
  240. background:#BDB3C5;
  241. border:1px solid #222222;
  242. border-top-left-radius:10px;
  243. border-top-right-radius:10px;
  244. }
  245.  
  246. /* Blog title */
  247.  
  248. #blogtitle {
  249. position:absolute;
  250. margin-top:-11px;
  251. margin-left:315px;
  252. width:285px;
  253. height:31px;
  254. padding:10px;
  255. font-size:27px;
  256. line-height:30px;
  257. color:#f1f1f1;
  258. background: transparent;
  259. font-family:'Marvel';
  260. text-align:right;
  261. }
  262.  
  263. /* Icons */
  264.  
  265. #icons {
  266. position:absolute;
  267. margin-top:-11px;
  268. margin-left:-10px;
  269. padding-left:15px;
  270. width:310px;
  271. height:51px;
  272. background: transparent;
  273. text-align:left;
  274. overflow:hidden;
  275. }
  276.  
  277. #icons i {
  278. display:inline-block;
  279. height:40px;
  280. margin:0px;
  281. margin-left:-2px;
  282. margin-right:-1px;
  283. padding:7px 10px;
  284. color: #f1f1f1;
  285. font-size:16px;
  286. line-height:40px;
  287. text-align:center;
  288. -webkit-transition: all 0.4s ease-in-out;
  289. -moz-transition: all 0.4s ease-in-out;
  290. -o-transition: all 0.4s ease-in-out;
  291. -ms-transition: all 0.4s ease-in-out;
  292. transition: all 0.4s ease-in-out;
  293. }
  294.  
  295. #icons i:hover {
  296. color:#222222;
  297. }
  298.  
  299. /* -- CONTENT BOX --*/
  300.  
  301. #contentbox{
  302. position:absolute;
  303. margin-left:0px;
  304. margin-top:51px;
  305. width:611px;
  306. max-height:455px;
  307. padding-left:15px;
  308. padding-right:20px;
  309. overflow-y:auto;
  310. z-index:10;
  311. background:#000000;
  312. border:1px solid #222222;
  313. }
  314.  
  315. #line{
  316. position:absolute;
  317. margin-top:0px;
  318. margin-left:305px;
  319. width:1px;
  320. background:#222222;
  321. height:500px;
  322. z-index:1000;
  323. }
  324.  
  325. /* Left question bubbles */
  326.  
  327. .q1, .q3, .q5, .q7, .q9{
  328. position: relative;
  329. margin:0px;
  330. margin-top:16px;
  331. width:250px;
  332. padding:15px;
  333. color:#f1f1f1;
  334. background:#91B533;
  335. border-radius:4px;
  336. font-size:15px;
  337. cursor:pointer;
  338. }
  339.  
  340. /* Left question bubbles arrows */
  341.  
  342. .q1:before, .q3:before, .q5:before, .q7:before, .q9:before {
  343. content:"";
  344. position: absolute;
  345. left: 279px;
  346. top: 13px;
  347. width: 0;
  348. height: 0;
  349. border-top: 10px solid transparent;
  350. border-left: 15px solid #91B533;
  351. border-bottom: 10px solid transparent;
  352. }
  353.  
  354. /* Left answer bubbles */
  355.  
  356. .a1, .a3, .a5, .a7, .a9{
  357. position: relative;
  358. margin:0px;
  359. margin-top:10px;
  360. width:250px;
  361. padding:15px;
  362. color:#f1f1f1;
  363. background:#222222;
  364. border-radius:4px;
  365. font-size:15px;
  366. border-bottom: 3px solid #C8DA99;
  367. display:none;
  368. -webkit-transition: all 0.4s ease-in-out;
  369. -moz-transition: all 0.4s ease-in-out;
  370. -o-transition: all 0.4s ease-in-out;
  371. -ms-transition: all 0.4s ease-in-out;
  372. transition: all 0.4s ease-in-out;
  373. }
  374.  
  375. /* Right question bubbles */
  376.  
  377. .q2, .q4, .q6, .q8, .q10{
  378. position: relative;
  379. margin:0px;
  380. margin-top:16px;
  381. margin-left:332px;
  382. width:250px;
  383. padding:15px;
  384. color:#f1f1f1;
  385. background:#439FC9;
  386. border-radius:4px;
  387. font-size:15px;
  388. cursor:pointer;
  389. }
  390.  
  391. /* Right question bubbles arrows */
  392.  
  393. .q2:before, .q4:before, .q6:before, .q8:before, .q10:before {
  394. content:"";
  395. position: absolute;
  396. right: 279px;
  397. top: 13px;
  398. width: 0;
  399. height: 0;
  400. border-top: 10px solid transparent;
  401. border-right: 15px solid #439FC9;
  402. border-bottom: 10px solid transparent;
  403. -webkit-transition: all 0.4s ease-in-out;
  404. -moz-transition: all 0.4s ease-in-out;
  405. -o-transition: all 0.4s ease-in-out;
  406. -ms-transition: all 0.4s ease-in-out;
  407. transition: all 0.4s ease-in-out;
  408. }
  409.  
  410. /* Right question bubbles answers */
  411.  
  412. .a2, .a4, .a6, .a8, .a10{
  413. position: relative;
  414. margin:0px;
  415. margin-top:10px;
  416. margin-left:332px;
  417. width:250px;
  418. padding:15px;
  419. color:#f1f1f1;
  420. background:#222222;
  421. border-radius:4px;
  422. font-size:15px;
  423. border-bottom: 3px solid #91DBED;
  424. display:none;
  425. }
  426.  
  427. /* Circles */
  428.  
  429. .circlel, .circler{
  430. position:absolute;
  431. margin-top:4px;
  432. margin-left:286px;
  433. width:6px;
  434. height:6px;
  435. background:#222222;
  436. border-radius:100%;
  437. border: 1px solid #222222;
  438. z-index:100;
  439. }
  440.  
  441. .circler{
  442. left:-316px;
  443. }
  444.  
  445. /*-- CREDIT --*/
  446.  
  447. #credit {
  448. position:fixed;
  449. top: 10px;
  450. right: 10px;
  451. width:25px;
  452. height:25px;
  453. z-index: 100000;
  454. }
  455.  
  456. #credit img{
  457. border: 1px solid #222222;
  458. }
  459.  
  460. #credit img:hover{
  461. border: 1px solid #f1f1f1;
  462. }
  463.  
  464. /* --------------------------- Custom CSS -------------------------- */
  465.  
  466. {CustomCSS}
  467.  
  468. </style>
  469.  
  470. <!--Google fonts-->
  471.  
  472. <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Marvel|Poiret+One|Montez|Exo" rel="stylesheet">
  473.  
  474. <!-- Font awesome -->
  475.  
  476. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  477.  
  478. <!--Jquery-->
  479.  
  480. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  481.  
  482. <!--Masonry-->
  483.  
  484. <script type="text/javascript" src="https://static.tumblr.com/imovwvl/dJWl20ley/jqueryformasonry.js"></script>
  485.  
  486. <!-- Style my tooltips -->
  487.  
  488. <script src="jquery.style-my-tooltips.js"></script>
  489. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  490. <script>
  491. (function($){
  492. $(document).ready(function(){
  493. $("a[title]").style_my_tooltips({
  494. tip_follows_cursor:true,
  495. tip_delay_time: 90,
  496. tip_fade_speed: 600,
  497. attribute:"title"
  498. });
  499. });
  500. })(jQuery);
  501. </script>
  502.  
  503. <!--Hide/show on click-->
  504.  
  505. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  506.  
  507. <script>
  508. $(document).ready(function(){
  509.  
  510. $(".q1").click(function(){
  511. $(".a1").toggle(0);
  512. });
  513.  
  514. $(".q2").click(function(){
  515. $(".a2").toggle(0);
  516. });
  517.  
  518. $(".q3").click(function(){
  519. $(".a3").toggle(0);
  520. });
  521.  
  522. $(".q4").click(function(){
  523. $(".a4").toggle(0);
  524. });
  525.  
  526. $(".q5").click(function(){
  527. $(".a5").toggle(0);
  528. });
  529.  
  530. $(".q6").click(function(){
  531. $(".a6").toggle(0);
  532. });
  533.  
  534. $(".q7").click(function(){
  535. $(".a7").toggle(0);
  536. });
  537.  
  538. $(".q8").click(function(){
  539. $(".a8").toggle(0);
  540. });
  541.  
  542. $(".q9").click(function(){
  543. $(".a9").toggle(0);
  544. });
  545.  
  546. $(".q10").click(function(){
  547. $(".a10").toggle(0);
  548. });
  549.  
  550. });
  551. </script>
  552.  
  553. <meta charset="utf-8">
  554.  
  555. </head>
  556.  
  557. <body>
  558.  
  559. <div id="container">
  560.  
  561. <div id="menu">
  562. <div id="blogtitle">Frequently asked questions</div>
  563.  
  564. <div id="icons">
  565. <a href="/" Title="Index"><i class="fa fa-home fa"></i></a>
  566. <a href="/ask" Title="Message"><i class="fa fa-envelope fa-o"></i></a>
  567. <a href="/submit" Title="Submit"><i class="fa fa-pencil fa"></i></a>
  568. <a href="/archive" Title="Archive"><i class="fa fa-history fa"></i></a>
  569. <a href="httpss://www.tumblr.com/dashboard" Title="Dashboard"><i class="fa fa-tumblr fa"></i></a>
  570. </div>
  571. <!--End icons-->
  572.  
  573. </div>
  574. <!--End menu-->
  575.  
  576. <div id="contentbox">
  577.  
  578. <div id="line"></div>
  579.  
  580.  
  581. <div class="q1"> <div class="circlel"></div>
  582. Is this a question?
  583. </div>
  584. <!--End q1-->
  585. <div class="a1"> Yes and this is an answer. </div>
  586.  
  587.  
  588. <div class="q2"> <div class="circler"></div>
  589. Is this a question?
  590. </div>
  591. <!--End q2-->
  592. <div class="a2"> Yes and this is an answer. </div>
  593.  
  594.  
  595. <div class="q3"> <div class="circlel"></div>
  596. Is this a question?
  597. </div>
  598. <!--End q3-->
  599. <div class="a3"> Yes and this is an answer. </div>
  600.  
  601.  
  602. <div class="q4"> <div class="circler"></div>
  603. Is this a question?
  604. </div>
  605. <!--End q1-->
  606. <div class="a4"> Yes and this is an answer. </div>
  607.  
  608.  
  609. <div class="q5"> <div class="circlel"></div>
  610. Is this a question?
  611. </div>
  612. <!--End q5-->
  613. <div class="a5"> Yes and this is an answer. </div>
  614.  
  615.  
  616. <div class="q6"> <div class="circler"></div>
  617. Is this a question?
  618. </div>
  619. <!--End q6-->
  620. <div class="a6"> Yes and this is an answer. </div>
  621.  
  622.  
  623. <div class="q7"> <div class="circlel"></div>
  624. Is this a question?
  625. </div>
  626. <!--End q7-->
  627. <div class="a7"> Yes and this is an answer. </div>
  628.  
  629.  
  630. <div class="q8"> <div class="circler"></div>
  631. Is this a question?
  632. </div>
  633. <!--End q8-->
  634. <div class="a8"> Yes and this is an answer. </div>
  635.  
  636.  
  637. <div class="q9"> <div class="circlel"></div>
  638. Is this a question?
  639. </div>
  640. <!--End q9-->
  641. <div class="a9"> Yes and this is an answer. </div>
  642.  
  643.  
  644. <div class="q10"> <div class="circler"></div>
  645. Is this a question?
  646. </div>
  647. <!--End q10-->
  648. <div class="a10"> Yes and this is an answer. </div>
  649.  
  650. </div>
  651. <!--End contentbox-->
  652.  
  653. </div>
  654. <!--End container-->
  655.  
  656. <!-- CREDIT (do not remove) -->
  657.  
  658. <div id="credit"><a href="http://borntobewildcodes.tumblr.com" title="page F.A.Q. PAGE by @borntobewildcodes"><img src="http://i57.tinypic.com/301g6eg.jpg"></a></div>
  659.  
  660. </body>
  661. </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!