layoftheland
<!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>Lay of the Land</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type='text/css'>
/* CSS Document */
/* LAYOUT */
body{
background:url(layoftheland-img/bg.gif) top left repeat #000;
font:.8em Arial, Helvetica, sans-serif;
letter-spacing:.07em;
color:#D2D2BA;
}
#container{
width:800px;
\width:8200px;
w\idth:800px;
margin-top:-8px;
margin-left:auto;
margin-right:auto;
padding:0;
border-left:8px solid #1F1F1B;
border-right:8px solid #1F1F1B;
background-color:#292722;
}
#banner{
padding:0 5px 0 0;
height:220px;
background:url(layoftheland-img/trees.jpg) bottom left repeat-x #D2D2BA;
}
#content{
padding:20px;
width:540px;
}
#sidebar{
float:right;
width:200px;
margin-right:10px;
margin-left:-10px;
padding:10px;
}
#footer{
clear:both;
padding:5px;
height:50px;
background-color:#1F1F1B;
}
/* MENU BAR */
#menubar{
list-style-type:none;
height:1.6em;
font-family:"Trebuchet MS", sans-serif;
text-transform:uppercase;
font-weight:900;
font-size:1.4em;
letter-spacing:-.05em;
margin:0;
padding:0;
}
#menubar a{
color:#292722;
padding:6px 10px;
display:block;
}
#menubar a:hover{
background:url(layoftheland-img/zig.gif) bottom left repeat-x #292722;
color:#D2D2BA;
}
#menubar li{
float:right;
list-style-image:none;
}
/* BASIC STYLES */
p{
line-height:1.5em;
}
h1,h2,h3,h4,h5,h6{
color:#F50;
font-family:"Trebuchet MS", sans-serif;
text-transform:uppercase;
font-weight:100;
letter-spacing:.07em;
margin:0;
}
a{
text-decoration:none;
padding:0 2px;
font-weight:900;
color:#F50;
}
a:hover{
background-color:#F50;
color:#292722;
}
img.float_left{
float:left;
margin:4px 12px 4px 0;
}
img.float_right{
float:right;
margin:4px 0 4px 4px;
}
a img{
border:none;
}
b,strong{
font-weight:bolder;
font-size:1.1em;
}
i,em{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:1.1em;
}
blockquote{
border-left:1px solid #D2D2BA;
background-color:#1F1F1B;
padding:1px 4px 1px 12px;
}
ul,ol{
line-height:1.8em;
}
ul.arrow li{
background:url(layoftheland-img/bullet.gif) left center no-repeat transparent;
list-style-type:none;
list-style-position:outside;
padding-left:20px;
}
ol li{
list-style-position:inside;
}
/* BLOG STYLES */
.blogitem{
border-top:2px solid #D2D2BA;
padding-top:3px;
}
p.authdate,p.blogbottom{
background-color:#1F1F1B;
font-family:"Arial Black";
text-transform:uppercase;
padding:2px 4px;
}
.authdate a,.blogbottom a{
padding:0;
font-weight:normal;
color:#D2D2BA;
}
.authdate a:hover,.blogbottom a:hover,#footer p a:hover,.arch_cat a:hover{
color:#F50;
background-color:transparent;
}
.tags{
font-family:Arial, Helvetica, sans-serif;
text-transform:none;
font-size:.8em;
}
p.authdate{
margin-top:2px;
}
/* SIDE BAR STYLES */
#sidebar h3{
border-bottom:1px solid #D2D2BA;
margin:10px 0 0 0;
}
#sidebar p{
background-color:#1F1F1B;
padding:8px 8px 8px 16px;
margin-top:0;
line-height:1.3em;
}
#sidebar fieldset{
padding:0;
margin:0;
border:none;
}
#sidebar input.textfield{
margin:8px 0;
padding:4px;
border:none;
width:192px;
background-color:#D2D2BA;
color:#292722;
font-weight:900;
}
#sidebar input.submit{
margin:0;
padding:4px;
border:none;
float:right;
background-color:#1F1F1B;
color:#D2D2BA;
font-weight:900;
letter-spacing:.05em;
}
#sidebar input.submit:hover,.slash{
color:#F50;
}
.arch_cat{
background-color:#1F1F1B;
padding:8px 0 8px 16px;
margin-top:0;
width:184px;
list-style:none;
line-height:1.6em;
color:#F50;
}
.arch_cat a,#footer a{
color:#D2D2BA;
}
.linkbox a{
font-weight:normal;
display:block;
}
.linkbox a:hover,#footer a:hover{
color:#D2D2BA;
background-color:#292722;
}
/* FOOTER STYLES */
#footer p{
margin-top:1.5em;
text-align:center;
}
</style>
<!-- IE CSS HACKS -->
<!--[if IE]><style>#container{margin-top:-15px;}.arch_cat{margin-left:0}</style><![endif]-->
<!--[if lte IE 6]><style>#container{position:relative;top:0}#sidebar{margin-right:0}#sidebar h3.ie6{margin-bottom:-12px}#sidebar input.textfield{margin-top:0}.linkbox li{line-height:.8em}#sidebar a:hover input{color:#F40;}</style><![endif]-->
</head>
<body>
<div id="container">
<div id="banner">
<ul id="menubar">
<li><a href="http://www.free-css.com/">contact us</a></li>
<li><a href="http://www.free-css.com/">downloads</a></li>
<li><a href="http://www.free-css.com/">links</a></li>
<li><a href="http://www.free-css.com/">about us</a></li>
<li><a href="http://www.free-css.com/">Home</a></li>
</ul>
</div>
<div id="sidebar">
<h3 class="ie6">search</h3>
<form action="#" method="post">
<fieldset>
<input type="text" name="string" size="10" class="textfield" />
<br />
<!--[if lte IE 6]> <a href="http://www.free-css.com/"><![endif]-->
<input type="submit" name="Submit" value="FIND" class="submit"/>
<!--[if lte IE 6]></a><![endif]-->
</fieldset>
</form>
<h3>about</h3>
<p>I created this Design to be used as a blog and to be integrated with a blogging software like WordPress. Hope you enjoy this template as much as I enjoyed creating it.</p>
<h3>archives</h3>
<ul class="arch_cat">
<li><a href="http://www.free-css.com/">November 2006</a></li>
<li><a href="http://www.free-css.com/">October 2006</a></li>
<li><a href="http://www.free-css.com/">September 2006</a></li>
<li><a href="http://www.free-css.com/">More...</a></li>
</ul>
<h3>categories</h3>
<ul class="arch_cat">
<li><a href="http://www.free-css.com/">Uncatagorized</a> (24)</li>
<li><a href="http://www.free-css.com/">Templates</a> (10)</li>
<li><a href="http://www.free-css.com/">Design</a> (15)</li>
<li><a href="http://www.free-css.com/">Technology</a> (17)</li>
<li><a href="http://www.free-css.com/">Personal</a> (4)</li>
<li><a href="http://www.free-css.com/">Tutorials</a> (8)</li>
</ul>
<h3>links</h3>
<ul class="arch_cat linkbox">
<li><a href="http://www.free-css.com/">Open Web Design</a></li>
<li><a href="http://www.free-css.com/">WordPress</a></li>
<li><a href="http://www.free-css.com/">Photoshop Star</a></li>
<li><a href="http://www.free-css.com/">Stu's CSS Play</a></li>
<li><a href="http://www.free-css.com/">Blue Vertigo</a></li>
<li><a href="http://www.free-css.com/">Squidfingers</a></li>
<li><a href="http://www.free-css.com/">More...</a> </li>
</ul>
</div>
<div id="content">
<h1>lay of the land</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut sollicitudin ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="blogitem">
<h2>what's the good word, big bird?</h2>
<p class="authdate">by <a href="http://www.free-css.com/">john</a> <span class="slash">//</span> November 13, 2006 <span class="slash">//</span> 2:34 am</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent facilisis, magna a sollicitudin pellentesque, odio lorem egestas tortor, a mattis mauris lacus vitae purus. Nullam erat. Etiam nisi. Donec pulvinar pellentesque nisi. Integer dapibus pulvinar leo. Aenean adipiscing scelerisque justo. Aliquam erat volutpat. Donec adipiscing dui eget risus. Nullam non nisi vitae sem pulvinar vestibulum. Ut non sapien. Duis vitae nisi.</p>
<p>Volutpat at varius sed sollicitudin et, arcu. Vivamus viverra. Nullam turpis. Vestibulum sed etiam. Lorem ipsum sit amet dolore. Nulla facilisi. Sed tortor. Aenean felis. Quisque eros. Cras lobortis commodo metus. Vestibulum vel purus. In eget odio in sapien adipiscing blandit. Quisque augue tortor, facilisis sit amet, aliquam, suscipit vitae, cursus sed, arcu lorem ipsum dolor sit amet. Morbi ultrices magna et neque. In hac habitasse platea dictumst. Quisque vehicula ultricies neque.</p>
<p class="blogbottom">tags: <span class="tags"> <a href="http://www.free-css.com/">Templates</a>, <a href="http://www.free-css.com/">Design</a>, <a href="http://www.free-css.com/">Personal</a></span> <span class="slash">//</span> <a href="http://www.free-css.com/">permalink</a> <span class="slash">//</span> <a href="http://www.free-css.com/">12 comments</a></p>
</div>
<div class="blogitem">
<h2>let's test some style elements</h2>
<p class="authdate">by <a href="http://www.free-css.com/">michael</a> <span class="slash">//</span> November 12, 2006 <span class="slash">//</span> 6:55 pm</p>
<p><img src="layoftheland-img/butterfly.jpg" alt="Butterfly" class="float_left" />To the left you will see an image styled with the "float_left" class. It applies the correct margins as well. If you haven't already guessed it, there is a "float_right" class as well. Next, we can show off what a link looks like: <a href="http://www.free-css.com/">click here</a>. That was fun. Why don't you check out this <b>bold text</b>? You can use the 'strong' or 'b' tag; they are both styled exactly the same. This <i>italicized text</i> looks swell, don't you think?</p>
<p>Blockquotes are useful for displaying a quote that runs more than two lines in a normal paragraph. Here is an example of what a blockquote looks like in this template:</p>
<blockquote>
<p>Vestibulum sed etiam. Lorem ipsum sit amet dolore. Nulla facilisi. Sed tortor. Aenean felis. Quisque eros. Cras lobortis commodo metus. Vestibulum vel purus. In eget odio in sapien adipiscing blandit. Quisque augue tortor, facilisis sit amet.</p>
</blockquote>
<p>Here are some sample lists:</p>
<ul class="arrow">
<li>Internet Explorer 6</li>
<li>Internet Explorer 7</li>
<li>Safari 2.0.4</li>
<li>Firefox 1.5-2.0</li>
<li>Opera 9.0.2</li>
</ul>
<ol>
<li>Internet Explorer 6</li>
<li>Internet Explorer 7</li>
<li>Safari 2.0.4</li>
<li>Firefox 1.5-2.0</li>
<li>Opera 9.0.2</li>
</ol>
<p class="blogbottom">tags: <span class="tags"> <a href="http://www.free-css.com/">Templates</a>, <a href="http://www.free-css.com/">Design</a>, <a href="http://www.free-css.com/">Personal</a></span> <span class="slash">//</span> <a href="http://www.free-css.com/">permalink</a> <span class="slash">//</span> <a href="http://www.free-css.com/">35 comments</a></p>
</div>
</div>
<div id="footer">
<p>© 2006 www.yoursite.com <span class="slash">// </span> Design by <a href="http://20pirates.com">20 Pirates</a> <span class="slash">// </span> Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> <span class="slash">// </span> Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS2</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category