myvalentine
<!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>My Valentine</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
* { border:0; margin:0; padding:0; }
a { color:#D10B0C; text-decoration:none; }
a:hover { color:#666; text-decoration:underline; }
.alignleft { float:left; margin:0 5px 0 0; }
.alignright { float:right; margin:0 0 0 5px; }
body { background:#fff; font:90% Verdana, "Trebuchet MS", sans-serif; color:#666; }
#header { background: #fff url('myvalentine-images/header2.jpg') no-repeat; height:200px; margin:0 auto; position:relative; width:760px; }
#header:after { clear:both; content:'.'; display:block; height:0; visibility:hidden; }
#header h1 { color:#666; font-size:2em; font-weight:normal; letter-spacing: 2px; position:absolute; top:10px; left:10px; }
#header ul { float: left; list-style:none; position:absolute; top:160px; left: 5px }
#header ul li { list-style:none; display: inline; }
#header ul li a { float: left; color:#EA2C30; display:inline; font-size:0.75em; font-weight:bold; padding:5px; width:auto; border-right: 1px dotted #EA2C30; }
#header ul li a:hover { background:#D10B0C; color:#eee; text-decoration:none; }
#header p { color:#fff; font-size:1.2em; position:absolute; left:10px; top:80px; font-style:italic; }
#header p span { padding-left: 70px; }
#container{ height:auto; margin:10px auto 0 auto; width:760px; background-color: #fff }
#container:after { clear:both; content:'.'; display:block; height:0; visibility:hidden; }
#left { float:left; width:530px; }
#left p { color:#555; line-height:20px; padding:10px; }
#left h1 { border-bottom:1px dotted #EA2C30; color:#444; font-size:1.3em; font-weight:normal; line-height:30px; padding:0 10px; margin-right: 20px; }
#right { float:left; width:200px; margin-left: 10px; }
#right h1 { border-bottom:1px dotted #EA2C30; color:#444; font-size:1.3em; font-weight:normal; line-height:30px; padding:0 10px; }
#right p { color:#555; display:block; font-size:90%; line-height:20px; margin: 0; padding:10px; }
#right p a.more { display:block; text-align:right; }
#right ul { margin:10px; }
#footer { margin:20px auto 5px auto; width:760px; background-color: #fff }
#footer:after { clear:both; content:'.'; display:block; height:0; visibility:hidden; }
#footer p { border-top: 1px dotted #EA2C30; color:#555; font-size:90%; line-height:20px; padding: 5px; text-align:center; font-size: 0.75em; }
</style>
</head>
<body>
<!-- begin header -->
<div id="header">
<h1>My Valentine</h1>
<p>For one is both <br />
<span>and both are one in love</span></p>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Link 2</a></li>
<li><a href="http://www.free-css.com/">Link 3</a></li>
<li><a href="http://www.free-css.com/">Link 4</a></li>
<li><a href="http://www.free-css.com/">Link 5</a></li>
</ul>
</div>
<!-- end header -->
<!-- start container -->
<div id="container">
<!-- begin left side -->
<div id="left">
<h1>My Love...</h1>
<p><img class="alignleft" src="myvalentine-images/heart.jpg" alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tempus tincidunt elit. Pellentesque vehicula accumsan orci. Aliquam consectetuer dapibus sem. Vivamus eu eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam iaculis metus at velit.</p>
<p><img class="alignright" src="myvalentine-images/heart.jpg" alt="" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tempus tincidunt elit. Pellentesque vehicula accumsan orci. Aliquam consectetuer dapibus sem. Vivamus eu eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam iaculis metus at velit.</p>
</div>
<!-- end left side -->
<!-- begin right side -->
<div id="right">
<h1>Be Mine...</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tempus tincidunt elit. Pellentesque vehicula accumsan orci. Aliquam consectetuer dapibus sem. Vivamus eu eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam iaculis metus at velit. <a class="more" href="http://www.free-css.com/">Read more »</a></p>
</div>
<!-- end right side -->
</div>
<!-- end container -->
<!-- begin footer -->
<div id="footer">
<p>XHTML template by <a href="http://karenblundell.com">Karen Blundell</a></p>
</div>
<!-- end footer -->
</body>
</html>
Related examples in the same category