API tools faq
paste
Advertisement
southcodes

xavieryaa

southcodes
Feb 6th, 2024
1,160
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 18.86 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - page '' by skye southcodes.tumblr.com
  3.     - modify as you please but please do not touch the credit
  4.     - any errors? need help? have questions? let me know!
  5.     southcodes.tumblr.com/inbox
  6.    
  7.     - normalize css by https://github.com/necolas
  8.     - fonts by google
  9.     - icon font by http://fontawesome.io/icons/
  10.  
  11. -->
  12. <!DOCTYPE html>
  13. <html>
  14. <head>
  15.     <title>{title}</title>
  16.    
  17.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  18.  
  19.     <link rel="shortcut icon" href="{favicon}">
  20.     <meta name="description" content="{MetaDescription}"/>
  21.  
  22.     <!-- fonts -->
  23.     <link rel="preconnect" href="https://fonts.googleapis.com">
  24.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  25.     <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  26.    
  27.     <!-- normalize -->
  28.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  29.    
  30. <style>
  31.     :root {
  32.     --background:#f8f8f8;
  33.     --content-background: #ffffff;
  34.     --text:#333;
  35.     --lighter-text:#aaa;
  36.     --links: #8cb3db;
  37.     --links-hover: #36608c;
  38.     --borders:#e4e4e4;
  39.     --icons: #36608c;
  40.     --accents: lightblue
  41. }
  42.  
  43. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85);-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  44. .tmblr-iframe:hover {opacity:.8;}
  45.  
  46. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--borders);}
  47. ::-webkit-scrollbar {width:6px}
  48. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  49.  
  50. pre {font-family:consolas;
  51.     white-space: pre-wrap;       /* css-3 */
  52.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  53.     white-space: -pre-wrap;      /* Opera 4- */
  54.     white-space: -o-pre-wrap;    /* Opera 7 */
  55.     word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  56.  
  57. * {margin: 0;padding: 0; box-sizing: border-box;}
  58. p {margin:1rem 0}
  59. body, figure{margin:0;padding:0}
  60. html{font: 14px 'Karla', sans-serif;}
  61. body {font-size:14px;color:var(--text);background:var(--background);}
  62. a {text-decoration: none;color:var(--links);word-break:break-word;}
  63. a:hover {color:var(--links-hover);}
  64. blockquote {margin:0;padding:0;}
  65. img {max-width:100%;height: auto;display: block;margin:0}
  66. hr {border:0;border-top:1px solid var(--borders);margin:0;}
  67. ol, ul, li {list-style-type:none;margin:0;padding:0;}
  68.  
  69. #container {display: flex;}
  70.  
  71. #faq-wrapper, #content-table, #work-info,#content-table,#work-story{
  72.     width: 60rem;
  73.     max-width: 90%;
  74.     margin: 2rem auto;
  75.     padding: 3rem;
  76.     background-color: var(--content-background);
  77.     border: 1px solid var(--borders);
  78. }
  79.  
  80. /* sidebar */
  81.  
  82. aside {
  83.     width: 18rem;
  84.     height: 100vh;
  85.     overflow: auto;
  86.     flex-shrink: 0;
  87.     border-right: 1px solid var(--borders);
  88.     padding:3rem 2rem;
  89.     background-color: var(--content-background);
  90.     font-family: 'montserrat', sans-serif;
  91.     text-align: right;
  92.     position: relative;
  93.     z-index: 8;
  94. }
  95.  
  96. #hamburger-checkbox {display: none;}
  97.  
  98. #hamburger-button {
  99.     display: none;
  100.     position: absolute;
  101.     inset:1rem auto auto 1rem;
  102.     font-size: 1.5rem;
  103.     z-index: 99;
  104. }
  105.  
  106. /* sidebar image */
  107.  
  108. .sidebar-image {
  109.     width: 8rem;
  110.     aspect-ratio: 1 / 1;
  111.     border-radius: 100%;
  112.     object-fit: cover;
  113. }
  114. figure.sidebar-image {
  115.     margin-bottom: 2rem;
  116.     float: right;
  117. }
  118. img.sidebar-image {
  119.     border:.8rem solid transparent;
  120.     outline: 1px solid var(--borders);
  121. }
  122.  
  123. /* page title */
  124.  
  125. #page-title {
  126.     margin: 0 0 2rem;
  127.     font:600 1.4rem 'Montserrat', sans-serif;
  128.     letter-spacing: .05rem;
  129. }
  130.  
  131. /* page description */
  132.  
  133. #page-description {
  134.     margin-bottom: 3rem;
  135.     font-family: 'karla', sans-serif;
  136.     font-size: .95rem;
  137.     letter-spacing: .04rem;
  138.     line-height: 140%;
  139. }
  140.  
  141. /* sidebar navigation */
  142.  
  143. #sidebar-navigation {
  144. }
  145.  
  146. #sidebar-navigation li {
  147.     margin-bottom: 1rem;
  148. }
  149.  
  150. /* main */
  151.  
  152. main {
  153.     width: 100%;
  154.     height: 100vh;
  155.     overflow: auto;
  156.     margin: 0 auto;
  157.     padding: 4rem 0;
  158. }
  159.  
  160.  
  161. /*  header  */
  162.  
  163. header {
  164.     width: 60rem;
  165.     max-width: 90%;
  166.     margin: auto;
  167. }
  168.  
  169. /* header image */
  170.  
  171. .header-image {
  172.     width: 100%;
  173.     z-index: 1;
  174. }
  175.  
  176. /* header icon */
  177.  
  178. .header-icon {
  179.     width: 13rem;
  180.     aspect-ratio: 1 / 1;
  181.     object-fit: cover;
  182.     position: relative;
  183.     z-index: 9!important;
  184.     border-radius: 100%;
  185. }
  186. figure.header-icon {
  187.     float:right;
  188.     margin: -7rem 3rem 0 0;
  189. }
  190. img.header-icon {
  191.     border: .8rem solid var(--content-background);
  192.     outline: 1px solid var(--borders);
  193. }
  194.  
  195. /* work info */
  196.  
  197. #work-info {
  198.     padding-bottom: 1rem;
  199.     font-style: italic;
  200.     letter-spacing: .05rem;
  201.     color: var(--lighter-text);
  202.     line-height: 150%;
  203. }
  204.  
  205. #work-info li {
  206.     display: inline-block;
  207.     margin:0 4rem 2rem 0;
  208. }
  209.  
  210. .info-title {
  211.     position: relative;
  212.     margin-right: 2rem;
  213.     text-transform: uppercase;
  214.     font-weight: 600;
  215.     font-size: 1.1rem;
  216.     font-style: normal;
  217.     color: var(--text);
  218.     padding: 2rem;
  219. }
  220.  
  221. .info-title:before {
  222.     content: '';
  223.     position: absolute;
  224.     inset: auto auto auto 0;
  225.     width: .5rem;
  226.     height: .5rem;
  227.     margin-top: 3px;
  228.     background-color: var(--icons);
  229.     border-radius: 100%;
  230.     border: 2px solid var(--content-background);
  231.     outline: 1px solid var(--borders);
  232. }
  233.  
  234. .info-title:after {
  235.     content: '';
  236.     position: absolute;
  237.     inset:50% auto auto;
  238.     width: 2rem;
  239.     height: 1px;
  240.     margin-left: 1rem;
  241.     background-color: var(--borders);
  242. }
  243.  
  244. /* content table */
  245.  
  246. #content-table {
  247.     text-align: center;
  248. }
  249.  
  250. #content-title {
  251.     font-size: 1.5rem;
  252.     font-family: 'montserrat', sans-serif;
  253.     font-weight: 600;
  254.     text-transform: uppercase;
  255.     text-align: center;
  256.     margin-bottom: 2rem;
  257. }
  258.  
  259. #content-table li {
  260.     position: relative;
  261.     font-family: 'montserrat', sans-serif;
  262.     font-weight: 500;
  263.     text-transform: uppercase;
  264.     letter-spacing: .05rem;
  265.     margin-bottom: 2rem;    
  266. }
  267.  
  268. #content-table li:last-of-type {
  269.     margin-bottom: 0;
  270. }
  271.  
  272.  
  273. #content-table li:before {
  274.     vertical-align: middle;
  275.     font-family: 'Font Awesome 5 Free';
  276.     content:'\f111';
  277.     font-size: .4rem;
  278.     margin:0 .5rem 0 0;
  279.     font-weight: 900;
  280.     color: var(--icons);
  281.     border: 2px solid var(--inner-background);
  282.     outline: 1px solid var(--borders);
  283.     border-radius: 100%;
  284. }
  285.  
  286. /* story */
  287.  
  288. #work-header {
  289.     margin: 6rem 0;
  290.     max-width: 100%;
  291. }
  292.  
  293. /* work title */
  294.  
  295. #work-story {
  296.     padding:0  4rem 4rem
  297. }
  298.  
  299. #work-title {
  300.     font: 700 2rem 'montserrat', sans-serif;
  301.     text-transform: uppercase;
  302.     text-align: center;
  303. }
  304.  
  305. #work-title span {
  306.     box-shadow: inset 0 -13px var(--accents);
  307.     padding: 0 1rem;
  308. }
  309.  
  310. /* author */
  311.  
  312. #author {
  313.     text-align: center;
  314.     font-style: italic;
  315.     color: var(--lighter-text);
  316.     letter-spacing: .04rem;
  317. }
  318.  
  319. /* work summary */
  320.  
  321. #work-summary {
  322.     margin-top: 2rem;
  323.     text-align: center;
  324.     color: var(--lighter-text);
  325.     letter-spacing: .05rem;
  326.     line-height: 150%;
  327. }
  328.  
  329. /* chapter title */
  330.  
  331. .chapter-title {
  332.     font-size: 1.4rem;
  333.     font-family: 'montserrat', sans-serif;
  334.     font-weight: 600;
  335.     text-transform: uppercase;
  336.     text-align: center;
  337.     margin-bottom: 2rem;
  338.     padding-top: 3rem;
  339. }
  340.  
  341. /* chapter summary */
  342.  
  343. .chapter-summary {
  344.     text-align: center;
  345.     letter-spacing: .03rem;
  346.     line-height: 130%;
  347.     color: var(--lighter-text);
  348. }
  349.  
  350. /* chapter text */
  351.  
  352. .chapter-content {
  353.     margin-top: 3rem;
  354.     text-align: justify;
  355.     font-size: 1.1rem;
  356.     letter-spacing: .03rem;
  357.     line-height: 130%;
  358. }
  359.  
  360. .chapter-divider {
  361.     width: 90%;
  362.     max-width: 30rem;
  363.     margin: 5rem auto 3rem;
  364. }
  365.  
  366. /* faq */
  367.  
  368. #faq-wrapper {
  369.     line-height:130%;
  370. }
  371.  
  372. #faq-title {
  373.     text-align: center;
  374.     font-size: 1.8rem;
  375.     margin:2rem 0
  376. }
  377.  
  378. #faq-wrapper p {
  379.     margin:0;
  380.     padding:1rem 0
  381. }
  382.  
  383. .faq-divider {
  384.     width: 85%;
  385.     max-width: 25rem;
  386.     margin:3rem auto
  387. }
  388.  
  389. /* faq note */
  390.  
  391. #faq-note {
  392.     margin-bottom: 2rem;
  393. }
  394.  
  395. #faq-note li,#faq-note ul{list-style: none;margin:0;padding:0}
  396.  
  397. #faq-note li {margin:1rem}
  398.  
  399. #faq-note li:before {
  400.     vertical-align: middle;
  401.     font-family: 'Font Awesome 5 Free';
  402.     content:'\f111';
  403.     font-size: .4rem;
  404.     margin:0 1rem 0 0;
  405.     font-weight: 900;
  406.     color: var(--icons);
  407.     border: 2px solid var(--inner-background);
  408.     outline: 1px solid var(--borders);
  409.     border-radius: 100%;
  410. }
  411.  
  412. /* faq accordion */
  413.  
  414. /* faq question */
  415.  
  416. .ui-accordion-header {
  417.     margin-bottom: 1rem;
  418.     font-weight: 600;
  419.     font-size: 1.1rem;
  420.     cursor: pointer;
  421.     padding:1rem ;
  422.     border: 1px solid var(--borders);
  423.     background-color: var(--background);
  424. }
  425.  
  426. /* faq answer */
  427.  
  428. .ui-accordion-content {
  429.     padding:.5rem 1rem  3rem;
  430. }
  431.  
  432. .ui-accordion-content:last-of-type {
  433.     border:0
  434. }
  435.  
  436. #accordion .fa-envelope,#accordion .fa-share {
  437.     color: var(--icons);
  438.     font-size: 1.4rem;
  439.     font-weight: 900;
  440.     margin-right: 1rem;
  441. }
  442.  
  443.  
  444. /* MEDIA */
  445.  
  446. @media only screen and (min-width:0px) and (max-width:900px) {
  447.    
  448.     #hamburger-button {
  449.         display: block;
  450.         cursor: pointer;
  451.         color: var(--icons);
  452.         background-color: var(--content-background);
  453.         padding:.6rem .8rem;
  454.         border:1px solid var(--borders);
  455.         border-radius: 5px;
  456.     }
  457.    
  458.     #hamburger-checkbox:checked~aside {
  459.         transition: 2s ease;
  460.         transform: translateX(0px);
  461.     }
  462.    
  463.     aside {
  464.         position: absolute;inset:0;
  465.         transform: translateX(-18rem);
  466.         transition: 2s ease;
  467.         padding:4rem 2rem 2rem
  468.     }
  469.  
  470.     header, #content-table, #work-info,#content-table,#work-story, #faq-wrapper{
  471.         width: 90vw;
  472.         max-width: 90vw;
  473.     }
  474.  
  475. }
  476.  
  477.  
  478. </style>
  479.    
  480. </head>
  481. <body>
  482.  
  483.    
  484. <section id="container">
  485.    
  486. <input type="checkbox" id="hamburger-checkbox"><label id="hamburger-button" for="hamburger-checkbox"><i class="fa-solid fa-bars"></i></label>
  487.  
  488. <!-- sidebar start -->
  489. <aside>
  490.  
  491.     <!-- sidebar image -->
  492.     <figure class="sidebar-image"><img src="sidebar image url" alt="" class="sidebar-image"></figure>
  493.     <div style="clear: both;"></div>
  494.  
  495.     <!-- page title -->
  496.     <h1 id="page-title">title</h1>
  497.  
  498.     <!-- page description -->
  499.     <article id="page-description">
  500.         <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed, magni? Cumque, voluptas?</p>
  501.     </article>
  502.  
  503.     <!-- sidebar navigation -->
  504.     <nav id="sidebar-navigation"><ul>
  505.         <li><a href="">link</a></li>
  506.         <li><a href="">link</a></li>
  507.         <li><a href="">link</a></li>
  508.         <li><a href="">link</a></li>
  509.     </ul></nav>
  510.  
  511. </aside>
  512. <!-- sidebar end -->
  513.  
  514. <main>
  515.  
  516.     <!-- header start -->
  517.     <header>
  518.  
  519.         <!-- header image -->
  520.         <figure class="header-image"><img src="header image url" alt="" class="header-image"></figure>
  521.  
  522.         <!-- header icon -->
  523.         <figure class="header-icon"><img src="icon header url" alt="" class="header-icon"></figure>
  524.         <div style="clear: both;"></div>
  525.        
  526.     </header>
  527.  
  528.     <!-- work info start -->
  529.     <section id="work-info"><ul>
  530.    
  531.         <li><span class="info-title">title</span> content</li>
  532.        
  533.         <li><span class="info-title">title</span> content</li>
  534.        
  535.         <li><span class="info-title">title</span> content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate illo veniam aperiam totam distinctio.</li>
  536.        
  537.         <li><span class="info-title">title</span> content</li>
  538.        
  539.     </ul></section>
  540.     <!-- work info end -->
  541.  
  542.     <!-- content table start -->
  543.     <section id="content-table">
  544.  
  545.         <h2 id="content-title">content</h2>
  546.        
  547.         <ul>
  548.  
  549.         <li><a href="#chapter-one">chapter 1</a></li>
  550.         <li><a href="#chapter-two">chapter 2</a></li>
  551.  
  552.     </ul></section>
  553.     <!-- content table end -->
  554.  
  555.     <!-- story section start -->
  556.     <section id="work-story">
  557.  
  558.         <header id="work-header">
  559.            
  560.             <!-- page title -->
  561.             <h2 id="work-title"><span>page title</span></h2>
  562.  
  563.             <!-- author -->
  564.             <p id="author">— author —</p>
  565.  
  566.             <!-- story summary -->
  567.             <article id="work-summary">
  568.                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur adipisci animi rerum minima illo perferendis quas, repellendus natus, explicabo eveniet odit delectus dicta deleniti sapiente, atque id repudiandae nostrum omnis?</p>
  569.             </article>
  570.        
  571.         </header>
  572.  
  573.          
  574.         <!-- chapter start -->
  575.         <article class="work-chapter" id="chapter-one">
  576.  
  577.             <!-- chapter title -->
  578.             <h3 class="chapter-title">chapter title</h3>
  579.  
  580.             <!-- chapter summary -->
  581.             <article class="chapter-summary">
  582.                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate et, ipsum quibusdam unde magni natus maxime. Alias facere corrupti, nobis, magnam itaque beatae quos obcaecati officia voluptate ut pariatur veniam.</p>
  583.             </article>
  584.  
  585.             <!-- chapter content -->
  586.             <article class="chapter-content">
  587.                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat repellendus ipsum inventore voluptas deleniti sequi, minima quaerat nesciunt, modi ab quos nobis libero suscipit commodi? Vitae numquam officia eaque iusto!</p>
  588.                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat repellendus ipsum inventore voluptas deleniti sequi, minima quaerat nesciunt, modi ab quos nobis libero suscipit commodi? Vitae numquam officia eaque iusto!</p>
  589.                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat repellendus ipsum inventore voluptas deleniti sequi, minima quaerat nesciunt, modi ab quos nobis libero suscipit commodi? Vitae numquam officia eaque iusto!</p>
  590.                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat repellendus ipsum inventore voluptas deleniti sequi, minima quaerat nesciunt, modi ab quos nobis libero suscipit commodi? Vitae numquam officia eaque iusto!</p>
  591.             </article>
  592.  
  593.         </article>
  594.         <!-- chapter end  -->
  595.  
  596.         <!-- chapter divider -->
  597.         <hr class="chapter-divider">        
  598.        
  599.  
  600.         <!-- chapter start -->
  601.         <article class="work-chapter" id="chapter-two">
  602.  
  603.             <!-- chapter title -->
  604.             <h3 class="chapter-title">chapter title</h3>
  605.  
  606.             <!-- chapter summary -->
  607.             <article class="chapter-summary">
  608.                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate et, ipsum quibusdam unde magni natus maxime. Alias facere corrupti, nobis, magnam itaque beatae quos obcaecati officia voluptate ut pariatur veniam.</p>
  609.             </article>
  610.  
  611.             <!-- chapter content -->
  612.             <article class="chapter-content">
  613.                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat repellendus ipsum inventore voluptas deleniti sequi, minima quaerat nesciunt, modi ab quos nobis libero suscipit commodi? Vitae numquam officia eaque iusto!</p>
  614.                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat repellendus ipsum inventore voluptas deleniti sequi, minima quaerat nesciunt, modi ab quos nobis libero suscipit commodi? Vitae numquam officia eaque iusto!</p>
  615.                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat repellendus ipsum inventore voluptas deleniti sequi, minima quaerat nesciunt, modi ab quos nobis libero suscipit commodi? Vitae numquam officia eaque iusto!</p>
  616.                 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat repellendus ipsum inventore voluptas deleniti sequi, minima quaerat nesciunt, modi ab quos nobis libero suscipit commodi? Vitae numquam officia eaque iusto!</p>
  617.             </article>
  618.  
  619.         </article>
  620.         <!-- chapter end  -->
  621.  
  622.     </section>
  623.     <!-- story section end -->
  624.    
  625.     <!-- faq wrapper start -->
  626.     <section id="faq-wrapper">
  627.    
  628.         <!-- faq title -->
  629.         <h2 id="faq-title">F.A.Q.</h2>
  630.    
  631.         <article id="faq-note">
  632.             <!-- faq text -->
  633.             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, ipsam enim obcaecati nam, culpa tempora, exercitationem eum provident illo asperiores sequi ipsa quos nulla eos sunt dolore deleniti corrupti necessitatibus.</p>
  634.    
  635.             <ul>
  636.                 <li>item 1</li>
  637.                 <li>item 2</li>
  638.                 <li>item 3</li>
  639.             </ul>
  640.         </article>
  641.    
  642.         <hr class="faq-divider">
  643.        
  644.             <!-- start faq -->
  645.    
  646.         <div id="accordion">
  647.         <!-- start faq questions & answers -->
  648.        
  649.         <!-- if you need to add paragraphs please use <br> instead of <p> -->
  650.        
  651.            
  652.             <!-- question start -->
  653.             <div class="ui-accordion-header">
  654.             <i class="fa-solid fa-envelope"></i>
  655.    
  656.                 question
  657.                
  658.             </div>
  659.            
  660.             <div class="ui-accordion-content">
  661.             <i class="fa-solid fa-share"></i>
  662.    
  663.                 answer
  664.                
  665.             </div>
  666.             <!-- question end -->
  667.            
  668.            
  669.    
  670.             <!-- question start -->
  671.             <div class="ui-accordion-header">
  672.             <i class="fa-solid fa-envelope"></i>
  673.    
  674.                 question
  675.                
  676.             </div>
  677.            
  678.             <div class="ui-accordion-content">
  679.             <i class="fa-solid fa-share"></i>
  680.    
  681.                 answer
  682.                
  683.             </div>
  684.             <!-- question end -->
  685.            
  686.            
  687.    
  688.         </div>        <!-- #accordion -->
  689.    
  690.    
  691.     </section>
  692.     <!-- faq wrapper end -->
  693.  
  694. </main>
  695.  
  696. </section><!-- container -->
  697.  
  698.  
  699. <!-- do not touch -->
  700. <div style="position:fixed;bottom:2rem;right:2rem;z-index:999999999999999999999!important;font-size:.7rem;letter-spacing:.03rem;"><a href="https://southcodes.tumblr.com" title="coded by southcodes" target="_blank">SC</a></div>
  701.  
  702. <!-- jquery ui accordion -->
  703.  
  704. <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  705.  
  706. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  707. <!-- icons font -->
  708. <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
  709.  
  710. <script>
  711.  
  712. $(document).ready(function(){
  713.      
  714.    // accordion faq
  715.    $( function() {
  716.         $( "#accordion" ).accordion({
  717.         heightStyle: "content"
  718.         });
  719.     });
  720.  
  721. });
  722.  
  723. </script>
  724. </body>
  725. </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!