<!DOCTYPE html>
<html>
<head>
<title>Happy Birthday Dad!</title>
<link href="http://fonts.googleapis.com/css?family=Lobster|Yanone+Kaffeesatz|Reenie+Beanie|Josefin+Sans+Std+Light"
rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Monda' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
padding-left: 11em;
font-family: "Yanone Kaffeesatz", georgia, "Times New Roman",
Times, serif;
color: maroon;
background-color: #ddd; }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em; }
ul.navbar li:hover {
opacity: 1;
}
h1 {
font-family: Lobster, Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif;
}
h1 {
border-bottom: thin dotted;
font-size: 32pt;
text-shadow: 2px 2px #abb1ab}
ul.navbar li {
background: #f2f2f2;
margin: 0.2em 0;
padding: 0.3em;
border-right: 1em solid maroon;
opacity: 0.8; }
ul.navbar a {
text-decoration: none;
color: #848608; }
ul.navbar a:hover {
color: #222; }
ul.navbar {
font-family: "Josefin Sans Std Light" }
ul.navbar {
font-size: 16pt }
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
font-family: 'Monda';
font-size:13pt;}
i {
}
</style>
</head>
<body>
<div style="position:absolute;top:25%;left:31%"><ul class="navbar">
<li><a href="http://www.yahoo.ca">Yahoo!</a>
<li><a href="HisPhotoSite.catz">HisPhotoSite</a>
<li><a href="http://www.facebook.com">Facebook</a>
<li><a href="http://www.betterphoto.com">Betterphoto</a>
</ul></div>
<div style="position:absolute;top:21%;left:45%;width:311px;"><h1>Happy Birthday!</h1>
</div>
<div style="position:absolute;top:32%;left:45%;font-size:13pt;">You are xyz years, xyz months, xyz days, and xyz minutes old.</div>
<div style="position:absolute;top:87%;left:92%;">
<address>his bday, 2012<br>
By me.</address>
</div>
</body>
</html>