API tools faq
paste
silbrigthemes

Blütenknospe – FAQ (Page #7)

silbrigthemes
Mar 25th, 2018 (edited)
546
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.39 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--
  5.  
  6. Blütenknospe (Page #7)
  7. A simple FAQ page by @silbrigthemes.
  8.  
  9. Rules:
  10.  
  11. 1) Do not claim as your own.
  12. 2) Do not steal (parts of) the code.
  13. 3) Do not alter beyond recognition.
  14. 4) Do not delete the credit.
  15. 5) Please like / reblog if you are using this.
  16.  
  17. Credits:
  18.  
  19. 1) Icon font by @saturnthms.
  20. 2) Pure CSS Accordion by Rau on codepen.io
  21. 3) Font "Playfair Display" by Claus Eggers Sørensen.
  22. 4) Font "Lato" by Łukasz Dziedzic.
  23.  
  24. Have fun with this page!
  25. Feel free to send me a message if you need help.
  26.  
  27. -->
  28. <head>
  29.  
  30. <!-- Necessary for the layout to be responsive. -->
  31. <meta name="viewport" content="width=device-width, initial-scale=1">
  32.  
  33. <!-- Title font, "Playfair Display". -->
  34. <link href="https://fonts.googleapis.com/css?family=Playfair+Display&amp;subset=cyrillic,latin-ext,vietnamese" rel="stylesheet">
  35.  
  36. <!-- Global font, "Lato". -->
  37. <link href="https://fonts.googleapis.com/css?family=Lato&amp;subset=latin-ext" rel="stylesheet">
  38.  
  39. <!-- Icon font by @saturnthms -->
  40. <link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet">
  41.  
  42. <style>
  43.  
  44. body{
  45. margin:0;
  46. background-color:#f8f9fa;
  47. font-family:"Lato";
  48. color:#2a333c;
  49. }
  50.  
  51. /* Custom text selection. */
  52. ::selection{
  53. background-color:#e397ac;
  54. color:#f8f9fa;
  55. }
  56.  
  57. ::-moz-selection{
  58. background-color:#e397ac;
  59. color:#f8f9fa;
  60. }
  61.  
  62. ::-o-selection{
  63. background-color:#e397ac;
  64. color:#f8f9fa;
  65. }
  66.  
  67. ::-webkit-selection{
  68. background-color:#e397ac;
  69. color:#f8f9fa;
  70. }
  71.  
  72. ul {
  73. list-style-type:none;
  74. }
  75.  
  76. li:before{
  77. content:"\e103";
  78. font-family:"saturnicons";
  79. color:#e397ac;
  80. padding-right:0.25em;
  81. }
  82.  
  83. b, strong{
  84. font-weight:bold;
  85. color:#3f4d5a;
  86. }
  87.  
  88. i, em{
  89. font-style:italic;
  90. color:#151a1e;
  91. }
  92.  
  93. mark{
  94. background-color:#e397ac;
  95. color:#f8f9fa;
  96. padding:1px 4px 1px 4px;
  97. }
  98.  
  99. hr{
  100. width:80%;
  101. height:4px;
  102. border:none;
  103. background-color:#e397ac;
  104. }
  105.  
  106. a{
  107. text-decoration:none;
  108. border-bottom:4px solid #e397ac;
  109. color:#2a333c;
  110. transition:0.5s;
  111. -moz-transition:0.5s;
  112. -o-transition:0.5s;
  113. -webkit-transition:0.5s;
  114. }
  115.  
  116. a:hover{
  117. border-bottom:4px solid #8b3a42;
  118. transition:0.5s;
  119. -moz-transition:0.5s;
  120. -o-transition:0.5s;
  121. -webkit-transition:0.5s;
  122. }
  123.  
  124. #i-contain{
  125. width:40vw;
  126. margin-left:30vw;
  127. margin-top:15vh;
  128. }
  129.  
  130. #icon{
  131. text-align:center;
  132. }
  133.  
  134. #icon img{
  135. width:96px;
  136. height:96px;
  137. border-radius:50%;
  138. }
  139.  
  140. #title{
  141. font-size:2em;
  142. text-align:center;
  143. padding-top:0.5em;
  144. color:#e397ac;
  145. font-family:"Playfair Display";
  146. font-style:italic;
  147. }
  148.  
  149. #desc{
  150. text-align:justify;
  151. font-size:1em;
  152. padding:0 0.5em 0 0.5em;
  153. }
  154.  
  155. #nav{
  156. width:100%;
  157. padding-bottom:1em;
  158. height:auto;
  159. display:flex;
  160. align-items:space-between;
  161. justify-content:space-between;
  162. flex-direction:row;
  163. flex-wrap:wrap;
  164. }
  165.  
  166. #nav a{
  167. border:none;
  168. line-height:2em;
  169. }
  170.  
  171. #nav mark{
  172. padding:0.25em;
  173. padding-left:0.5em;
  174. padding-right:0.5em;
  175. transition:0.5s;
  176. -moz-transition:0.5s;
  177. -o-transition:0.5s;
  178. -webkit-transition:0.5s;
  179. }
  180.  
  181. #nav mark:hover{
  182. background-color:#f0f2f4;
  183. color:#e397ac;
  184. transition:0.5s;
  185. -moz-transition:0.5s;
  186. -o-transition:0.5s;
  187. -webkit-transition:0.5s;
  188. }
  189.  
  190. #contain{
  191. width:40vw;
  192. margin-left:30vw;
  193. max-height:40vh;
  194. overflow-y:scroll;
  195. }
  196.  
  197. .faq{
  198. position: relative;
  199. margin-bottom: 1px;
  200. width: 100%;
  201. color: #fff;
  202. overflow: hidden;
  203. }
  204.  
  205. input {
  206. position: absolute;
  207. opacity: 0;
  208. z-index: -1;
  209. }
  210.  
  211. label {
  212. position: relative;
  213. display: block;
  214. padding: 0 0 0 1em;
  215. background: #e397ac;
  216. font-weight: bold;
  217. line-height: 3;
  218. cursor: pointer;
  219. font-family:"Playfair Display";
  220. }
  221.  
  222. .answer{
  223. max-height:0;
  224. overflow:scroll;
  225. height:auto;
  226. background: #f0f2f4;
  227. color:#2a333c;
  228. -webkit-transition: max-height .35s;
  229. -o-transition: max-height .35s;
  230. transition: max-height .35s;
  231. text-align:justify;
  232. }
  233.  
  234. .answer p {
  235. margin: 1em;
  236. }
  237.  
  238. .subtitle{
  239. padding-left:1em;
  240. font-family:"Playfair Display";
  241. font-size:1.125em;
  242. font-weight:bold;
  243. color:#2a333c;
  244. }
  245.  
  246. /* :checked */
  247. input:checked ~ .answer {
  248. height: auto;
  249. max-height:15em;
  250. }
  251.  
  252. /* Icon */
  253. label::after {
  254. position: absolute;
  255. right: 0;
  256. top: 0;
  257. display: block;
  258. width: 3em;
  259. height: 3em;
  260. line-height: 3;
  261. text-align: center;
  262. -webkit-transition: all .35s;
  263. -o-transition: all .35s;
  264. transition: all .35s;
  265. }
  266.  
  267. input[type=checkbox] + label::after {
  268. content: "+";
  269. }
  270.  
  271. input[type=checkbox]:checked + label::after {
  272. transform: rotate(315deg);
  273. }
  274.  
  275.  
  276. @media only screen and (max-width: 1000px){
  277. #i-contain{
  278. width:60vw;
  279. margin-left:20vw;
  280. }
  281.  
  282. #contain{
  283. width:60vw;
  284. margin-left:20vw;
  285. }
  286. }
  287.  
  288. @media only screen and (max-width: 450px){
  289. #i-contain{
  290. width:100vw;
  291. margin-left:0;
  292. }
  293.  
  294. #contain{
  295. width:100vw;
  296. margin-left:0;
  297. max-height:auto;
  298. height:auto;
  299. }
  300. }
  301.  
  302. @media only screen and (max-width: 350px){
  303. #i-contain{
  304. width:100vw;
  305. margin-left:0;
  306. }
  307.  
  308. #contain{
  309. width:100vw;
  310. margin-left:0;
  311. max-height:auto;
  312. height:auto;
  313. }
  314. }
  315.  
  316. </style>
  317. </head>
  318.  
  319. <body>
  320.  
  321. <div id="i-contain">
  322. <div id="icon">
  323. <img src="https://78.media.tumblr.com/0b242c119df8238cacc9f0157769812d/tumblr_p3smscNMS61wsskx3o5_r1_1280.jpg" alt="icon">
  324. </div>
  325. <div id="title">Fragestunde</div>
  326. <div id="desc">
  327. <p>
  328. If you have any question, please check this FAQ first.
  329. <br>
  330. If you cannot find your question answered here, please send me a message.
  331. </p>
  332. </div>
  333. <div id="nav">
  334. <a href="/"><mark class="sf sf-home"> Index</mark></a>
  335. <a href="/archive"><mark class="sf sf-apps"> Archive</mark></a>
  336. <a href="/"><mark class="sf sf-flower-1"> Custom 1</mark></a>
  337. <a href="/"><mark class="sf sf-flower-1"> Custom 2</mark></a>
  338. <a href="https://silbrigthemes.tumblr.com/"><mark class="sf sf-code"> Credit</mark></a>
  339. </div>
  340. </div>
  341.  
  342.  
  343. <!--
  344.  
  345. If you want more sections, just add:
  346.  
  347. <div class="faq">
  348. <input id="question-[number]" type="checkbox" name="tabs">
  349. <label for="question-[number]">[Question]</label>
  350. <div class="answer">
  351. <p>[Answer]</p>
  352. </div>
  353. </div>
  354.  
  355. -->
  356.  
  357.  
  358. <div id="contain">
  359. <div class="faq">
  360. <input id="question-one" type="checkbox" name="tabs">
  361. <label for="question-one">What is this page?</label>
  362. <div class="answer">
  363. <p>This page is a simple FAQ page, so you can link people to this if there are questions you receive frequently.</p>
  364. </div>
  365. </div>
  366.  
  367. <div class="faq">
  368. <input id="question-two" type="checkbox" name="tabs">
  369. <label for="question-two">What about features & styling?</label>
  370. <div class="answer">
  371. <p>
  372. <div class="subtitle">Features:</div>
  373. <ul>
  374. <li>Icon, title and description.</li>
  375. <li>Navigation links.</li>
  376. <li>Pure CSS accordion for the FAQ.</li>
  377. <li>Custom text selection.</li>
  378. <li>Integrated askbox.</li>
  379. </ul>
  380.  
  381. <hr>
  382.  
  383. <div class="subtitle">Styling:</div>
  384. <p>
  385. <b>Lorem</b> ipsum <i>dolor sit amet</i>, consetetur sadipscing elitr, sed diam <mark>nonumy</mark> eirmod tempor invidunt ut labore et dolore magna aliquyam erat, <a href="/">sed diam</a> voluptua.
  386. </p>
  387. </p>
  388. </div>
  389. </div>
  390.  
  391. <div class="faq">
  392. <input id="question-three" type="checkbox" name="tabs">
  393. <label for="question-three">I have a different question …</label>
  394. <div class="answer">
  395. <p>
  396. <iframe frameborder="0" height="90" id="ask_form"
  397. scrolling="no" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com"
  398. width="100%"></iframe>
  399. <!--[if IE]><script type="text/javascript">document.getElementById('ask_form').
  400. allowTransparency=true;</script>
  401. <![endif]-->
  402. </p>
  403. </div>
  404. </div>
  405. </div>
  406.  
  407. </body>
  408. </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!