theme pack #1: tags page

<!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'm nice
------ COLOURS:
I would recommend going with a single colour but of course it's up to you!
If you're going for a single colour just ctrl+F: #67c7bf and replace with whatever colour you want
I've also marked all the places where you can change colours in the code. Please don't edit any part of the code that I haven't marked for editing unless you know what you're doing
------ Hope you like it!
------>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="altertnate" type="application/rss+xml" href="{RSS}">
<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 { height:12px; border:2px solid #fff; background-color:#67c7bf; }
::-webkit-scrollbar-thumb:horizontal { background-color:#fff; }
::-webkit-scrollbar { width:11px; height:7px; border:5px solid #fff; background-color:#67c7bf; }

/* #67c7bf in the three lines of code above is the scrollbar colour */


body {
    background: #fff; /* BACKGROUND COLOR */
    color: #000; /* TEXT COLOR */
    font-size: 10px;
    font-family:calibri;
    overflow:hidden;

}

a:link, a:visited, a:active {
    font-weight:none;
    text-decoration:none;
    color:#5d2e46; /* LINK COLOR (ALSO TITLE COLOR) */
    transition:0.6s;
}

a:hover {
    color:#000; /* LINK HOVER COLOR */
}

#credit {
    position:fixed;
    z-index:100;
    bottom:10px;
    right:20px;
}

#credit a {
    background:#eee;
    color:#000;
    font-family:cambria;
    font-size:10px;
    padding:2px;
}

#credit a:hover {
    background:#000;
    color:#eee;
}


#cont {
    border-top:50px solid #67c7bf; /*TOP BORDER COLOR */
    width:500px;
    height:300px;
    left:50%;
    margin-left:-250px;
    top:50%;
    margin-top:-180px;
    position:fixed;
}

#title {
    position:fixed;
    height:40px;
    top:50%;
    left:0px;
    width:100%;
    margin-top:-215px;
    font-size:40px;
    font-family:arial;
    text-transform:lowercase;
    font-weight:bold;
    font-style:italic;
    text-align:Center;
}


.boxes {
    width:500px;
    height:300px;
    overflow:auto;
}

.box {
    width:140px;
    margin:5px;
    height:190px;
    padding:5px;
    display:inline-block;
    overflow:auto;
}

.heading {
    color:#000; /* TAG HEADING COLOR */
    font-family:arial;
    border-bottom:1px solid #67c7bf; /* TAG HEADING BORDER COLOR */
    font-weight:bold;
    font-size:12px;
    margin-bottom:1px;

}

.heading::first-letter {
    color:#67c7bf; /* TAG HEADING FIRST LETTER COLOR */
    font-size:14px;
}


.box a {
    width:100%;
    display:inline-block;
}


/* EVEN NUMBERED BOXES OF TAGS */

.box:nth-of-type(even) a, .box:nth-of-type(odd) a:hover {
    background:#67c7bf; /* TAG BACKGROUND COLOR */
    border-bottom:1px solid #fff;
    padding:2px 0px;
    text-align:center;
    font-weight:bold;
    color:#fff; /* TAG COLOR */
}

/* ODD NUMBERED BOXES OF TAGS */

.box:nth-of-type(odd) a, .box:nth-of-type(even) a:hover {
    border-bottom:1px solid #67c7bf; /* TAG BORDER COLOR */
    text-align:center;
    padding:2px 0px;
    color:#000; /* TAG COLOR */
    background:#fff;
    font-weight:normal;
}


</style>
</head>

<body>
<div id="cont">
<div id="title">
<a href="/">

TITLE

</a>
</div>

<!--------------------- TAGS ---------------------->
<div class="boxes">

<!----------------- FIRST TAG BOX ------------------>
<div class="box">
<div class="heading">
heading
</div>
<!------- tags ------->

<a href="tag url"> tag </a>

<a href="tag url"> tag </a>

<a href="tag url"> tag </a>

</div>
<!------------ end of first tag box --------->

<!---------------------sample code for more tag boxes
-----------------------------------------------begin:

<div class="box">

<div class="heading">

heading

</div>

<a href="tag url">

tag

</a>

</div>

end:----------------------------------------------->


<!------------ do not edit beyond this point
please do not remove the credit :)--------->

</div>
</div>


<div id="credit">
<a href="http://jasnahdavar.tumblr.com">JD.</a>
</div>
</body>
</html>