tags page 02

<!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
------ you can have as many subheadings and tags as you want


------ COLORS:
------------- #FFD19C : TITLE BACKGROUND COLOR
------------- #FBFFD6 : TAGS CONTAINER COLOR
------------- #5A465C : TAGS SUBHEADING COLOR
------------- #AD5872 : TAGS COLOR
------------- #FF6987 : TAGS HOVER COLOR


------ HOW TO REPLACE COLORS:
------------- CTRL + F . Type in the hex code for the color. Replace the hex code with whatever color you want.


------ that's it i guess the code should be pretty simple
------ you can always ask me if you have any questions!
------>

<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 {
background-color:#cfcfcf; /*slider color*/
height:50px;
}

::-webkit-scrollbar-thumb:horizontal {
background-color:#cfcfcf; /*slider color*/
height:100px !important;
}

::-webkit-scrollbar {
height:10px;
width:7px;
background-color:#eeeeee; /*scrollbar bg color*/
}
body {
    background: #fff;
    font-size: 11px;
    color: #000000;
    font-family:helvetica;

}

a:link, a:active, a:visited {
color: #000; /* LINK COLOR */
text-decoration: none;
 -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

a:hover {
color: #000; /* LINK HOVER */
text-decoration: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

}


#credit {
    position:fixed;
    right:10px;
    bottom:10px;
}

#credit a {
    color:#999;
    font-weight:bold;
}

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

@font-face { font-family: "lobster"; src: url('http://themes.googleusercontent.com/static/fonts/lobster/v3/MWVf-Rwh4GLQVBEwbyI61Q.woff'); }

/* TITLE */

#titlebg {
    position:fixed;
    width:500px;
    height:40px;
    padding-top:10px;
    left:50%;
    top:100px;
    margin-left:-250px;
    text-align:Center;
    background:#ffd19c; /* --- TITLE BG COLOR ---*/
    font-family:"lobster";
    font-size:20px;
    z-index:2;

}


#titlebg::before {
    width: 0;
height: 0;
border-style: solid;
border-width: 0 0 50px 50px;
border-color: transparent transparent #ffd19c transparent;
/*-------- REPLACE #FFD19C WITH THE TITLE BG COLOR -----*/
content:"";
position:fixed;
top:50px;
left:50%;
margin-left:-250px;
}

#titlebg::after {
    width: 0;
height: 0;
border-style: solid;
border-width: 50px 50px 0 0;
border-color: #ffd19c transparent transparent transparent;
/*-------- REPLACE #FFD19C WITH THE TITLE BG COLOR -----*/
content:"";
position:fixed;
left:50%;
top:150px;
margin-left:200px;

}

/* HOMELINK */

#homel {
    position:fixed;
    left:50%;
    margin-left:310px;
    top:115px;

}

#homel a {
    color:#5a465c; /* HOMELINK COLOR */
}

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

#homel a::before {
    position:absolute;
    width:50px;
    border:1px solid #ffd19c; /* SAME AS TITLE BACKGROUND COLOR */
    content:"";
    margin-left:-60px;
    margin-top:8px;
}


/* TAGS CONTAINER */

#cont {
    position:absolute;
    width:380px;
    padding:160px 10px 100px 10px;
    left:50%;
    margin-left:-200px;
    background:#fbffb6; /* TAGS CONTAINER BACKGROUND COLOR */
    top:50px;
}

#cont::before {
    content:"";
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:50px;
    background:#fff; /* SAME AS BODY BACKGROUND COLOR */
}
#cont::after {
    content:"";
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    height:50px;
    background:#fff; /* SAME AS BODY BACKGROUND COLOR */
}

/* TAGS */

.tagtitle {
    font-family:"lobster";
    font-size:14px;
    text-align:Center;
    padding:2px 0px 2px 0px;
    color:#5a465c; /* TAG SUBHEADING COLOR */
    border-bottom:2px solid #5a465c;
}


.tags {
    margin-top:20px;
}

.tags a {
    display:block;
    margin:5px;
    color:#ad5872; /* TAGS COLOR */
    font-style:italic;
}

.tags a:hover {
    color:#ff6987; /* TAGS HOVER COLOR */
}


</style>
</head>
<body>
<div id="titlebg">

tags

</div>

<div id="homel">

<a href="/">home</a>
<!--- DO NOT ADD MORE LINKS --->
</div>

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

<div class="tagtitle">

subheading <!---- SUBHEADING 1 ---->


</div>

<div class="tags">

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

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

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

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

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

</div>


<div class="tagtitle">

subheading     <!----- SUBHEADING 2 ----->


</div>

<div class="tags">

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

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

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

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

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

</div>

<!-------- TO ADD MORE TAGS COPY THE CODE BELOW

<div class="tagtitle">

subheading


</div>

<div class="tags">

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


</div>


---------------------

YOU CAN ADD AS MANY TAGS AS YOU LIKE

----->

<!----------- PASTE THE CODE IN THE SPACE BELOW ----------------->


<!---------- PASTE THE CODE IN THE SPACE ABOVE ------------------>


</div>

<!--- DO NOT REMOVE CREDIT----->

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

</body>


</html>