Section with shading background image
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Blue Leaves</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<style type='text/css'>
/*------------------------------------------------------------*
** Global
**------------------------------------------------------------*/
body {
background: #fff url(Blue-Leaves-img/bg2.gif); /* Optional */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
text-align: center; /* IE Fix */
margin: 0;
color: #666;
}
acronym { cursor: help; border-bottom: 1px dashed #999; }
a { text-decoration: none; color: #369; border-bottom: 1px dashed #369; }
a:hover { border-bottom: 1px dashed #49515C; color: #49515C; }
/*------------------------------------------------------------*
** Container
**------------------------------------------------------------*/
#container {
margin: 0 auto;
width: 740px;
background: #fff url(Blue-Leaves-img/dot_line.gif) repeat-y 25%;
border: 1px solid #ddd;
padding: 0 5px;
text-align: left; /* Cancel IE Fix */
}
/*------------------------------------------------------------*
** Header
**------------------------------------------------------------*/
#header {
background: #49515C url(Blue-Leaves-img/header_right.gif) no-repeat 100% 0;
border-bottom: 4px solid #fff;
border-top: 5px solid #fff;
padding: 28px 30px;
}
#header h1 {
margin: 0;
color: #C6C4C5;
font-size: 1.8em;
font-weight: normal;
cursor: default;
}
#header h2 {
margin: 0;
color: #8D8E90;
font-size: 1.2em;
padding-left: 1px;
cursor: default;
}
/*------------------------------------------------------------*
** Nav
**------------------------------------------------------------*/
#nav {
background: #858F9E;
border-bottom: 4px solid #fff;
margin: 0;
padding: 0;
height: 2.2em;
}
#nav li {
list-style-type: none;
display: inline;
line-height: 20px;
}
#nav li a {
text-decoration: none;
color: #ddd;
background-color: #858F9E;
border-right: 4px solid #fff;
border-bottom: 0;
padding: 3px 8px;
font-size: 1em;
float: left;
font-weight: bold;
}
#nav li a:hover { background-color: #6B7687; }
#nav li a.on { background-color: #49515C; color: #C6C4C5; }
/*------------------------------------------------------------*
** Side Bar
**------------------------------------------------------------*/
#sidebar {
float: left;
width: 175px;
position: relative;
line-height: 20px;
word-spacing: 2px;
}
#sidebar div { background: #fff url(Blue-Leaves-img/para_bg.jpg) repeat-x; }
/*------------------------------------------------------------*
** Side Bar & Content
**------------------------------------------------------------*/
#sidebar h3, #content h3 {
font-size: 1.1em;
color: #49515C;
margin: 0 10px 0 0;
cursor: default;
}
#content div, #sidebar div {
padding: 1px 0 10px 0;
border-top: 1px solid #ddd;
padding: 10px;
}
/*------------------------------------------------------------*
** Content
**------------------------------------------------------------*/
#content {
float: left;
width: 550px;
position: relative;
margin-left: 15px;
line-height: 20px;
text-align: justify;
word-spacing: 2px;
}
#content div { background: #fff url(Blue-Leaves-img/para_bg.jpg) repeat-x; }
/*------------------------------------------------------------*
** Footer
**------------------------------------------------------------*/
#footer {
background: #49515C url(Blue-Leaves-img/header_right.gif) no-repeat 100% 0;
border-bottom: 5px solid #fff;
border-top: 10px solid #fff;
text-align: center;
color: #fff;
font-size: 0.8em;
padding: 10px;
line-height: 16px;
clear: both;
}
#footer a { text-decoration: none; color: #A2AFBF; border-bottom: 1px dashed #A2AFBF; }
#footer a:hover { border-bottom: 1px dashed #fff; color: #fff; }
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1 title="Blue Leaves">Blue Leaves</h1>
<h2 title="how strange">how strange</h2>
</div>
<ul id="nav">
<li><a href="#" title="Home" class="on">Home</a></li>
<li><a href="#idea" title="The Idea">The Idea</a></li>
<li><a href="#code" title="The Code">The Code</a></li>
<li><a href="#author" title="The Author">The Author</a></li>
<li><a href="#contact" title="Contact">Contact</a></li>
</ul>
<div id="sidebar">
<div>
<h3 title="Sidebar">Sidebar</h3>
<p>Use this useful little sidebar to hold anything you like! I'll leave that up to you :o)</p>
</div>
<div>
<h3 title="Lorem Ipsum">Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tellus nisi, iaculis ac, sagittis vel.</p>
</div>
<div>
<h3 title="More Lorem Ipsum">More Lorem Ipsum</h3>
<p>Cras laoreet hendrerit leo. Nam luctus condimentum nunc. Maecenas congue consectetuer risus. Proin dictum, risus sed ornare gravida, ligula mauris.</p>
</div>
<div>
<h3 title="Lorem Ipsum">Lorem Ipsum</h3>
<p>Aenean iaculis. Curabitur bibendum velit in dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
</div>
</div>
<div id="content">
<div>
<h3 id="idea" title="The Idea">The Idea</h3>
<p>This was a design I originally started for my <a href="http://www.growldesign.co.uk">growldesign</a> website, but ended up scrapping it. I thought
that instead of scrapping it completely, maybe someone else might find a good use for it. So here you go, my first submission to oswd.org.</p>
</div>
<div>
<h3 id="code" title="The Code">The Code</h3>
<p>Blue Leaves has been coded entirely in <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> 1.1
& <acronym title="Cascading Style Sheets">CSS</acronym>. No tables were touched in the making of this website. Isn't that cool?
As well as being cool, using <acronym title="eXtensible HyperText Markup Language">XHTML</acronym>
& <acronym title="Cascading Style Sheets">CSS</acronym> has many advantages such as:</p>
<ol>
<li><b>Cleaner Code</b>: Adherence to strict guidelines results in cleaner code. All extraneous or ambiguous elements are eliminated, so pages
are smaller, load faster, and render correctly.</li>
<li><b>Interoperability and Accessibility</b>: XHTML is currently readable by the greatest number of browsers, devices and assistive technologies like screen readers.
Accessibility is quickly becoming a legal issue.</li>
<li><b>Search Engine Friendly Code</b>: XHTML produces pages that search engine spiders find easy to understand. There are no presentational elements or bloated
code to confuse the spiders, so they'll crawl everything that matters and rank you accordingly.</li>
<li><b>Design Consistency</b>: With CSS, the same style elements can be applied to every page of a site. From the first page forward, your visitors will be presented with a consistent
design scheme, building their comfort level and effectively promoting your brand.</li>
<li><b>Easy Maintenance</b>: Changes to CSS web page designs are simple. Instead of having to go back and alter every single page of your site, with CSS only the relevant style
sheets have to be updated, saving you hours of work and limiting the introduction of possible errors. </li>
</ol>
</div>
<div>
<h3 id="author" title="The Author">The Author</h3>
<p>My name is Jenna Smith, and I am a 19 year old female from Cambridgeshire,
<acronym title="United Kingdom">UK</acronym>. I work full time as a Web Designer for a very well known company and
freelance out of work through my <a href="http://www.growldesign.co.uk">growldesign</a> website.</p>
<p>I made my first website when I was 11 years old and have been using XHTML & CSS for around 2 years. Other languages
I know include <acronym title="Hypertext Pre-processor">PHP</acronym>, <acronym title="Open source Structured Query Language">MySQL</acronym>,
<acronym title="eXtensible Markup Language">XML</acronym> and <acronym title="eXtensible StyleSheet Language Transformation">XSLT</acronym>.
For a full list, take a look at my <a href="http://www.growldesign.co.uk">website</a>.
</p>
</div>
<div>
<h3 id="contact" title="Contact">Contact</h3>
<p>If you are a small business wanting an online presence, or a company looking to outsource,
feel free to <a href="mailto:jenna@growl
design.co.uk">contact me</a> for a quote.</p>
</div>
</div>
<div id="footer">
<a href="http://validator.w3.org/check/referer" title="Validates as XHTML 1.1">XHTML</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer?warning=no&profile=css2" title="Validates as CSS">CSS</a> |
<a href="mailto:jenna@growl
design.co.uk" title="Contact growldesign">Contact</a> <br/>
Copyright © 2005 Company. All Rights Reserved.<br />
<!-- If you would like to use this template, I ask that you keep the following line of code intact -->
Design by <a href="http://www.growldesign.co.uk">growldesign</a>
| <a href="http://www.ehostinfo.com/">Web Hosting</a></div>
</div>
</body>
</html>
Related examples in the same category