sand 1
<!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" xml:lang="en" >
<head>
<title>Sand</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
background: #39322B;
margin: 0 0 50px 0; padding: 0;
}
/* ___________________________________________________________________ */
/* This holds and centers the lot. */
#holder {
position: absolute;
left: 50%; top: 0;
width: 600px; height: auto;
margin-left: -300px;
padding: 0;
background: #eed;
text-align: center;
border-left: 2px #fff solid; border-right: 2px #fff solid;
}
/* ___________________________________________________________________ */
/* This holds everything inside the header. */
#header {
position: relative;
left: 0; top: 0;
width: 90%; height: auto;
padding: 5%;
background: #eed;
border-bottom: 2px #fff solid;
}
#header #wrapper{
width: auto;
height: auto;
}
/* This styles the above (big) text. */
#header #one {
font: 3em "Trebuchet MS", Trebuchet, serif;
color: #fff;
display: block;
clear: both;
}
/* This styles the below (small) text. */
#header #two {
font: italic 1em georgia, serif;
color: #998;
display: block;
}
/* ___________________________________________________________________ */
/* This holds the menu - below the header. */
#menu {
position: relative;
left: 0; top: 0;
width: 98%; height: auto;
padding: 3px 1% 4px 1%;
border-top: 2px #eed solid;
background: #D3D2B8;
font: bold .8em/100% arial, sans-serif;
text-align: left;
z-index: 0;
}
#menu a{
color: #645846;
text-decoration: none;
margin: 0 5px 0 5px;
}
#menu a:hover{
color: #fff;
}
/* ___________________________________________________________________ */
/* This is the box on the left - below the menu. */
#content {
float: left;
padding: 25px 12px 12px 12px;
width: 70%; height: auto;
background: #fff;
text-align: left;
border-left: 2px #eed solid; border-top: 2px #eed solid;
}
#content h1 {
margin: 0 0 10px 0;
padding: 0;
font: 1.6em garamond, serif;
color: #77773C;
border-bottom: 1px #77773C dashed;
}
#content p {
float: left;
width: 94%;
padding: 0 0 0 3%;
margin: 0 0 20px 0;
font: .8em/150% arial, sans-serif;
color: #222;
text-align: justify;
}
#content p.indent{
text-indent: 30px;
}
#content p a{
color: #77773C;
border: none;
font-weight: bold;
text-decoration: none;
}
#content p a:hover{
color: #aaa;
text-decoration: none;
}
/* ___________________________________________________________________ */
/* This is the box on the right - below the menu. */
#right_pane {
float: left;
margin: 0;
padding: 5px 4px 5px 4px;
width: 24%; height: auto;
background: #D3D2B8;
border-left: 2px #eed solid; border-bottom: 2px #fff solid;
font: .7em arial, sans-serif;
color: #555;
text-align: left;
z-index: 1;
}
#right_pane h5{
font: bold 1.3em verdana, sans-serif;
color: #77773C;
margin: 0 0 15px 0; padding: 0;
}
#right_pane .date{
background: transparent;
border-top: 1px #D3D2B8 solid;
margin: 0; padding: 0;
font-style: italic;
font-weight: bold;
border: none;
}
#right_pane p{
width: auto;
border: 1px #D3D2B8 solid;
background: #fff;
margin: 0 0 5px 0; padding: 5px;
}
#right_pane p a{
color: #77773C;
border: none;
font-weight: bold;
text-decoration: none;
}
#right_pane p a:hover{
color: #aaa;
text-decoration: none;
}
#footer{
margin: 0;
}
#footer p{
text-indent: 0;
margin-top: 50px;
font: bold .6em verdana, sans-serif;
color: #bbb;
text-align: right;
}
acronym{
text-decoration: none;
border-bottom: 1px #77773C dotted;
}
</style>
</head>
<body>
<div id="holder">
<div id="header">
<div id="wrapper"> <span id="one">Homepage Name</span> <span id="two">Slogan or something!</span> </div>
</div>
<div id="menu"> <a href="http://www.free-css.com/">Home</a> <a href="http://www.free-css.com/">Blog</a> <a href="http://www.free-css.com/">Files</a> <a href="http://www.free-css.com/">Templates</a> <a href="http://www.free-css.com/">Contact form</a> </div>
<div id="content">
<h1>I Welcome Thee, O' Great Earthling!</h1>
<p>This design was probably downloaded at <acronym title="OSWD: Open Source Web Designs (dot org)">www.oswd.org</acronym>.<br />
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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit <a href="http://www.free-css.com/">a link</a> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="indent"><i>The first line, in this paragraph, has an indent.</i> To take advantage of this method of displaying text, just add this: "<p class="indent">" instead of "<p>". "<p>" stands for paragraph. "Class="indent"" gives the first line, of the paragraph, an indent.</p>
<p>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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.</p>
<h1>A deliciouse header.</h1>
<p>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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.</p>
<p>Elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id.</p>
<p>And so on...</p>
<div id="footer">
<p>Copyright ©</p>
</div>
</div>
<div id="right_pane">
<h5>News</h5>
<p class="date">17.10.86</p>
<p>Today I did my homework <a href="http://www.free-css.com/">and went to bed</a>. Oddly enough, I wrote this...</p>
<p class="date">17.10.86</p>
<p>Today I did my homework and went to bed. Oddly enough, I wrote this...</p>
<p class="date">17.10.86</p>
<p>Today I did my homework and went to bed. Oddly enough, I wrote this...</p>
</div>
</div>
</body>
</html>
Related examples in the same category