Source Code for Holiday Greeting Card
original exercise from Eric Meyer on CSS
<!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">
<head>
<title>Happy Thanksgiving</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body {
text-align: center; /*IE5.x workaround to get the page to center align */
background-color: #CC6633;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
}
div#card {
width: 480px;
margin-left: auto;
margin-right: auto;
position:relative;
}
div#card img {
border: 2px solid black;
}
div#sentiment {
position: absolute;
top:0;
right:0;
width: 45%;
text-align: right;
color: white;
padding: 5px;
background: transparent url(halfscreen-black.gif) center repeat;
font-size: 18px;
font-style: normal;
font-weight: bold;
}
div#signature {
position: absolute;
top: 295px;
left: 0;
right: 0;
width: 100%;
font-weight: bold;
color: #FFFFFF;
}
div#credit {
color: orange;
text-align: right;
position: relative;
top: 0;
font-size: 9px;
}
a {
color: #FF9933;
}
a:hover {
text-decoration: none;
color: #CC3333;
background-color: #FF9966;
}
a:visited {
color: #CC3333;
}
</style>
<body>
<div id="card">
<img src="blog/photos/flowers/leaves480.jpg" width="480" height="320" id="image" />
<div id="sentiment">
<p>Wishing you and your family a Happy Thanksgiving</p>
<p>Rob and Robin </p>
</div>
<div id="signature">
</div>
<div id="credit">
Image: <cite>Change of Seasons</cite> by <a href="http://www.tinkertech.net/blog/">Robin</a></div>
</div>
</body>
</html>