Family Page 01


<!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>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<link href='http://fonts.googleapis.com/css?family=Codystar' rel='stylesheet' type='text/css'>

<meta name="color:links" content="#f8f8f8"/>
<meta name="color:Background" content="#ffffff"/>
<meta name="color:Border" content="#e8e8e8"/>
<meta name="color:Name" content="#d59db0"/>
<meta name="color:namehover" content="#d59db0"/>
<meta name="color:linkshover" content="#292727"/>
<meta name="color:Text" content="#9c8f93"/>
<meta name="color:title" content=""/>

<div style="font-size: 10px; letter-spacing: 1px; float: right; position: fixed; bottom: 10px; right: 10px; text-transform:lowercase;color:{color:text}"><a href="http://joshdevin.tumblr.com">©<i>j</i>oshdevin</a></div>


<style type="text/css">
#bite
#bite a{
display:block
}
#bite .death {
filter: alpha(opacity = 0);
opacity:0;-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;transition: all 0.5s ease-out;
}

#bite:hover .death {
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
filter: alpha(opacity = 100);
filter: alpha(opacity = 100);
opacity:100;
}

body
{font-family:calibri;
font-size:9px;
background-color:{color:background};
}

a
{text-decoration:none;
-webkit-transition: opacity 0.6s linear;-webkit-transition: all 0.6s ease-in-out;-moz-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;
opacity:1;
color:{color:links};
}

a:hover
{text-decoration:none;
opacity:1;
color:{color:linkshover};}

#title {
text-align:center;
font-family: 'Codystar', cursive;
color:{color:title};
font-size:30px;
margin-top:10px;
letter-spacing:1px;
padding:10px;
}

#links {
text-align:center;
color:{color:links};
font-size:11px;
padding:5px;
margin-left:20px;
}

#links a:hover {
opacity:0.6;
color:{color:linkshover};
}

#line
{width:150px;
float:left;
margin-left:15;
margin-right:15px;
margin-bottom:5px;}

#icon {
margin-left:30px;
padding:10px;
padding-top:30px;
width:90px;
height:90px;
overflow:hidden;
}


#icon{
-webkit-transition: opacity 0.5s linear;
opacity: 0.75;
}

#icon:hover{
-webkit-transition: opacity 0.5s linear;
opacity: 1;
}


#icon{
-moz-transition: opacity 0.5s linear;
opacity: 0.75;
}

#icon:hover{
-moz-transition: opacity 0.5s linear;
opacity: 1;
}


#name {
margin-left:30px;
width:110px;
padding-top:2px;
color:{color:Name};
padding-bottom:2px;
border-top:1px solid {color:border};
border-bottom:1px solid {color:border};
font-style:italic;
font-size:12px;
text-align:center;
}

#name a:hover {
color:{color:namehover};
}


#description {
margin-left:30px;
width:112px;
font-size:9px;
color:{color:text};
text-align:center;
padding-top:3px;
font-family:arial;
}


</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td>
<div id="title">{title}</div>
<hr color="#d6d5d5" size=".5" width="85%">
<div id="links">
<a href="http://">back</a> •
<a href="http://">ask</a> •
<a href="http://">info</a>
</div>
</td></tr>

<tr><td>
<div id="line">
<div id="bite">
<div id="icon"><img width="90px" height="90px"src="http://static.tumblr.com/65f6853660ac39f25d4cadfda363d273/4yaetvs/y8Wmfr16e/tumblr_static_screen_shot_2012-12-28_at_11.14.53_am.png"/></div>
<a href="http://joshdevin.tumblr.com/"><div id="name">Katie</div></a>
<div class="death">
<div id="description">Hi my name is Katie and I like html</div></div>
</div></div>


<div id="line">
<div id="bite">
<div id="icon"><img width="90px" height="90px" src="URL"/></div>
<a href="http://"><div id="name">Member</div></a>
<div class="death">
<div id="description">DESCRIPTION HERE</div></div></div></div>


<div id="line">
<div id="bite">
<div id="icon"><img width="90px" height="90px" src="URL"/></div>
<a href="http://"><div id="name">Member</div></a>
<div class="death">
<div id="description">DESCRIPTION HERE</div></div>
</div></div>

<div id="line">
<div id="bite">
<div id="icon"><img width="90px" height="90px" src="URL"/></div>
<a href="http://"><div id="name">Member</div></a>
<div class="death">
<div id="description">DESCRIPTION HERE</div></div>
</div></div>

</td></tr>
<tr><td>

<div id="line">
<div id="bite">
<div id="icon"><img width="90px" height="90px" src="URL"/></div>
<a href="http://"><div id="name">Member</div></a>
<div class="death">
<div id="description">DESCRIPTION HERE</div></div>
</div></div>

<div id="line">
<div id="bite">
<div id="icon"><img width="90px" height="90px" src="URL"/></div>
<a href="http://"><div id="name">Member</div></a>
<div class="death">
<div id="description">DESCRIPTION HERE</div></div>
</div></div>

</td></tr>
</table>


</body>
</html>