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>
- <!------
- FICRECS PAGE 001f
- wolfwrecked [ohcodey.tumblr.com]
- Please observe common theme sharing etiquette:
- :you may alter but do not remove credit
- :do not use as a base or redistibute
- :etc
- ----->
- <title>FICRECS</title>
- <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'>
- <script type="text/javascript">
- function unhide(divID) {
- var item = document.getElementById(divID);
- if (item) {
- item.className=(item.className=='hidden')?'unhidden':'hidden';
- }
- }
- </script>
- <style type="text/css">
- /* CUSTOMISABLE COLOURS */
- /* SUBHEADINGS HOVER COLOURS AND TEXT HOVER COLOURS */
- .author:hover {background-color:#ff719f;color:#fff;}
- .wordcount:hover {background-color:#f5f248;color:#fff;}
- .pairing:hover {background-color:#78ea4a;color:#fff;}
- .rating:hover {background-color:#65e3ea;color:#fff;}
- /* KEYWORDS HEADINGS HOVER COLOUR AND TEXT HOVER COLOUR */
- #tags-bar h1:hover {background-color:#ffb14b; color:#fff;}
- /* FIC TITLE HOVER COLOUR AND TEXT HOVER COLOUR */
- .ficname:hover {background-color:#ffb14b;}
- .ficname:hover a {color:#fff;}
- /* HEADER ACCENT COLOURS */
- .firstletter {color:#ff719f;}
- .lastletter {color:#65e3ea;}
- /*CSS*/
- body {
- margin-top:100px;
- margin-bottom:100px;
- background-color:#eeeeee;
- font-family: 'Roboto Condensed', sans-serif;
- }
- a {text-decoration:none;}
- .hidden {
- display: none;
- }
- .unhidden {
- display: block;
- }
- .upcon {overflow:hidden;width:100%;margin-bottom:50px;}
- .container {
- position:relative;
- width:1050px;
- left:50%;
- margin-left:-600px;
- }
- .header {
- font-family: 'Archivo Black', sans-serif;
- font-size:50px;
- LETTER-SPacing:-3px;
- width:800px;
- margin-LEFT:60PX;
- color:#333333;
- }
- .header2 {
- padding:10px;
- LETTER-SPacing:+1px;
- font-size:11px;
- background-color:#ffffff;
- width:901px;
- margin-LEFT:60PX;
- margin-bottom:20px;
- color:#333333;
- }
- .header2 a:hover {background-color:#333333;
- color:#ffffff;
- padding:5px;
- }
- .header2 a {color:#666666;}
- .fic-list {}
- .li {
- list-style:none;
- margin:0;
- }
- .ul fic-list {
- margin-top:0;
- list-style:none;
- }
- .list {
- margin:0px 0 0 0;
- list-style:none;
- }
- .recbox {
- width:200px;
- height:200px;
- float: left;
- margin:20px;
- background-color:#ffffff;
- }
- .ficname {
- width:190px;
- height:32px;
- text-align:center;
- font-size:12px;
- text-transform:uppercase;
- background-color:#333333;
- padding:5px;
- overflow:hidden;
- letter-spacing:+1px;
- transition: all 0.3s ease-out;
- -o-transition: all 0.3s ease-out;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;
- }
- .ficname:hover a {
- transition: all 0.3s ease-out;
- -o-transition: all 0.3s ease-out;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;
- }
- .ficname a {
- color:#ffffff;
- text-decoration:none;
- }
- .ficdesc {
- height:115px;
- font-family: droid sans, verdana, sans serif;
- font-size:11px;
- text-align:justify;
- padding:10px;
- margin-top:20px;
- overflow:auto;
- color:#444444;
- background-color:#ffffff;
- }
- .fictags {
- display:none;
- }
- .tags {
- height:0;
- }
- .author {
- width:140px;
- height:12px;
- padding: 2px 0;
- float:left;
- text-align:center;
- letter-spacing:+1px;
- background-color:#d4d4d4;
- font-size:9px;
- text-transform:uppercase;
- overflow:hidden;
- color:#888;
- transition: all 0.3s ease-out;
- -o-transition: all 0.3s ease-out;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;
- }
- .pairing {
- width:140px;
- height:12px;
- padding: 2px 0;
- float:left;
- letter-spacing:+1px;
- text-align:center;
- background-color:#e4e4e4;
- font-size:9px;
- text-transform:uppercase;
- overflow:hidden;
- color:#888;
- transition: all 0.3s ease-out;
- -o-transition: all 0.3s ease-out;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;
- }
- .rating {
- width:60px;
- padding: 2px 0;
- height:12px;
- letter-spacing:+1px;
- float:left;
- text-align:center;
- background-color:#d4d4d4;
- font-size:9px;
- text-transform:uppercase;
- overflow:hidden;
- color:#888;
- transition: all 0.3s ease-out;
- -o-transition: all 0.3s ease-out;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;
- }
- .wordcount {
- width:60px;
- padding: 2px 0;
- height:12px;
- float:left;
- letter-spacing:+1px;
- text-align:center;
- background-color:#e4e4e4;
- font-size:9px;
- text-transform:uppercase;
- overflow:hidden;
- color:#888;
- }
- .author:hover, .pairing:hover, .wordcount:hover, .rating:hover, #tags-bar h1:hover, a, #tags-bar h1 {transition: all 0.3s ease-out;
- -o-transition: all 0.3s ease-out;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;
- }
- .tag-bar-header .hover, .tag-bar-header:hover .normal {
- display: none;
- transition: all 0.3s ease-out;
- -o-transition: all 0.3s ease-out;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;
- }
- .tag-bar-header:hover .hover {
- display: block;
- transition: all 0.3s ease-out;
- -o-transition: all 0.3s ease-out;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;
- }
- .search-bar {
- width:200px;
- height:40px;
- background-color:#333333;
- float:left;
- margin-left:60px;
- }
- .search {
- padding-left:10px;
- margin: 9px 0 0 20px;
- }
- .tag-bar { width:655px;
- max-height:800px;
- background-color:#ffffff;
- border-bottom:solid 1px #eeeeee;
- border-left:solid 1px #eeeeee;
- margin-left:300px;
- text-align:right;
- font-size:12px;
- position:relative;
- z-index:20;}
- #tags-bar { width:170px;
- max-height:502px;
- background-color:#ffffff;
- border-bottom:solid 1px #eeeeee;
- border-left:solid 1px #eeeeee;
- float:right;
- margin-right:-140px;
- margin-top:-41px;
- text-align:right;
- font-size:12px;
- position:relative;
- overflow: auto;
- z-index:20;
- }
- #tags-bar a {display:block;
- height:30px;
- z-index:30;
- background-color:#333333;
- text-align:center;
- font-size:16px;
- text-transform:uppercase;
- padding-top:10px;
- color:#ffffff;
- text-decoration:none;
- }
- .tags-bar-keywords {
- text-align:center;
- margin:0 5px;
- font-family: droid sans, verdana, sans serif;
- text-transform:lowercase;
- font-size:11px;
- letter-spacing:+1px;
- color:#444444;}
- #tags-bar h1 {font-size:12px;display:block;padding:5px 0;background-color:#333333;color:#ffffff;font-weight:normal;text-transform:uppercase;
- letter-spacing:+1px;text-align:center;}
- .tags-bar-header {
- width:100%;
- height:30px;
- margin-bottom:20px;
- z-index:30;
- background-color:#333333;
- text-align:center;
- font-size:12px;
- text-transform:uppercase;
- padding-top:10px;
- color:#ffffff;
- letter-spacing:+1px;
- }
- .tag-bar a {
- color:#222222;
- text-decoration:none;
- font-size:28px;
- font-weight:900;
- padding:0 15px 10px 0;
- }
- .tag-bar-header {
- width:655px;
- height:30px;
- z-index:30;
- background-color:#333333;
- text-align:right;
- font-size:12px;
- text-transform:uppercase;
- padding:10px 20px 0px 5px;
- transition: all 0.3s ease-out;
- -o-transition: all 0.3s ease-out;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;
- letter-spacing:+1px;
- }
- .tag-bar-header a {
- font-weight:normal;
- color:#ffffff;
- text-decoration:none;
- font-size:12px;
- text-transform:uppercase;
- padding:0;
- transition: all 0.3s ease-out;
- -o-transition: all 0.3s ease-out;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;
- letter-spacing:+1px;
- }
- ::selection {
- background-color:#333333;
- color:#ffffff;
- }
- ::-moz-selection {
- background-color:#333333;
- color:#ffffff;
- }
- ::-webkit-scrollbar {
- width:5px;
- height:auto;
- background:#ffffff;};
- }
- ::-webkit-scrollbar-corner {
- background:#ffffff;
- }
- ::-webkit-scrollbar-thumb:vertical {
- background:#444444;
- }
- ::-webkit-scrollbar-thumb:horizontal {
- background:#444444;
- }
- .credit {
- padding:2px 6px 4px 6px;
- font-size:14px;
- font-family:georgia;
- font-weight:bold;
- position:fixed;
- bottom:8px;
- right:8px;
- border:1px solid #ffffff;
- }
- .credit a {color:#666666;}
- </style>
- </head>
- <body>
- <div class="upcon">
- <div class="container">
- <div class="header">
- <span class="firstletter">F</span>IC RECS<span class="lastletter">.</span>
- </div>
- <div class="header2">
- DESCRIPTION BOX TEXT GOES HERE
- </div>
- <div id="fic-list">
- <div class="search-bar">
- <input class="search" width="100" placeholder="search keyword(s)"/>
- </div>
- <div class="tag-bar">
- <div class="tag-bar-header">
- <div class="normal"><a href="javascript:unhide('tags-bar');">KEYWORDS</a></div>
- <div class="hover"><a href="javascript:unhide('tags-bar');">CLICK ME</a></div>
- </div>
- </div>
- <div id="tags-bar" class="hidden">
- <div class="tags-bar-header">search suggestions:</div>
- <h1>HEADER</h1>
- <br>
- <div class="tags-bar-keywords">
- KEYWORD<br>
- KEYWORD<br>
- KEYWORD<br>
- KEYWORD<br>
- KEYWORD<br>
- KEYWORD<br>
- </div>
- <br>
- <h1>HEADER</h1>
- <br>
- <div class="tags-bar-keywords">
- KEYWORD<br>
- KEYWORD<br>
- KEYWORD<br>
- KEYWORD<br>
- KEYWORD<br>
- KEYWORD<br>
- </div>
- <br>
- <a href="javascript:unhide('tags-bar');">↑</a>
- </div>
- <ul class="list">
- <!-- TEMPLATE - COPY & PASTE AFTER THE ARROW BELOW
- <li>
- <div class="recbox">
- <div class="ficname"><a href="LINK">TITLE</a></div>
- <div class="author">AUTHOR</div>
- <div class="wordcount">WC: </div>
- <div class="pairing">PAIRING</div>
- <div class="rating">RATED: </div>
- <div class="ficdesc">
- FIC DESCRIPTION
- </div>
- <div class="fictags">
- <div class="tags">
- PUT ANY KEYWORDS YOU WANT SEARCHABLE HERE
- </div>
- </div>
- </div>
- </li>
- -->
- <li>
- <div class="recbox">
- <div class="ficname"><a href="LINK">TITLE</a></div>
- <div class="author">AUTHOR</div>
- <div class="wordcount">WC: </div>
- <div class="pairing">PAIRING</div>
- <div class="rating">RATED: </div>
- <div class="ficdesc">
- FIC DESCRIPTION
- </div>
- <div class="fictags">
- <div class="tags">
- PUT ANY KEYWORDS YOU WANT SEARCHABLE HERE
- </div>
- </div>
- </div>
- </li>
- <li>
- <div class="recbox">
- <div class="ficname"><a href="LINK">TITLE</a></div>
- <div class="author">AUTHOR</div>
- <div class="wordcount">WC: </div>
- <div class="pairing">PAIRING</div>
- <div class="rating">RATED: </div>
- <div class="ficdesc">
- FIC DESCRIPTION
- </div>
- <div class="fictags">
- <div class="tags">
- PUT ANY KEYWORDS YOU WANT SEARCHABLE HERE
- </div>
- </div>
- </div>
- </li>
- </ul>
- </div>
- </div>
- <div class="credit">
- <a href="http://ohcodey.tumblr.com">¢</a>
- </div>
- </div>
- <script src="http://static.tumblr.com/qwfkpqk/evSmlscpv/list.min.js"></script>
- <script type="text/javascript">
- var options = {
- valueNames: [ 'recbox', 'author', 'pairing', 'rated', 'wordcount' ]
- };
- var recboxList = new List('fic-list', options);
- </script>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement