theme pack #1: about 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: #ffcc97 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:#ffcc97; }
::-webkit-scrollbar-thumb:horizontal { background-color:#fff; }
::-webkit-scrollbar { width:11px; height:7px; border:5px solid #fff; background-color:#ffcc97; }

/* #ffcc97 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;
}

#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 #ffcc97; /*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;
}

.images {
    width:250px;
    height:240px;
    margin:35px 0px;
}

.images img {
    display:inline-block;
    margin:5px 10px 5px 0px;
    width:100px;
    height:100px;
}

.about {
    width:240px;
    height:140px;
    padding:5px;
    margin-top:-285px;
    margin-left:250px;
    overflow:auto;
}

.links {
    width:240px;
    height:100px;
    padding:5px;
    margin-left:250px;
    margin-top:10px;

}

.links a {
    display:inline-block;
    width:240px;
    padding:2px 0px;
    border-bottom:1px solid #ffcc97; /* LINKS BORDER COLOR */
    text-align:center;
    font-family:arial;
    text-transform:lowercase;
    font-weight:bold;
    color:#ffcc97; /* LINKS COLOR */
}

.links a:hover {
    background:#ffcc97; /* LINKS HOVER BACKGROUND COLOR */
    color:#fff; /* LINKS HOVER COLOR */
}


</style>
</head>

<body>

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


TITLE

</a>
</div>

<div class="images"> <!----------- IMAGES -------------->
<!---------- please only insert a maximum of 4 --------->

<img src="URL">

<img src="URL">

<img src="URL">

<img src="URL">

</div>

<!--------- DESCRIPTION: make it as long as you want ----------->

<div class="about">

WRITE YOUR DESCRIPTION HERE


</div>

<!------------ LINKS ---------------------->
<!----- again a maximum of 4 links -------->

<div class="links">

<a href="URL">   LINK   </a>

<a href="URL">   LINK   </a>

<a href="URL">   LINK   </a>

<a href="URL">   LINK   </a>

<!------- do not edit beyond this point ------>

</div>

</div>

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