fic rec page 01

<!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>

<!------ theme by jasnahdavar
-------- DO NOT steal/redistribute/remove credit
-------- ASK ME if you want to use as a base code i promise i am nice
-------- the code for each book is a little lengthy sorry
-------- there is literally no limit to how many subheadings/books you can have go wild
-------- !IMPORTANT! necessary fields to fill in are fic title, author, summary and rating for the code to work best!!!
-------- be careful not to let the topbar description run over
-------- please try to keep the title to as few words as possible
-------- this can also be used for books instead of fics in which case you dont need to add the link to read if it doesn't apply
-------- there's a ton of more help in the code but my askbox is always open!!! :)
-------->

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">
<meta name="description" content="{MetaDescription}" />
<link href='http://fonts.googleapis.com/css?family=Fenix' rel='stylesheet' type='text/css'>

<link href='http://fonts.googleapis.com/css?family=Fondamento' rel='stylesheet' type='text/css'>


<style type="text/css">
::-webkit-scrollbar-thumb:vertical {
background-color:#a3a3a3; /* SLIDER COLOR */
height:50px;
direction:rtl;
}

::-webkit-scrollbar-thumb:horizontal {
background-color:#a3a3a3; /*SLIDER COLOR*/
height:50px !important;
}

::-webkit-scrollbar {
height:10px;
width:7px; /*SLIDER WIDTH*/
background-color:#e6e6e6; /*SLIDER BG COLOR*/
}

body{
    background:#fff;
    font-size:11px;
    color:#000;
    font-family:helvetica;
    overflow:auto;
}

a:link, a:active, a:visited {
    color:#0000ff;
    -webkit-transition:0.6s ease-out;
    -moz-transition:0.6s ease-out;
    transition:0.6s ease-out;
    text-decoration:none;
}

a:hover {
    color:#ff0000;
}
@font-face {font-family:Bebas Neue;src:url(http://static.tumblr.com/cvlbtjz/cnsln9tpp/bebasneue.otf);}


/*------- TOPBAR ----------*/

#topbar {
    position:absolute;
    top:10px;
    left:50%;
    width:500px;
    margin-left:-250px;
    border-left:1px solid #000;
    border-bottom:1px solid #000;
    height:100px;
}

#title {
    position:absolute;
    width:100px;
    left:50%;
    margin-left:-360px;
    text-align:right;
    font-size:20px;
    font-family:"bebas neue";
    top:50px;
}

.desc {
    margin-top:20px;
    margin-left:50px;
    height:80px;
    color:#999; /*--- description color ---*/
}

.navl {
    text-align:right;
    margin-top:10px;
    font-style:italic;
}

.navl a{
    color:#000; /* navlink color */
    margin-left:10px;
}

.navl a:hover {
    text-decoration:underline;
}


#cont {
    left:50%;
    margin-left:-250px;
    width:500px;
    height:auto;
    margin-top:150px;
    position:absolute;
}

/*----- fic rec box ---*/

.box {
    border-top:1px solid #000;
    border-right:1px solid #000;
    margin-bottom:50px;
    width:500px;
    margin-top:50px;
}

.subheading {
    margin-top:-20px;
    font-family:"arial";
    font-size:16px;
    font-weight:bold;
}


/*---- book -----*/

.book {
    width:150px;
    height:200px;
    display:inline-block;
    margin-right:20px;
    margin-bottom:5px;
      margin-left:10px;
      margin-top:20px;
      background:#fafafa; /* book bg color */
      border-left:20px solid #cfcfcf; /* book border color */

}


/*--- title and author ---*/


.name {
    padding:50px 1px 1px 1px;
        font-size:11px;
    font-style:italic;
        color:#4d7794; /* book title color */
        text-align:Center;

}
.author {
    font-family:georgia;
    font-size:10px;
    text-align:center;
    color:#82a0b4; /* book author color */
        padding-top:10px;

}

/*--- cover and summary ---*/


.cover {
    opacity:0;
    width:0px;
    height:200px;
      overflow:visible;
      background:#eeeeee; /* book cover background color */
    margin-left:0px;
font-size:10px;
      z-index:10;
      color:#666;
      position:absolute;

}


.bookinfo {
    height:200px;
transition:0.6s;
-webkit-transition:0.6s;
-moz-transition:0.6s;
width:0px;
    background:#fff; /* summary background color */
    opacity:0;
    z-index:1000000;
    position:absolute;
        overflow-y:auto;
    overflow-x:hidden;
}


.book:hover .cover {
    opacity:1;
    padding-top:50px;
    width:140px;
   padding:50px 5px 5px 5px;
    margin-left:-150px;
    height:150px;
transition:0.6s;
-webkit-transition:0.6s;
-moz-transition:0.6s;
}


.book:hover .bookinfo{
    opacity:1;
    width:140px;
    padding:5px;
    height:200px;
transition:0.6s;
-webkit-transition:0.6s;
-moz-transition:0.6s;


}


