autumn2 : Season « Templates « HTML / CSS

autumn2
    

<!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>AUTUMN 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>

body {
margin : 0 auto;
padding : 0;
color : #000;
background : #f7f7f7 url(autumn2-images/bgd.jpg) repeat center;
font : 75% "lucida sans", "Trebuchet MS", arial, verdana, sans-serif;
text-align : center;
line-height : 1.7em;
}
#container {
width : 750px;
margin : 0 auto;
padding : 0;
text-align : left;
color : #666;
background : #f7f7f7;
border : 5px solid #aaa;
}
#top {
margin : 0 auto;
padding : 0;
color : #000;
background : #7a2e2e;
}
#top h1 {
margin : 0 20px 0 0;
padding : 10px 0 10px 0;
font-size : 130%;
text-align : right;
text-transform : uppercase;
color : #fff;
background : inherit;
}
#banner {
width : 750px;
margin : 0 auto;
padding : 0;
height : 150px;
color : #000;
background : #7A2E2E url(autumn2-images/banner.jpg) no-repeat;
}
.container {
margin : 0;
padding : 5px 0 0 0;
width : 100%;
color : #000;
background : #f7f7f7 url(autumn2-images/stripe_bg01.gif) repeat-x;
}
#navPyra {
margin : 0;
padding : 0 0 24px 0;
border-bottom : 10px solid #7a2e2e;
}
#navPyra li {
margin : 0;
padding : 0;
display : inline;
list-style-type : none;
}
#navPyra a:link, #navPyra a:visited {
float : left;
padding : 0 12px 6px 12px;
font-size : 130%;
line-height : 1.2em;
text-decoration : none;
color : #742828;
background : inherit;
}
#navPyra a:link.active, #navPyra a:visited.active, #navPyra a:hover {
color : #000;
background : transparent url(autumn2-images/pyramid.gif) no-repeat bottom center;
}
#side {
width : 180px;
float : left;
margin : 0 auto;
padding : 0;
}
#side p {
margin : 1em 0 1em 1em;
color : #999;
background : inherit;
}
#navcontainer ul {
margin-top : 30px;
list-style-type : none;
background-color : inherit;
color : #000;
text-align : left;
}
#navcontainer ul li a {
padding : 15px;
color : #000;
background : transparent url(autumn2-images/list-off.gif) no-repeat left center;
text-align : left;
font : 100% "lucida sans", arial, sans-serif;
text-decoration : none;
}
#navcontainer ul li a:hover {
color : #c86000;
background : transparent url(autumn2-images/list-on.gif) no-repeat left center;
}
#navcontainer ul li a#current {
background : transparent url(autumn2-images/list-active.gif) no-repeat left center;
color : #666;
}
#content {
width : 535px;
margin-left : 190px;
padding-left : 10px;
line-height : 1.8em;
border-left : 1px solid #bbb;
}
#footer {
margin-top : 60px;
padding : 0.5em;
clear : both;
font-size : 0.9em;
color : #333;
background : #f7f7f7 url(autumn2-images/stripe_bg01.gif) repeat;
border-top : 5px solid #7a2e2e;
}
a:link, a:visited {
text-decoration : underline;
color : #7a2e2e;
background : inherit;
}
a:hover {
text-decoration : none;
color : #cc6600;
background : inherit;
}
h2 {
margin : 1em 0 1em 0.5em;
color : #b33c28;
font : 160% "lucida sans", "Trebuchet MS", arial, verdana, sans-serif;
background : inherit;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}

</style>


</head>
<body>
<div id="container">
  <div id="top">
    <h1>Your Company Name</h1>
  </div>
  <div class="container">
    <ul id="navPyra">
      <li><a class="active" href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">About</a></li>
      <li><a href="http://www.free-css.com/">Products</a></li>
      <li><a href="http://www.free-css.com/">Services</a></li>
      <li><a href="http://www.free-css.com/">Order</a></li>
    </ul>
  </div>
  <div id="banner"></div>
  <div id="side">
    <div id="navcontainer">
      <h2>Links</h2>
      <ul id="navlist">
        <li><a href="http://www.free-css.com/">Home</a></li>
        <li><a href="http://www.free-css.com/">Open Designs</a></li>
        <li><a href="http://www.free-css.com/">OWD</a></li>
        <li><a href="http://www.free-css.com/">CSS Drive</a></li>
        <li><a href="http://www.free-css.com/">Listamatic</a></li>
        <li><a href="http://www.free-css.com/">w3schools</a></li>
        <li><a href="http://www.free-css.com/">Style Gala</a></li>
      </ul>
    </div>
    <h2>More Links</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
  </div>
  <div id="content">
    <h2>Welcome to <span style="color:#6E923B;">Autumn 2</span> Template</h2>
    <div style="float: right; width: 125px; height: 7em; margin-top: 5px; margin-bottom: 15px; margin-left: 10px; margin-right: 15px; font-family: georgia, arial, helvetica; font-size: 16px; font-weight:bold; line-height: 24px; color: #D46B18; text-align: right;"><span style="color:#663300;">"...autumn is a second </span>spring when every <span style="color: #6E923B;">leaf is a flower... "</span> </div>
    <blockquote>This page has been tested in Mozilla and IE7 and validates as XHTML 1.0 Transitional using valid CSS.<br />
      For more FREE templates visit my website.</blockquote>
    <p>This is a <a href="http://www.free-css.com/">link</a> to nowhere. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sed lorem. Donec non elit vehicula metus tristique volutpat. Nullam sit amet nisl a leo aliquam fringilla. Nulla ultrices, tortor a pretium posuere, neque urna semper urna, id semper dui quam non metus. Pellentesque viverra porttitor tortor. </p>
    <h2>Heading</h2>
    <p><img class="myborder" align="left" hspace="10" src="autumn2-images/autumn3_leaf.jpg" alt="foto here"/>Autumn is a second spring when every leaf is a flower. 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 consequat. 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 augue duis dolore te feugait nulla facilisi. </p>
    <h2>Heading</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sed lorem. Donec non elit vehicula metus tristique volutpat. Nullam sit amet nisl a leo aliquam fringilla. Nulla ultrices, tortor a pretium posuere, neque urna semper urna, id semper dui quam non metus. Pellentesque viverra porttitor tortor. Etiam vestibulum, eros nec mattis dictum, est velit pulvinar magna, a sodales augue elit eu erat. Aliquam elementum, libero vel facilisis congue, est est lacinia augue, ut condimentum metus enim a tellus. Sed tincidunt luctus justo. Pellentesque nec urna pulvinar ante porttitor blandit. Praesent magna eros, ultrices ac, viverra non, facilisis id, purus. Ut nulla augue, elementum sit amet, hendrerit ac, rutrum eget, massa. Nunc ut arcu vitae dui feugiat pulvinar. Aenean laoreet porta arcu. </p>
  </div>
  <div id="footer"> <a href="http://www.free-css.com/">Homepage</a> | <a href="http://www.free-css.com/">contact</a> | <a href="http://validator.w3.org/check?uri=referer">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | &copy; 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a> | This work is licensed under a <a rel="license" target="_blank" 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

1.	autumn
2.	autumny
3.	august
4.	summerbreeze
5.	summerfields
6.	summerholiday
7.	Summer_Days
8.	the-summer
9.	springbloom
10.	springsawakening
11.	springtime
12.	thespring
13.	thespring2