API tools faq
paste
Advertisement
southcodes

FAQ #1 IGNORANCE V2 [show answer on click]

southcodes
Sep 13th, 2020 (edited)
324
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.86 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.     faq page #1 'IGNORANCE' by skye southcodes.tumblr.com
  4.     modify as you please but please do not touch the credit
  5.     any errors? have questions? need help? feel free to contact me: southcodes.tumblr.com/inbox
  6.  
  7.     - honeybee icons by https://honeybee.suiomi.com/
  8.     - normalize css by https://github.com/necolas
  9.     - fonts by google
  10.  
  11. -->
  12.  
  13. <!DOCTYPE html>
  14. <html>
  15. <head>
  16.     <title>FAQ | {title}</title>
  17.  
  18.     <meta name="viewport" content="width=device-width">
  19.  
  20.     <link rel="shortcut icon" href="{favicon}">
  21.     <meta name="description" content="{MetaDescription}"/>
  22.    
  23.     <!-- fonts -->
  24.     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700|Montserrat:600" rel="stylesheet">
  25.     <!-- normalize css -->
  26.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  27.     <!-- honeybee icons --> <link rel="stylesheet" href="https://solrainha.github.io/honeybee/honeybee.css" >
  28.  
  29. <style type="text/css">
  30.  
  31. body, figure{margin: 0;padding: 0}
  32. html{font-size: 14px}
  33. body {font: 1rem 'Open Sans', sans-serif;color:#333}
  34. a {text-decoration: none;
  35.     color:#87b9e6;    /* links color */
  36. }
  37. a:hover {color:#36608c;     /* links hover color */
  38. }
  39.  
  40.  
  41. /*  header  */
  42.  
  43. header {
  44.     width: 29%;
  45.     max-width: 17rem;
  46.     box-sizing: border-box;
  47.     display: inline-block;
  48.     margin: 8rem 7rem 0 0;
  49. }
  50.  
  51. h1{
  52.     font: 600 .9rem 'Montserrat', sans-serif;
  53.     text-align: right;
  54.     text-transform: uppercase;
  55.     letter-spacing: .03rem;
  56.     color: #87b9e6;    /* title color */
  57.     margin-bottom: 1.2rem
  58. }
  59.  
  60. .himg {
  61.     width: 100%;
  62.     height: 4rem;
  63.     object-fit: cover;
  64.     object-position: center center;
  65.     border-radius: 4px;
  66.     display: block;
  67.     margin-bottom: 1.2rem
  68. }
  69.  
  70. #navi {
  71.     width: 16%;
  72.     display: inline-block;
  73.     vertical-align: top;
  74.     text-align:right;
  75.     font-weight: 700;
  76.     font-size: 1.2rem;
  77.     box-sizing: border-box;font-family: 'Montserrat', sans-serif
  78. }
  79.  
  80. #navi ul li {margin-bottom: 1rem}
  81.  
  82. #desc {
  83.     display: inline-block;
  84.     vertical-align: top;
  85.     width: 82%;
  86.     box-sizing: border-box;
  87.     padding: .8rem;
  88.     font-size: .9rem;
  89.     letter-spacing: .03rem;
  90.     text-align: justify;
  91.     line-height: 170%;
  92.     background: #fcfcfc;
  93.     border:1px solid #eee
  94.  
  95. }
  96. /*  nav  */
  97.  
  98. #navi ul,#navi li {list-style-type:none;margin:0;padding:0;}
  99.  
  100. #inboxlink {
  101.     font: 400 .9rem 'Open Sans', sans-serif;
  102.     text-align: right;
  103.     font-style: italic;
  104.     letter-spacing: .03rem; line-height: 170%
  105. }
  106.  
  107. main {
  108.     width: calc(69% - 7rem);
  109.     max-width: 35rem;
  110.     display: inline-block;
  111.     vertical-align: top;
  112.     box-sizing: border-box;
  113.     margin: 3rem auto 0;
  114. }
  115.  
  116. .qbox {
  117.     width: 100%;
  118.     margin: 4rem 0
  119. }
  120.  
  121. .q {
  122.  
  123.     background: #edf5fc; /* question background color */
  124.  
  125. cursor:pointer;padding: 1rem;margin-bottom: 2rem;position: relative;border:1px solid lightblue;font-size: 1.1rem;font-weight: 600;line-height: 180%;}
  126.  
  127. .q:after {
  128.     content: '\eb30';
  129.     font-family:'honeybee';
  130.     color: #badaf7;    /* question mark symbol color */
  131.     background: white;
  132.     font-size: 3rem;
  133.     border-radius: 100%;
  134.     position: absolute;
  135.     right: -1.5rem;top: -1rem;
  136. }
  137.  
  138. .ans {
  139.     position: relative;
  140.  
  141.     display: none;
  142.    
  143.     background: #fafafa; /* answer background color */
  144.  
  145. padding: 1rem;border:1px solid #ddd;font-size: .9rem;letter-spacing: .03rem;line-height: 180%}
  146.  
  147.  
  148. .ans:before {
  149.     content: '';
  150.     background: #ddd;
  151.     width: 1px;
  152.     height: 5rem;
  153.     position: absolute;
  154.     left:50%;
  155.     top: -5rem;
  156.     z-index: -1;
  157. }
  158.  
  159.  
  160. /* inbox */
  161.  
  162. #inbox {margin-bottom: 3rem}
  163.  
  164. #inboxnote {
  165.     padding:0 1rem;
  166.     letter-spacing: .03rem;
  167.     line-height: 170%;
  168.     background: #fcfcfc;
  169.     border:1px solid #eee;}
  170.  
  171. #inboxtitle {font: 600 1.1rem 'Montserrat', sans-serif;text-align: center;}
  172.  
  173. /* DONT TOUCH */
  174.  
  175. #sc {z-index:9999;position:fixed;bottom:1.5rem;right:2rem;line-height:0%;padding:1rem .5rem;font-size:.8rem;background:white;font-family:'Open Sans', sans-serif}
  176.  
  177. /* MEDIA */
  178.  
  179. @media only screen and (min-width:0px) and (max-width:740px) {
  180.  
  181.  
  182.     header,#desc,#navi {
  183.         width: 100%;
  184.         display: block;
  185.         max-width: 30rem;
  186.         margin:1rem auto;
  187.     }
  188.  
  189.     header {
  190.         margin: 3rem auto
  191.     }
  192.  
  193.     #navi ul li {
  194.         display: inline-block;
  195.         margin: 0 .8rem
  196.     }
  197.  
  198.     main {
  199.         width: 100%;
  200.         max-width: 40rem;
  201.         margin: 4rem auto;
  202.         display: block
  203.     }
  204.  
  205. }
  206. </style>
  207.    
  208. </head>
  209. <body>
  210.  
  211.     <div style="margin: 0 auto;width: 90%;max-width:65rem">
  212.  
  213. <header>
  214.  
  215.     <h1>
  216.         frequently asked questions
  217.     </h1>
  218.  
  219.     <img class="himg" src="TOPBAR IMAGE LINK"/>
  220.  
  221.     <article id="desc">
  222.  
  223.         description goes here
  224.  
  225.     </article>
  226.  
  227.     <nav id="navi"><ul>
  228.         <li><a href="LINK URL" title="LINK NAME">.O1</a></li>
  229.        
  230.         <li><a href="LINK URL" title="LINK NAME">.O2</a></li>
  231.        
  232.         <li><a href="LINK URL" title="LINK NAME">.O3</a></li>
  233.        
  234.         <li><a href="LINK URL" title="LINK NAME">.O4</a></li>
  235.     </ul></nav>
  236.  
  237.     <p id="inboxlink">
  238.         <a href="#inbox" class="achl">
  239.            
  240.             Is your question not answered here?
  241.             <br>
  242.             Send me an ask!
  243.  
  244.         </a></p>
  245.  
  246. </header>
  247.  
  248.  
  249.  
  250. <main>
  251.  
  252. <!--
  253.    
  254.         QUESTION AND ANSWER TEMPLATE:
  255.  
  256.          <article class="qbox">
  257.             <div class="q">
  258.                 question
  259.             </div>
  260.  
  261.             <div class="ans">
  262.                 answer
  263.             </div>
  264.         </article>
  265.  
  266.  
  267.  -->
  268.        
  269.         <article class="qbox">
  270.             <div class="q">
  271.                 question example 1
  272.             </div>
  273.  
  274.             <div class="ans">
  275.                 answer example 1
  276.             </div>
  277.         </article>
  278.  
  279.  
  280.        
  281.         <article class="qbox">
  282.             <div class="q">
  283.                 question example 2
  284.             </div>
  285.  
  286.             <div class="ans">
  287.                 answer example 2
  288.             </div>
  289.         </article>
  290.  
  291.  
  292.  
  293.        
  294.         <article class="qbox">
  295.             <div class="q">
  296.                 question example 3
  297.             </div>
  298.  
  299.             <div class="ans">
  300.                 answer example 3
  301.             </div>
  302.         </article>
  303.  
  304.  
  305. <!-- this is the inbox at the end of the page, if you dont want it, delete everything up until 'end of inbox' -->
  306.  
  307.         <article id="inbox">
  308.  
  309.             <div id="inboxnote">
  310.                
  311.                 <!-- here goes the text on top of the inbox box. if you don't want it, delete from '<div id="inboxnote">' above, until 'end of inbox note'
  312.                
  313.                please wrap your paragraph between <p> and </p> -->
  314.  
  315.                <h2 id="inboxtitle">
  316.                    Inbox note title
  317.                </h2>
  318.  
  319.                <p>Here you can write guideliness, rules, notes, or add whatever you'd like </p>
  320.  
  321.                 <p>Another paragraph</p>
  322.  
  323.             </div>      <!-- end of inbox note -->
  324.  
  325.             <iframe id="ask_form" style="background-color: transparent; overflow: hidden;" src="http://www.tumblr.com/ask_form/{name}.tumblr.com" frameborder="0" scrolling="no" width="100%" height="200"> </iframe>
  326.         </article>  <!-- end of inbox  -->
  327.  
  328. </main>
  329.  
  330. </div>
  331.  
  332.  
  333. <!-- DON'T TOUCH -->
  334. <a id="sc" href="https://southcodes.tumblr.com" target="_blank" title="southcodes">SC</a>
  335.  
  336. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  337. <script type="text/javascript">
  338.  
  339. $(document).ready( function() {
  340.  
  341.    $('.achl').click(function(){
  342.    $('html, body').animate({
  343.    scrollTop: $( $(this).attr('href') ).offset().top
  344.    }, 450); return false;});
  345.  
  346.    $('.q').click(function() {
  347.    $(this).siblings('.ans').slideToggle('show');
  348.    });
  349. });
  350.  
  351.  
  352. </script>
  353. </body>
  354. </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!