API tools faq
paste
Advertisement
harreyeh

fic recs page 1b

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