API tools faq
paste
Advertisement
userbru

ask/faq page one.

userbru
Jan 16th, 2022 (edited)
224
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.27 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5.  
  6. <!-- credits:
  7.  
  8. THEME BY BRU
  9.  
  10. base maziekeen
  11. icons by cappuccicons
  12.  
  13.  
  14. --->
  15.  
  16.  
  17. <title>{Title} / F.A.Q + inbox </title>
  18.  
  19.  
  20. <link rel="shortcut icon" href="{Favicon}">
  21. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  22.  
  23. <link rel="stylesheet" href="https://static.tumblr.com/svdghan/wUSr83npl/tempcf.css">
  24.  
  25. <script src="https://unpkg.com/feather-icons"></script>
  26. <!-- masonry navigation -->
  27. <script src="https://static.tumblr.com/0siu224/Ljlqmh1nv/masonry.pkgd.min.js"></script>
  28.  
  29. <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined"
  30. rel="stylesheet">
  31. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css"></link>
  32.  
  33.  
  34.  
  35.  
  36. <link rel="preconnect" href="https://fonts.googleapis.com">
  37. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  38. <link href="https://fonts.googleapis.com/css2?family=ABeeZee&family=Poppins&display=swap" rel="stylesheet">
  39. <link href="https://fonts.googleapis.com/css2?family=Andika&display=swap" rel="stylesheet">
  40. <link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Shrikhand&display=swap" rel="stylesheet">
  41.  
  42.  
  43.  
  44.  
  45. <link href='https://fonts.googleapis.com/css?family=Work+Sans:400,700' rel='stylesheet' type='text/css'>
  46. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  47.  
  48.  
  49. <style>
  50.  
  51. /* TOOLTIPS */
  52. .tippy-tooltip.gradient-theme {
  53. background-image:linear-gradient(to right, #Ffafb0, #Ffa7a9);
  54. color:#282828;
  55. text-align:center;
  56. font-family:'Poppins', sans-serif;
  57. font-weight:bold;
  58. text-transform:uppercase;
  59. letter-spacing:1px;
  60. font-size:0.90em;
  61. box-shadow: 7px 7px 7px -9px rgba(000,000,000, 0.45);}
  62.  
  63. .tippy-tooltip.gradient-theme .tippy-svg-arrow {
  64. fill:var(--text);}
  65.  
  66. /*TUMBLR CONTROLS*/
  67.  
  68.  
  69. iframe.iframe-controls--desktop {
  70. top:15px!important;
  71. right:15px!important;
  72. z-index:12!important;
  73. transform:scale(0.7);
  74. position:fixed!important;
  75. -moz-transform:scale(0.7);
  76. transform-origin:right top;
  77. -webkit-transform:scale(0.7);
  78. -moz-transform-origin:right top;
  79. -webkit-transform-origin:right top;
  80. }
  81.  
  82.  
  83. .tmblr-iframe--follow-teaser, .tmblr-iframe--app-cta-button{display:none !important;}
  84.  
  85.  
  86. /*SCROLLBAR */
  87.  
  88. ::-webkit-scrollbar {
  89. width:17px;
  90. height:17px;
  91. }
  92. ::-webkit-scrollbar {
  93. background-color:#323232; /* background color */
  94. }
  95. ::-webkit-scrollbar-track {
  96. border:#323232; /* background color */
  97. background-color:#323232; /* light border color */
  98. }
  99. ::-webkit-scrollbar-thumb {
  100. border:#323232; /* background color */
  101. background-color:#323232; /* dark border color */
  102. min-height:24px;
  103. min-width:24px;
  104. }
  105.  
  106. * {
  107. margin: 0;
  108. padding: 0;
  109. box-sizing: border-box;
  110. }
  111.  
  112. body {
  113. width:700px;
  114. height:600px;
  115. font-family:'ABeeZee';
  116. font-size: 13px;
  117. line-height: 1.5em;
  118. text-align: justify;
  119. padding: 48px;
  120. color:#FFDEDE;
  121. background-color: #282828;
  122. margin-left:500px;
  123.  
  124. }
  125.  
  126. ::selection {
  127. color:#000;
  128. background-color:#E6C48A;
  129. }
  130.  
  131. a {
  132. position: relative;
  133. color:#C3EE79;
  134. text-decoration: none;
  135. }
  136.  
  137. a:hover {
  138. color:#F9a7a7;
  139. }
  140.  
  141. a::before {
  142. content: "";
  143. position: absolute;
  144. display: block;
  145. width: 100%;
  146. height:1px;
  147. bottom: 0;
  148. left: 0;
  149. background-color:#F9a7a7;
  150. transform: scaleX(0);
  151. transform-origin: top left;
  152. transition: transform 0.3s ease;
  153. }
  154.  
  155. a:hover::before {
  156. transform: scaleX(1);
  157. }
  158.  
  159.  
  160. h1, h2, h3 {
  161. font-family:'ABeeZee';
  162. text-transform:normal;
  163. letter-spacing:5px;
  164. font-weight:600;
  165. color:#C3EE79;
  166. border-bottom:1px solid #434343;
  167. padding:15px;
  168. }
  169.  
  170. .container{
  171. width:700px;
  172. padding:10px;
  173. background-color:#3F3F3F;
  174. border-radius:6px;
  175. }
  176.  
  177. /* maziekeen's theme 221 - MASONRY NAVIGATION CSS PART */
  178. .masonry-navigation {
  179. width: 100%;
  180. border-bottom: 0px solid #e2e2e2;
  181. margin-bottom:20px;
  182. }
  183.  
  184. .masonry-navigation:last-child {
  185. border:none;
  186. }
  187.  
  188. .masonry-navigation-item.one-column {
  189. width: 100%;
  190. padding: 0 5px;
  191. margin-bottom: 10px;
  192. }
  193.  
  194. .masonry-navigation-item.one-column ul {
  195. display: flex;
  196. flex-wrap: wrap;
  197. margin: 0;
  198. padding: 0;
  199. }
  200.  
  201. /* if you have any problem with one colum lists (ul li) you edit here */
  202. .masonry-navigation-item.one-column ul li {
  203. margin: 4px 15px;
  204. padding: 0;
  205. }
  206.  
  207. /* if they don't display two columns correctly, try to decrease the value on width: 240px */
  208. .masonry-navigation-item.two-columns {
  209. width: 240px;
  210. padding: 0 5px;
  211. margin-bottom: 10px;
  212. }
  213.  
  214. /* if they don't display three columns correctly, try to decrease the value on width: 160px */
  215. .masonry-navigation-item.three-columns {
  216. width: 160px;
  217. padding: 0 5px;
  218. margin-bottom: 10px;
  219. }
  220.  
  221. /* edit height: 215px to adjust the box height if you add the class scroll in the html */
  222. .masonry-navigation-item.scroll {
  223. height:215px;
  224. overflow-y: scroll;
  225. }
  226. /* maziekeen's theme 221 - MASONRY NAVIGATION CSS PART */
  227.  
  228. </style>
  229.  
  230. </head>
  231.  
  232. <body>
  233. <main>
  234. <section>
  235. <div class="container">
  236. <!-- maziekeen's theme 221 - MASONRY NAVIGATION HTML PART -->
  237. <h3>F.A.Q. + inbox </h3>
  238. <div class="masonry-navigation"> <!-- separates each section, you can use only one and add a bunch of items inside too -->
  239. <div class="masonry-navigation-item one-column"> <!-- each link/item block. you can use anything html related inside -->
  240. <ul>
  241. <li><a href="/">back</a></li>
  242. <li><a href="/tagged/answered">answered</a></li>
  243. <li><a href="/about">about me</a></li>
  244. </ul>
  245. </div>
  246. <div class="masonry-navigation-item one-column"> <!-- each link/item block. you can use anything html related inside -->
  247.  
  248. <!--- to add more question/answers, copy paste the example:
  249.  
  250. <p><i class="cp cp-chat-bubble" style="font-size:10px;"></i> <strong> This is where you write the question. </strong></p>
  251.  
  252. <p><i class="cp cp-user" style="font-size:10px"></i>
  253. This is where you write the answer.</p>
  254.  
  255. <br>
  256.  
  257. ---->
  258.  
  259. <p><i class="cp cp-chat-bubble" style="font-size:10px;"></i> <strong> This is where you write the question. </strong></p>
  260.  
  261. <p><i class="cp cp-user" style="font-size:10px"></i>
  262. This is where you write the answer.</p>
  263.  
  264. <br>
  265.  
  266. <p><i class="cp cp-chat-bubble" style="font-size:10px;"></i> <strong> This is where you write the question. </strong></p>
  267.  
  268. <p><i class="cp cp-user" style="font-size:10px"></i>
  269. This is where you write the answer. It can be as long as you want. Ex: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
  270.  
  271.  
  272. <br>
  273.  
  274. <p><i class="cp cp-chat-bubble" style="font-size:10px;"></i> <strong> This is where you write the question. </strong></p>
  275.  
  276. <p><i class="cp cp-user" style="font-size:10px"></i>
  277. This is where you write the answer.</p>
  278.  
  279. <br>
  280.  
  281.  
  282. </div>
  283. </div>
  284.  
  285. <!---- THIS IS THE ASK BOX -->
  286.  
  287. <p><iframe frameborder="0" height="190" id="ask_form" scrolling="no" src="https://www.tumblr.com/ask_form/{name}.tumblr.com" width="100%" style="background-color: transparent; overflow: hidden;"></iframe></p>
  288.  
  289.  
  290. </div>
  291.  
  292.  
  293. </section>
  294.  
  295. </main>
  296.  
  297. </body>
  298.  
  299. </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!