API tools faq
paste
loranhale

rhine valley: faq

loranhale
May 30th, 2017
612
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.42 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!---
  5.  
  6.  
  7. pack: rhine valley
  8. faq
  9.  
  10. @loranhale
  11.  
  12.  
  13. --->
  14.  
  15. <title>{Title}</title>
  16. <link rel="shortcut icon" href="{Favicon}" />
  17. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  18.  
  19. <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro|Karla|PT+Serif' rel='stylesheet' type='text/css'>
  20. <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js">
  21. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
  22.  
  23.  
  24. <style type="text/css">
  25.  
  26. /* scrollbar */
  27.  
  28. ::-webkit-scrollbar {
  29. height:5px;
  30. width:9px;
  31. background:#fafafa;
  32. }
  33.  
  34. ::-webkit-scrollbar-thumb {
  35. background:#dcecf5;
  36. border:4px solid #fafafa;
  37. }
  38.  
  39. ::-webkit-scrollbar-track {
  40. background:#fafafa;
  41. border:4px solid #fafafa;
  42. }
  43.  
  44. /* tumblr controls */
  45.  
  46. .iframe-controls--desktop { display:none!important; }
  47.  
  48. /* tooltips */
  49.  
  50. #s-m-t-tooltip {
  51. max-width:300px;
  52. margin:15px;
  53. padding:6px 6px;
  54. line-height:100%;
  55. z-index:99999999;
  56. color:#000;
  57. background:#fff;
  58. border:1px solid #dcecf5;
  59. border-radius:3px;
  60. }
  61.  
  62. body {
  63. background:#fafafa;
  64. color:#555;
  65. font-family:'karla', sans-serif;
  66. font-size:10px;
  67. -moz-osx-font-smoothing:grayscale;
  68. -webkit-font-smoothing:antialiased;
  69. font-smoothing:antialiased;
  70. }
  71.  
  72. a {
  73. color:#8892e0;
  74. text-decoration:none;
  75. transition:all .6s ease;
  76. -webkit-transition:all .6s ease;
  77. -moz-transition:all .6s ease;
  78. -o-transition:all .6s ease;
  79. }
  80.  
  81. a:hover {
  82. text-decoration:none;
  83. color:#000;
  84. }
  85.  
  86. blockquote {
  87. padding-left:10px;
  88. border-left:1px solid #dcecf5;
  89. margin-left:10px;
  90. }
  91.  
  92. h1 {
  93. margin:0 0 5px;
  94. font-size:13px;
  95. color:#444;
  96. font-weight:600;
  97. text-transform:uppercase;
  98. letter-spacing:1px;
  99. }
  100.  
  101. b {
  102. color:#8892e0;
  103. font-style:bold;
  104. }
  105.  
  106. i {
  107. color:#444;
  108. font-style:italic;
  109. }
  110.  
  111. ul {
  112. padding-left:20px;
  113. }
  114.  
  115. ul li {
  116. margin-left:-10px;
  117. list-style-type:none;
  118. }
  119.  
  120. #con {
  121. width:400px;
  122. box-sizing:border-box;
  123. margin:70px auto;
  124. transform:translate(50px,50px);
  125. }
  126.  
  127. /* sidebar */
  128.  
  129. .side {
  130. margin-top:0px;
  131. margin-left:-85px;
  132. position:fixed;
  133. }
  134.  
  135. .links {
  136. position:relative;
  137. margin-top:75px;
  138. width:80px;
  139. }
  140.  
  141. .links i {
  142. margin-bottom:5px;
  143. margin-right:5px;
  144. display:inline-block;
  145. width:13px;
  146. height:13px;
  147. font-size:13px;
  148. padding:6px;
  149. border:1px solid #dcecf5;
  150. background:#fff;
  151. border-radius:3px;
  152. color:#8892e0;
  153. transition:all .8s ease;
  154. -webkit-transition:all .8s ease;
  155. -moz-transition:all .8s ease;
  156. -o-transition:all .8s ease;
  157. }
  158.  
  159. .links i:hover {
  160. background:#fafafa;
  161. border:1px solid #dcecf5;
  162. color:#000;
  163. }
  164.  
  165. .icon {
  166. float:left;
  167. margin:0;
  168. display:inline;
  169. position:fixed;
  170. }
  171.  
  172. .icon img {
  173. width:60px;
  174. height:60px;
  175. border-radius:3px;
  176. opacity:.9;
  177. }
  178.  
  179. /* faq */
  180.  
  181. .f {
  182. border:1px solid #dcecf5;
  183. border-radius:3px;
  184. }
  185.  
  186. .t {
  187. background:#fff;
  188. border:1px solid #dcecf5;
  189. padding:10px;
  190. font-size:11px;
  191. margin-bottom:10px;
  192. font-weight:600;
  193. text-transform:uppercase;
  194. letter-spacing:1px;
  195. border-radius:3px;
  196. }
  197.  
  198. .faq {
  199. border-bottom:1px solid #dcecf5;
  200. background:#fafafa;
  201. }
  202.  
  203. .q {
  204. font-size:11px;
  205. color:#616ed5;
  206. background:#fff;
  207. padding:10px;
  208. border-bottom:1px dotted #dcecf5;
  209. }
  210.  
  211. .a {
  212. font-style:italic;
  213. padding:10px;
  214. font-family:'source sans pro', sans-serif;
  215. }
  216.  
  217. /* social media */
  218.  
  219. .sm {
  220. text-align:center;
  221. margin-top:15px;
  222. }
  223.  
  224. .sm i {
  225. width:15px;
  226. height:15px;
  227. font-size:15px;
  228. padding:6px;
  229. border:1px solid #dcecf5;
  230. background:#fafafa;
  231. border-radius:3px;
  232. color:#8892e0;
  233. transition:all .8s ease;
  234. -webkit-transition:all .8s ease;
  235. -moz-transition:all .8s ease;
  236. -o-transition:all .8s ease;
  237. }
  238.  
  239. .sm i:hover {
  240. background:#fff;
  241. border:1px solid #dcecf5;
  242. color:#000;
  243. }
  244.  
  245. /* do not disturb */
  246.  
  247. .lo {
  248. bottom:20px;
  249. right:10px;
  250. position:fixed;
  251. }
  252.  
  253. .lo a {
  254. text-transform:uppercase;
  255. border-bottom:1px solid #dcecf5;
  256. padding:6px;
  257. }
  258.  
  259. </style>
  260. </head>
  261.  
  262. <body>
  263.  
  264. <div id="con">
  265.  
  266. <div class="side">
  267. <div class="icon"><img src="http://i.imgur.com/dX4bQMz.png" /></div>
  268.  
  269. <div class="links">
  270. <a href="/" title="home"><i class="fa fa-home" aria-hidden="true"></i></a>
  271. <a href="/ask" title="message"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
  272. <a href="/" title="link"><i class="fa fa-paper-plane-o" aria-hidden="true"></i></a>
  273. <a href="http://loranhale.tumblr.com" title="theme"><i class="fa fa-code" aria-hidden="true"></i></a>
  274. </div>
  275. </div>
  276.  
  277. <div class="t">frequently asked questions</div>
  278. <div class="f">
  279.  
  280. <div class="faq">
  281. <div class="q">is this a question?</div>
  282. <div class="a">no that's a statement.</div>
  283. </div>
  284.  
  285. <div class="faq">
  286. <div class="q">how does a link look like?</div>
  287. <div class="a"><a href="/">like this.</a></div>
  288. </div>
  289.  
  290. <div class="faq">
  291. <div class="q">the ask</div>
  292. <div class="a">and the answer</div>
  293. </div>
  294.  
  295. <div class="faq">
  296. <div class="q">Suspendisse ac pede. Cras tincidunt pretium felis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque porttitor mi id felis. Maecenas nec augue. Praesent a quam pretium leo congue accumsan.</div>
  297.  
  298. <div class="a">
  299. <blockquote>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.</blockquote>
  300. </div>
  301. </div>
  302.  
  303. <!-- copy and paste to add more -->
  304.  
  305. <!-- no editing required -->
  306. <iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden; padding:10px; width:378px;" id="ask_form"></iframe>
  307.  
  308. </div>
  309.  
  310. <!-- delete the following section if you don't want social media links -->
  311.  
  312. <div class="sm">
  313. <a href="/" title="instagram"><i class="fa fa-instagram" aria-hidden="true"></i></a>
  314. <a href="/" title="twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
  315. <a href="/" title="pinterest"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
  316. <a href="/" title="goodreads"><i class="fa fa-bookmark-o" aria-hidden="true"></i></a>
  317. <!-- more icons at fontawesome.io/icons/ -->
  318. </div>
  319.  
  320. </div>
  321.  
  322. <!-- danger! keep out -->
  323. <div class="lo">
  324. <a href="http://loranhale.tumblr.com" title="theme">j</a>
  325. </div>
  326.  
  327. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  328. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  329. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  330. <script>
  331. jQuery.noConflict();
  332. (function($){
  333. $(document).ready(function(){
  334. $("a[title],img[title],[title]").style_my_tooltips({
  335. tip_follows_cursor:true,
  336. tip_delay_time:200,
  337. tip_fade_speed:300,
  338. attribute:"title"
  339. });
  340. });
  341. })(jQuery);
  342. </script>
  343.  
  344. </body>
  345. </html>
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!