brown_and_white
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Brown and White</title>
<style type='text/css'>
/*Set default margin's and padding*/
* { margin: 0; padding: 0; }
/* Set generic img and link tags */
img {
float:right;
margin-bottom:2px;
}
a {
color:#FEF9E9;
background-color:#663300;
text-decoration:none;
}
a:hover {
color:#663300;
background-color:#FEF9E9;
}
/* Form Control */
form {
padding:2px;
background-color:#a58663;
text-align: center;
border: 1px solid #663300;
}
input {
/*float:left;*/
background-color: #f7f2e3;
color: #6e3f0f;
border: 0px solid #d1bfa6;
font-size: 11px;
padding: 2px;
margin:1px;
}
input:focus {
background-color:#FEF9E9;
}
.button {
/*float:left;*/
clear:right;
padding:1px;
}
.button:hover {
background-color:#d1bfa6;
}
/*Set general Container type stuff like font, font size and set margins to allow everything to be centered*/
#container {
width: 750px;
margin: 0 auto;
margin-bottom: 10px;
font-family: "Courier New", Courier, monospace, sans-serif;
font-size: 12px;
color: #333333;
background-color:#f7f2e3;
line-height: 1.6em;
}
/*Header*/
#header {
color: #d1bfa6;
padding-top:10px;
background-color: #6e3f0f;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #d1bfa6;
}
#header h1 {
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 42px;
line-height:140%;
color:#6e3f0f;
margin-top:10px;
margin-bottom: 10px;
background-color: #f7f2e3;
}
#header p {
font-family:Arial, Helvetica, sans-serif;
font-size:120%;
font-weight:bold;
line-height:140%;
margin-top: -5px;
margin-left: 40px;
margin-bottom:5px;
}
#header img {
float:right;
clear:none;
height:100px;
}
/* Left - Holds Navigation and extra content */
#left {
background-color: #663300;
float: left;
clear:both;
width: 202px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color:#660000;
color: #FEF9E9;
}
/*Right Side Stuff*/
#right {
float: right;
clear:right;
width: 548px;
background-color:#f7f2e3;
}
#right h1 {
clear:both;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 32px;
line-height:120%;
color:#FEF9E9;
margin-top:15px;
margin-bottom: 30px;
background-color: #663300;
margin-left: 1px;
}
#right p {
font-size:115%;
color:#663300;
margin-bottom: 10px;
margin-left:15px;
margin-right:20px;
margin-top:-5px;
}
/* Navigation */
#navigation {
color: #663300;
background-color: #a58663;
margin-top: 15px;
margin-left: 11px;
}
#navigation ul {
margin:0;
padding-left: 0;
list-style-type: none;
float: left;
width: 180px;
}
#navigation a {
display: block;
padding: 5px;
width: 180px;
border-bottom: 1px solid #663300;
}
#navigation a:link, #navlist a:visited {
color:#663300;
background-color:#FEF9E9;
text-decoration: none;
}
#navigation a:hover {
background-color: #D1BFA6;
color:#FEF9E9;
}
/* Extra Content */
#extra_content {
background-color: #a58663;
color:#f7f2e3;
float: left;
width: 200px;
margin-top: 25px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #663300;
font-size: 95%;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #663300;
}
#extra_content p {
margin-left:5px;
margin-top:5px;
margin-bottom:5px;
margin-right:5px;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #663300;
font-size: inherit;
clear:both;
}
#extra_content h1 {
font-size:110%;
color:#6e3f0f;
background-color:#d1bfa6;
margin-top:5px;
margin-left:2px;
margin-bottom:2px;
}
#extra_content ul {
margin:0 0 2px;
padding:0;
text-align: left;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
}
#extra_content li {
margin:0;
padding-left:3px;
line-height:1.4em;
}
/* Thumbnails */
#thumbnails {
float: left;
width: 200px;
padding: 0;
clear:both;
}
#thumbnails a, a:hover{
padding:0;
margin:0;
text-decoration:none;
}
#thumbnails img {
float: left;
margin: 0;
border:none;
}
/* Footer */
#footer {
width:750px;
font-size: 90%;
color: #FEF9E9;
background-color: #663300;
clear:both;
}
#footer p {
margin: 0px;
padding: 2px;
}
#footer p a {
color:#FEF9E9;
border-bottom: 1px dotted #FEF9E9;
}
#footer p a:hover {
color:#663300;
background-color:#FEF9E9;
}
</style>
</head>
<body>
<div id="container"><!--Start of Container -->
<div id="header"> <!--Start of Header -->
<img src="brown_and_white-images/leaf.jpg" alt="leaf" width="300" height="200" />
<h1>Brown & White</h1>
<p>Motivating Company Slogan Here</p>
</div><!--End of Header -->
<div id="left"><!--Start of Left - Holds navigation and extra content -->
<form name="form1" id="form1" method="post" action="">
<input type="text" name="textfield" value="Search..." />
<input class=" button" type="submit" name="Submit" value="GO" />
</form>
<div id="navigation"><!--Start of Navigation -->
<ul id="navlist">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Photography and downloads and stuff</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- End of Navigation -->
<div id="extra_content"><!--Start of Extra Content -->
<h1>Bobbins</h1>
<p>Extra stuff and <a href="#">links</a> go here. <img src="brown_and_white-images/circuit_thumb.jpg" width="75" height="75" alt="image thumb" />Pics and things can also be placed here. But of course it's up to you in the end, all I can do is try and make it easy for you!</p>
<h1>Links</h1>
<ul>
<li><a href="http://www.visual-aid.co.uk" target="_blank">Visual Aid </a></li>
<li><a href="http://www.oswd.org/" target="_blank">OSWD </a></li>
<li><a href="http://openwebdesign.org/" target="_blank">OWD</a></li>
</ul>
<h1>Gallery</h1>
<p>You could even use it as a gallery!</p>
<div id="thumbnails"><!--Start of Thumbnails -->
<a href="#"><img src="brown_and_white-images/circuit_thumb.jpg" alt="circuit board" /></a>
<a href="#"><img src="brown_and_white-images/dog_thumb.jpg" alt="A Dog" /></a>
<a href="#"><img src="brown_and_white-images/eye_thumb.jpg" alt="Green Eye" /></a>
<a href="#"><img src="brown_and_white-images/opticians_thumb.jpg" alt="Opticians Machine" /></a> </div>
</div><!--End of Thumbnails -->
</div><!--End of Extra Content -->
<div id="right"><!--Start of Right -->
<h1>Heading</h1>
<p>This is my second template design for the open source market and I think it works well. <img src="brown_and_white-images/logs.jpg" alt="logs" />This is where the main content goes, it is happy to wrap around images that are 'floating' to the right. The page is <a href="http://validator.w3.org/check?uri=referer" target="_blank">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">CSS</a> valid. As usual it has been tested on the usual browsers and I am happy with the results.<br />
If you have any questions, comments, suggestions or need any help using this template please do not heistate to contact me and I will try and help you. </p>
<h1>More Stuff</h1> <p>I have one restriction on using this template, please keep the design by brampamp in the footer and <a href="mailto:a.bramley@virgin.net">email me</a> if you use this template with a link to the site. Other than that please feel free to massacre it and make it yours!</p>
<h1>Latin Stuff</h1>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer</a> adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo <a href="#">consequat</a>. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit a</p>
</div>
<!--End of Right -->
<div id="footer"><!--Start of Footer -->
<p><a href="http://validator.w3.org/check?uri=referer" target="_blank">Valid XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">Valid CSS</a> | Copyright © your name here | Design by <a href="http://www.visual-aid.co.uk">brampamp</a></p>
</div><!--End of Footer -->
</div>
</body>
</html>
Related examples in the same category