API tools faq
paste
Advertisement
wcrmtails

Fic Recs Page 01

wcrmtails
Apr 20th, 2018
3,604
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.25 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.  
  6. <!-----fic recs page 01 by darthvcder/arithemes----->
  7.  
  8. <head>
  9.  
  10.  
  11.  
  12. <title>fic recs</title> <!-----change the title on the tab here----->
  13. <link rel="shortcut icon" href="{Favicon}">
  14. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  15.  
  16.  
  17. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  18. <script src="https://static.tumblr.com/xd6ujov/9Rpouml9f/imagesloaded.pkgd.min.js"></script>
  19. <script src="https://static.tumblr.com/f6blkfc/3khouzw5b/masonry.pkgd.min.js"></script>
  20.  
  21. <script>$(document).ready(function(){
  22. var $grid = $(".container"); $grid.imagesLoaded(function() {
  23. $grid.masonry({
  24. itemSelector: ".fic",
  25. columnWidth: 320
  26. });
  27. });
  28. $(".button").click(function(){
  29. $(this).addClass("selected");
  30. $(".button").not($(this)).removeClass("selected");
  31. var ssf = $(this).attr("filter");
  32. $(".fic." + ssf).show();
  33. $(".fic").not("." + ssf).hide();
  34. $grid.masonry();
  35. });
  36. });</script>
  37.  
  38.  
  39. <style type="text/css">
  40.  
  41.  
  42. ::-webkit-scrollbar-thumb {
  43. background-color: #eeeeee; /*change the scrollbar*/
  44. height:auto;
  45. border-bottom:none;
  46. }
  47. ::-webkit-scrollbar {
  48. height:9px;
  49. width:5px;
  50. background-color: transparent;
  51.  
  52. }
  53.  
  54. ::selection {
  55. background-color: #a82a52; /*selection bg*/
  56. color: #fcfcfc; /*selection text*/
  57. }
  58.  
  59. body {
  60. background-color: #fcfcfc; /*background color*/
  61. background-image: url(/); /*background image url if you want one*/
  62. background-repeat: repeat;
  63. font-family: arial;
  64. line-height: 110%;
  65. font-size: 11px;
  66. color: #9c9c9c; /*tag/categories color*/
  67. }
  68.  
  69.  
  70. a {
  71.  
  72. color: #a82a52; /*fic title color & general link color*/
  73. text-decoration: none;
  74. }
  75.  
  76. a:hover {
  77. color: #9c9c9c; /*fic title/general link hover color*/
  78. -webkit-transition: 0.8s;
  79. -moz-transition: 0.8s;
  80. transition: 0.8s;
  81. }
  82.  
  83. b {
  84. color: #ff9f8c; /*bold color*/
  85. }
  86.  
  87. #title {
  88. font-size: 15px;
  89. color: #a82a52; /*page title color*/
  90. margin-top: 100px;
  91. text-transform: uppercase;
  92. letter-spacing: 5px;
  93. }
  94.  
  95. #nav {
  96. font-size: 9px;
  97. margin-top: 10px;
  98. }
  99.  
  100. #nav a {
  101. height: relative;
  102. color: #b5b5b5; /*home/ask/archive links color*/
  103. text-decoration: underline;
  104. padding-right: 2px;
  105. padding-left: 2px;
  106. letter-spacing: 1px;
  107. margin-left: 5px;
  108. }
  109.  
  110. #nav a:hover {
  111. color: #9c9c9c; /*home/ask/archive links hover color*/
  112. }
  113.  
  114. .button{
  115. color: #b5b5b5; /*filter text color*/
  116. cursor: help;
  117. font-size: 9px;
  118. display: inline-block;
  119. margin-left: 5px;
  120. margin-top: 10px;
  121. }
  122.  
  123. .button.selected {
  124. color: #9c9c9c; /*selected filter color*/
  125. text-decoration: underline;
  126. }
  127.  
  128. .container {
  129. width: 100%;
  130. height: auto;
  131. margin-bottom: 20px;
  132. margin: auto;
  133. }
  134.  
  135. .fic {
  136. width: 260px;
  137. height: relative;
  138. background-color: white; /*fic rec bg color*/
  139. padding: 10px;
  140. border: 1px solid #eeeeee; /*fic rec border color*/
  141. border-radius: 5px;
  142. margin-top: 20px;
  143. margin-left: 20px;
  144. }
  145.  
  146.  
  147.  
  148. .title {
  149. text-align: center;
  150. background-color: #fcfcfc; /*fic title/author bg color*/
  151. padding: 6px;
  152. line-height: 1.5;
  153. border: 1px solid #eeeeee; /*fic title/author border color*/
  154. border-radius: 5px;
  155. }
  156.  
  157. .author {
  158. font-size: 9px;
  159. color: #b5b5b5; /*author color*/
  160. text-align: center;
  161. letter-spacing: 1px;
  162. margin-top: 5px;
  163. border-top: 1px solid #eeeeee; /*border between fic title/author color*/
  164. padding-top: 2px;
  165. }
  166.  
  167. .author b {
  168. color: #9c9c9c; /*color of the "by:" part of the author section*/
  169. }
  170.  
  171.  
  172.  
  173. .summary {
  174. background-color: #fcfcfc; /*summary bg*/
  175. padding: 6px;
  176. color: #b5b5b5; /*summary text*/
  177. font-size: 10px;
  178. text-align: left;
  179. margin-top: 10px;
  180. border: 1px solid #eeeeee; /*summary border*/
  181. border-radius: 5px;
  182. }
  183.  
  184. .summary b {
  185. color: #9c9c9c; /*the "summary:" part of the summary color*/
  186. }
  187.  
  188. .info {
  189. background-color: #fcfcfc; /*tags/categories/info bg*/
  190. padding: 6px;
  191. font-size: 10px;
  192. text-align: center;
  193. margin-top: 10px;
  194. letter-spacing: 1px;
  195. display: inline-block;
  196. border: 1px solid #eeeeee; /*tags/categories/info border*/
  197. border-radius: 5px;
  198. }
  199.  
  200.  
  201. </style>
  202. </head>
  203.  
  204. <body>
  205.  
  206. <center>
  207.  
  208. <div id="title">
  209. fic recs <!--page title-->
  210. </div>
  211.  
  212. <div id="nav">
  213. <a href="/">return</a> <!--home link-->
  214. <a href="/ask">ask</a> <!--ask link-->
  215. <a href="/archive">archive</a> <!--archive link-->
  216. </div>
  217.  
  218. <!--here is where you change your filters for your specific recs. do not replace the filter="fic" part of the first one.
  219.  
  220. for example, if you wanted to have a filter for character a/character b, you might change filter="filter1" to filter="ab". if you wanted character c/character d for filter 2, you'd then change filter="filter2" to something like filter="ab". you can add as many as you want by pasting the following code after filter 4 and editing it as many times as you need. without the quotations:
  221.  
  222. "<div class="button" filter="yourfilter">filter </div>"
  223.  
  224. you can also change any of the genre filters or the favorites filter to whatever you want. those are just some typical theme filters.
  225.  
  226. -->
  227.  
  228. <div class="button selected" filter="fic">all fics</div>
  229. <div class="button" filter="filter1">filter 1</div>
  230. <div class="button" filter="filter2">filter 2</div>
  231. <div class="button" filter="filter3">filter 3</div>
  232. <div class="button" filter="filter4">filter 4</div>
  233.  
  234. <div class="button" filter="gen">gen</div>
  235. <div class="button" filter="teen">teen</div>
  236. <div class="button" filter="mature">mature</div>
  237. <div class="button" filter="explicit">explicit</div>
  238.  
  239. <div class="button" filter="fave">favorites</div>
  240.  
  241.  
  242.  
  243.  
  244. <div class="container">
  245.  
  246. <!--here's where you'll put your fics. just replace all the below info with the info from your fic.
  247.  
  248. where it says "<div class="fic filter1 explicit">" or something similar for the following ones, you HAVE to keep the "fic" part of it. replace filter1 with whatever your filter is. change explicit to whatever rating the fic is. after that, add whatever other filters you want. for example, you could put
  249.  
  250. "<div class="fic pairing gen fave">"
  251.  
  252.  
  253. -->
  254.  
  255. <!--rec 1-->
  256. <div class="fic filter1 explicit">
  257.  
  258. <div class="title">
  259. <a href="fic link here including http://">Your Fic Rec Title 1</a>
  260.  
  261. <div class="author">
  262. <b>by:</b> author (author site)
  263. </div>
  264. </div>
  265.  
  266.  
  267.  
  268. <div class="summary">
  269. <b>Summary:</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet.
  270. </div>
  271.  
  272.  
  273. <div class="info">pairing</div>
  274. <div class="info">word count</div>
  275. <div class="info">rating</div>
  276. <div class="info">warnings</div>
  277.  
  278. </div>
  279. <!--end rec 1-->
  280.  
  281. <!--rec 2-->
  282. <div class="fic filter2 gen">
  283.  
  284. <div class="title">
  285. <a href="fic link here including http://">Your Fic Rec Title 2</a>
  286.  
  287. <div class="author">
  288. <b>by:</b> author (author site)
  289. </div>
  290. </div>
  291.  
  292.  
  293.  
  294. <div class="summary">
  295. <b>Summary:</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet.
  296. </div>
  297.  
  298.  
  299. <div class="info">pairing</div>
  300. <div class="info">word count</div>
  301. <div class="info">rating</div>
  302. <div class="info">warnings</div>
  303.  
  304. </div>
  305. <!--end rec 2-->
  306.  
  307. <!--rec 3-->
  308. <div class="fic filter3 teen">
  309.  
  310. <div class="title">
  311. <a href="fic link here including http://">Your Fic Rec Title 3</a>
  312.  
  313. <div class="author">
  314. <b>by:</b> author (author site)
  315. </div>
  316. </div>
  317.  
  318.  
  319.  
  320. <div class="summary">
  321. <b>Summary:</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet.
  322. </div>
  323.  
  324.  
  325. <div class="info">pairing</div>
  326. <div class="info">word count</div>
  327. <div class="info">rating</div>
  328. <div class="info">warnings</div>
  329.  
  330. </div>
  331. <!--end rec 3-->
  332.  
  333. <!--rec 4-->
  334. <div class="fic filter4 mature">
  335.  
  336. <div class="title">
  337. <a href="fic link here including http://">Your Fic Rec Title 4</a>
  338.  
  339. <div class="author">
  340. <b>by:</b> author (author site)
  341. </div>
  342. </div>
  343.  
  344.  
  345.  
  346. <div class="summary">
  347. <b>Summary:</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet.
  348. </div>
  349.  
  350.  
  351. <div class="info">pairing</div>
  352. <div class="info">word count</div>
  353. <div class="info">rating</div>
  354. <div class="info">warnings</div>
  355.  
  356. </div>
  357. <!--end rec 4-->
  358.  
  359. <!--rec 5-->
  360. <div class="fic filter3 gen">
  361.  
  362. <div class="title">
  363. <a href="fic link here including http://">Your Fic Rec Title 5</a>
  364.  
  365. <div class="author">
  366. <b>by:</b> author (author site)
  367. </div>
  368. </div>
  369.  
  370.  
  371.  
  372. <div class="summary">
  373. <b>Summary:</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet.
  374. </div>
  375.  
  376.  
  377. <div class="info">pairing</div>
  378. <div class="info">word count</div>
  379. <div class="info">rating</div>
  380. <div class="info">warnings</div>
  381.  
  382. </div>
  383. <!--end rec 5-->
  384.  
  385. <!--rec 6-->
  386. <div class="fic filter1 mature fave">
  387.  
  388. <div class="title">
  389. <a href="fic link here including http://">Your Fic Rec Title 6</a>
  390.  
  391. <div class="author">
  392. <b>by:</b> author (author site)
  393. </div>
  394. </div>
  395.  
  396.  
  397.  
  398. <div class="summary">
  399. <b>Summary:</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet.
  400. </div>
  401.  
  402.  
  403. <div class="info">pairing</div>
  404. <div class="info">word count</div>
  405. <div class="info">rating</div>
  406. <div class="info">warnings</div>
  407.  
  408. </div>
  409. <!--end rec 6-->
  410.  
  411. <!--rec 7-->
  412. <div class="fic filter4 teen fave">
  413.  
  414. <div class="title">
  415. <a href="fic link here including http://">Your Fic Rec Title 7</a>
  416.  
  417. <div class="author">
  418. <b>by:</b> author (author site)
  419. </div>
  420. </div>
  421.  
  422.  
  423.  
  424. <div class="summary">
  425. <b>Summary:</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet.
  426. </div>
  427.  
  428.  
  429. <div class="info">pairing</div>
  430. <div class="info">word count</div>
  431. <div class="info">rating</div>
  432. <div class="info">warnings</div>
  433.  
  434. </div>
  435. <!--end rec 7-->
  436.  
  437. <!--rec 8-->
  438. <div class="fic filter4 explicit ">
  439.  
  440. <div class="title">
  441. <a href="fic link here including http://">Your Fic Rec Title 8</a>
  442.  
  443. <div class="author">
  444. <b>by:</b> author (author site)
  445. </div>
  446. </div>
  447.  
  448.  
  449.  
  450. <div class="summary">
  451. <b>Summary:</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet.
  452. </div>
  453.  
  454.  
  455. <div class="info">pairing</div>
  456. <div class="info">word count</div>
  457. <div class="info">rating</div>
  458. <div class="info">warnings</div>
  459.  
  460. </div>
  461. <!--end rec 8-->
  462.  
  463. <!--rec 9-->
  464. <div class="fic filter1 gen ">
  465.  
  466. <div class="title">
  467. <a href="fic link here including http://">Your Fic Rec Title 9</a>
  468.  
  469. <div class="author">
  470. <b>by:</b> author (author site)
  471. </div>
  472. </div>
  473.  
  474.  
  475.  
  476. <div class="summary">
  477. <b>Summary:</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet.
  478. </div>
  479.  
  480.  
  481. <div class="info">pairing</div>
  482. <div class="info">word count</div>
  483. <div class="info">rating</div>
  484. <div class="info">warnings</div>
  485.  
  486. </div>
  487. <!--end rec 9-->
  488.  
  489. <!--rec 10-->
  490. <div class="fic filter4 mature ">
  491.  
  492. <div class="title">
  493. <a href="fic link here including http://">Your Fic Rec Title 10</a>
  494.  
  495. <div class="author">
  496. <b>by:</b> author (author site)
  497. </div>
  498. </div>
  499.  
  500.  
  501.  
  502. <div class="summary">
  503. <b>Summary:</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet.
  504. </div>
  505.  
  506.  
  507. <div class="info">pairing</div>
  508. <div class="info">word count</div>
  509. <div class="info">rating</div>
  510. <div class="info">warnings</div>
  511.  
  512. </div>
  513. <!--end rec 10-->
  514.  
  515.  
  516. <!--to add more fics, paste the below under rec 10
  517.  
  518.  
  519. <div class="fic filter rating ">
  520.  
  521. <div class="title">
  522. <a href="fic link here including http://">Your Fic Rec Title</a>
  523.  
  524. <div class="author">
  525. <b>by:</b> author (author site)
  526. </div>
  527. </div>
  528.  
  529.  
  530.  
  531. <div class="summary">
  532. <b>Summary:</b> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat. In in velit quis arcu ornare laoreet.
  533. </div>
  534.  
  535.  
  536. <div class="info">pairing</div>
  537. <div class="info">word count</div>
  538. <div class="info">rating</div>
  539. <div class="info">warnings</div>
  540.  
  541. </div>
  542.  
  543.  
  544. -->
  545.  
  546.  
  547. </div>
  548. </center>
  549.  
  550. <!--DON'T TOUCH ANYTHING HERE EXCEPT FOR #000 TO CHANGE LINK COLOR-->
  551.  
  552. <div style="position:fixed;bottom:8px; right:15px; font-size:9px; font-family:calibri; height: 15px;"><a style="color:#000; text-decoration:none;" href="http://arithemes.tumblr.com/">A</a></center></div>
  553.  
  554. </body>
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!