API tools faq
paste
darianella

"The Crow's Archive" tumblr fic rec page HTML code (BLUE)

darianella
Aug 9th, 2014
600
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 38.50 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.  
  4.  
  5.  <link href='http://fonts.googleapis.com/css?family=Muli:300,400, 400italic,300italic' rel='stylesheet' type='text/css'>
  6.  
  7. <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
  8.  
  9.  
  10.  
  11.  
  12.  
  13.  
  14.  
  15.  <!--
  16.  
  17.    Hello, friend! If you're reading this, that means you're using this fic rec page theme or considering it! First off, I just want to thank you! It's really cool that you think well enough of my stuff to put it on your blog. As always, I'm available if you have any questions or need help with anything.
  18.    
  19.    This theme features:
  20. - unlimited number of story boxes
  21. - click-to-sort favorite fics
  22. - click-to-view reader commentary
  23. - as many custom links as you want
  24. - wheee
  25.  
  26. I know I don't have to tell you guys this, but please don't remove the credit, use this theme as a base code, or claim this as your own! I worked really hard on it and I love you and stealing isn't cool.
  27.    
  28.    Alrighty, with that out of the way let's get down to business.  
  29.  
  30. -->
  31.  
  32.  
  33.  
  34.  
  35.  
  36.  
  37.  
  38. <head>
  39.  
  40.  
  41. <!-- tab title -->
  42. <title>
  43.  
  44.     fic recs.
  45.    
  46. </title>
  47.  
  48. <link rel="shortcut icon" href="{favicon}">
  49. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  50.  
  51.  
  52.  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  53. <script src="http://static.tumblr.com/5ojoydj/p9wmmzopi/jquery.style-my-tooltips.js"></script>
  54. <script src="http://static.tumblr.com/5ojoydj/En2mmzorm/style-my-tooltips.css"></script>
  55. <script>
  56.      (function($){
  57.          $(document).ready(function(){
  58.              $("[title]").style_my_tooltips({
  59.     tip_follows_cursor:true,
  60.     tip_delay_time:200,
  61.     tip_fade_speed:300,
  62.     attribute:"title"
  63. });
  64.          });
  65.      })(jQuery);
  66.  </script>
  67.  
  68.  
  69. <style type="text/css">
  70.  
  71.  
  72.  
  73.  
  74. /*SOME BASIC STUFF*/
  75.  
  76. ::-webkit-scrollbar {
  77.     width: 15px;
  78.     height: 5px;
  79. }
  80.  
  81. ::-webkit-scrollbar-thumb {
  82.     /*scrollbar tab color*/
  83.     background-color: #313131;
  84. }
  85.  
  86. ::-webkit-scrollbar-track {
  87.     /*scrollbar background color*/
  88.     background-color:#ffffff;
  89. }
  90.  
  91. ::selection {
  92. /*background and text of selected text (note: repeat below)*/
  93.     background:#313131;
  94.     color: #ffffff;
  95. }
  96.  
  97. ::-moz-selection {
  98.     background:#313131;
  99.     color: #ffffff;
  100. }
  101.  
  102. ::-webkit-selection {
  103.     background:#313131;
  104.     color: #ffffff;
  105. }
  106.  
  107.  
  108. iframe#tumblr_controls {
  109.     right:3px !important;
  110.     position: fixed !important;
  111.     opacity: 0.2;
  112.     -webkit-transition: all 0.8s ease-out;
  113.     -moz-transition: all 0.8s ease-out;
  114.     -o-transition: all 0.8s ease-out;
  115.     transition: all 0.8s ease-out;
  116. }
  117.  
  118. iframe#tumblr_controls:hover{
  119.     opacity: 1;
  120.     -webkit-transition: all 0.4s ease-out;
  121.     -moz-transition: all 0.4s ease-out;
  122.     -o-transition: all 0.4s ease-out;
  123.     transition: all 0.4s ease-out;
  124. }
  125.  
  126.  
  127.  
  128.  
  129.  
  130.  
  131.  
  132.  
  133.  
  134.  
  135. /*MORE BASIC BODY THINGS*/
  136.  
  137. body{
  138.     margin-top:0;
  139.     margin-left:0;
  140.     color:#313131;
  141.     font-family:'Muli', sans-serif;
  142.     font-size:11px;
  143.     line-height:100%;
  144. /*paste your background image url between the apostrophe marks*/
  145.     background-image:url('');
  146.     background-attachment: fixed;
  147.     background-repeat: repeat;
  148. /*if you don't want an image, delete the background-image code*/
  149.     background-color:#000000;
  150. }
  151.  
  152. a{
  153.     text-decoration:none;
  154.     outline:none;
  155.     -moz-outline-style:none;
  156. /*color of all in-text links*/
  157.     color:#bcbbbb;
  158.     -webkit-transition: all 0.3s linear;
  159.     -moz-transition: all 0.3s linear;
  160.     -o-transition: all 0.3s linear;
  161. }
  162.  
  163. a:hover{
  164. /*color of all hovered in-text links*/
  165.     color:#313131;
  166. }
  167.  
  168.  
  169. em{
  170. /*italics color*/
  171.     color:#c7c7c7;
  172. }
  173.  
  174. strong{
  175. /*bolded color*/
  176.     color:#c7c7c7;
  177.     font-weight:strong;
  178. }
  179.  
  180. img{
  181.     border:none;
  182. }
  183.  
  184. blockquote{
  185.     padding-left:7px;
  186.     margin-left:10px;
  187.     border-left:solid 5px #313131;
  188. }
  189.  
  190. blockquote blockquote{
  191.     margin-left:5px;
  192. }
  193.  
  194. pre{
  195.     font-size:10px;
  196.     word-wrap:break-word;
  197.     background-color:#e9e9e9;
  198.     padding:5px;
  199.     font-family:muli;
  200.     text-align:center;
  201. }
  202.  
  203.  
  204.  
  205.  
  206.  
  207.  
  208.  
  209.  
  210.  
  211.  
  212.  
  213. /*LEFT STUFF*/
  214.  
  215. #sidebar{
  216.     position:fixed;
  217.     top:0;
  218.     left:0;
  219.     height:100%;
  220.     width:185px;
  221. /*right sidebar color if you don't want an image*/
  222.     background-color:#000000;
  223. /*left sidebar color (note: just change the color, not the width)*/
  224.     border-left:solid 80px #488b84;
  225. /*paste your background image url between the apostrophe marks*/
  226.     background-image:url('https://lh3.googleusercontent.com/-D3sCA-88uTc/Utcn6GIW3PI/AAAAAAAAF5k/t-B8E2njmCk/w937-h650-no/Pixiv+ID+26029568.jpg');
  227.     background-attachment: fixed;
  228.     background-size: cover;
  229. }
  230.  
  231. .main{
  232.     position:fixed;
  233.     margin-top:100px;
  234.     margin-left:-50px;
  235.     cursor:default;
  236.     font-family:abel;
  237.     font-size:120px;
  238. /*"fic" ic color*/
  239.     color:#488b84;
  240. }
  241.  
  242. .main:first-letter{
  243.     letter-spacing:20px;
  244. /*"fic" f color*/
  245.     color:#e9e9e9;
  246. }
  247.  
  248. .main2{
  249.     position:fixed;
  250.     margin-top:200px;
  251.     margin-left:-45px;
  252.     cursor:default;
  253.     font-family:abel;
  254.     font-size:120px;
  255. /*"recs" ecs color*/
  256.     color:#e9e9e9;
  257. }
  258.  
  259. .main2:first-letter{
  260.     letter-spacing:15px;
  261. /*"recs" r color*/
  262.     color:#000000;
  263. }
  264.  
  265.  
  266.  
  267.  
  268.  
  269.  
  270.  
  271.  
  272. /*NAVIGATION*/
  273.  
  274. #nav{
  275.     position:fixed;
  276.     margin-top:300px;
  277.     width:145px;
  278.     margin-left:20px;
  279. }
  280.  
  281. #favbutton{
  282.     display:block;
  283.     float:left;
  284.     height:10px;
  285.     width:125px;
  286.     padding:15px 10px 15px 10px;
  287.     font-size:14px;
  288.     text-transform:lowercase;
  289.     cursor:pointer;
  290.     -webkit-transition: all 0.3s linear;
  291.     -moz-transition: all 0.3s linear;
  292.     -o-transition: all 0.3s linear;
  293. /*"favorite fics" button background and text color*/
  294.     background-color:#e9e9e9;
  295.     color:#313131;
  296. }
  297.  
  298. #favbutton:first-letter{
  299.     font-weight:bold;
  300. /*"favorite fics" f color*/
  301.     color:#488b84;
  302. }
  303.  
  304. #favbutton:hover{
  305. /*"favorite fics" hover background and text color*/
  306.     background-color:#313131;
  307.     color:#e9e9e9;
  308. }
  309.  
  310. .navigation{
  311.     display:block;
  312.     float:left;
  313.     display:block;
  314.     float:left;
  315.     height:10px;
  316.     width:125px;
  317.     padding:15px 10px 15px 10px;
  318.     font-size:14px;
  319.     text-transform:lowercase;
  320.     cursor:pointer;
  321.     margin-top:20px;
  322.     -webkit-transition: all 0.3s linear;
  323.     -moz-transition: all 0.3s linear;
  324.     -o-transition: all 0.3s linear;
  325. /*other navigation buttons background and text color*/
  326.     background-color:#e9e9e9;
  327.     color:#313131;
  328. }
  329.  
  330.  
  331. .navigation:first-letter{
  332.     font-weight:bold;
  333. /*other navigation first letter color*/
  334.     color:#488b84;
  335. }
  336.  
  337. .navigation:hover{
  338. /*other navigation hover background and text color*/
  339.     background-color:#313131;
  340.     color:#e9e9e9;
  341. }
  342.  
  343.  
  344.  
  345.  
  346.  
  347.  
  348.  
  349.  
  350.  
  351.  
  352.  
  353.  
  354. /*STORY BOXES*/
  355.  
  356.  
  357.  #outside{
  358.      position:absolute;
  359.      width:990px;
  360.      margin-top:10px;
  361.      margin-left:400px;
  362.      padding-bottom:50px;
  363.  }
  364.  
  365.  .storybox{
  366.      display:block;
  367.      float:left;
  368.      height:250px;
  369.      width:250px;
  370.      margin:40px;
  371.      font-family:muli;
  372.      text-transform:lowercase;
  373.      overflow:hidden;
  374. /*story box background color*/
  375.      background-color:#232323;
  376.  }
  377.  
  378.  .storytitle{
  379.      position:absolute;
  380.      height:24px;
  381.      padding:11px 10px 0px 10px;
  382.      width:190px;
  383.      margin-top:20px;
  384.      margin-left:20px;
  385.      text-align:left;
  386.      font-family:abel;
  387.      font-size:18px;
  388.     -webkit-transition: all 0.3s linear;
  389.     -moz-transition: all 0.3s linear;
  390.     -o-transition: all 0.3s linear;
  391. /*story title background and text color*/
  392.      background-color:#e9e9e9;
  393.      color:#000000;
  394.  }
  395.  
  396.  .storytitle:hover{
  397.      opacity:0;
  398.  }
  399.  
  400.  .storytitle:first-letter{
  401.      font-weight:bold;
  402. /*story title first letter color*/
  403.      color:#488b84;
  404.  }
  405.  
  406.  .author{
  407.      position:absolute;
  408.      height:24px;
  409.      padding:11px 10px 0px 10px;
  410.      width:190px;
  411.      margin-top:20px;
  412.      margin-left:20px;
  413.      text-align:left;
  414.      font-family:abel;
  415.      font-size:18px;
  416. /*story author background and text color*/
  417.      background-color:#313131;
  418.      color:#e9e9e9;
  419.  }
  420.  
  421.  .author:first-letter{
  422.      font-weight:bold;
  423. /*story author first letter color*/
  424.      color:#488b84;
  425.  }
  426.  
  427.  
  428.  .pairing{
  429.      position:absolute;
  430.      height:15px;
  431.      width:190px;
  432.      padding:5px 10px 0px 10px;
  433.      margin-top:55px;
  434.      margin-left:20px;
  435.      text-align:right;
  436.      font-size:11px;
  437. /*story pairing background and text color*/
  438.      background-color:#232323;
  439.      color:#e9e9e9;
  440.  }
  441.  
  442.  .wc{
  443.      position:absolute;
  444.      height:15px;
  445.      width:60px;
  446.      padding:4px 5px 0px 5px;
  447.      margin-left:20px;
  448.      margin-top:75px;
  449.      font-size:10px;
  450.      text-align:center;
  451. /*story word count background and text color*/
  452.      background-color:#e9e9e9;
  453.      color:#000000;
  454.  }
  455.  
  456.   .rating{
  457.      position:absolute;
  458.      height:15px;
  459.      width:60px;
  460.      padding:4px 5px 0px 5px;
  461.      margin-left:90px;
  462.      margin-top:75px;
  463.      font-size:10px;
  464.      text-align:center;
  465. /*story rading background and text color*/
  466.      background-color:#313131;
  467.      color:#e9e9e9;
  468.  }
  469.  
  470.    .status{
  471.      position:absolute;
  472.      height:15px;
  473.      width:60px;
  474.      padding:4px 5px 0px 5px;
  475.      margin-left:160px;
  476.      margin-top:75px;
  477.      font-size:10px;
  478.      text-align:center;
  479. /*story complete/in progress status background and text color*/
  480.      background-color:#e9e9e9;
  481.      color:#313131;
  482.  }
  483.  
  484.  .desc{
  485.      position:absolute;
  486.      height:100px;
  487.      width:190px;
  488.      padding:10px;
  489.      margin-top:110px;
  490.      margin-left:20px;
  491.      font-size:11px;
  492.      overflow:auto;
  493.      text-align:left;
  494.      text-transform:none;
  495. /*story description background and text color*/
  496.      background-color:#e9e9e9;
  497.      color:#313131;
  498.  }
  499.  
  500. .desc::-webkit-scrollbar {
  501. width: 5px;
  502. height: 5px;
  503. }
  504.  
  505. .desc::-webkit-scrollbar-thumb {
  506. /*description scrollbar tab color*/
  507.     background-color: #313131;
  508. }
  509.  
  510. .desc::-webkit-scrollbar-track {
  511. /*description scrollbar background color*/
  512.     background-color:transparent;
  513. }
  514.  
  515.  
  516.  
  517.  
  518.  
  519.  
  520.  
  521.  
  522.  
  523. /*READER COMMENTARY*/
  524.  
  525. .commentbar{
  526.     position:absolute;
  527.     height:24px;
  528.     width:210px;
  529.     padding:10px 20px 0px 20px;
  530.     font-family:abel;
  531.     font-size:18px;
  532.     text-align:left;
  533.     margin-top:250px;
  534.     cursor:pointer;
  535. /*"click for commentary" bar background and text color*/
  536.     background-color:#313131;
  537.     color:#e9e9e9;
  538. }
  539.  
  540. .commentbar:first-letter{
  541.     font-weight:bold;
  542. /*"click for commentary" bar c color*/
  543.     color:#488b84;
  544. }
  545.  
  546. .commentback{
  547.     position:absolute;
  548.     margin-top:-216px;
  549.     margin-left:-20px;
  550.     height:155px;
  551.     width:210px;
  552.     padding:20px;
  553.     overflow:hidden;
  554.     text-align:left;
  555.     display:none;
  556. /*reader comment border*/    
  557.     background-color:#488b84;
  558. }
  559.  
  560. .comment{
  561.      position:absolute;
  562.      height:135px;
  563.      width:190px;
  564.      padding:10px;
  565.      font-size:11px;
  566.      font-family:muli;
  567.      overflow:auto;
  568.      text-align:left;
  569.      text-transform:none;
  570. /*reader comment background and text color*/
  571.      background-color:#e9e9e9;
  572.      color:#313131;
  573.  }
  574.  
  575. .comment::-webkit-scrollbar {
  576.     width: 5px;
  577.     height: 5px;
  578. }
  579.  
  580.  
  581. .comment::-webkit-scrollbar-thumb {
  582. /*description scrollbar tab color*/
  583.     background-color: #313131;
  584. }
  585.  
  586. .comment::-webkit-scrollbar-track {
  587. /*description scrollbar background color*/
  588.     background-color:transparent;
  589. }
  590.  
  591.  
  592.  
  593.  
  594.  
  595.  
  596.  /*OTHER THINGS YOU DON'T HAVE TO WORRY TOO MUCH ABOUT*/
  597.  
  598. #credit{
  599.     position:fixed;
  600.     bottom:10px;
  601.     right:10px;
  602.     z-index:1;
  603.     -webkit-transition: all 0.3s linear;
  604.     -moz-transition: all 0.3s linear;
  605.     -o-transition: all 0.3s linear;
  606.     -ms-transition: all 0.3s linear;
  607.         -webkit-filter: grayscale(100%);
  608.       -moz-filter: grayscale(100%);
  609.       -ms-filter: grayscale(100%);
  610.       -o-filter: grayscale(100%);
  611. }
  612.  
  613. #credit:hover{
  614.      -webkit-filter: grayscale(0%);
  615.   -moz-filter: grayscale(0%);
  616.   -ms-filter: grayscale(0%);
  617.   -o-filter: grayscale(0%);
  618. }
  619.    
  620.  #s-m-t-tooltip{
  621.   max-width:300px;
  622.   z-index:999999;
  623.   margin:24px 14px 7px 12px;
  624.   padding:5px;
  625.   background:#313131;
  626.   border-radius:0px;
  627.   font-family:muli;
  628.   font-size:11px;
  629.   color:#e9e9e9;
  630. }
  631.    
  632.  
  633.    
  634.  
  635.    
  636. </style>
  637.  
  638. <script type="text/javascript">
  639.  
  640.     $(document).ready(function(){
  641.         $('.commentbar').click(function(){
  642.             $(this).children(".commentback").slideToggle("500");
  643.         });
  644.        
  645.         $('#favbutton').click(function(){
  646.             $("#outside").children(":not(.favorite)").fadeToggle("500");
  647.             $(this).text(function(index, text){
  648.          return text === "all stories" ? "favorite fics" : "all stories";
  649.             });
  650.         });
  651.        
  652.     });
  653.    
  654. </script>
  655.  
  656.  
  657.    
  658. </head><body>
  659.  
  660.  
  661.  
  662.  <div id="sidebar">
  663.      <div class="main">fic</div>
  664.      <div class="main2">recs</div>
  665.      <div id="nav">
  666.         <div id="favbutton">favorite fics</div>
  667.        
  668.      <!-- custom link 1 -->
  669.         <a href="/">
  670.             <div class="navigation">
  671.         <!-- first custom link title -->  
  672.                 custom link 1
  673.                
  674.             </div>
  675.         </a>
  676.     <!-- end custom link 1 -->
  677.    
  678.     <!-- custom link 2 -->
  679.         <a href="/">
  680.             <div class="navigation">
  681.         <!-- second custom link title -->
  682.                 custom link 2
  683.                
  684.             </div>
  685.         </a>
  686.     <!-- end custom link 2 -->  
  687.  
  688. <!-- note: if you want to add more custom links, just copy the code and paste it below this comment -->
  689.        
  690.         <a href="/ask">
  691.             <div class="navigation">
  692.                 message
  693.             </div>
  694.         </a>
  695.        
  696.         <a href="/">
  697.             <div class="navigation">
  698.                 back to blog
  699.             </div>
  700.         </a>
  701.        
  702.      </div>
  703.  </div>
  704.  
  705.    
  706. <div id="outside">
  707.  
  708.  
  709.  
  710.  
  711. <!-- story box 1 -->
  712.    
  713.     <!-- make sure this is at the beginning of every fic you want to stay visible when you click the "favorite fics" button. if you don't want the story to appear, don't add it. -->
  714.         <div class="favorite">
  715.        
  716.        
  717.     <div class="storybox">
  718.         <!-- add link to story in place of /  -->
  719.         <a href="http://archiveofourown.org/works/392977/chapters/645451">
  720.             <div class="author">
  721.             <!-- story author -->
  722.                 natcat5
  723.                
  724.             </div>
  725.             <div class="storytitle">
  726.             <!-- story title -->
  727.                 the entire city was silent
  728.                
  729.             </div>
  730.         </a>
  731.         <div class="pairing">
  732.         <!-- story pairing -->
  733.             john x dave
  734.            
  735.         </div>
  736.         <div class="wc">wc:
  737.         <!-- story word count -->
  738.             108,463
  739.            
  740.         </div>
  741.         <div class="rating">rated:
  742.         <!-- story rating -->
  743.             m
  744.            
  745.         </div>
  746.         <div class="status">
  747.         <!-- in progress/complete story status -->
  748.             complete
  749.            
  750.         </div>
  751.         <div class="desc">
  752.         <!-- story description -->
  753.            
  754. Your name is DAVE STRIDER. <br><br>
  755.  
  756. You are a MONSTER. <br><br>
  757.  
  758. You are in LOVE with your BEST FRIEND who recently DIED and turned into a different kind of MONSTER. <br><br>
  759.  
  760. Your other BEST FRIEND who you think wants to be your GIRLFRIEND would surely KILL YOU if she found out what you were. <br><br>
  761.  
  762. The city you live in is SYNONYMOUS with HELL. <br><br>
  763.  
  764. What will you do?
  765.            
  766.         </div>
  767.         <div class="commentbar">
  768.             click for reader commentary
  769.             <div class="commentback">
  770.                 <div class="comment">
  771.         <!-- add your thoughts about the story here -->
  772.                     This is a dystopian fic done right, let me tell you.<br><br> It’s set on a post-apocalyptic earth in the city of Derse—the last refuge for everyone left alive. The population, however, is split between the humans and the other supernatural creatures that half of humanity has begun to evolve into in the decades since the end of the world. The humans are constantly trying to rid the world of the “Darkness”, and the monsters are just trying to survive. <br><br> You’ll be on the edge of your seat every step of the way for this fic. It’s absolutely fantastic, and you’re probably going to cry.
  773.                    
  774.                    
  775.                 </div>
  776.             </div>
  777.         </div>
  778.     </div>
  779.     <!-- make sure this last </div> is around every story with a <div class="favorite"> at the beginning. if it doesn't have that, don't add it. -->
  780.         </div>
  781.  
  782.     <!-- end story box 1 -->
  783.    
  784.  
  785.  
  786.  
  787.  
  788.  
  789.  
  790.  
  791.     <!-- story box 2 -->
  792.        
  793.        
  794.     <div class="storybox">
  795.         <!-- add link to story in place of /  -->
  796.         <a href="http://archiveofourown.org/series/38018">
  797.             <div class="author">
  798.             <!-- story author -->
  799.                 elanor_pam
  800.                
  801.             </div>
  802.             <div class="storytitle">
  803.             <!-- story title -->
  804.                 cultstuck
  805.                
  806.             </div>
  807.         </a>
  808.         <div class="pairing">
  809.         <!-- story pairing -->
  810.             no major pairings
  811.            
  812.         </div>
  813.         <div class="wc">wc:
  814.         <!-- story word count -->
  815.             92,550
  816.            
  817.         </div>
  818.         <div class="rating">rated:
  819.         <!-- story rating -->
  820.             t
  821.            
  822.         </div>
  823.         <div class="status">
  824.         <!-- in progress/complete story status -->
  825.             in progress
  826.            
  827.         </div>
  828.         <div class="desc">
  829.         <!-- story description -->
  830.             Karkat Vantas is a 6 sweeps old troll with a secret so big it could shake the very foundations of the Alternian Empire. <br><br>But now the purrbeast is out of the bag, and the heretics who follow the teachings of his Ancestor rush to send their Messiah to the safety of a planet so distant, it knows nothing of Alternia.
  831.            
  832.         </div>
  833.         <div class="commentbar">
  834.             click for reader commentary
  835.             <div class="commentback">
  836.                 <div class="comment">
  837.         <!-- add your thoughts about the story here -->
  838.                     This is absolutely fantastic. It’s a “what if” AU in which Karkat is raised underground and worshiped as the Signless’s descendant, but—as is usually the case—things suddenly go awry when outsiders learn of his identity. It’s wonderfully written, and the characterization is awesome. There’s art in the story, too—and it’s absolutely beautiful.
  839.                    
  840.                    
  841.                 </div>
  842.             </div>
  843.         </div>
  844.     </div>
  845.    
  846.  
  847.     <!-- end story box 2 -->
  848.  
  849.  
  850.  
  851. <!-- to add more stories, just copy and paste the code below this comment. remember to be careful about that extra "favorite" code! -->
  852.  
  853.  
  854.  
  855.  
  856.     <!-- story box 3 -->
  857.        
  858. <div class="favorite">  
  859.     <div class="storybox">
  860.         <!-- add link to story in place of /  -->
  861.         <a href="http://archiveofourown.org/works/1027549">
  862.             <div class="author">
  863.             <!-- story author -->
  864.                 adessere
  865.                
  866.             </div>
  867.             <div class="storytitle">
  868.             <!-- story title -->
  869.                 seattle ghost stories
  870.                
  871.             </div>
  872.         </a>
  873.         <div class="pairing">
  874.         <!-- story pairing -->
  875.             john x dave
  876.            
  877.         </div>
  878.         <div class="wc">wc:
  879.         <!-- story word count -->
  880.             14,651
  881.            
  882.         </div>
  883.         <div class="rating">rated:
  884.         <!-- story rating -->
  885.             t
  886.            
  887.         </div>
  888.         <div class="status">
  889.         <!-- in progress/complete story status -->
  890.             complete
  891.            
  892.         </div>
  893.         <div class="desc">
  894.         <!-- story description -->
  895.             An AU in which all the beta kids live in the same town and the most important events happen on Halloween.<br><br>
  896.  
  897. Also an AU in which John and Dave ruin way too many sheets and Jade and Rose are more influential than they thought they could be.
  898.            
  899.         </div>
  900.         <div class="commentbar">
  901.             click for reader commentary
  902.             <div class="commentback">
  903.                 <div class="comment">
  904.         <!-- add your thoughts about the story here -->
  905.                     This cute and fluffy slice-of-life fic is wonderfully written, funny, and just all around really great. There really isn't much I can say without giving too much away, but it's definitely worth the read.
  906.                    
  907.                    
  908.                 </div>
  909.             </div>
  910.         </div>
  911.     </div>
  912. </div>        
  913.  
  914.     <!-- end story box 3 -->
  915.  
  916.  
  917.  
  918.  
  919.     <!-- story box 4 -->
  920.        
  921.        
  922.     <div class="storybox">
  923.         <!-- add link to story in place of /  -->
  924.         <a href="http://archiveofourown.org/works/976338">
  925.             <div class="author">
  926.             <!-- story author -->
  927.                 jacklalonde
  928.                
  929.             </div>
  930.             <div class="storytitle">
  931.             <!-- story title -->
  932.                 glass bodies
  933.                
  934.             </div>
  935.         </a>
  936.         <div class="pairing">
  937.         <!-- story pairing -->
  938.             john x dave
  939.            
  940.         </div>
  941.         <div class="wc">wc:
  942.         <!-- story word count -->
  943.             29,055
  944.            
  945.         </div>
  946.         <div class="rating">rated:
  947.         <!-- story rating -->
  948.             t
  949.            
  950.         </div>
  951.         <div class="status">
  952.         <!-- in progress/complete story status -->
  953.             complete
  954.            
  955.         </div>
  956.         <div class="desc">
  957.         <!-- story description -->
  958.             He feels so dumb—he should be running. But he just doesn’t care. This is his life. Him standing out on this worn bridge that he’s so afraid of. He’s afraid of everything in his life, and looking out over the river and the trees he finally feels something that isn’t boredom and numbness and waiting for himself to become something more than he is.
  959.            
  960.         </div>
  961.         <div class="commentbar">
  962.             click for reader commentary
  963.             <div class="commentback">
  964.                 <div class="comment">
  965.         <!-- add your thoughts about the story here -->
  966.                     A zombiestuck fic done right, wow. I can't tell you how much I love this. There's just enough explanation of the situation to give the reader context without taking away from the story's main focus, but I was still left wanting more when I read the last line. You won't be disappointed, I promise.
  967.                    
  968.                    
  969.                 </div>
  970.             </div>
  971.         </div>
  972.     </div>
  973.    
  974.  
  975.     <!-- end story box 4 -->
  976.  
  977.  
  978.  
  979.  
  980.     <!-- story box 5 -->
  981.        
  982. <div class="favorite">    
  983.     <div class="storybox">
  984.         <!-- add link to story in place of /  -->
  985.         <a href="http://archiveofourown.org/works/831267/chapters/1580522">
  986.             <div class="author">
  987.             <!-- story author -->
  988.                 inky
  989.                
  990.             </div>
  991.             <div class="storytitle">
  992.             <!-- story title -->
  993.                 no rain
  994.                
  995.             </div>
  996.         </a>
  997.         <div class="pairing">
  998.         <!-- story pairing -->
  999.             dirk x jane
  1000.            
  1001.         </div>
  1002.         <div class="wc">wc:
  1003.         <!-- story word count -->
  1004.             112,871
  1005.            
  1006.         </div>
  1007.         <div class="rating">rated:
  1008.         <!-- story rating -->
  1009.             e
  1010.            
  1011.         </div>
  1012.         <div class="status">
  1013.         <!-- in progress/complete story status -->
  1014.             complete
  1015.            
  1016.         </div>
  1017.         <div class="desc">
  1018.         <!-- story description -->
  1019.             All you can say is that your life is pretty plain.
  1020.            
  1021.         </div>
  1022.         <div class="commentbar">
  1023.             click for reader commentary
  1024.             <div class="commentback">
  1025.                 <div class="comment">
  1026.         <!-- add your thoughts about the story here -->
  1027.                     I absolutely adore this fic. It’s a slice-of-life AU that’s real and relatable in a way that most stories aren’t. <br><br>The summary, of course, is relatively vague, so I’ll keep my own synopsis brief: essentially, the fic outlines the struggles of two people unprepared to face the consequences of a single mistake. It covers all the bases—every single one—and the characterization is absolutely lovely. It’s a feel-good fic that will leave you smiling.
  1028.                    
  1029.                    
  1030.                 </div>
  1031.             </div>
  1032.         </div>
  1033.     </div>
  1034.  </div>      
  1035.  
  1036.     <!-- end story box 5 -->
  1037.  
  1038.  
  1039.  
  1040.  
  1041.     <!-- story box 6 -->
  1042.        
  1043.        
  1044.     <div class="storybox">
  1045.         <!-- add link to story in place of /  -->
  1046.         <a href="http://archiveofourown.org/works/375422/chapters/612416">
  1047.             <div class="author">
  1048.             <!-- story author -->
  1049.                 eggjam
  1050.                
  1051.             </div>
  1052.             <div class="storytitle">
  1053.             <!-- story title -->
  1054.                 sugar free
  1055.                
  1056.             </div>
  1057.         </a>
  1058.         <div class="pairing">
  1059.         <!-- story pairing -->
  1060.             john x dave
  1061.            
  1062.         </div>
  1063.         <div class="wc">wc:
  1064.         <!-- story word count -->
  1065.             44,434
  1066.            
  1067.         </div>
  1068.         <div class="rating">rated:
  1069.         <!-- story rating -->
  1070.             e
  1071.            
  1072.         </div>
  1073.         <div class="status">
  1074.         <!-- in progress/complete story status -->
  1075.             in progress
  1076.            
  1077.         </div>
  1078.         <div class="desc">
  1079.         <!-- story description -->
  1080.             "So, there's this guy. He's not really hot, like how you'd imagine, but there's something magnetic about him anyway." - Dave Strider on how to justify habitual stalking.
  1081.            
  1082.         </div>
  1083.         <div class="commentbar">
  1084.             click for reader commentary
  1085.             <div class="commentback">
  1086.                 <div class="comment">
  1087.         <!-- add your thoughts about the story here -->
  1088.                     Even though this story is technically "in progress", the latest chapter (which I say loosely, because it hasn't been updated since 2012) ends on something of a final note. I don't have much to say other than that clarification, because it's just such a fantastic fic.
  1089.                    
  1090.                    
  1091.                 </div>
  1092.             </div>
  1093.         </div>
  1094.     </div>
  1095.    
  1096.  
  1097.     <!-- end story box 6 -->
  1098.    
  1099.    
  1100.    
  1101.         <!-- story box 6 -->
  1102.        
  1103.        
  1104.     <div class="storybox">
  1105.         <!-- add link to story in place of /  -->
  1106.         <a href="/">
  1107.             <div class="author">
  1108.             <!-- story author -->
  1109.                 author name
  1110.                
  1111.             </div>
  1112.             <div class="storytitle">
  1113.             <!-- story title -->
  1114.                 story title
  1115.                
  1116.             </div>
  1117.         </a>
  1118.         <div class="pairing">
  1119.         <!-- story pairing -->
  1120.             character a x character b
  1121.            
  1122.         </div>
  1123.         <div class="wc">wc:
  1124.         <!-- story word count -->
  1125.             xxx,xxx
  1126.            
  1127.         </div>
  1128.         <div class="rating">rated:
  1129.         <!-- story rating -->
  1130.             t
  1131.            
  1132.         </div>
  1133.         <div class="status">
  1134.         <!-- in progress/complete story status -->
  1135.             in progress
  1136.            
  1137.         </div>
  1138.         <div class="desc">
  1139.         <!-- story description -->
  1140.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo quis nostrud exercitation ullamco laboris nisi ut aliquip bluh
  1141.            
  1142.         </div>
  1143.         <div class="commentbar">
  1144.             click for reader commentary
  1145.             <div class="commentback">
  1146.                 <div class="comment">
  1147.         <!-- add your thoughts about the story here -->
  1148.                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
  1149.                    
  1150.                    
  1151.                 </div>
  1152.             </div>
  1153.         </div>
  1154.     </div>
  1155.    
  1156.  
  1157.     <!-- end story box 6 -->
  1158.    
  1159.    
  1160.    
  1161.    
  1162.    
  1163.         <!-- story box 6 -->
  1164.        
  1165.        
  1166.     <div class="storybox">
  1167.         <!-- add link to story in place of /  -->
  1168.         <a href="/">
  1169.             <div class="author">
  1170.             <!-- story author -->
  1171.                 author name
  1172.                
  1173.             </div>
  1174.             <div class="storytitle">
  1175.             <!-- story title -->
  1176.                 story title
  1177.                
  1178.             </div>
  1179.         </a>
  1180.         <div class="pairing">
  1181.         <!-- story pairing -->
  1182.             character a x character b
  1183.            
  1184.         </div>
  1185.         <div class="wc">wc:
  1186.         <!-- story word count -->
  1187.             xxx,xxx
  1188.            
  1189.         </div>
  1190.         <div class="rating">rated:
  1191.         <!-- story rating -->
  1192.             t
  1193.            
  1194.         </div>
  1195.         <div class="status">
  1196.         <!-- in progress/complete story status -->
  1197.             in progress
  1198.            
  1199.         </div>
  1200.         <div class="desc">
  1201.         <!-- story description -->
  1202.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo quis nostrud exercitation ullamco laboris nisi ut aliquip bluh
  1203.            
  1204.         </div>
  1205.         <div class="commentbar">
  1206.             click for reader commentary
  1207.             <div class="commentback">
  1208.                 <div class="comment">
  1209.         <!-- add your thoughts about the story here -->
  1210.                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
  1211.                    
  1212.                    
  1213.                 </div>
  1214.             </div>
  1215.         </div>
  1216.     </div>
  1217.    
  1218.  
  1219.     <!-- end story box 6 -->
  1220.    
  1221.    
  1222.    
  1223.    
  1224.         <!-- story box 6 -->
  1225.        
  1226. <div class="favorite">      
  1227.     <div class="storybox">
  1228.         <!-- add link to story in place of /  -->
  1229.         <a href="/">
  1230.             <div class="author">
  1231.             <!-- story author -->
  1232.                 author name
  1233.                
  1234.             </div>
  1235.             <div class="storytitle">
  1236.             <!-- story title -->
  1237.                 story title
  1238.                
  1239.             </div>
  1240.         </a>
  1241.         <div class="pairing">
  1242.         <!-- story pairing -->
  1243.             character a x character b
  1244.            
  1245.         </div>
  1246.         <div class="wc">wc:
  1247.         <!-- story word count -->
  1248.             xxx,xxx
  1249.            
  1250.         </div>
  1251.         <div class="rating">rated:
  1252.         <!-- story rating -->
  1253.             t
  1254.            
  1255.         </div>
  1256.         <div class="status">
  1257.         <!-- in progress/complete story status -->
  1258.             in progress
  1259.            
  1260.         </div>
  1261.         <div class="desc">
  1262.         <!-- story description -->
  1263.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo quis nostrud exercitation ullamco laboris nisi ut aliquip bluh
  1264.            
  1265.         </div>
  1266.         <div class="commentbar">
  1267.             click for reader commentary
  1268.             <div class="commentback">
  1269.                 <div class="comment">
  1270.         <!-- add your thoughts about the story here -->
  1271.                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
  1272.                    
  1273.                    
  1274.                 </div>
  1275.             </div>
  1276.         </div>
  1277.     </div>
  1278.    
  1279. </div>  
  1280.     <!-- end story box 6 -->
  1281.    
  1282.    
  1283.    
  1284.         <!-- story box 6 -->
  1285.        
  1286. <div class="favorite">
  1287.     <div class="storybox">
  1288.         <!-- add link to story in place of /  -->
  1289.         <a href="/">
  1290.             <div class="author">
  1291.             <!-- story author -->
  1292.                 author name
  1293.                
  1294.             </div>
  1295.             <div class="storytitle">
  1296.             <!-- story title -->
  1297.                 story title
  1298.                
  1299.             </div>
  1300.         </a>
  1301.         <div class="pairing">
  1302.         <!-- story pairing -->
  1303.             character a x character b
  1304.            
  1305.         </div>
  1306.         <div class="wc">wc:
  1307.         <!-- story word count -->
  1308.             xxx,xxx
  1309.            
  1310.         </div>
  1311.         <div class="rating">rated:
  1312.         <!-- story rating -->
  1313.             t
  1314.            
  1315.         </div>
  1316.         <div class="status">
  1317.         <!-- in progress/complete story status -->
  1318.             in progress
  1319.            
  1320.         </div>
  1321.         <div class="desc">
  1322.         <!-- story description -->
  1323.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo quis nostrud exercitation ullamco laboris nisi ut aliquip bluh
  1324.            
  1325.         </div>
  1326.         <div class="commentbar">
  1327.             click for reader commentary
  1328.             <div class="commentback">
  1329.                 <div class="comment">
  1330.         <!-- add your thoughts about the story here -->
  1331.                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
  1332.                    
  1333.                    
  1334.                 </div>
  1335.             </div>
  1336.         </div>
  1337.     </div>
  1338.    </div>        
  1339.  
  1340.     <!-- end story box 6 -->
  1341.    
  1342.    
  1343.    
  1344.         <!-- story box 6 -->
  1345.        
  1346.     <div class="storybox">
  1347.         <!-- add link to story in place of /  -->
  1348.         <a href="/">
  1349.             <div class="author">
  1350.             <!-- story author -->
  1351.                 author name
  1352.                
  1353.             </div>
  1354.             <div class="storytitle">
  1355.             <!-- story title -->
  1356.                 story title
  1357.                
  1358.             </div>
  1359.         </a>
  1360.         <div class="pairing">
  1361.         <!-- story pairing -->
  1362.             character a x character b
  1363.            
  1364.         </div>
  1365.         <div class="wc">wc:
  1366.         <!-- story word count -->
  1367.             xxx,xxx
  1368.            
  1369.         </div>
  1370.         <div class="rating">rated:
  1371.         <!-- story rating -->
  1372.             t
  1373.            
  1374.         </div>
  1375.         <div class="status">
  1376.         <!-- in progress/complete story status -->
  1377.             in progress
  1378.            
  1379.         </div>
  1380.         <div class="desc">
  1381.         <!-- story description -->
  1382.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo quis nostrud exercitation ullamco laboris nisi ut aliquip bluh
  1383.            
  1384.         </div>
  1385.         <div class="commentbar">
  1386.             click for reader commentary
  1387.             <div class="commentback">
  1388.                 <div class="comment">
  1389.         <!-- add your thoughts about the story here -->
  1390.                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
  1391.                    
  1392.                    
  1393.                 </div>
  1394.             </div>
  1395.         </div>
  1396.     </div>
  1397.  
  1398.     <!-- end story box 6 -->
  1399.    
  1400.    
  1401.    
  1402.         <!-- story box 6 -->
  1403.        
  1404.        
  1405.     <div class="storybox">
  1406.         <!-- add link to story in place of /  -->
  1407.         <a href="/">
  1408.             <div class="author">
  1409.             <!-- story author -->
  1410.                 author name
  1411.                
  1412.             </div>
  1413.             <div class="storytitle">
  1414.             <!-- story title -->
  1415.                 story title
  1416.                
  1417.             </div>
  1418.         </a>
  1419.         <div class="pairing">
  1420.         <!-- story pairing -->
  1421.             character a x character b
  1422.            
  1423.         </div>
  1424.         <div class="wc">wc:
  1425.         <!-- story word count -->
  1426.             xxx,xxx
  1427.            
  1428.         </div>
  1429.         <div class="rating">rated:
  1430.         <!-- story rating -->
  1431.             t
  1432.            
  1433.         </div>
  1434.         <div class="status">
  1435.         <!-- in progress/complete story status -->
  1436.             in progress
  1437.            
  1438.         </div>
  1439.         <div class="desc">
  1440.         <!-- story description -->
  1441.             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo quis nostrud exercitation ullamco laboris nisi ut aliquip bluh
  1442.            
  1443.         </div>
  1444.         <div class="commentbar">
  1445.             click for reader commentary
  1446.             <div class="commentback">
  1447.                 <div class="comment">
  1448.         <!-- add your thoughts about the story here -->
  1449.                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
  1450.                    
  1451.                    
  1452.                 </div>
  1453.             </div>
  1454.         </div>
  1455.     </div>
  1456.    
  1457.  
  1458.     <!-- end story box 6 -->
  1459.  
  1460.  
  1461.  
  1462.  
  1463.  
  1464.  
  1465.  
  1466.  
  1467.  
  1468.  
  1469.  
  1470. </div>
  1471.  
  1472.  
  1473.  <!-- CREDIT -->
  1474.  
  1475.  <a href="http://redfox-themes.tumblr.com"><img src="https://lh5.googleusercontent.com/-jDb8l0m6g2s/ULvHPyFukjI/AAAAAAAACoA/FRBmvQsxRkc/s22/fox.gif" id="credit" title="redfox themes"></a>
  1476.  
  1477. </body></html>
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!