Brakebills Tag

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Forum|Poiret+One" rel="stylesheet">
<style>

.credit{
    position: fixed;
    bottom: 8px;
    right: 16px;
    background-color:rgb(225,225,225, 0.2);}

body, html {
    margin: 0;
    background:url('https://78.media.tumblr.com/e3e7e3fd26a728b6d4391a4ee1f8c09c/tumblr_pd390r4RCn1wd05tno1_540.png');
    font-family: 'Forum', cursive;


}

.header{
   background-color: black;
    height:40px;
    width:100%;
}

.header a{
    display:inline-block;
    padding-left:15px;
    padding-right:15px;
    padding-top:10px;
    color: #d2aa00;
}

.box {
    width: 200px;
    background-color:black;
    height: 250px;
    margin:10px;
    float:left;
    overflow-y:auto;
  }

   ::-webkit-scrollbar {display: none;}
.title{
    background-color: #d2aa00;
    padding:10px;
    text-align:center;
    font-family: 'Poiret One', cursive;
    font-size:20px;
}

.fic a{
    color:#ffd522;
    font-family: 'Forum', cursive;
}
.main{
   margin-right:100px;
   margin-left:100px;
}


/*******************

Copy this to creat a new box, add <li></li> for a new link, put it after the divider called "main"


<div class="box">
<div class="title">Author</div>
<div class=fic>
<ul>
<li><a href="url">Name</a></li>
</ul>
</div></div>
*****************/

</style>
<body>

<header>
    <div class="header">

    <a href="/">Go Home</a>
    <a href="/suggestion">Suggest a fic/author</a>
    <a href="/ask">Send a bunny</a>
    <a href="/random">Surprise me!</a>

    </div>

</header>

<div class="main">


<div class="box">
<div class="title">Season</div>
<div class=fic>
<ul>
<li><a href=”/tagged/season+one>Season One</a></li>
<li><a href=”/tagged/season+two>Season Two</a></li>
<li><a href=”/tagged/season+three>Season Three</a></li>
</ul>
</div></div>


<div class="box">
<div class="title">Raiting</div>
<div class=fic>
<ul>
<li><a href=”/tagged/gen>General</a></li>
<li><a href=”/tagged/teen>Teen+</a></li>
<li><a href=”/tagged/mature>Mature</a></li>
<li><a href=”/tagged/explicit>Explicit</a></li>
<li><a href=”/tagged/unrated>Not Rated</a></li>
</ul>
</div></div>

<div class="box">
<div class="title">Word Count</div>
<div class=fic>
<ul>
<li><a href=”/tagged/less1k> - 1k</a></li>
<li><a href=”/tagged/1to5k>1k - 5k</a></li>
<li><a href=”/tagged/5to10k>5k - 10k</a></li>
<li><a href=”/tagged/10to20k>10k - 20k</a></li>
<li><a href=”/tagged/20to50k>20k - 50k</a></li>
<li><a href=”/tagged/50to100k>50k - 100k</a></li>
<li><a href=”/tagged/100kplus>100k + </a></li>
</ul>

</div></div>

<div class="box">
<div class="title">Status</div>
<div class=fic>
<ul>
<li><a href=”/tagged/complete>Complete</a></li>
<li><a href=”/tagged/wip>Work In Progress</a></li>
</ul>
</div></div>


<div class="box">
<div class="title">Character</div>
<div class=fic>
<ul>
<li><a href=”/tagged/quentin+coldwater>Quentin</a></li>
<li><a href=”/tagged/julia+wicker>Julia</a></li>
<li><a href=”/tagged/alice+quinn>Alice</a></li>
<li><a href=”/tagged/eliot+waugh>Eliot</a></li>
<li><a href=”/tagged/penny+adiyodi>Penny</a></li>
<li><a href=”/tagged/margo+hanson>Margo</a></li>
<li><a href=”/tagged/kady+orloff+diaz>Kady</a></li>
<li><a href=”/tagged/josh+hoberman>Josh</a></li>
<li><a href=”/tagged/fen>Fen</a></li>
<li><a href=”/tagged/henry+fogg>Fogg</a></li>
<li><a href=”/tagged/otherchar>Other Characters</a></li>

</ul>

</div></div>

<div class="box">
<div class="title">Type</div>
<div class=fic>
<ul>
<li><a href=”/tagged/canon>Canon</a></li>
<li><a href=”/tagged/pre+canon>Pre-Canon</a></li>
<li><a href=”/tagged/canon+div>Canon Divergence</a></li>
<li><a href=”/tagged/post+canon>Post-Canon</a></li>
<li><a href=”/tagged/au>Alternate Universe</a></li>
<li><a href=”/tagged/fluff>Fluff</a></li>
<li><a href=”/tagged/smut>Smut</a></li>
<li><a href=”/tagged/angst>Angst</a></li>
<li><a href=”/tagged/hurt+comfort>Hurt/Comfort</a></li>
</ul>


</div></div>

<div class="box">
<div class="title">Author</div>
<div class=fic>
<ul>
<li><a href="url">Name</a></li>
</ul>
</div></div>

</div>
<!-----------credit do not touch--------------->
<div class="credit">
      <a href="rupertthebunny"><img src=  https://image.ibb.co/ny04mx/rabbit.png style="height: 30px"></a>
</div>

</body>
</html>