localize
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Localize</title>
<style type='text/css'>
body {
margin:0; padding:0; font-family:verdana, arial, sans-serif; font-size:80%; color:#666666; text-align:center;
background-color:#DDDDDD;}
p {
margin:0.2em 0 1.2em 0; padding:0.3em;}
h1 {
padding:0; margin:0;font-size:250%; font-weight:normal; font-style:italic;
color:#8CD749; font-family:"Trebuchet MS", verdana, arial, sans-serif;}
h2 {
background-color:#DDDDDD; color:#3B4471; font-size:100%; font-weight:normal; margin:0.2em; padding:0;
font-style:italic; font-family:"Trebuchet MS", verdana, arial, sans-serif;}
div {
margin:0; padding:0; display:block;}
a:link, a:visited {
color:#8CD749; text-decoration:underline;}
a:hover {
color:#3B4471; text-decoration:none;}
a:active {
color:#8CD749; text-decoration:underline;}
.container {
background-color:#FFFFFF; margin:0 auto 0 auto; padding:0; width:65%;}
.titleblock {
padding:2em; margin:0; text-align:left;
background-image:url(leaf.jpg); background-repeat:no-repeat; background-position:right center;}
.titleblock p {
text-indent:4em; color:#3B4471;}
ul.navbar {
list-style-type:none; float:left; display:block; width:100%; line-height:1.5em;
clear:both; margin:0; padding:0; background-color:#999999;}
ul.navbar li {
display:inline;}
a.nav:link, a.nav:visited {
display:block; float:left; width:24.5%; padding:1.2em 0 1.2em 0; margin:0;
text-decoration:none; background-color:#999999; color:#FFFFFF;}
a.nav:hover {
display:block; float:left; width:24.5%; padding:1.2em 0 1.2em 0; margin:0;
text-decoration:none; background-color:#8CD749; color:#FFFFFF;}
a.nav:active {
display:block; float:left; width:24.5%; padding:1.2em 0 1.2em 0; margin:0;
text-decoration:none; background-color:#999999; color:#FFFFFF;}
.rightcontainer {
float:right; clear:both; width:13em; margin:1em 0 0 0; padding:0;}
.rightbox {
margin:0.5em; padding:0.3em; border:1px solid #999999; text-align:center;}
.rightcontainer h2 {
text-align:left; padding:0 0 0 1.5em;}
.linkbox a {display:block;}
.content {
clear:left; text-align:left; margin:1.2em 13.5em 0 0; padding:1em 1ex 1em 1.5ex;}
.content h2 {text-indent:3em;}
.footer {
color:#999999; font-size:75%; margin:2.5em 0.2em 0.5em 0.5em; padding:0.8em;
border-top:1px solid #999999; text-align:left; clear:both;}
.footer .right {
float:right; clear:right; text-align:right;}
.footer p {margin:0;}
</style>
</head>
<body>
<div class="container">
<div class="titleblock">
<h1>Localize</h1>
<p>“Insert some random text here.”</p>
</div>
<div>
<ul class="navbar">
<li><a href="http://www.free-css.com/" class="nav">Home</a></li>
<li><a href="http://www.free-css.com/" class="nav">About Us</a></li>
<li><a href="http://www.free-css.com/" class="nav">Products</a></li>
<li><a href="http://www.free-css.com/" class="nav">Contact</a></li>
</ul>
</div>
<div class="rightcontainer">
<div class="rightbox">
<h2>News</h2>
<p>This morning a man in New Zealand got out of bed and had breakfast. Find out more <a href="http://www.free-css.com/">here</a>.</p>
</div>
<div class="rightbox linkbox">
<h2>Links</h2>
<a href="http://www.free-css.com/">Google</a> <a href="http://www.free-css.com/">OSWD</a> <a href="http://www.free-css.com/">WPDFD</a> <a href="http://www.free-css.com/">stock.xchng</a> <a href="http://www.free-css.com/">THG</a> <a href="http://www.free-css.com/">How Stuff Works</a> </div>
</div>
<div class="content">
<h2>Welcome to Localize</h2>
<p>This web page is validated xhtml strict and css. No tables are used in this design. I found inspiration for this design and also a lot of help from the designs of haran.</p>
<h2>Some Filler Text</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla ac elit ut erat tempor vehicula. Duis enim eros, gravida eu, pretium ut, dapibus et, enim. Sed ac tellus. Nulla vel arcu. Proin ac sapien et neque pellentesque mollis. Praesent ut magna sed tortor luctus pretium. Proin a est gravida dui pellentesque tincidunt. Nunc at ipsum. Suspendisse elit. Fusce sit amet lectus. Quisque et neque vitae odio sagittis tincidunt.</p>
<h2>More Filler Text</h2>
<p>Morbi elit. Integer in est. In hac habitasse platea dictumst. Ut bibendum odio eget velit. Aliquam sed nulla vel quam nonummy suscipit. Etiam fringilla, nulla quis fermentum pretium, neque risus convallis odio, id convallis magna diam ac nisl.</p>
</div>
<div class="footer">
<div class="right">
<p>© 2005 Whatsisname Thingymajig</p>
<p><a href="http://validator.w3.org/check/referer">Validate XHTML 1.0 Strict</a></p>
</div>
<p>Email <a href="http://www.free-css.com/">Webmaster</a></p>
<p>Photo Credit: Dimiter Tzankov, stock.xchng</p>
</div>
</div>
</body>
</html>
Related examples in the same category