API tools faq
paste
themesbyces

Page — Can't Let You Go

themesbyces
Oct 21st, 2020 (edited)
781
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 17.03 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.  
  5. <html>
  6.  
  7. <head>
  8.  
  9. <title>{Title}</title>
  10.  
  11. <link rel="shortcut icon" href="{Favicon}">
  12.  
  13. <!-- Can't Let You Go by Franchesca (extasisthemes) -->
  14.  
  15. <!-- Google Fonts Script -->
  16.  
  17. <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,700;1,400;1,700&family=Rubik:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  18.  
  19. <!-- Styled Tooltips Script -->
  20.  
  21. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  22.  
  23. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  24.  
  25. <script>
  26. (function($){
  27. $(document).ready(function(){
  28. $("a[title]").style_my_tooltips({
  29. tip_follows_cursor:true,
  30. tip_delay_time:90,
  31. tip_fade_speed:600,
  32. attribute:"title"
  33. });
  34. });
  35. })(jQuery);
  36. </script>
  37.  
  38. <!-- Font Awesome Script -->
  39.  
  40. <link href="//use.fontawesome.com/releases/v6.0.0/css/all.css" rel="stylesheet">
  41.  
  42. <style type="text/css">
  43.  
  44. .tmblr-iframe--app-cta-button {
  45. display: none!important;
  46. }
  47.  
  48. ::-webkit-scrollbar-thumb:vertical {
  49. background: #000000;
  50. }
  51.  
  52. ::-webkit-scrollbar {
  53. width: 1px;
  54. }
  55.  
  56. ::selection {
  57. background: #ddaaaa;
  58. color: white;
  59. }
  60.  
  61. ::-moz-selection {
  62. background: #ddaaaa;
  63. color: white;
  64. }
  65.  
  66. #s-m-t-tooltip {
  67. background: #000000;
  68. border-radius: 5px;
  69. color: #ffffff;
  70. font-size: 0.9rem;
  71. margin-top: 30px;
  72. padding: 5px;
  73. text-align: center;
  74. text-transform: uppercase;
  75. z-index: 999999999999999999999999999999999999;
  76. }
  77.  
  78. body {
  79. background: #f8f8f8;
  80. color: #555555;
  81. cursor: url(https://i.imgur.com/lhPqll6.png), progress;
  82. font-family: 'Karla', sans-serif;
  83. font-size: 1rem;
  84. font-style: normal;
  85. font-weight: 400;
  86. hyphens: auto;
  87. letter-spacing: 1px;
  88. margin: 0px;
  89. text-align: left;
  90. text-transform: none;
  91. word-wrap: break-word;
  92. }
  93.  
  94. a {
  95. color: #000000;
  96. text-decoration: none;
  97. -webkit-transition: all 0.5s ease;
  98. -moz-transition: all 0.5s ease;
  99. -o-transition: all 0.5s ease;
  100. }
  101.  
  102. a:hover {
  103. color: #cfcfcf;
  104. }
  105.  
  106. b {
  107. font-weight: 700;
  108. }
  109.  
  110. h1 {
  111. font-size: 1.2rem;
  112. font-weight: bold;
  113. margin-block-start: 0em;
  114. text-transform: lowercase;
  115. }
  116.  
  117. h2 {
  118. font-size: 1rem;
  119. font-weight: bold;
  120. margin-block-start: 0em;
  121. }
  122.  
  123. blockquote {
  124. border-left: 1px solid #eeeeee;
  125. margin: 5px;
  126. padding-left: 5px;
  127. }
  128.  
  129. #container {
  130. background: #ffffff;
  131. border: 1px solid #eeeeee;
  132. border-radius: 5px;
  133. height: 500px;
  134. left: calc(50% - 351px);
  135. position: fixed;
  136. top: calc(50% - 251px);
  137. width: 700px;
  138. }
  139.  
  140. .header {
  141. align-items: center;
  142. display: flex;
  143. height: -12px;
  144. justify-content: center;
  145. padding: 40px;
  146. padding-bottom: 0px;
  147. position: absolute;
  148. width: calc(100% - 80px);
  149. }
  150.  
  151. .line {
  152. background: #eeeeee;
  153. height: 1px;
  154. position: absolute;
  155. width: 100%;
  156. z-index: -1;
  157. }
  158.  
  159. .title-icon {
  160. color: #ddaaaa;
  161. font-size: 2rem;
  162. }
  163.  
  164. .title {
  165. color: #000000;
  166. font-family: 'Playfair Display', sans-serif;
  167. font-size: 1.2rem;
  168. font-weight: 700;
  169. margin-left: -10px;
  170. text-transform: lowercase;
  171. z-index: 1;
  172. }
  173.  
  174. .links {
  175. font-size: 0.8rem;
  176. margin-left: 5px;
  177. margin-right: 5px;
  178. position: absolute;
  179. margin-top: 88px;
  180. text-align: center;
  181. text-transform: uppercase;
  182. }
  183.  
  184. .links a {
  185. background: #ffffff;
  186. border: 1px solid #eeeeee;
  187. border-radius: 100px;
  188. color: #000000;
  189. display: inline-block;
  190. font-variant: normal;
  191. height: 0.8rem;
  192. line-height: 1;
  193. margin: 5px;
  194. padding: 10px;
  195. text-rendering: auto;
  196. width: 0.8rem;
  197. }
  198.  
  199. .links a:hover {
  200. background: #ddaaaa;
  201. color: #ffffff;
  202. }
  203.  
  204. .content-wrapper {
  205. height: 323px;
  206. margin-left: 40px;
  207. margin-top: 157px;
  208. position: absolute;
  209. width: 620px;
  210. }
  211.  
  212. .tab {
  213. height: 303px;
  214. overflow-y: scroll;
  215. position: absolute;
  216. width: 250px;
  217. }
  218.  
  219. .tab a {
  220. background: #f8f8f8;
  221. align-items: center;
  222. border-radius: 5px;
  223. border-bottom-right-radius: 0px;
  224. border-top-right-radius: 0px;
  225. display: flex;
  226. margin-bottom: 10px;
  227. padding: 10px;
  228. transition: 0.3s;
  229. }
  230.  
  231. .tab a:hover {
  232. background: #000000;
  233. color: #ffffff;
  234. }
  235.  
  236. .tab a:last-child {
  237. margin-bottom: 0px;
  238. }
  239.  
  240. .tab a.active {
  241. background: #000000;
  242. color: #ffffff;
  243. }
  244.  
  245. .faq-icon {
  246. height: 34px;
  247. width: 34.39px;
  248. }
  249.  
  250. .faq-section {
  251. font-size: 0.9rem;
  252. font-weight: 700;
  253. margin-left: 10px;
  254. text-align: center;
  255. text-transform: uppercase;
  256. width: 100%;
  257. }
  258.  
  259. .tabs-wrapper {
  260. background: #f8f8f8;
  261. border-bottom-right-radius: 5px;
  262. border-top-right-radius: 5px;
  263. height: 283px;
  264. margin-left: 250px;
  265. overflow-y: scroll;
  266. padding: 10px;
  267. width: 350px;
  268. }
  269.  
  270. .tab-content {
  271. animation: fadeEffect 1s;
  272. border-bottom: 1px solid #eeeeee;
  273. display: none;
  274. margin-bottom: 20px;
  275. padding-bottom: 20px;
  276. }
  277.  
  278. @-webkit-keyframes fadeEffect {
  279.    
  280. from {
  281. opacity: 0;
  282. }
  283.  
  284. to {
  285. opacity: 1;
  286. }
  287.  
  288. }
  289.  
  290. @keyframes fadeEffect {
  291. from {
  292. opacity: 0;
  293. }
  294.  
  295. to {
  296. opacity: 1;
  297. }
  298.  
  299. }
  300.  
  301. .qa-wrapper {
  302. border-bottom: 1px solid #eeeeee;
  303. margin-bottom: 20px;
  304. padding-bottom: 20px;
  305. }
  306.  
  307. .qa-wrapper:last-of-type {
  308. border-bottom: none;
  309. margin-bottom: 0px;
  310. padding-bottom: 0px;
  311. }
  312.  
  313. .question-wrapper {
  314. align-items: center;
  315. display: flex;
  316. }
  317.  
  318. .question-icon {
  319. height: 70px;
  320. width: 70px;
  321. }
  322.  
  323. .question-icon img {
  324. border-radius: 100px;
  325. height: 70px;
  326. width: 70px;
  327. }
  328.  
  329. .question {
  330. background: #ffffff;
  331. border: 1px solid #eeeeee;
  332. border-radius: 5px;
  333. font-size: 0.9rem;
  334. margin-left: 10px;
  335. padding: 10px;
  336. text-transform: uppercase;
  337. width: calc(100% - 80px);
  338. }
  339.  
  340. .answer-wrapper {
  341. align-items: center;
  342. display: flex;
  343. margin-top: 10px;
  344. }
  345.  
  346. .answer {
  347. background: #ffffff;
  348. border: 1px solid #eeeeee;
  349. border-radius: 5px;
  350. font-size: 0.9rem;
  351. padding: 10px;
  352. text-transform: uppercase;
  353. width: calc(100% - 80px);
  354. }
  355.  
  356. .answer-icon {
  357. height: 70px;
  358. margin-left: 10px;
  359. width: 70px;
  360. }
  361.  
  362. .answer-icon img {
  363. border-radius: 100px;
  364. height: 70px;
  365. width: 70px;
  366. }
  367.  
  368. #credit {
  369. bottom: 15px;
  370. font-size: 0.9rem;
  371. position: fixed;
  372. right: 15px;
  373. text-transform: uppercase;
  374. }
  375.  
  376. #credit a {
  377. color: #000000;
  378. }
  379.  
  380. #credit a:hover {
  381. color: #cfcfcf;
  382. }
  383.  
  384. {CustomCSS}
  385.    
  386. </style>
  387.    
  388. </head>
  389.  
  390. <body>
  391.  
  392. <div id="container">
  393.  
  394. <div class="header">
  395.  
  396. <div class="line"></div>
  397.  
  398. <div class="title-icon"><i class="fas fa-feather"></i></div>
  399.  
  400. <div class="title">Can't Let You Go</div>
  401.  
  402. <div class="links">
  403. <a href="/" title="Home"><i class="far fa-arrow-alt-circle-left"></i></a>
  404. <a href="/" title="Ask"><i class="far fa-envelope"></i></a>
  405. <a href="/" title="Link One"><i class="fas fa-link"></i></a>
  406. <a href="/" title="Link Two"><i class="fas fa-link"></i></a>
  407. <a href="/" title="Link Three"><i class="fas fa-link"></i></a>
  408. <a href="/archive" title="Archive"><i class="far fa-calendar-plus"></i></a>
  409. </div>
  410.  
  411. </div>
  412.  
  413. <div class="content-wrapper">
  414.  
  415. <!-- Start of FAQ Section List -->
  416.  
  417. <div class="tab">
  418.  
  419. <!-- Start of FAQ Section -->
  420.  
  421. <a class="tab-links" onclick="openPanel(event, 'one')" id="defaultOpen">
  422.  
  423. <div class="faq-icon"><i class="fas fa-info-circle" style="background: #ddaaaa;border-radius: 100px;color: #ffffff;;font-size: 0.9rem;padding: 10px;width: 0.9rem;"></i></div>
  424.  
  425. <div class="faq-section">Basic Information</div>
  426.  
  427. </a>
  428.  
  429. <!-- End of FAQ Section -->
  430.  
  431. <!-- Start of FAQ Section -->
  432.  
  433. <a class="tab-links" onclick="openPanel(event, 'two')" id="defaultOpen">
  434.  
  435. <div class="faq-icon"><i class="fas fa-cookie-bite" style="background: #ddaaaa;border-radius: 100px;color: #ffffff;;font-size: 0.9rem;padding: 10px;width: 0.9rem;"></i></div>
  436.  
  437. <div class="faq-section">Baking For Novices</div>
  438.  
  439. </a>
  440.  
  441. <!-- End of FAQ Section -->
  442.  
  443. <!-- Start of FAQ Section -->
  444.  
  445. <a class="tab-links" onclick="openPanel(event, 'three')" id="defaultOpen">
  446.  
  447. <div class="faq-icon"><i class="fas fa-leaf" style="background: #ddaaaa;border-radius: 100px;color: #ffffff;;font-size: 0.9rem;padding: 10px;width: 0.9rem;"></i></div>
  448.  
  449. <div class="faq-section">All About Plants</div>
  450.  
  451. </a>
  452.  
  453. <!-- End of FAQ Section -->
  454.  
  455. </div>
  456.  
  457. <!-- End of FAQ Section List -->
  458.  
  459. <!-- Start of FAQ Section Tabs -->
  460.  
  461. <div class="tabs-wrapper">
  462.  
  463. <!-- Start of FAQ Section Tab -->
  464.  
  465. <div id="one" class="tab-content">
  466.  
  467. <!-- Start of Q&A -->
  468.  
  469. <!-- Start of Question -->
  470.  
  471. <div class="qa-wrapper">
  472.  
  473. <div class="question-wrapper">
  474.  
  475. <div class="question-icon"><img src="https://i.imgur.com/nGmN2xs.png"/></div>
  476.  
  477. <div class="question">
  478. Lorem ipsum dolor sit amet, consectetuer adipiscing elit?
  479. </div>
  480.  
  481. </div>
  482.  
  483. <!-- End of Question -->
  484.  
  485. <!-- Start of Answer -->
  486.  
  487. <div class="answer-wrapper">
  488.  
  489. <div class="answer">
  490. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  491. </div>
  492.  
  493. <div class="answer-icon"><img src="https://i.imgur.com/unjFPTM.png"/></div>
  494.  
  495. </div>
  496.  
  497. <!-- End of Answer -->
  498.  
  499. </div>
  500.  
  501. <!-- End Of Q&A -->
  502.  
  503. <!-- Start of Q&A -->
  504.  
  505. <!-- Start of Question -->
  506.  
  507. <div class="qa-wrapper">
  508.  
  509. <div class="question-wrapper">
  510.  
  511. <div class="question-icon"><img src="https://i.imgur.com/nGmN2xs.png"/></div>
  512.  
  513. <div class="question">
  514. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris?
  515. </div>
  516.  
  517. </div>
  518.  
  519. <!-- End of Question -->
  520.  
  521. <!-- Start of Answer -->
  522.  
  523. <div class="answer-wrapper">
  524.  
  525. <div class="answer">
  526. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  527. </div>
  528.  
  529. <div class="answer-icon"><img src="https://i.imgur.com/unjFPTM.png"/></div>
  530.  
  531. </div>
  532.  
  533. <!-- End of Answer -->
  534.  
  535. </div>
  536.  
  537. <!-- End Of Q&A -->
  538.  
  539. <!-- Start of Q&A -->
  540.  
  541. <!-- Start of Question -->
  542.  
  543. <div class="qa-wrapper">
  544.  
  545. <div class="question-wrapper">
  546.  
  547. <div class="question-icon"><img src="https://i.imgur.com/nGmN2xs.png"/></div>
  548.  
  549. <div class="question">
  550. Aliquam mattis porta urna?
  551. </div>
  552.  
  553. </div>
  554.  
  555. <!-- End of Question -->
  556.  
  557. <!-- Start of Answer -->
  558.  
  559. <div class="answer-wrapper">
  560.  
  561. <div class="answer">
  562. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  563. </div>
  564.  
  565. <div class="answer-icon"><img src="https://i.imgur.com/unjFPTM.png"/></div>
  566.  
  567. </div>
  568.  
  569. <!-- End of Answer -->
  570.  
  571. </div>
  572.  
  573. <!-- End Of Q&A -->
  574.  
  575. </div>
  576.  
  577. <!-- End of FAQ Section Tab -->
  578.  
  579. <!-- Start of FAQ Section Tab -->
  580.  
  581. <div id="two" class="tab-content">
  582.  
  583. <!-- Start of Q&A -->
  584.  
  585. <!-- Start of Question -->
  586.  
  587. <div class="qa-wrapper">
  588.  
  589. <div class="question-wrapper">
  590.  
  591. <div class="question-icon"><img src="https://i.imgur.com/nGmN2xs.png"/></div>
  592.  
  593. <div class="question">
  594. Lorem ipsum dolor sit amet, consectetuer adipiscing elit?
  595. </div>
  596.  
  597. </div>
  598.  
  599. <!-- End of Question -->
  600.  
  601. <!-- Start of Answer -->
  602.  
  603. <div class="answer-wrapper">
  604.  
  605. <div class="answer">
  606. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  607. </div>
  608.  
  609. <div class="answer-icon"><img src="https://i.imgur.com/unjFPTM.png"/></div>
  610.  
  611. </div>
  612.  
  613. <!-- End of Answer -->
  614.  
  615. </div>
  616.  
  617. <!-- End Of Q&A -->
  618.  
  619. <!-- Start of Q&A -->
  620.  
  621. <!-- Start of Question -->
  622.  
  623. <div class="qa-wrapper">
  624.  
  625. <div class="question-wrapper">
  626.  
  627. <div class="question-icon"><img src="https://i.imgur.com/nGmN2xs.png"/></div>
  628.  
  629. <div class="question">
  630. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris?
  631. </div>
  632.  
  633. </div>
  634.  
  635. <!-- End of Question -->
  636.  
  637. <!-- Start of Answer -->
  638.  
  639. <div class="answer-wrapper">
  640.  
  641. <div class="answer">
  642. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  643. </div>
  644.  
  645. <div class="answer-icon"><img src="https://i.imgur.com/unjFPTM.png"/></div>
  646.  
  647. </div>
  648.  
  649. <!-- End of Answer -->
  650.  
  651. </div>
  652.  
  653. <!-- End Of Q&A -->
  654.  
  655. <!-- Start of Q&A -->
  656.  
  657. <!-- Start of Question -->
  658.  
  659. <div class="qa-wrapper">
  660.  
  661. <div class="question-wrapper">
  662.  
  663. <div class="question-icon"><img src="https://i.imgur.com/nGmN2xs.png"/></div>
  664.  
  665. <div class="question">
  666. Aliquam mattis porta urna?
  667. </div>
  668.  
  669. </div>
  670.  
  671. <!-- End of Question -->
  672.  
  673. <!-- Start of Answer -->
  674.  
  675. <div class="answer-wrapper">
  676.  
  677. <div class="answer">
  678. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  679. </div>
  680.  
  681. <div class="answer-icon"><img src="https://i.imgur.com/unjFPTM.png"/></div>
  682.  
  683. </div>
  684.  
  685. <!-- End of Answer -->
  686.  
  687. </div>
  688.  
  689. <!-- End Of Q&A -->
  690.  
  691. </div>
  692.  
  693. <!-- End of FAQ Section Tab -->
  694.  
  695. <!-- Start of FAQ Section Tab -->
  696.  
  697. <div id="three" class="tab-content">
  698.  
  699. <!-- Start of Q&A -->
  700.  
  701. <!-- Start of Question -->
  702.  
  703. <div class="qa-wrapper">
  704.  
  705. <div class="question-wrapper">
  706.  
  707. <div class="question-icon"><img src="https://i.imgur.com/nGmN2xs.png"/></div>
  708.  
  709. <div class="question">
  710. Lorem ipsum dolor sit amet, consectetuer adipiscing elit?
  711. </div>
  712.  
  713. </div>
  714.  
  715. <!-- End of Question -->
  716.  
  717. <!-- Start of Answer -->
  718.  
  719. <div class="answer-wrapper">
  720.  
  721. <div class="answer">
  722. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  723. </div>
  724.  
  725. <div class="answer-icon"><img src="https://i.imgur.com/unjFPTM.png"/></div>
  726.  
  727. </div>
  728.  
  729. <!-- End of Answer -->
  730.  
  731. </div>
  732.  
  733. <!-- End Of Q&A -->
  734.  
  735. <!-- Start of Q&A -->
  736.  
  737. <!-- Start of Question -->
  738.  
  739. <div class="qa-wrapper">
  740.  
  741. <div class="question-wrapper">
  742.  
  743. <div class="question-icon"><img src="https://i.imgur.com/nGmN2xs.png"/></div>
  744.  
  745. <div class="question">
  746. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris?
  747. </div>
  748.  
  749. </div>
  750.  
  751. <!-- End of Question -->
  752.  
  753. <!-- Start of Answer -->
  754.  
  755. <div class="answer-wrapper">
  756.  
  757. <div class="answer">
  758. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  759. </div>
  760.  
  761. <div class="answer-icon"><img src="https://i.imgur.com/unjFPTM.png"/></div>
  762.  
  763. </div>
  764.  
  765. <!-- End of Answer -->
  766.  
  767. </div>
  768.  
  769. <!-- End Of Q&A -->
  770.  
  771. <!-- Start of Q&A -->
  772.  
  773. <!-- Start of Question -->
  774.  
  775. <div class="qa-wrapper">
  776.  
  777. <div class="question-wrapper">
  778.  
  779. <div class="question-icon"><img src="https://i.imgur.com/nGmN2xs.png"/></div>
  780.  
  781. <div class="question">
  782. Aliquam mattis porta urna?
  783. </div>
  784.  
  785. </div>
  786.  
  787. <!-- End of Question -->
  788.  
  789. <!-- Start of Answer -->
  790.  
  791. <div class="answer-wrapper">
  792.  
  793. <div class="answer">
  794. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  795. </div>
  796.  
  797. <div class="answer-icon"><img src="https://i.imgur.com/unjFPTM.png"/></div>
  798.  
  799. </div>
  800.  
  801. <!-- End of Answer -->
  802.  
  803. </div>
  804.  
  805. <!-- End Of Q&A -->
  806.  
  807. </div>
  808.  
  809. <!-- End of FAQ Section Tab -->
  810.  
  811. <iframe frameborder="0" height="200" id="ask_form" scrolling="no" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" width="100%"></iframe>
  812.  
  813. </div>
  814.  
  815. <!-- End of FAQ Section Tabs -->
  816.  
  817. </div>
  818.  
  819. <div id="credit"><a href="http://extasisthemes.tumblr.com/" title="extasisthemes" target="_blank">EXT</a></div>
  820.  
  821. </body>
  822.  
  823. <!-- Tabs Script -->
  824.  
  825. <script>
  826. function openPanel(evt, number) {
  827. var i, tabcontent, tablinks;
  828. tabcontent = document.getElementsByClassName("tab-content");
  829. for (i = 0; i < tabcontent.length; i++) {
  830. tabcontent[i].style.display = "none";
  831. }
  832. tablinks = document.getElementsByClassName("tab-links");
  833. for (i = 0; i < tablinks.length; i++) {
  834. tablinks[i].className = tablinks[i].className.replace(" active", "");
  835. }
  836. document.getElementById(number).style.display = "block";
  837. evt.currentTarget.className += " active";
  838. }
  839. document.getElementById("defaultOpen").click();
  840. </script>
  841.  
  842. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!