/*--- book info and stuff ---*/


.rating {
    margin-top:5px;
    text-align:center;
    color:#ffcc00; /* rating color */
}


.summary {
    text-align:left;
    margin-top:7px;
    font-size:10px;
    margin-left:5px;
    color:#808080; /* summary text color */
}

strong {
    color:#476bb2; /* bold text color ( this applies for the pairing, word count etc categories) */
}


.read {
 text-align:center;
 margin-top:10px;
 text-transform:uppercase;
 letter-spacing:2px;
}

.read a {
    color:#3c5861; /* read link color */
}

.read a:hover {
    color:#79afc2; /* read link hover color */
}

/*---------------------------- DO NOT MOVE CREDIT --*/
#credit {
    bottom:10px;
    right:5px;
    font-size:25px;
    position:fixed;

}

.cr {
background:transparent;}

#credit a {
    color:#999;
}

#credit a:hover {
    color:#eee;
    text-decoration:none;
}

.theme {
    width:0px;
    background:#999;
    color:#fff;
    height:18px;
    font-size:10px;
    margin-top:-20px;
    padding-top:2px;
visibility:hidden;    position:fixed;
    text-align:center;
    text-transform:uppercase;

}


.cr:hover .theme {
visibility:visible;
width:200px;
    margin-left:-200px;

transition:0.6s;
}

</style>
</head>
<body>
<div id="title">
fic recs <!---- write your title here ---->
</div>
<div id="topbar">
    <div class="desc">

write your description here

</div>

<div class="navl">
    <a href="/">home</a>
    <a href="/ask">ask</a>
    <a href="http://tumblr.com">dash</a>
<!--- add more links if you want to --->
</div>
</div>

<!---------------------- books ---------------------------->
<div id="cont">

<!-------------------- first container ------------------------->
<div class="box">

<div class="subheading">
subheading <!---- container subheading (fandom, genre, whatever you want) --->
</div>

<!--------- first book ------------->
 <div class="book">

<div class="bookinfo">
<div class="rating">
☆☆☆☆☆ <!---- rating: add as many stars as you want? ---->
</div>
<div class="summary">
<strong>summary:</strong> write your summary here. it can be as long as you like
</div>
</div>
<div class="cover">

<strong>pairing:</strong> x/y<br> <!--- pairing --->
<strong>rating:</strong> PG<br> <!---- rating ---->
<strong>word count:</strong> 1k <!---- word count --->

<!--- the above categories are optional you can add whatever you want. trigger warnings, fandom or genre for example. to add another category copy the below code---
<strong>CATEGORY TITLE:</strong> CATEGORY DESCRIPTION <br>

---- i hope this made sense i tried to make it as customisable as possible ---->

<div class="read">
<a href="LINK TO FIC HERE">read</a> <!---- link to read fic!!! important
------------------------------------------ unless of course you're using this as a books page in which case you can just delete this entire div
--------->
</div>
    </div>

<div class="name">
fic title goes here <!---- fic title --->
</div>
<div class="author">
author <!---- fic author --->
</div>

</div>

<!---- end first book ---->
<!---- to add more books use the below code (they all follow the same code yo) --->

<div class="book">
<div class="bookinfo">
<div class="rating">
☆☆☆☆☆
</div>
<div class="summary">
<strong>summary:</strong> write a summary
</div>
</div>
<div class="cover">
<strong>category:</strong> description <br>
<strong>category:</strong> description <br>
<div class="read">
<a href="LINK">read</a>
</div>
</div>
<div class="name">
fic title
</div>
<div class="author">
fic author
</div>
</div>

<!----------- copy the code in the space below to add as many books as you like ------------>


<!----------- copy the code in the space above to add as many books as you like ------------>

</div>


<!------------ second container -------------->
<div class="box">
<div class="subheading">
subheading <!---- subheading -------->
</div>

<!------- this one follows the same pattern as the first ---------------->
<div class="book">
<div class="bookinfo">
<div class="rating">
☆☆☆☆☆
</div>
<div class="summary">
<strong>summary:</strong> write a summary
</div>
</div>
<div class="cover">
<strong>category:</strong> description <br>
<strong>category:</strong> description <br>
<div class="read">
<a href="LINK">read</a>
</div>
</div>
<div class="name">
fic title
</div>
<div class="author">
fic author
</div>
</div>

<!------------- add more books in the space below ----------------->


<!------------- add more books in the space above----------------->

</div>

<!---------- second container ends ------------------->

<!-------- to add more containers just copy the code for the previous containers and paste it in the space below. don't forget to edit the books! ------------>


<!---------- do not edit beyond this point ----------------------------->
</div>
  <div id="credit"><div class="cr"><a href="http://jasnahdavar.tumblr.com">©</a>
        <div class="theme">theme by jasnahdavar</div></div>
    </div>
</body>

</html>