API tools faq
paste
themesbyces

Page — Mirage

themesbyces
Oct 5th, 2019 (edited)
1,005
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.43 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4.  
  5. <html>
  6.  
  7. <head>
  8.  
  9. <title>{Title}</title>
  10.  
  11. <link rel="shortcut icon" href="{Favicon}">
  12.  
  13. <!-- Mirage by Franchesca (extasisthemes) -->
  14.  
  15. <!-- Google Fonts Script -->
  16.  
  17. <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i&display=swap" rel="stylesheet">
  18.  
  19. <!-- Styled Tooltips Script -->
  20.  
  21. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  22.  
  23. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  24.  
  25. <script>
  26. (function($){
  27. $(document).ready(function(){
  28. $("a[title]").style_my_tooltips({
  29. tip_follows_cursor:true,
  30. tip_delay_time:90,
  31. tip_fade_speed:600,
  32. attribute:"title"
  33. });
  34. });
  35. })(jQuery);
  36. </script>
  37.  
  38. <!-- Font Awesome Script -->
  39.  
  40. <link href="//use.fontawesome.com/releases/v6.0.0/css/all.css" rel="stylesheet">
  41.  
  42. <style type="text/css">
  43.  
  44. .tmblr-iframe--app-cta-button {
  45. display: none!important;
  46. }
  47.  
  48. ::-webkit-scrollbar-thumb:vertical {
  49. background: #000000;
  50. }
  51.  
  52. ::-webkit-scrollbar {
  53. width: 1px;
  54. }
  55.  
  56. ::selection {
  57. background: #ccaacc;
  58. color: white;
  59. }
  60.  
  61. ::-moz-selection {
  62. background: #ccaacc;
  63. color: white;
  64. }
  65.  
  66. #s-m-t-tooltip {
  67. background: #000000;
  68. border-radius: 5px;
  69. color: #ffffff;
  70. font-size: 0.9rem;
  71. margin-top: 30px;
  72. padding: 5px;
  73. text-align: center;
  74. text-transform: uppercase;
  75. z-index: 999999999999999999999999999999999999;
  76. }
  77.  
  78. body {
  79. background: #f8f8f8;
  80. background-attachment: fixed;
  81. background-image: url(https://i.imgur.com/70TxMaZ.jpg);
  82. background-position: center;
  83. background-size: cover;
  84. color: #555555;
  85. cursor: url(https://i.imgur.com/lhPqll6.png), progress;
  86. font-family: 'Karla', sans-serif;
  87. font-size: 1rem;
  88. font-style: normal;
  89. font-weight: 400;
  90. hyphens: auto;
  91. letter-spacing: 1px;
  92. margin: 0px;
  93. text-align: left;
  94. text-transform: none;
  95. word-wrap: break-word;
  96. }
  97.  
  98. a {
  99. color: #000000;
  100. text-decoration: none;
  101. -webkit-transition: all 0.5s ease;
  102. -moz-transition: all 0.5s ease;
  103. -o-transition: all 0.5s ease;
  104. }
  105.  
  106. a:hover {
  107. color: #cfcfcf;
  108. }
  109.  
  110. b {
  111. font-weight: 700;
  112. }
  113.  
  114. h1 {
  115. font-size: 1.2rem;
  116. font-weight: bold;
  117. margin-block-start: 0em;
  118. text-transform: lowercase;
  119. }
  120.  
  121. h2 {
  122. font-size: 1rem;
  123. font-weight: bold;
  124. margin-block-start: 0em;
  125. }
  126.  
  127. blockquote {
  128. border-left: 1px solid #eeeeee;
  129. margin: 5px;
  130. padding-left: 5px;
  131. }
  132.  
  133. #container {
  134. background: #ffffff;
  135. border: 1px solid #eeeeee;
  136. margin-bottom: 70px;
  137. margin-left: auto;
  138. margin-right: auto;
  139. margin-top: 70px;
  140. padding: 50px;
  141. width: 500px;
  142. }
  143.  
  144. #header {
  145. border-bottom: 1px solid #eeeeee;
  146. margin-left: -50px;
  147. margin-right: -50px;
  148. margin-top: -50px;
  149. padding: 50px;
  150. width: 500px;
  151. }
  152.  
  153. .icon {
  154. background: #ccaacc;
  155. color: #ffffff;
  156. font-size: 0.8rem;
  157. margin-left: -50px;
  158. margin-top: -50px;
  159. padding: 10px;
  160. position: absolute;
  161. width: 0.8rem;
  162. }
  163.  
  164. .title {
  165. font-size: 1.2rem;
  166. font-weight: bold;
  167. text-align: center;
  168. text-transform: uppercase;
  169. }
  170.  
  171. .subtitle {
  172. font-style: italic;
  173. margin-bottom: 30px;
  174. text-align: center;
  175. }
  176.  
  177. .links {
  178. font-size: 0.9rem;
  179. text-align: center;
  180. text-transform: uppercase;
  181. }
  182.  
  183. .links a {
  184. display: inline-block;
  185. margin-left: 10px;
  186. margin-right: 10px;
  187. }
  188.  
  189. #border {
  190. background: #ccaacc;
  191. height: 3px;
  192. margin-left: auto;
  193. margin-right: auto;
  194. margin-top: -2px;
  195. width: 100px;
  196. }
  197.  
  198. #faq {
  199. margin-top: 50px;
  200. width: 500px;
  201. }
  202.  
  203. .note {
  204. background: #ffffff;
  205. border: 1px solid #eeeeee;
  206. border-radius: 5px;
  207. padding: 20px;
  208. }
  209.  
  210. .qa-wrapper {
  211. margin-top: 30px;
  212. width: 100%;
  213. }
  214.  
  215. .question-wrapper {
  216. width: 100%;
  217. }
  218.  
  219. .question-avatar {
  220. height: 64px;
  221. position: absolute;
  222. width: 64px;
  223. }
  224.  
  225. .question-avatar img {
  226. border-radius: 100px;
  227. height: 64px;
  228. width: 64px;
  229. }
  230.  
  231. .q {
  232. background: #f8f8f8;
  233. border: 1px solid #eeeeee;
  234. border-radius: 5px;
  235. margin-left: 101px;
  236. padding: 20px;
  237. }
  238.  
  239. .answer-wrapper {
  240. margin-bottom: 30px;
  241. margin-top: 20px;
  242. width: 100%;
  243. }
  244.  
  245. .answer-avatar {
  246. float: right;
  247. height: 64px;
  248. width: 64px;
  249. }
  250.  
  251. .answer-avatar img {
  252. border-radius: 100px;
  253. height: 64px;
  254. width: 64px;
  255. z-index: -1;
  256. }
  257.  
  258. .a {
  259. background: #ccaacc;
  260. border: 1px solid #eeeeee;
  261. border-radius: 5px;
  262. color: #ffffff;
  263. margin-right: 101px;
  264. padding: 20px;
  265. }
  266.  
  267. .a a {
  268. color: #ffffff;
  269. }
  270.  
  271. .a a:hover {
  272. color: #cfcfcf;
  273. }
  274.  
  275. #credit {
  276. bottom: 15px;
  277. font-size: 0.9rem;
  278. position: fixed;
  279. right: 15px;
  280. text-transform: uppercase;
  281. }
  282.  
  283. #credit a {
  284. color: #000000;
  285. }
  286.  
  287. #credit a:hover {
  288. color: #cfcfcf;
  289. }
  290.  
  291. {CustomCSS}
  292.    
  293. </style>
  294.    
  295. </head>
  296.  
  297. <body>
  298.  
  299. <div id="container">
  300.  
  301. <div id="header">
  302.  
  303. <div class="icon"><i class="far fa-envelope"></i></div>
  304.  
  305. <div class="title">Mirage</div>
  306.  
  307. <div class="subtitle">A FAQ Page Because Why Not</div>
  308.  
  309. <div class="links">
  310. <a href="/"><i class="far fa-arrow-alt-circle-left" style="background: #ccaacc; border-radius: 100px;color: #ffffff;font-size: 0.8rem;margin-right: 10px;padding: 10px;width: 0.8rem;"></i>Home</a>
  311. <a href="/"><i class="fa-solid fa-dove" style="background: #ccaacc; border-radius: 100px;color: #ffffff;font-size: 0.8rem;margin-right: 10px;padding: 10px;width: 0.8rem;"></i>Link One</a>
  312. <a href="/archive"><i class="far fa-calendar-plus" style="background: #ccaacc; border-radius: 100px;color: #ffffff;font-size: 0.8rem;margin-right: 10px;padding: 10px;width: 0.8rem;"></i>Archive</a>
  313. </div>
  314.  
  315. </div>
  316.  
  317. <div id="border"></div>
  318.  
  319. <div id="faq">
  320.  
  321. <div class="note">
  322. <font style="color: #ccaacc;">Important</font> 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.
  323. </div>
  324.  
  325. <div class="qa-wrapper">
  326.  
  327. <!-- Start of Q&A -->
  328.  
  329. <div class="question-wrapper">
  330.  
  331. <div class="question-avatar">
  332. <img src="https://i.imgur.com/yWztKyf.png"/>
  333. <div style="background: #ffffff;border: 1px solid #eeeeee;border-radius: 100px;height: 21px;margin-left: 48px;margin-top: -47.4px;padding: 5px;position: relative;text-align: center; width: 21px;">?</div>
  334. </div>
  335.  
  336. <div class="q">
  337. Lorem ipsum dolor sit amet, consectetuer adipiscing elit?
  338. </div>
  339.  
  340. </div>
  341.  
  342. <div class="answer-wrapper">
  343.  
  344. <div class="answer-avatar">
  345. <img src="https://i.imgur.com/n72BoIy.png"/>
  346. <div style="background: #ffffff;border: 1px solid #eeeeee;border-radius: 100px;height: 21px;margin-left: -16px;margin-top: -47.4px;padding: 5px;position: relative;text-align: center; width: 21px;">!</div>
  347. </div>
  348.  
  349. <div class="a">
  350. 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.
  351. </div>
  352.  
  353. </div>
  354.  
  355. <!-- End of Q&A -->
  356.  
  357. <!-- Start of Q&A -->
  358.  
  359. <div class="question-wrapper">
  360.  
  361. <div class="question-avatar">
  362. <img src="https://i.imgur.com/yWztKyf.png"/>
  363. <div style="background: #ffffff;border: 1px solid #eeeeee;border-radius: 100px;height: 21px;margin-left: 48px;margin-top: -47.4px;padding: 5px;position: relative;text-align: center; width: 21px;">?</div>
  364. </div>
  365.  
  366. <div class="q">
  367. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris?
  368. </div>
  369.  
  370. </div>
  371.  
  372. <div class="answer-wrapper">
  373.  
  374. <div class="answer-avatar">
  375. <img src="https://i.imgur.com/n72BoIy.png"/>
  376. <div style="background: #ffffff;border: 1px solid #eeeeee;border-radius: 100px;height: 21px;margin-left: -16px;margin-top: -47.4px;padding: 5px;position: relative;text-align: center; width: 21px;">!</div>
  377. </div>
  378.  
  379. <div class="a">
  380. 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.
  381. </div>
  382.  
  383. </div>
  384.  
  385. <!-- End of Q&A -->
  386.  
  387. <!-- Start of Q&A -->
  388.  
  389. <div class="question-wrapper">
  390.  
  391. <div class="question-avatar">
  392. <img src="https://i.imgur.com/yWztKyf.png"/>
  393. <div style="background: #ffffff;border: 1px solid #eeeeee;border-radius: 100px;height: 21px;margin-left: 48px;margin-top: -47.4px;padding: 5px;position: relative;text-align: center; width: 21px;">?</div>
  394. </div>
  395.  
  396. <div class="q">
  397. Aliquam mattis porta urna?
  398. </div>
  399.  
  400. </div>
  401.  
  402. <div class="answer-wrapper">
  403.  
  404. <div class="answer-avatar">
  405. <img src="https://i.imgur.com/n72BoIy.png"/>
  406. <div style="background: #ffffff;border: 1px solid #eeeeee;border-radius: 100px;height: 21px;margin-left: -16px;margin-top: -47.4px;padding: 5px;position: relative;text-align: center; width: 21px;">!</div>
  407. </div>
  408.  
  409. <div class="a">
  410. 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.
  411. </div>
  412.  
  413. </div>
  414.  
  415. <!-- End of Q&A -->
  416.  
  417. </div>
  418.  
  419. <iframe frameborder="0" height="200" id="ask_form" scrolling="no" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" width="100%"></iframe>
  420.  
  421. </div>
  422.  
  423. </div>
  424.  
  425. <div id="credit"><a href="http://extasisthemes.tumblr.com/" title="extasisthemes" target="_blank">EXT</a></div>
  426.  
  427. </body>
  428.  
  429. </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!