API tools faq
paste
Advertisement
tea-n-candy

page#1: ffs

tea-n-candy
Apr 14th, 2014
424
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.77 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.    
  5.         <!--
  6.        
  7.        THEME/PAGE BY   http://tea-n-candy.tumblr.com/
  8.                        http://tnk-s.tumblr.com/
  9.                        
  10.        DO NOT DELETE OR MOVE CREDIT
  11.        DO NOT REDISTRIBUTE
  12.        DO NOT USE AS BASE
  13.        Thank you!
  14.        
  15.        -->
  16.    
  17.         <title>fanfictions;</title>
  18.         <link rel="shortcut icon" href="{Favicon}">
  19.         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  20.         <script type="text/javascript" src="http://static.tumblr.com/8wtv1hn/Hxkn41760/catandcomm.js"></script>
  21.         <style type="text/css">
  22.        
  23.         /* --------- reset --------- */
  24.         body,div,ol,ul,li,pre,p,th,td {
  25.             margin: 0;
  26.             padding: 0;
  27.         }
  28.  
  29.         body {
  30.             background-color: #fff;
  31.             font-family: Helvetica, sans-serif;
  32.             font-size: 16px;
  33.             color: #1C344D;
  34.             text-align: justify;
  35.             overflow-y: scroll;
  36.             overflow-x: hidden;
  37.         }
  38.        
  39.         a, a:visited, a:active {
  40.             text-decoration: none;
  41.             color: #91C46C;
  42.         }
  43.        
  44.         section a:hover {
  45.             text-decoration: underline;
  46.         }
  47.        
  48.         a.c {
  49.             color: rgba(27,50,74,0.2);
  50.             border: 1px solid rgba(27,50,74,0.2);
  51.             bottom: 5px;
  52.             right: 5px;
  53.             position: fixed;
  54.             padding: 3px;
  55.             font-size: 12px;
  56.             background-color: #fff;
  57.             z-index: 1;
  58.         }
  59.        
  60.         #wrapper {
  61.             margin: 0 auto;
  62.             width: 700px;
  63.         }
  64.        
  65.         header {
  66.             width: 700px;
  67.             height: 180px;
  68.             overflow: hidden;
  69.             position: fixed;
  70.             background-color: #fff;
  71.             z-index: 1;
  72.         }
  73.        
  74.         header h1 {
  75.             font-style: italic;
  76.             font-size: 84px;
  77.             text-align: right;
  78.             font-family: Times New Roman, Times, serif;
  79.         }
  80.        
  81.         nav {
  82.             width: 150px;
  83.             height: auto;
  84.             position: fixed;
  85.             margin-top: 180px;
  86.             z-index: 1;
  87.         }
  88.        
  89.         nav a, nav span {
  90.             display: block;
  91.             margin-bottom: 3px;
  92.             width: 150px;
  93.             line-height: 24px;
  94.             text-align: center;
  95.             color: #fff;
  96.             transition: 0.5s ease-out;
  97.         }
  98.        
  99.         nav a {
  100.             background-color: #C6E070;
  101.             border-radius: 0px 0px 8px 8px;
  102.             color: #fff!important;
  103.             transition: 0.5s ease-out;
  104.         }
  105.        
  106.         nav span {
  107.             background-color: #1C344D;
  108.             border-radius: 8px 8px 0px 0px;
  109.         }
  110.        
  111.         nav a#all {
  112.             background-color: #91C46C;
  113.             border-radius: 0px;
  114.         }
  115.        
  116.         nav a.cat {
  117.             background-color : #287D7D;
  118.             border-radius: 0px;
  119.         }
  120.        
  121.         nav a:hover {
  122.             opacity: 0.75;
  123.             transition: 0.5s ease-in;
  124.         }
  125.        
  126.         section {
  127.             float: right;
  128.             margin-left: 200px;
  129.             margin-top: 180px;
  130.         }
  131.        
  132.         section div {
  133.             width: 500px;
  134.             padding-bottom: 5px;
  135.             border-bottom: 1px solid rgba(27,50,74,0.1);
  136.             margin-bottom: 10px;
  137.             position: relative;
  138.         }
  139.        
  140.         .rating, a.comment, a.close {
  141.             text-align: right;
  142.             float: right;
  143.             font-family: courier, Helvetica, sans-serif;
  144.         }
  145.        
  146.         a.close {
  147.             color: #fff;
  148.             margin-left: 20px;
  149.             margin-bottom: 5px;
  150.         }
  151.        
  152.         a.comment:hover, a.close:hover {
  153.             text-decoration: none;
  154.         }
  155.        
  156.         div.comment {
  157.             width: 484px;
  158.             background-color: #C6E070;
  159.             padding: 5px 8px 5px;
  160.             border: 0px;
  161.             border-radius: 8px;
  162.             color: #fff;
  163.         }
  164.        
  165.         </style>
  166.     </head>
  167.  
  168. <body>
  169.     <div id="wrapper">
  170.         <header><h1>fanfictions;</h1></header>
  171.         <nav>
  172.        
  173.             <!--    TO ADD A NEW CATEGORIE:
  174.                    Simply make a new link with href="javascript:;"
  175.                    class="cat" and id="xy". Choose a short and
  176.                    self-explanatory name for the id (see examples!)
  177.                    
  178.                    Add this id to any fanfiction div as class.
  179.                    If you want more than one category on a fanfiction
  180.                    separate the ids with a space (see examples!)
  181.            -->
  182.        
  183.             <span>only show:</span>
  184.             <a href="javascript:;" class="cat" id="plus">favourites</a>
  185.             <a href="javascript:;" class="cat" id="minus">disliked</a>
  186.             <a href="javascript:;" class="cat" id="over">over 100k</a>
  187.             <a href="javascript:;" class="cat" id="under">under 100k</a>
  188.             <a href="javascript:;" class="cat" id="ong">still ongoing</a>
  189.             <a href="javascript:;" id="all">show all</a>
  190.             <a href="/">back</a>
  191.         </nav>
  192.         <section>
  193.             <!-- EXAMPLE WITHOUT COMMENT ----------------------------->
  194.            
  195.             <!--        two categories: under and plus              -->
  196.             <div class="under plus">
  197.                 <!--    the rating is aligned right, I like + and -
  198.                        but you could also use a star or 5/5        -->
  199.                 <span class="rating">+</span>
  200.                 <!--    links to a ff or maybe the title of a book  -->
  201.                 "<a href="" target="blank">Something Something</a>"
  202.                 by <a href="" target="blank">Someone</a>
  203.                 </br>
  204.                 <!--    some info or maybe a quote from the ff/book -->
  205.                 Something | Something | 42k
  206.             </div>
  207.        
  208.             <!-- EXAMPLE WITH COMMENT -------------------------------->
  209.        
  210.             <div class="under minus">
  211.                 <span class="rating">–</span>
  212.                 "<a href="" target="blank">Something Something</a>" by <a href="" target="blank">Someone</a>
  213.                 </br>
  214.                 Something | Something | 63k
  215.                 <!--    link to open the comment                    -->
  216.                 <a href="javascript:;" class="comment" id="comm3">&darr;</a>
  217.             </div>
  218.             <!--        new div that holds the comment              -->
  219.             <div class="comment comm3">
  220.                 <!--    link to close the comment                   -->
  221.                 <a href="javascript:;" class="close" alt="comm3">x</a>
  222.                 <!--    your comment                                -->
  223.                 This is a comment, you can add one but you don't have to. To have a working comment you need the same identification on (1) the link that opens the comment, use id="" here (2) the div that holds your comment, use class="" here and (3) the link that closes your comment, use alt="" here.
  224.             </div>
  225.            
  226.             <!-- EXAMPLES FROM MY OWN READING LIST ------------------>
  227.            
  228.             <div class="over">
  229.                 <span class="rating"></span>
  230.                 "<a href="https://www.fanfiction.net/s/7386378/1/" target="blank">While You Tell Me Stories</a>" by <a href="https://www.fanfiction.net/u/2731253/DawnieS" target="blank">DawnieS</a>
  231.                 </br>
  232.                 Harry Potter | James and Lily | 154k
  233.             </div>
  234.            
  235.             <div class="over plus ong">
  236.                 <span class="rating">+</span>
  237.                 "<a href="http://www.fanfiction.net/s/3323816/1/Commentarius" target="blank">32. Commentarius</a>" by <a href="http://www.fanfiction.net/u/337134/B-C-Daily" target="blank">B.C Daily</a>
  238.                 </br>
  239.                 Harry Potter | James and Lily | 739k
  240.                 <a href="javascript:;" class="comment" id="comm2">&darr;</a>
  241.             </div>
  242.             <div class="comment comm2">
  243.                 <a href="javascript:;" class="close" alt="comm2">x</a>
  244.                 I usually don't read unfinished fanfictions for fear to never get an ending, but for some reason I had this one on my kindle and started reading it during a very boring night shift. I'm not completely sure if it was a good or bad choice yet. Don't get me wrong, this is very possibly the most brilliant fanfiction I have ever read, but as far as I know the author takes her sweet time uploading new chapters (to be fair those are usually about 50k words so..).
  245.             </div>
  246.            
  247.             <div class="under">
  248.                 <span class="rating"></span>
  249.                 "<a href="http://www.fanfiction.net/s/8110443/1/The-Faults-You-ve-Left-Behind" target="blank">The Faults You've Left Behind</a>" by <a href="http://www.fanfiction.net/u/3577295/RMGryffindor" target="blank">RMGryffindor</a>
  250.                 </br>
  251.                 Harry Potter | James and Lily | 20k
  252.                 <a href="javascript:;" class="comment" id="comm1">&darr;</a>
  253.             </div>
  254.             <div class="comment comm1">
  255.                 <a href="javascript:;" class="close" alt="comm1">x</a>
  256.                 BYMERLIN why would anyone write something this painful?! It was beautiful tho, in the end. I liked the way their daily life was described, especially the bit about the none-sexual showers!
  257.             </div>
  258.            
  259.         <!-- END OF ENTRIES ---------------------------------------->
  260.            
  261.         </section>
  262.    
  263.     <a href="http://tea-n-candy.tumblr.com/" target="blank" class="c">T N K</a>
  264. </body>
  265.  
  266. </html>
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!