Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <title>fic recs.</title>
- <!--- change the title of the page here --->
- <link rel="shortcut icon" href="{Favicon}">
- <!---
- FANFIC RECS A ᴘᴀɢᴇ ᴛʜᴇᴍᴇ ʙʏ ʜᴀʀᴅᴢɪᴀᴍ
- please don't take off the credit it's really small!!!!
- ╭━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮ ╭━━┳╮╱╱╭╮
- ┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃ ┃╭╮┃╰╮╭╯┃
- ╰╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮ ┃╰╯╰╮╰╯╭╯
- ╱╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃ ┃╭━╮┣╮╭╯
- ╱╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃ ┃╰━╯┃┃┃
- ╱╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯ ╰━━━╯╰╯
- ╭╮╱╭┳━━━┳━━━┳━━━┳━━━━┳━━┳━━━┳━╮╭━╮
- ┃┃╱┃┃╭━╮┃╭━╮┣╮╭╮┣━━╮━┣┫┣┫╭━╮┃┃╰╯┃┃
- ┃╰━╯┃┃╱┃┃╰━╯┃┃┃┃┃╱╭╯╭╯┃┃┃┃╱┃┃╭╮╭╮┃
- ┃╭━╮┃╰━╯┃╭╮╭╯┃┃┃┃╭╯╭╯╱┃┃┃╰━╯┃┃┃┃┃┃
- ┃┃╱┃┃╭━╮┃┃┃╰┳╯╰╯┣╯━╰━┳┫┣┫╭━╮┃┃┃┃┃┃
- ╰╯╱╰┻╯╱╰┻╯╰━┻━━━┻━━━━┻━━┻╯╱╰┻╯╰╯╰╯
- hardziam.tumblr.com // themesbyzsu.tumblr.com
- --->
- <link href='http://fonts.googleapis.com/css?family=Archivo+Black' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
- <style type="text/css">
- /* CUSTOMISABLE COLOURS */
- /*CSS*/
- ::-webkit-scrollbar {background-color:white; border:3px solid #fff;height:4px; width:4px;}
- ::-webkit-scrollbar-thumb:vertical {background-color:#333; border:2px solid #333; height:40px; border-radius:3px;}
- ::-webkit-scrollbar-thumb:horizontal {background-color:#333;border:2px solid #333; height:8px!important}
- body {
- background-image:url(http://i.imgur.com/1LqHc9n.png);
- font-family: 'verdana';
- font-size:10px;
- }
- a {text-decoration:none;}
- .hidden {display: none;}
- .unhidden {display: block;}
- .container {
- left:200px;
- margin-left:200px;
- }
- #fic-list {margin-left:250px; width:auto;}
- .li {
- list-style:none;
- margin:0;
- }
- .ul fic-list {
- margin-top:0;
- list-style:none;
- }
- .list {
- margin:20px;
- margin-left:30px;
- list-style:none;
- }
- .story {
- width:530px;
- height:157px;
- float: left;
- padding:5px;
- padding-top:0px;
- margin:10px;
- background-color:#fff;
- overflow:hidden;
- color:black;
- border:1px solid #eee;
- }
- .tags {
- display:none;
- }
- .search-bar {
- width:230px;
- height:40px;
- background-color:#f1f1f1;
- float:left;
- margin-left:-240px;
- margin-top:500px;
- position:fixed;
- z-index:100;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- }
- .searchkey{
- width:22px;
- height:22px;
- margin-right:5px;
- float:left;
- }
- .searchkey img{
- width:15px;
- margin-top:6px;
- padding:5px;
- background:#fff;
- border-radius:50%;
- border:1px solid #eee;
- -webkit-filter: invert(0%);
- }
- .search-bar:hover .search{
- opacity:1;
- -webkit-transition: all 1s ease-in-out;
- -moz-transition: all 1s ease-in-out;
- -o-transition: all 1s ease-in-out;
- }
- .search {
- opacity:1;
- padding-left:15px;
- width:185px;
- margin: 10px 0 0 -13px;
- border:2px solid white;
- -webkit-transition: all 0s ease-in-out;
- -moz-transition: all 0s ease-in-out;
- -o-transition: all 0s ease-in-out;
- }
- /*--------- boxes ---------*/
- .title{
- font-family:'Trebuchet MS';
- padding-bottom:8px;
- padding-left:6px;
- padding-top:3px;
- text-align:left;
- background:#fff;
- width:400px;
- height:25px;
- color:black;
- margin-left:96px;
- margin-bottom:0px;
- text-transform:uppercase;
- border-left:1px solid #eee;
- }
- .title a{
- color:black;
- font-style:italic;
- font-size:15px;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- }
- .title a:hover{
- color:#ddd;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- }
- .author {
- margin-left:10px;
- padding-left:6px;
- color:#666;
- }
- .info{
- font-family:verdana;
- font-size:9px;
- text-transform:uppercase;
- padding:3px;
- letter-spacing:1px;
- height:90px;
- width:90px;
- padding-top:5px;
- float:left;
- text-align:right;
- border-top:1px solid #eee;
- }
- .desc {
- height:110px;
- padding:5px;
- overflow:auto;
- z-index:99;
- background:#f6f6f6;
- color:#000;
- }
- #rn{
- width:100%;
- background:blue;
- }
- #side {
- width:230px;
- height: 150%;
- margin-top:-50px;
- z-index:-99;
- background:#f2f2f2;
- padding:10px;
- float:left;
- position:fixed;
- }
- .sidetitle{
- font-family:Oswald;
- font-size:60px;
- text-transform:uppercase;
- margin-top:200px;
- text-align:center;
- color:#222;
- }
- .sidetitle:first-letter{
- color:#ff0000;
- }
- .subtitle{
- font-family:Lucida Sans Unicode;
- text-transform:uppercase;
- color:#7777;
- letter-spacing:2px;
- text-align:center;
- }
- .description{
- background:white;
- width:220px;
- padding:5px;
- color:#888;
- margin-top:20px;
- }
- .links a{
- display:block;
- margin-top:5px;
- text-align:center;
- color:black;
- font-size:9px;
- letter-spacing:1px;
- background:white;
- text-transform:uppercase;
- font-family:verdana;
- width:100%;
- padding-top:3px;
- padding-bottom:3px;
- -webkit-transition: all 0.2s ease-in-out;
- -moz-transition: all 0.2s ease-in-out;
- -o-transition: all 0.2s ease-in-out;
- }
- .links a:hover{
- background:#eee;
- color:black;
- -webkit-transition: all 0.2s ease-in-out;
- -moz-transition: all 0.2s ease-in-out;
- -o-transition: all 0.2s ease-in-out;
- }
- .tagslist{
- background:#333;
- z-index:-30000;
- opacity:0.8;
- position:fixed;
- width:180px;
- height:90%;
- padding:5px;
- overflow:auto;
- margin-top:-20px;
- font-weight:lighter;
- margin-left:-10px;
- padding-top:50px;
- padding-bottom:40px;
- text-align:center;
- font-family:Lucida Sans Unicode;
- font-size:8px;
- text-transform:uppercase;
- color:#ccc;
- letter-spacing:1px;
- }
- .tagslist h1{
- text-transform:uppercase;
- font-family:Oswald;
- font-weight:lighter;
- color:white;
- font-size:12px;
- letter-spacing:4px;
- }
- .tagslist em{
- font-style:normal;
- font-weight:lighter;
- color:#ccc;
- text-transform:uppercase;
- font-family:Lucida Sans Unicode;
- font-size:9px;
- letter-spacing:2px;
- }
- .rc{
- position:absolute;
- font-size:8px;
- text-align:right;
- margin-top:0px;
- cursor:help;
- width:90px;
- height:10px;
- color:#333;
- }
- .commentary{
- position:absolute;
- height:130px;
- width:500px;
- margin-top:-63px;
- margin-left:93px;
- overflow:hidden;
- text-align:left;
- display:none;
- }
- .comment{
- position:absolute;
- height:105px;
- width:420px;
- padding:10px;
- overflow:auto;
- padding-top:6px;
- padding-left:5px;
- text-align:left;
- text-transform:none;
- background-color:#eee;
- font-family: 'verdana';
- font-size:10px;
- letter-spacing:0px;
- color:#232323;
- }
- .comment::-webkit-scrollbar {
- width: 5px;
- height: 5px;
- background-color:#eee;
- border:2px solid #eee;
- }
- .comment::-webkit-scrollbar-thumb {
- background-color: #888;
- border:1px solid #888;
- }
- .list li {
- list-style:none;
- padding-bottom:5px;
- }
- ul, li {
- margin-left: 0;
- padding-left: 0;
- }
- #example{
- margin-left:-10px;
- }
- #credit a{
- background:white;
- right:10px;
- bottom:5px;
- padding:5px;
- position:fixed;
- border:1px solid #eee;
- color:black;
- font-family:helvetica;
- font-size:10px;
- }
- #credit a:hover{
- background:black;
- color:white;
- }
- </style>
- </head>
- <body>
- <!----- KEYWORDS SECTION ----->
- <div class="tagslist">
- search for any of the keywords below using the search box to the right.
- <p>
- <!----- put in a little description of how to navigate / things that people should search, and then copy this below to make a new section.
- IMPORTANT: make sure that you put <br> after every tag/keyword.
- <h1>TITLE</h1>
- <em>
- tag<br>
- tag<br>
- tag<br>
- </em>
- <br>
- --->
- <h1>word count</h1>
- <em>
- -5k<br>
- 5-10k<br>
- 10-15k<br>
- 15-25k<br>
- 25-50k<br>
- 50-100k<br>
- </em><br>
- <br>
- <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')" />
- </div>
- <!----- END KEYWORDS SECTION ----->
- <!------- BEGIN MAIN CONTAINER ----->
- <div id="example">
- <!------- BEGIN SIDE BAR ------->
- <div id="side">
- <div class="sidetitle">ficrecs.</div>
- <div class="subtitle">fanfiction recommendations.</div>
- <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>
- e.g. "Search for 'favorite' in the search bar below for my favourites."
- </div>
- <div class="links">
- <a href="/">go back</a>
- <a href="/ask">message</a>
- <a href="LINK">link 3</a>
- </script>
- <!----- 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>"---->
- <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')" />
- </div>
- </div>
- <!----- END SIDEBAR ---->
- <!----- BEGIN FIC LIST ----->
- <div id="fic-list">
- <div class="search-bar">
- <div class="searchkey"><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-128.png"></div>
- <input class="search" width="100" placeholder="SEARCH"/>
- </div>
- <ul class="list">
- <!------- NEW BOX: COPY AND PASTE EVERYTHING BELOW.
- <li>
- <div class="story">
- <div class="title">
- <a href="LINK">fic title</a><br>
- <span class="author">author</span>
- </div>
- <div class="info">
- pairing<br>
- word count<br>
- rating<br>
- <span style="color:#e7e404">★★★★★</span>
- <div class="rc">
- click for r/c
- <div class="commentary">
- <div class="comment">
- say what you like about the story
- </div>
- </div>
- </div>
- </div>
- <div class="desc">
- fic description
- </div>
- <div class="tags">
- put anything that you want to be searchable here
- </div>
- </div>
- </li>
- --------->
- <li>
- <div class="story">
- <div class="title">
- <a href="LINK">fic title</a><br>
- <span class="author">author</span>
- </div>
- <div class="info">
- pairing<br>
- word count<br>
- rating<br>
- <!----make sure that you put <br> on the end!!
- move stars outside of the </span> to make them black ---->
- <span style="color:#e7e404">★★★</span>★★
- <!---- 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"---->
- <div class="rc">
- click for r/c
- <div class="commentary">
- <div class="comment">
- <!-- say what you like about the story here -->
- </div>
- </div>
- </div>
- <!------ END READER COMMENTARY ------>
- </div>
- <div class="desc">
- fic description
- </div>
- <div class="tags">
- put anything that you want to be searchable here
- </div>
- </div>
- </li>
- </ul>
- </div>
- </div>
- </div>
- <div id="credit">
- <a href="http://hardziam.tumblr.com">HZ</a>
- </div>
- </div>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $('.rc').click(function(){
- $(this).children(".commentary").slideToggle("500");
- });
- });
- </script>
- <script src="http://static.tumblr.com/qwfkpqk/evSmlscpv/list.min.js"></script>
- <script type="text/javascript">
- var options = {
- valueNames: [ 'story' ]
- };
- var storyList = new List('fic-list', options);
- </script>
- <script type="text/javascript">
- function unhide(divID) {
- var item = document.getElementById(divID);
- if (item) {
- item.className=(item.className=='hidden')?'unhidden':'hidden';
- }
- }
- </script>
- <script language="javascript">
- function example_animate(px) {
- $('#example').animate({
- 'marginLeft' : px
- });
- }
- </script>
- <script src="http://static.tumblr.com/7ughxi5/AWWmpzs73/list.min.js"></script>
- <script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
- <style>
- div#qTip {
- padding: 4px;
- display:none;
- text-align: justify;
- max-width:300px;
- position: absolute;
- font-size:10px;
- line-height:9px;
- font-family:calibri;
- z-index: 1000;
- border: 1px solid #eee;
- background-color:white;
- color: black;
- letter-spacing: 1px;
- }
- </style>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement