wine
<!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>
<title>*WINE*</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin : 0;
padding : 0;
font : 73% "Trebuchet MS", tahoma, verdana, arial, sans-serif;
line-height : 1.8em;
color : #666;
background : #f0e9dd url(wine-img/body_bg.gif) repeat-y;
background-position : 50% 0;
}
#container {
width : 700px;
margin-left : auto;
margin-right : auto;
padding : 5px;
}
/*TOP BANNER*/
#banner {
height : 200px;
padding : 5px;
margin-left : 1px;
background : url(wine-img/head.jpg) no-repeat;
}
#banner h1 {
margin : 0 10px 0 0;
padding-top : 50px;
letter-spacing : 2px;
font-size : 140%;
text-align : right;
}
/*MAIN CONTENT*/
#content {
padding : 0;
margin-left : 160px;
}
/*SIDEBAR*/
#sidebar {
float : left;
width : 150px;
margin : 0 5px 5px 5px;
padding : 3px;
border-right : 1px solid #dfd0b9;
}
/*FOOTER*/
#footer {
clear : both;
padding : 5px;
margin : 0;
font-size : 0.9em;
border-top : 1px solid #dfd0b9;
color : #333;
background : inherit;
}
#footer a:link, #footer a:visited {
background : inherit;
color : #333;
}
#footer a:hover {
text-decoration : underline;
background : inherit;
color : #663300;
}
/*TYPOGRAPHY*/
p {
padding : 3px 15px 0 15px;
}
#content h1, #sidebar h1 {
margin : 5px;
font-size : 110%;
text-transform : uppercase;
letter-spacing : 3px;
padding : 3px;
color : #eb6d00;
background : inherit;
}
h2 {
font-size : 110%;
padding : 5px;
margin : 5px;
letter-spacing : 3px;
color : #508b4b;
background : #cfe4cd;
}
h3 {
padding : 3px;
margin : 0 0 0 0;
font-size : 0.85em;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
/*LINKS*/
a {
text-decoration : none;
color : #6cad67;
background : inherit;
}
a:hover {
text-decoration : underline;
color : #333;
background : inherit;
}
a img {
border : 0;
}
/*3 COLUMNS*/
.intro {
float : left;
width : 220px;
margin : 3px 0 5px 0;
padding : 5px;
}
.intro2 {
float : left;
width : 220px;
margin : 3px 0 5px 0;
padding : 5px;
}
.intro3 {
float : right;
width : 220px;
margin : 3px 0 5px 0;
padding : 5px;
}
/*SIDE NAVIGATION*/
#navcontainer {
width : 150px;
margin-top : 20px;
}
#navcontainer ul {
margin-left : 0;
padding-left : 0;
list-style-type : none;
}
#navcontainer a {
display : block;
padding : 3px;
width : 130px;
background : #cfe4cd;
color : #666;
border-bottom : 1px solid #f0e9dd;
border-left : 8px solid #fbaa69;
}
#navcontainer a:link, #navlist a:visited {
text-decoration : none;
}
#navcontainer a:hover {
border-left : 8px solid #b7d6b4;
background : #ffa961;
color : #fff;
}
/*CLASSES*/
.img {
float : left;
padding : 3px;
margin : 3px;
}
.update {
font-size : 1em;
background : inherit;
color : #4f210d;
}
.box {
margin : 20px;
padding : 5px;
border : 1px solid #ffa961;
background : inherit;
color : #663300;
}
/*SEARCH BOX*/
.search {
clear : both;
padding : 5px 0 5px 0;
border-top : 1px solid #f0e9dd;
border-bottom : 1px solid #f0e9dd;
background : #cfe4cd url(barbg.gif) no-repeat;
color : #000;
}
form {
margin : 0;
}
input.search {
width : 100px;
border : none;
background : url(wine-img/input.gif);
padding : 4px;
}
input.login {
width : 100px;
border : none;
background : url(wine-img/logininput.gif);
padding : 4px;
}
</style>
</head>
<body>
<div id="container">
<div id="banner">
<h3><a href="http://www.free-css.com/"> | homepage</a> | <a href="http://www.free-css.com/">contact</a> | </h3>
<h1>Your Company Name</h1>
</div>
<div id="sidebar">
<h1> Links </h1>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="http://www.free-css.com/" id="current">Link one</a></li>
<li><a href="http://www.free-css.com/">Link two</a></li>
<li><a href="http://www.free-css.com/">Link three</a></li>
<li><a href="http://www.free-css.com/">Link four</a></li>
<li><a href="http://www.free-css.com/">Link five</a></li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<div class="search">
<form method="post" action="http://www.free-css-com/">
<p>
<input type="text" value="demo only" name="search" class="search" />
<input type="submit" value="Search" class="searchSubmit" />
</p>
</form>
</div>
</div>
<div id="content">
<h1>Welcome to <span style="color:#4B7219;">Wine</span> Template</h1>
<blockquote>All images were created by me so feel free to use them if you wish. The page has been tested in Mozilla and IE7. The page validates as XHTML 1.0 Transitional using valid CSS.<br />
For more FREE templates visit <a href="http://www.mitchinson.net" title="my website">my website</a>.</blockquote>
<h1>Products</h1>
<div class="box">
<p><img class="img" src="wine-img/logo32x32.gif" alt="logo" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet, eros et cursus pharetra, nulla ante fermentum magna, eget rutrum mi urna in purus. </p>
</div>
<p> This is a <a href="http://www.free-css.com/">link</a> to nowhere. Vestibulum dapibus, mauris eget imperdiet ornare, odio tellus facilisis neque, et congue risus eros ac mi. Curabitur tempus orci eu magna. Aliquam dictum nibh a eros. Phasellus ac nunc. Sed tellus. Integer felis. Sed erat.</p>
</div>
<div style="clear:both;"></div>
<div class="intro">
<h2>Article One</h2>
<p class="update"><img class="img" src="wine-img/logo.gif" alt="logo" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet, eros et cursus pharetra, nulla ante fermentum magna, eget rutrum mi urna in purus.</p>
</div>
<div class="intro2">
<h2>Article Two</h2>
<p class="update"><img class="img" src="wine-img/logo.gif" alt="logo" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet, eros et cursus pharetra, nulla ante fermentum magna, eget rutrum mi urna in purus. </p>
</div>
<div class="intro3">
<h2>Article Three</h2>
<p class="update"><img class="img" src="wine-img/logo.gif" alt="logo" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet, eros et cursus pharetra, nulla ante fermentum magna, eget rutrum mi urna in purus.</p>
</div>
<div style="clear:both;"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet, eros et cursus pharetra, nulla ante fermentum magna, eget rutrum mi urna in purus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer imperdiet, eros et cursus pharetra, nulla ante fermentum magna, eget rutrum mi urna in purus.</p>
<div id="footer"> <a href="http://www.free-css.com/">homepage</a> | <a href="mailto:denise@mitchinson.net">contact</a> | <a href="http://validator.w3.org/check?uri=referer">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | © 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a><br/>
This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a> </div>
</div>
</body>
</html>
Related examples in the same category