page pack - tags

<head>
<title>TAGS</title>
<!--- change the title of the page here --->

<link rel="shortcut icon" href="{Favicon}">
<!---

ᴛᴀɢs ᴘᴀɢᴇ ᴛʜᴇᴍᴇ ʙʏ ʜᴀʀᴅᴢɪᴀᴍ
    please don't take off the credit it's really small!!!!


                    ╭━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮ ╭━━┳╮╱╱╭╮
                    ┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃ ┃╭╮┃╰╮╭╯┃
                    ╰╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮ ┃╰╯╰╮╰╯╭╯
                    ╱╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃ ┃╭━╮┣╮╭╯
                    ╱╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃ ┃╰━╯┃┃┃
                    ╱╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯ ╰━━━╯╰╯
                    ╭╮╱╭┳━━━┳━━━┳━━━┳━━━━┳━━┳━━━┳━╮╭━╮
                    ┃┃╱┃┃╭━╮┃╭━╮┣╮╭╮┣━━╮━┣┫┣┫╭━╮┃┃╰╯┃┃
                    ┃╰━╯┃┃╱┃┃╰━╯┃┃┃┃┃╱╭╯╭╯┃┃┃┃╱┃┃╭╮╭╮┃
                    ┃╭━╮┃╰━╯┃╭╮╭╯┃┃┃┃╭╯╭╯╱┃┃┃╰━╯┃┃┃┃┃┃
                    ┃┃╱┃┃╭━╮┃┃┃╰┳╯╰╯┣╯━╰━┳┫┣┫╭━╮┃┃┃┃┃┃
                    ╰╯╱╰┻╯╱╰┻╯╰━┻━━━┻━━━━┻━━┻╯╱╰┻╯╰╯╰╯


               hardziam.tumblr.com // themesbyzsu.tumblr.com


--->
<script src="//use.edgefonts.net/dawning-of-a-new-day;qwigley;alex-brush.js"></script>

<style type="text/css">

/* ----- HERE YOU EDIT ALL THE COLORS AND PUT IN AN IMAGE ------ */

.left {
/* ------------   SIDE IMAGE HERE  ----------- */
    background-image:url(http://25.media.tumblr.com/f945b63a3904eded6791bafe00bc2eb9/tumblr_mwbn7al2OB1sqenw7o1_500.png);
/* ------------   SIDE IMAGE HERE  -----------*/
}

/* ------- HERE YOU CHANGE THE COLORS ----- */

.links a{
    border-right:10px solid #fff;
    color:black;}

.links a:hover {
    border-right:20px solid #bbb;
    color:#bbb;}

#title {
    color:black;}

.subtitle {
    background:#000;
    color:white;}

.tagbox a{
    color:black;
    background:#eee;}

.tagbox a:hover{
    color:black;
    background:#bbb;}

/* ------ END OF CUSTOMISATION ----- */


body {
        background: #fff;
        margin-left:0px;
        padding: 0;
        position:fixed;
        }
 a {
    text-decoration:none;
    outline:none;
    color:gray; /*change link colors here */
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

a:hover {
    color:#eee; /*change link hover color */
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}


#mainContainer {
    margin-top:-10px;
    width:900px;
    height:100%;
}


.links {
    margin-top:10px;
    text-align:right;
}

.links a{
    font-family:century gothic;
    font-size:10px;
    text-transform:uppercase;
    padding-right:5px;
    text-decoration:none;
    display:block;
    margin-bottom:5px;
    -moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}

.links a:hover{
    padding-right:15px;
    -moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}

.container {
    width:640px;
    margin-left:400px;
    z-index:20000;
    position:fixed;
    background:white;
}

.left {
    height:700px;
    width:400px;
    z-index:99;
    background-size:cover;
    background-position: center;
    position:fixed;
    float:left;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
}

#title {
    font-family:century gothic;
    text-align:left;
    background:white;
    text-transform:uppercase;
    position:fixed;
    width:500px;
    padding-left:20px;
    font-size:40px;
    letter-spacing:10px;
}

#mainstuff {
    height:550px;
    overflow:auto;
    background:#fff;
    position:absolute;
    margin-top:50px;
    padding:10px;
    color:black;
    width:640px;
}

.subtitle {
    text-transform:lowercase;
    position:absolute;
    font-family: alex-brush, cursive;
    font-style:italic;
    height:29px;
    font-size:25px;
    border:1px solid black;
    letter-spacing:1px;
    width:270px;
    margin-left:-10px;
}

.tagbox {
    width:250px;
    border:1px solid #eee;
    background:white;
    float:left;
    text-align:center;
    margin-bottom:20px;
    margin-left:40px;
}

.tagbox a{
    display:block;
    margin:5px;
    padding:3px;
    font-family:calibri;
    text-transform:uppercase;
    font-size:11px;
}

#leftcolumn {
position: absolute;
margin-left:0px;
margin-top:0px;
width:320px;
text-align: left;
}

#rightcolumn {
position: absolute;
margin-left:320px;
margin-top:0px;
width:320px;
text-align: left;
}

#tags {
    margin-top:30px;
    overflow-y:auto;
    overflow-x:hidden;
}


#credit {
position:fixed;
right:0px;
bottom:0px;
padding:4px;
width:15px;
text-transform:none;
font-family: helvetica;
font-weight:none;
letter-spacing:1px;
margin-bottom:3px;
font-size:9px;
margin-right:3px;
border:1px solid;
opacity:0.7;
border-color:#bbb;
background: #fff;
-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
}

#credit:hover {
opacity:1;
width:15px;
background:black;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}

</style>


</head>

<body>

<div id="mainContainer">
<div class="left">
    <div class="links">
        <a href="/">home</a>
        <a href="/ask">message</a>
        <a href="/">link</a>
        <a href="/">link</a>
        <a href="link">link</a>

        </div>
</div>
<div class="container">
<div id="title">tags.</div>

<div id="mainstuff">
<div id="leftcolumn">
		<!--- the first column starts here, copy this whole thing below to make a new box. --->


<div class="tagbox">
    <div class="subtitle">TITLE HERE</div>
        <div id="tags">
            <a href="/">tag</a>
            <a href="/">tag</a>
        </div>
    </div>


				<!--- first column ends here, DO NOT TOUCH THIS --->
							</div>
						<div id="rightcolumn">
					<!--- the second column starts here --->

<div class="tagbox">
    <div class="subtitle">TITLE HERE</div>
        <div id="tags">
            <a href="/">tag</a>
            <a href="/">tag</a>
        </div>
    </div>


</div>
</div>
</div>

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