SHARE
TWEET

FAQ Page: Sumikko

mugendia Mar 24th, 2015 (edited) 3,000 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <head><title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link href='http://fonts.googleapis.com/css?family=Quicksand:400,700|Codystar' rel='stylesheet' type='text/css'>
  6.  
  7. <!--
  8.  
  9.  
  10. SUMIKKO FAQ PAGE THEME BY COCORINI (http://cocorini.tumblr.com).
  11. PLEASE DON'T REMOVE THE CREDITS. THANK YOU!
  12.  
  13. Edit your content under '<body>' (Use the CTRL + F [Windows] or Command + F [Mac] to find it).
  14.  
  15. PATTERNS: http://www.cocorini.tumblr.com
  16. IMAGES: http://www.san-x.co.jp
  17.  
  18.  
  19. -->
  20.  
  21. <style type="text/css">
  22.  
  23. @font-face {font-family: "tinytots";src: url('https://dl.dropboxusercontent.com/u/54526653/tinytots.TTF');}
  24.  
  25. /* BACKGROUND */
  26.  
  27. body {
  28. background-image: url('https://41.media.tumblr.com/31885ce96fe953c6aa71745d33bcd9b0/tumblr_inline_nlocwrEnvo1rnjuep_500.png');
  29. background-attachment: fixed;
  30. font-family: 'Quicksand', sans-serif;
  31. font-size: 12px;
  32. }
  33.  
  34. ::-webkit-scrollbar-thumb:vertical {
  35. background-color: #eed7bd;
  36. height: auto;
  37. }
  38.  
  39. ::-webkit-scrollbar-thumb:horizontal {
  40. background-color: #eed7bd;
  41. height: auto;
  42. }
  43.  
  44. ::-webkit-scrollbar {
  45. height: 3px;
  46. width: 3px;
  47. background-color: #fcfafb;
  48. }
  49.  
  50. ::selection {
  51. background: #f6e9d2;
  52. color: #da915b;
  53. }
  54.  
  55. ::-moz-selection {
  56. background: #f6e9d2;
  57. color: #da915b;
  58. }
  59.  
  60. p::selection {
  61. background: #f6e9d2;
  62. color: #da915b;
  63. }
  64.  
  65. p::-moz-selection {
  66. background: #f6e9d2;
  67. color: #da915b;
  68. }
  69.  
  70. /* BACKGROUND - BORDER */
  71.  
  72. #top {
  73. position: fixed;
  74. top: 0px;
  75. width: 100%;
  76. height: 20px;
  77. background-color: #f8b79e;
  78. }
  79.  
  80. #left {
  81. position: fixed; top: 0px;
  82. left: 0px;
  83. width: 20px;
  84. height: 100%;
  85. background-color: #f8b79e;
  86. z-index: 999;
  87. }
  88.  
  89. #right {
  90. position: fixed;
  91. right: 0px;
  92. top: 0px;
  93. width: 20px;
  94. height: 100%;
  95. background-color: #f8b79e;
  96. z-index: 999;
  97. }
  98.  
  99. #bottom {
  100. position: fixed;
  101. bottom: 0px;
  102. width: 100%;
  103. height: 20px;
  104. background-color: #f8b79e;
  105. z-index: -1;
  106. }
  107.  
  108. #bottomimg {
  109. position: fixed;
  110. bottom: 15px;
  111. z-index: -1;
  112. }
  113.  
  114. /* MAIN CONTENT - DESIGN */
  115.  
  116. #container {
  117. margin: auto;
  118. width: 525px;
  119. margin-top: 150px;
  120. }
  121.  
  122. #content {
  123. width: 525px;
  124. height: 400px;
  125. background-color: #fff;
  126. border-radius: 12px;
  127. background-image: url('https://41.media.tumblr.com/75af436d9cf8833df3f2f8f4b155c2b0/tumblr_inline_nloy1xx8k01rnjuep_500.png');
  128. border: 5px solid #fbd2be;
  129. }
  130.  
  131. #attic {
  132. position: fixed;
  133. margin-top: -98px;
  134. margin-left: -10px;
  135. }
  136.  
  137. #return {
  138. position: fixed;
  139. margin-left: 400px;
  140. margin-top: -40px;
  141. }
  142.  
  143. #return img {
  144. max-width: 40px;
  145. }
  146.  
  147. #returnlink {
  148. position: fixed;
  149. margin-top: -30px;
  150. margin-left: -65px;
  151. }
  152.  
  153. #returnlink a {
  154. display: inline-block;
  155. padding: 5px;
  156. background-color: #f0baa6;
  157. color: #fff;
  158. font-family: 'tinytots';
  159. text-decoration: none;
  160. font-size: 8px;
  161. text-transform: uppercase;
  162. letter-spacing: 1px;
  163. }
  164.  
  165. #arrow {
  166. position: fixed;
  167. margin-top: -28px;
  168. margin-left: -16px;
  169. font-size: 11px;
  170. color: #f0baa6;
  171. -webkit-transform: rotate(270deg);
  172. -moz-transform: rotate(270deg);
  173. -o-transform: rotate(270deg);
  174. }
  175.  
  176. #rightimg {
  177. position: fixed;
  178. margin-left: 523px;
  179. margin-top: 110px;
  180. }
  181.  
  182. #title {
  183. position: fixed;
  184. margin-left: 270px;
  185. margin-top: 10px;
  186. width: 210px;
  187. border-radius: 10px;
  188. background-color: #f0baa6;
  189. box-shadow: 0px 0px 0px 5px #f0baa6;
  190. border: 2px dashed #fff;
  191. font-family: 'Codystar', sans-serif;
  192. padding: 10px 15px 10px 15px;
  193. text-align: center;
  194. letter-spacing: 10px;
  195. color: #fff;
  196. font-size: 22px;
  197. }
  198.  
  199. #faq {
  200. position: fixed;
  201. margin-top: 80px;
  202. width: 500px;
  203. height: 310px;
  204. overflow: auto;
  205. padding: 0px 10px 10px 10px;
  206. }
  207.  
  208. /* MAIN CONTENT - ASK (There's 4 different styles) */
  209.  
  210. #icon img {
  211. float: left;
  212. margin: 8px 10px 5px 5px;
  213. max-width: 50px;
  214. }
  215.  
  216. #ask1, #ask2, #ask3, #ask4 {
  217. width: 400px;
  218. padding: 10px;
  219. margin: 10px 0px 10px 70px;
  220. font-size: 12px;
  221. letter-spacing: 1px;
  222. min-height: 25px;
  223. border-radius: 10px;
  224. line-height: 18px;
  225. }
  226.  
  227. #ask1 a, #ask2 a, #ask3 a, #ask4 a {
  228. color: #3bc9df;
  229. text-decoration: none;
  230. border-bottom: 1px solid #c5e4e9;
  231. }
  232.  
  233. /* ASK STYLE 1 -- Penguin (GREEN) */
  234.  
  235. #ask1 {
  236. background-color: #f4f9eb;
  237. box-shadow: 0px 0px 0px 3px #f4f9eb;
  238. border: 2px dashed #c5e395;
  239. color: #599d46;
  240. }
  241.  
  242. #ask1 b, strong {
  243. font-weight: 700;
  244. color: #43a27f;
  245. }
  246.  
  247. #ask1 i, em {
  248. color: #9cb030;
  249. }
  250.  
  251. /* ASK STYLE 2 -- White Bear (PINK) */
  252.  
  253. #ask2 {
  254. background-color: #fbf0ed;
  255. box-shadow: 0px 0px 0px 3px #fbf0ed;
  256. border: 2px dashed #f9bebe;
  257. color: #ca6970;
  258. }
  259.  
  260. #ask2 b, strong {
  261. font-weight: 700;
  262. color: #f0848b;
  263. }
  264.  
  265. #ask2 i, em {
  266. color: #f3618a;
  267. }
  268.  
  269. /* ASK STYLE 3 -- Cat (YELLOW) */
  270.  
  271. #ask3 {
  272. background-color: #faf8e1;
  273. box-shadow: 0px 0px 0px 3px #faf8e1;
  274. border: 2px dashed #f6d4b1;
  275. color: #afa63c;
  276. }
  277.  
  278. #ask3 b, strong {
  279. font-weight: 700;
  280. color: #efae6b;
  281. }
  282.  
  283. #ask3 i, em {
  284. color: #c4a30a;
  285. }
  286.  
  287. /* ASK STYLE 4 -- Tonkatsu (ORANGE) */
  288.  
  289. #ask4 {
  290. background-color: #fef6e9;
  291. box-shadow: 0px 0px 0px 3px #fef6e9;
  292. border: 2px dashed #f4cc8c;
  293. color: #c19975;
  294. }
  295.  
  296. #ask4 b, strong {
  297. font-weight: 700;
  298. color: #e0883a;
  299. }
  300.  
  301. #ask4 i, em {
  302. color: #cb7c6a;
  303. }
  304.  
  305. /* MAIN CONTENT - ANSWER */
  306.  
  307. #answer {
  308. width: 470px;
  309. background-color: #fff;
  310. box-shadow: 0px 0px 0px 3px #fff;
  311. border: 2px dashed #fcd2c2;
  312. padding: 10px;
  313. margin: 15px 0px 0px 0px;
  314. font-size: 12px;
  315. letter-spacing: 1px;
  316. min-height: 25px;
  317. border-radius: 10px;
  318. line-height: 18px;
  319. color: #877f7b;
  320. }
  321.  
  322. #answer b, strong {
  323. font-weight: 700;
  324. color: #b4857c;
  325. }
  326.  
  327. #answer i, em {
  328. color: #b9a775;
  329. }
  330.  
  331. #answer a {
  332. color: #3bc9df;
  333. text-decoration: none;
  334. border-bottom: 1px solid #c5e4e9;
  335. }
  336.  
  337. #credit a {
  338. position: fixed;
  339. right: 25px;
  340. bottom: 25px;
  341. font-size: 10px;
  342. color: #9d856e;
  343. z-index: 9999;
  344. text-shadow: 1px 1px 1px #fff;
  345. text-decoration: none;
  346. }
  347.  
  348. </style>
  349.    
  350. </head><body>
  351.  
  352. <div id="top"></div><div id="left"></div><div id="right"></div><div id="bottom"></div><div id="bottomimg"><img src="https://40.media.tumblr.com/c67fb933f3c9c779765b0bff4857285a/tumblr_nloc5mUQB41ru3nbdo2_r1_1280.png"></div>
  353.  
  354. <div id="container">
  355.  
  356. <div id="content">
  357. <div id="attic"><img src="https://40.media.tumblr.com/77b377a04202c665f56ebb3d41b50169/tumblr_inline_nlpsyaucPn1rnjuep_500.png"></div>
  358.  
  359. <div id="return"><img src="https://40.media.tumblr.com/2e169bfaf8f93704f41e467c65ea1103/tumblr_inline_nlq6qpMOIY1rnjuep_500.png">
  360.    
  361. <div id="arrow">▼</div>
  362. <div id="returnlink"><a href="/">return?</a></div>
  363. </div>
  364.  
  365. <div id="rightimg"><img src="https://41.media.tumblr.com/8023d399f51f7e05537240fc69958a4e/tumblr_inline_nlpzvumXaR1rnjuep_500.png"></div>
  366.  
  367. <div id="title">✏ f.a.q.</div>
  368.  
  369. <div id="faq">
  370.  
  371. <!-- EDIT YOUR CONTENT BELOW THIS LINE -->
  372.  
  373. <!-- QUESTION & ANSWER CODES START -->
  374.  
  375. <!-- QUESTION & ANSWER 1 -->
  376.  
  377. <div id="icon"><img src="https://40.media.tumblr.com/4581054423bf960b2233f0537a509ff8/tumblr_inline_nloxylpPzi1rnjuep_500.png"></div>
  378.  
  379. <div id="ask1">
  380.  
  381. <b>Question:</b> This is a <i>question</i>.
  382.  
  383. </div>
  384.  
  385. <div id="answer">
  386.  
  387. <b>Answer:</b> This is your answer to the question. Here is a <a href="">link</a>.
  388.  
  389. </div>
  390. <br>
  391.  
  392. <!-- QUESTION & ANSWER 2 -->
  393.  
  394. <div id="icon"><img src="https://40.media.tumblr.com/082b0cb3155d3edb4d32185b1ca35f53/tumblr_inline_nlpwzpH1iM1rnjuep_500.png"></div>
  395.  
  396. <div id="ask2">
  397.  
  398. <b>Question:</b> This is a <i>question</i>.
  399.  
  400. </div>
  401.  
  402. <div id="answer">
  403.  
  404. <b>Answer:</b> This is your answer to the question. Here is a <a href="">link</a>.
  405.  
  406. </div>
  407. <br>
  408.  
  409. <!-- QUESTION & ANSWER 3 -->
  410.  
  411. <div id="icon"><img src="https://40.media.tumblr.com/c1859c327b55dc0b6106116e32cb2ffb/tumblr_inline_nlpyacSBCs1rnjuep_500.png"></div>
  412.  
  413. <div id="ask3">
  414.  
  415. <b>Question:</b> This is a <i>question</i>.
  416.  
  417. </div>
  418.  
  419. <div id="answer">
  420.  
  421. <b>Answer:</b> This is your answer to the question. Here is a <a href="">link</a>.
  422.  
  423. </div>
  424. <br>
  425.  
  426. <!-- QUESTION & ANSWER 4 -->
  427.  
  428. <div id="icon"><img src="https://36.media.tumblr.com/830c0693c3c8993525188bbb0ab83bdd/tumblr_inline_nlpyl1jHWY1rnjuep_500.png"></div>
  429.  
  430. <div id="ask4">
  431.  
  432. <b>Question:</b> This is a <i>question</i>.
  433.  
  434. </div>
  435.  
  436. <div id="answer">
  437.  
  438. <b>Answer:</b> This is your answer to the question. Here is a <a href="">link</a>.
  439.  
  440. </div>
  441. <br>
  442.  
  443. <!-- QUESTION & ANSWER CODES END -->
  444.  
  445.  
  446. <!-- TO ADD MORE QUESTIONS: There are 4 different styles of ask, so to keep the design consistent you must copy the entire Question & Answer 1, 2, 3 and 4 codes and paste them below this line -->
  447.  
  448.  
  449.  
  450.  
  451.  
  452.  
  453.  
  454.  
  455.  
  456. <br> <!-- IMPORTANT! PLEASE KEEP THIS HERE -->
  457.  
  458.  
  459. <!-- ASK BOX CODE -->
  460.  
  461. <!-- In the following part where you see this: 'https://www.tumblr.com/ask_form/YOUR-USER-NAME', change YOUR-USER-NAME to your own URL name so that the ask box works for your blog (must have the ask feature enabled on your blog) -->
  462.  
  463.  
  464. <iframe frameborder="0" scrolling="no" width="500" height="190" src="https://www.tumblr.com/ask_form/YOUR-USER-NAME" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe>
  465.  
  466.  
  467. </div></div></div> <!-- IMPORTANT! PLEASE KEEP THIS HERE -->
  468.  
  469. <div id="credit"><a href="http://cocorini.tumblr.com" target="_blank">☂</a></div> <!-- PLEASE LEAVE THIS HERE. THANK YOU -->
  470.  
  471. </body>
  472. </html>
RAW Paste Data
Top