Blue background
<!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" lang="en" xml:lang="en">
<head>
<title>Art Class</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style rel="stylesheet" type="text/css">
/* MLP Design (http://www.mlpDesign.tk). Released under Creative Commons Attribute 2.5 */
body {
background: url(artclass-images/oenmwbg.gif) 50% 0 repeat-y #369;
font-family: Verdana, sans-serif;
color: #666;
font-size: 10pt;
margin: 0;
}
strong {
background: inherit;
color: #f63;
}
h1 {
background: inherit;
color: #777;
font-size: 16pt;
font-weight: normal;
margin: 0;
padding-top: 8px;
text-transform: lowercase;
}
h2 {
background: inherit;
color: #f63;
font-size: 9pt;
font-weight: normal;
margin: 0;
padding: 2px 0 8px 0;
text-transform: uppercase;
border-bottom: #ddd 1px solid;
}
a:link,a:visited,a:active {
background-color: inherit;
color: #000;
text-decoration: none;
}
a:hover {
background-color: inherit;
text-decoration: none;
color: #f63;
}
blockquote {
background: inherit;
color: #888;
display: block;
padding: 0 5px;
margin: 0 50px;
font-size: 8pt;
font-weight: normal;
text-align: justify;
border-left: #f63 5px solid;
}
blockquote p:first-letter {
background: inherit;
color: #f63;
font-size: 150%;
font-weight: bold;
text-transform: uppercase;
}
ul {
list-style: none;
margin-left: 10px;
padding: 1px;
}
ul li {
padding-left: 15px;
background: url(artclass-images/arw.gif) 0 3px no-repeat;
}
#header {
width: 730px;
height: 190px;
background: url(artclass-images/oenmw.jpg) 50% no-repeat #69c;
color: #777;
margin: auto;
font-weight: bold;
text-transform: lowercase;
}
#body {
width: 700px;
background: #fff;
color: inherit;
margin: auto;
padding: 13px;
border: #ccc 2px solid;
text-align: justify;
}
#content {
width: 500px;
float: left;
text-align: justify;
}
#sidebar {
width: 175px;
height: auto;
float: right;
text-align: justify;
margin-top: 15px;
}
#footer {
width: 720px;
margin: 10px auto;
background: inherit;
color: #fff;
font-size: 75%;
}
.headerlt {
float: left;
padding: 80px 0 0 20px;
font-size: 20pt;
letter-spacing: 8px;
}
.menu {
float: right;
margin: 90px 5px 0 0;
text-align: center;
font-size: 8pt;
}
.menu a:link,.menu a:visited,.menu a:active {
background: inherit;
color: #555;
text-decoration: none;
display: block;
border-left: #554 1px dashed;
padding: 1px 8px;
}
.menu a:hover {
background: inherit;
color: #f60;
text-decoration: none;
border-left: #f61 5px solid;
padding-left: 4px;
}
.sbhead {
background: inherit;
color: #888;
font-weight: bold;
border-bottom: #ddd 1px solid;
padding: 1px 0 8px 0;
text-transform: lowercase;
text-align: right;
font-size: 95%;
}
.sidebar {
background: inherit;
padding: 5px;
width: 170px;
font-size: 80%;
color: #888;
text-align: justify;
margin-top: 10px;
}
.img {
border: #aaa 1px solid;
margin: 8px 5%;
width: 90%;
}
.footer {
float: right;
}
.footer a:link,.footer a:visited,.footer a:active {
background: inherit;
color: #ddd;
text-decoration: none;
}
.footer a:hover {
background: inherit;
color: #fff;
text-decoration: none;
}
.spacer {
font-size: 0;
clear: both;
height: 1px;
}
</style>
</head>
<body>
<div id="header">
<div class="menu"> <a href="">gallery</a></div>
<div class="menu"> <a href="">schedule</a></div>
<div class="menu"> <a href="">about us</a></div>
<div class="menu"> <a href="">home</a></div>
<div class="headerlt">art<strong>class</strong></div>
</div>
<div id="body">
<div id="sidebar">
<div class="sidebar">
<div class="sbhead">: featured art</div>
<img class="img" src="artclass-images/adj.gif" alt="" /></div>
<div class="sidebar">
<div class="sbhead">: credit</div>
<p>The header-and featured art images appearing on this template are from Free Webpage Headers (with some minor editing).</p>
</div>
<div class="sidebar">
<div class="sbhead">: notice</div>
<p>This template is distributed under <a href="http://creativecommons.org/licenses/by-nc/2.5/">Creative Commons Attribution - Non Commercial 2.5 License</a>.</p>
<p>Please retain the "Template Design by MLP Design" tag and link at the footer when you use it. Thank you.</p>
</div>
</div>
<div id="content">
<h1>About us</h1>
<h2>Some subheader-content goes here.</h2>
<p>Unless you know exactly what you are doing, do not make any changes or add html tags onto the html pages as this will affect the XHTML 1.0 code validation of the page.</p>
<blockquote>
<p>All changes to color, background, fonts, width, height, etc. should be made in the stylesheet (style.css) to preserve XHTML 1.0 validation.</p>
</blockquote>
<p>Open "style.css" in any text editor. To change font color, change the value of "color". For the background-color or image, locate "background". The width, height, font-size, text-align are all self-explanatory. If you need help using this template contact me</p>
<p><br />
</p>
<h2>Bullets and lists</h2>
<ul>
<li>Open Web Design</li>
<li>Creative Commons</li>
<li>Free Webpage Headers</li>
</ul>
<ol>
<li>http://www.openwebDesign.org</li>
<li>http://creativecommons.org</li>
<li>http://www.freewebpageheaders.com</li>
</ol>
<p>Some space fillers. Maecenas ac nisi. Integer ultricies sem eget nunc. Vivamus sollicitudin, nunc eu iaculis suscipit, nunc lorem dignissim arcu, eu tincidunt erat erat a magna. Etiam ac ante quis mi volutpat lacinia. Nullam ultrices gravida magna. Aenean sed tortor ac est gravida pellentesque. Nam sodales vulputate ante. Quisque dignissim tempus sem. Vivamus vel nulla. Sed ullamcorper bibendum libero. Nunc enim eros, adipiscing a, elementum at, porta vel, libero.</p>
</div>
<div class="spacer"></div>
</div>
<div id="footer">
<div class="footer">Template Design by <a href="http://www.mlpDesign.net">MLP Design</a> | <a href="http://validator.w3.org/check?uri=referer">XHTML 1.0 Strict</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer ">CSS Valid</a></div>
<p>© Copyright 2006 Your Name. All Rights Reserved.</p>
</div>
<div class="spacer"></div>
</body>
</html>
Related examples in the same category