API tools faq
paste
Advertisement
harreyeh

fic recs page 1a

harreyeh
Mar 1st, 2014
2,277
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.34 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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4.  
  5. <title>fic recs.</title>
  6. <!--- change the title of the page here --->
  7.  
  8. <link rel="shortcut icon" href="{Favicon}">
  9. <!---
  10.  
  11. FANFIC RECS A ᴘᴀɢᴇ ᴛʜᴇᴍᴇ ʙʏ ʜᴀʀᴅᴢɪᴀᴍ
  12. please don't take off the credit it's really small!!!!
  13.  
  14.  
  15. ╭━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮ ╭━━┳╮╱╱╭╮
  16. ┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃ ┃╭╮┃╰╮╭╯┃
  17. ╰╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮ ┃╰╯╰╮╰╯╭╯
  18. ╱╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃ ┃╭━╮┣╮╭╯
  19. ╱╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃ ┃╰━╯┃┃┃
  20. ╱╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯ ╰━━━╯╰╯
  21. ╭╮╱╭┳━━━┳━━━┳━━━┳━━━━┳━━┳━━━┳━╮╭━╮
  22. ┃┃╱┃┃╭━╮┃╭━╮┣╮╭╮┣━━╮━┣┫┣┫╭━╮┃┃╰╯┃┃
  23. ┃╰━╯┃┃╱┃┃╰━╯┃┃┃┃┃╱╭╯╭╯┃┃┃┃╱┃┃╭╮╭╮┃
  24. ┃╭━╮┃╰━╯┃╭╮╭╯┃┃┃┃╭╯╭╯╱┃┃┃╰━╯┃┃┃┃┃┃
  25. ┃┃╱┃┃╭━╮┃┃┃╰┳╯╰╯┣╯━╰━┳┫┣┫╭━╮┃┃┃┃┃┃
  26. ╰╯╱╰┻╯╱╰┻╯╰━┻━━━┻━━━━┻━━┻╯╱╰┻╯╰╯╰╯
  27.  
  28.  
  29. hardziam.tumblr.com // themesbyzsu.tumblr.com
  30.  
  31.  
  32.  
  33.  
  34.  
  35. --->
  36.  
  37.  
  38.  
  39.  
  40. <link href='http://fonts.googleapis.com/css?family=Archivo+Black' rel='stylesheet' type='text/css'>
  41. <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
  42. <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
  43.  
  44. <link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
  45. <style type="text/css">
  46.  
  47.  
  48.  
  49.  
  50.  
  51. /* CUSTOMISABLE COLOURS */
  52.  
  53.  
  54. /*CSS*/
  55.  
  56. ::-webkit-scrollbar {background-color:white; border:3px solid #fff;height:4px; width:4px;}
  57. ::-webkit-scrollbar-thumb:vertical {background-color:#333; border:2px solid #333; height:40px; border-radius:3px;}
  58. ::-webkit-scrollbar-thumb:horizontal {background-color:#333;border:2px solid #333; height:8px!important}
  59.  
  60. body {
  61. background-image:url(http://i.imgur.com/1LqHc9n.png);
  62. font-family: 'verdana';
  63. font-size:10px;
  64. }
  65.  
  66. a {text-decoration:none;}
  67.  
  68. .hidden {display: none;}
  69.  
  70. .unhidden {display: block;}
  71.  
  72. .container {
  73. left:200px;
  74. margin-left:200px;
  75. }
  76.  
  77. #fic-list {margin-left:250px; width:auto;}
  78.  
  79. .li {
  80. list-style:none;
  81. margin:0;
  82. }
  83.  
  84. .ul fic-list {
  85. margin-top:0;
  86. list-style:none;
  87. }
  88.  
  89. .list {
  90. margin:20px;
  91. margin-left:30px;
  92. list-style:none;
  93. }
  94.  
  95. .story {
  96. width:530px;
  97. height:157px;
  98. float: left;
  99. padding:5px;
  100. padding-top:0px;
  101. margin:10px;
  102. background-color:#fff;
  103. overflow:hidden;
  104. color:black;
  105. border:1px solid #eee;
  106. }
  107.  
  108. .tags {
  109. display:none;
  110. }
  111.  
  112. .search-bar {
  113. width:230px;
  114. height:40px;
  115. background-color:#f1f1f1;
  116. float:left;
  117. margin-left:-240px;
  118. margin-top:500px;
  119. position:fixed;
  120. z-index:100;
  121. -webkit-transition: all 0.5s ease-in-out;
  122. -moz-transition: all 0.5s ease-in-out;
  123. -o-transition: all 0.5s ease-in-out;
  124. }
  125.  
  126. .searchkey{
  127. width:22px;
  128. height:22px;
  129. margin-right:5px;
  130. float:left;
  131. }
  132.  
  133. .searchkey img{
  134. width:15px;
  135. margin-top:6px;
  136. padding:5px;
  137. background:#fff;
  138. border-radius:50%;
  139. border:1px solid #eee;
  140. -webkit-filter: invert(0%);
  141. }
  142.  
  143.  
  144. .search-bar:hover .search{
  145. opacity:1;
  146. -webkit-transition: all 1s ease-in-out;
  147. -moz-transition: all 1s ease-in-out;
  148. -o-transition: all 1s ease-in-out;
  149. }
  150.  
  151. .search {
  152. opacity:1;
  153. padding-left:15px;
  154. width:185px;
  155. margin: 10px 0 0 -13px;
  156. border:2px solid white;
  157. -webkit-transition: all 0s ease-in-out;
  158. -moz-transition: all 0s ease-in-out;
  159. -o-transition: all 0s ease-in-out;
  160. }
  161.  
  162.  
  163.  
  164.  
  165. /*--------- boxes ---------*/
  166.  
  167. .title{
  168. font-family:'Trebuchet MS';
  169. padding-bottom:8px;
  170. padding-left:6px;
  171. padding-top:3px;
  172. text-align:left;
  173. background:#fff;
  174. width:400px;
  175. height:25px;
  176. color:black;
  177. margin-left:96px;
  178. margin-bottom:0px;
  179. text-transform:uppercase;
  180. border-left:1px solid #eee;
  181. }
  182.  
  183. .title a{
  184. color:black;
  185. font-style:italic;
  186. font-size:15px;
  187. -webkit-transition: all 0.5s ease-in-out;
  188. -moz-transition: all 0.5s ease-in-out;
  189. -o-transition: all 0.5s ease-in-out;
  190. }
  191.  
  192. .title a:hover{
  193. color:#ddd;
  194. -webkit-transition: all 0.5s ease-in-out;
  195. -moz-transition: all 0.5s ease-in-out;
  196. -o-transition: all 0.5s ease-in-out;
  197. }
  198.  
  199. .author {
  200. margin-left:10px;
  201. padding-left:6px;
  202. color:#666;
  203. }
  204. .info{
  205. font-family:verdana;
  206. font-size:9px;
  207. text-transform:uppercase;
  208. padding:3px;
  209. letter-spacing:1px;
  210. height:90px;
  211. width:90px;
  212. padding-top:5px;
  213. float:left;
  214. text-align:right;
  215. border-top:1px solid #eee;
  216. }
  217.  
  218. .desc {
  219. height:110px;
  220. padding:5px;
  221. overflow:auto;
  222. z-index:99;
  223. background:#f6f6f6;
  224. color:#000;
  225. }
  226.  
  227. #rn{
  228. width:100%;
  229. background:blue;
  230. }
  231.  
  232.  
  233. #side {
  234. width:230px;
  235. height: 150%;
  236. margin-top:-50px;
  237. z-index:-99;
  238. background:#f2f2f2;
  239. padding:10px;
  240. float:left;
  241. position:fixed;
  242. }
  243.  
  244. .sidetitle{
  245. font-family:Oswald;
  246. font-size:60px;
  247. text-transform:uppercase;
  248. margin-top:200px;
  249. text-align:center;
  250. color:#222;
  251. }
  252.  
  253. .sidetitle:first-letter{
  254. color:#ff0000;
  255. }
  256.  
  257. .subtitle{
  258. font-family:Lucida Sans Unicode;
  259. text-transform:uppercase;
  260. color:#7777;
  261. letter-spacing:2px;
  262. text-align:center;
  263. }
  264.  
  265. .description{
  266. background:white;
  267. width:220px;
  268. padding:5px;
  269. color:#888;
  270. margin-top:20px;
  271. }
  272.  
  273. .links a{
  274. display:block;
  275. margin-top:5px;
  276. text-align:center;
  277. color:black;
  278. font-size:9px;
  279. letter-spacing:1px;
  280. background:white;
  281. text-transform:uppercase;
  282. font-family:verdana;
  283. width:100%;
  284. padding-top:3px;
  285. padding-bottom:3px;
  286. -webkit-transition: all 0.2s ease-in-out;
  287. -moz-transition: all 0.2s ease-in-out;
  288. -o-transition: all 0.2s ease-in-out;
  289. }
  290.  
  291. .links a:hover{
  292. background:#eee;
  293. color:black;
  294. -webkit-transition: all 0.2s ease-in-out;
  295. -moz-transition: all 0.2s ease-in-out;
  296. -o-transition: all 0.2s ease-in-out;
  297. }
  298.  
  299. .tagslist{
  300. background:#333;
  301. z-index:-30000;
  302. opacity:0.8;
  303. position:fixed;
  304. width:180px;
  305. height:90%;
  306. padding:5px;
  307. overflow:auto;
  308. margin-top:-20px;
  309. font-weight:lighter;
  310. margin-left:-10px;
  311. padding-top:50px;
  312. padding-bottom:40px;
  313. text-align:center;
  314. font-family:Lucida Sans Unicode;
  315. font-size:8px;
  316. text-transform:uppercase;
  317. color:#ccc;
  318. letter-spacing:1px;
  319. }
  320.  
  321. .tagslist h1{
  322. text-transform:uppercase;
  323. font-family:Oswald;
  324. font-weight:lighter;
  325. color:white;
  326. font-size:12px;
  327. letter-spacing:4px;
  328. }
  329.  
  330. .tagslist em{
  331. font-style:normal;
  332. font-weight:lighter;
  333. color:#ccc;
  334. text-transform:uppercase;
  335. font-family:Lucida Sans Unicode;
  336. font-size:9px;
  337. letter-spacing:2px;
  338. }
  339.  
  340. .rc{
  341. position:absolute;
  342. font-size:8px;
  343. text-align:right;
  344. margin-top:0px;
  345. cursor:help;
  346. width:90px;
  347. height:10px;
  348. color:#333;
  349. }
  350.  
  351. .commentary{
  352. position:absolute;
  353. height:130px;
  354. width:500px;
  355. margin-top:-63px;
  356. margin-left:93px;
  357. overflow:hidden;
  358. text-align:left;
  359. display:none;
  360. }
  361.  
  362. .comment{
  363. position:absolute;
  364. height:105px;
  365. width:420px;
  366. padding:10px;
  367. overflow:auto;
  368. padding-top:6px;
  369. padding-left:5px;
  370. text-align:left;
  371. text-transform:none;
  372. background-color:#eee;
  373. font-family: 'verdana';
  374. font-size:10px;
  375. letter-spacing:0px;
  376. color:#232323;
  377. }
  378.  
  379. .comment::-webkit-scrollbar {
  380. width: 5px;
  381. height: 5px;
  382. background-color:#eee;
  383. border:2px solid #eee;
  384. }
  385.  
  386. .comment::-webkit-scrollbar-thumb {
  387. background-color: #888;
  388. border:1px solid #888;
  389. }
  390.  
  391. .list li {
  392. list-style:none;
  393. padding-bottom:5px;
  394. }
  395.  
  396. ul, li {
  397. margin-left: 0;
  398. padding-left: 0;
  399. }
  400.  
  401. #example{
  402. margin-left:-10px;
  403. }
  404.  
  405.  
  406. #credit a{
  407. background:white;
  408. right:10px;
  409. bottom:5px;
  410. padding:5px;
  411. position:fixed;
  412. border:1px solid #eee;
  413. color:black;
  414. font-family:helvetica;
  415. font-size:10px;
  416. }
  417.  
  418. #credit a:hover{
  419. background:black;
  420. color:white;
  421. }
  422.  
  423. </style>
  424. </head>
  425.  
  426. <body>
  427.  
  428. <!----- KEYWORDS SECTION ----->
  429.  
  430. <div class="tagslist">
  431.  
  432. search for any of the keywords below using the search box to the right.
  433. <p>
  434.  
  435. <!----- put in a little description of how to navigate / things that people should search, and then copy this below to make a new section.
  436.  
  437. IMPORTANT: make sure that you put <br> after every tag/keyword.
  438.  
  439. <h1>TITLE</h1>
  440. <em>
  441. tag<br>
  442. tag<br>
  443. tag<br>
  444. </em>
  445. <br>
  446.  
  447. --->
  448. <h1>word count</h1>
  449. <em>
  450. -5k<br>
  451. 5-10k<br>
  452. 10-15k<br>
  453. 15-25k<br>
  454. 25-50k<br>
  455. 50-100k<br>
  456. </em><br>
  457.  
  458.  
  459.  
  460.  
  461. <br>
  462. <input type="button" style="margin-top:25px; background:white; text-transform:uppercase; border:1px solid white; width:150px;" value="hide tags list" onclick="example_animate('-10px')" />
  463. </div>
  464.  
  465. <!----- END KEYWORDS SECTION ----->
  466.  
  467. <!------- BEGIN MAIN CONTAINER ----->
  468.  
  469. <div id="example">
  470.  
  471. <!------- BEGIN SIDE BAR ------->
  472.  
  473. <div id="side">
  474. <div class="sidetitle">ficrecs.</div>
  475. <div class="subtitle">fanfiction recommendations.</div>
  476. <div class="description">Write a description here about this page and what they can find here, or you can write here what people should search for;<br>
  477. e.g. "Search for 'favorite' in the search bar below for my favourites."
  478. </div>
  479.  
  480.  
  481. <div class="links">
  482. <a href="/">go back</a>
  483. <a href="/ask">message</a>
  484. <a href="LINK">link 3</a>
  485. </script>
  486.  
  487. <!----- IMPORTANT: If you're not going to use the "keyword" section, remove this button below. the keywords sidebar will not slide out without it. DO NOT TOUCH THE "</div></div>"---->
  488. <input style="margin-top:5px; background:#ddd; text-transform:uppercase; border:1px solid #ddd; width:230px; cursor:help; font-family:verdana; letter-spacing:2px" type="button" value="show tags list" onclick="example_animate('+180px')" />
  489.  
  490.  
  491. </div>
  492. </div>
  493. <!----- END SIDEBAR ---->
  494.  
  495. <!----- BEGIN FIC LIST ----->
  496.  
  497. <div id="fic-list">
  498.  
  499. <div class="search-bar">
  500. <div class="searchkey"><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-128.png"></div>
  501. <input class="search" width="100" placeholder="SEARCH"/>
  502. </div>
  503.  
  504.  
  505. <ul class="list">
  506.  
  507. <!------- NEW BOX: COPY AND PASTE EVERYTHING BELOW.
  508.  
  509.  
  510. <li>
  511. <div class="story">
  512. <div class="title">
  513. <a href="LINK">fic title</a><br>
  514. <span class="author">author</span>
  515. </div>
  516.  
  517. <div class="info">
  518. pairing<br>
  519. word count<br>
  520. rating<br>
  521. <span style="color:#e7e404">★★★★★</span>
  522.  
  523. <div class="rc">
  524. click for r/c
  525. <div class="commentary">
  526. <div class="comment">
  527. say what you like about the story
  528. </div>
  529. </div>
  530. </div>
  531. </div>
  532.  
  533.  
  534. <div class="desc">
  535. fic description
  536. </div>
  537.  
  538. <div class="tags">
  539. put anything that you want to be searchable here
  540. </div>
  541. </div>
  542. </li>
  543.  
  544. --------->
  545.  
  546.  
  547. <li>
  548. <div class="story">
  549. <div class="title">
  550. <a href="LINK">fic title</a><br>
  551. <span class="author">author</span>
  552. </div>
  553.  
  554. <div class="info">
  555. pairing<br>
  556. word count<br>
  557. rating<br>
  558. <!----make sure that you put <br> on the end!!
  559. move stars outside of the </span> to make them black ---->
  560. <span style="color:#e7e404">★★★</span>★★
  561.  
  562.  
  563. <!---- READER COMMENTARY BEGINS. THIS IS OPTIONAL. If you don't want to put this on every story, or any, then just remove up to "END READER COMMENTARY"---->
  564. <div class="rc">
  565. click for r/c
  566. <div class="commentary">
  567. <div class="comment">
  568. <!-- say what you like about the story here -->
  569. </div>
  570. </div>
  571. </div>
  572. <!------ END READER COMMENTARY ------>
  573.  
  574. </div>
  575.  
  576.  
  577. <div class="desc">
  578.  
  579. fic description
  580.  
  581. </div>
  582.  
  583. <div class="tags">
  584.  
  585. put anything that you want to be searchable here
  586.  
  587. </div>
  588. </div>
  589. </li>
  590.  
  591.  
  592.  
  593.  
  594.  
  595.  
  596. </ul>
  597. </div>
  598. </div>
  599. </div>
  600.  
  601.  
  602. <div id="credit">
  603. <a href="http://hardziam.tumblr.com">HZ</a>
  604. </div>
  605.  
  606. </div>
  607. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  608.  
  609. <script type="text/javascript">
  610.  
  611. $(document).ready(function(){
  612. $('.rc').click(function(){
  613. $(this).children(".commentary").slideToggle("500");
  614. });
  615.  
  616.  
  617. });
  618.  
  619. </script>
  620.  
  621. <script src="http://static.tumblr.com/qwfkpqk/evSmlscpv/list.min.js"></script>
  622. <script type="text/javascript">
  623. var options = {
  624. valueNames: [ 'story' ]
  625. };
  626. var storyList = new List('fic-list', options);
  627. </script>
  628.  
  629. <script type="text/javascript">
  630. function unhide(divID) {
  631. var item = document.getElementById(divID);
  632. if (item) {
  633. item.className=(item.className=='hidden')?'unhidden':'hidden';
  634. }
  635. }
  636. </script>
  637.  
  638. <script language="javascript">
  639. function example_animate(px) {
  640. $('#example').animate({
  641. 'marginLeft' : px
  642. });
  643. }
  644. </script>
  645.  
  646.  
  647. <script src="http://static.tumblr.com/7ughxi5/AWWmpzs73/list.min.js"></script>
  648.  
  649. <script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
  650.  
  651. <style>
  652. div#qTip {
  653. padding: 4px;
  654. display:none;
  655. text-align: justify;
  656. max-width:300px;
  657. position: absolute;
  658. font-size:10px;
  659. line-height:9px;
  660. font-family:calibri;
  661. z-index: 1000;
  662. border: 1px solid #eee;
  663. background-color:white;
  664. color: black;
  665. letter-spacing: 1px;
  666. }
  667. </style>
  668.  
  669.  
  670. </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!