redavenue : Red « Templates « HTML / CSS

redavenue
  

<!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">
<head>
<title>Red Avenue</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  background: #FFFFFF url(redavenue-images/img01.gif) repeat-x;
  font: normal small Verdana, Arial, Helvetica, sans-serif;
  color: #666666;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #333333;
}

h2 {
  margin-bottom: .8em;
  font-size: 2em;
  font-weight: normal;
}

h3 {
  margin-bottom: 1em;
  text-transform: uppercase;
  letter-spacing: 2px;
  font: bold x-small Verdana, Arial, Helvetica, sans-serif;
}

p, blockquote, ul, ol {
  margin-bottom: 1.4em;
  line-height: 1.8em;
  text-align: justify;
}

p {
}

blockquote {
  margin-left: 2em;
  margin-right: 2em;
  font-style: italic;
}

ul {
  margin-left: 3em;
}

ul li {
}

ol {
  margin-left: 3em;
}

ol li {
}

a {
  text-decoration: none;
  color: #BB1C1C;
}

a:hover {
  text-decoration: underline;
}

img {
  border: 4px solid #C90404;
}

/* Boxed Style */

.boxed {
  margin-bottom: 20px;
}

.boxed .title {
  height: 25px;
  margin: 0;
  padding: 4px 0 0 15px;
  background: url(redavenue-images/img05.gif) no-repeat;
  font-size: 1.4em;
  color: #BB1C1C;
}

.boxed .content {
  padding: 15px;
}

/* Post */

.post {
}

.post .title {
}

.post .date {
}

.post .date .month {
}

.post .date .day {
}

.post .date .year {
}

.post .meta {
}

.post .meta p {
  line-height: normal;
  font-size: 9px;
}

.post .story {
}

/* Header */

#header {
  width: 740px;
  height: 100px;
  margin: 0 auto;
  padding: 20px 0 0 0;
}

/* Header > Logo */

#logo {
  float: left;
  width: 240px;
  height: 50px;
}

#logo h1 {
  float: left;
  margin: 0;
  padding: 21px 0 0 1em;
  font-size: 1em;
}

#logo h2 {
  float: left;
  margin: 0;
  padding: 24px 0 0 .5em;
  font-size: .7em;
}

#logo a {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}

/* Header > Menu */

#menu {
  float: left;
  width: 500px;
  height: 50px;
}

#menu ul {
  margin: 0;
  list-style: none;
}

#menu li {
  display: inline;
}

#menu a {
  display: block;
  float: left;
  width: 100px;
  height: 45px;
  padding: 19px 0 0 0;
  background: url(redavenue-images/img03.gif) no-repeat;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: #000000;
}

#menu a:hover, #menu .active a {
  color: #BF1616;
}

/* Content */

#content {
  width: 740px;
  margin: 0 auto;
}

/* Content > Main */

#main {
  float: right;
  width: 480px;
}

/* Content > Main > Welcome */

#welcome {
}

/* Content > Main > Example */

#example {
}

/* Content > Sidebar */

#sidebar {
  float: left;
  width: 240px;
}

/* Content > Sidebar > Login */

#login {
}

#login form {
}

#login fieldset {
  border: none;
}

#login legend {
  display: none;
}

#login label {
  font-size: x-small;
  font-weight: bold;
}

#login input {
  margin-bottom: 5px;
  padding: 2px 5px;
  border: 1px solid #C90404;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

#inputtext1, #inputtext2 {
  color: #C90404;
}

#inputsubmit1 {
  background: #C90404;
  color: #FFFFFF;
}

/* Content > Sidebar > Updates*/

#updates {
}

#updates ul {
  margin: 0;
  list-style: none;
}

#updates h3 {
  margin: 0;
  font: bold x-small Verdana, Arial, Helvetica, sans-serif;
}

#updates p {
  margin-bottom: 1.4em;
  font-size: smaller;
  line-height: normal;
}

/* Content > Sidebar > Partners*/

#partners {
}

#partners .content {
  padding: 10px 0;
}

#partners ul {
  margin: 0;
  border-bottom: 1px solid #D1BC5C;
  list-style: none;
  line-height: normal;
}

#partners li {
  padding: 10px;
  border-top: 1px solid #D1BC5C;
}

/* Footer */

#footer {
  clear: both;
  padding: 20px 50px;
  border-top: 4px solid #930000;
  background: #C90404;
}

#footer p {
  width: 770px;
  margin: 0 auto;
  text-align: center;
  font-size: x-small;
  color: #FFFFFF;
}

#footer a {
  text-decoration: underline;
  color: #FFFFFF;
}

#footer a:hover {
  text-decoration: underline;
}

/* Footer > Legal */

#legal {
}

/* Footer > Links */

#links {
}

</style>


</head>
<body>
<div id="header">
  <div id="logo">
    <h1><a href="http://www.free-css.com/">Red Avenue</a></h1>
    <h2><a href="http://www.free-css.com/">Free CSS Templates</a></h2>
  </div>
  <div id="menu">
    <ul>
      <li class="active"><a href="http://www.free-css.com/">Homepage</a></li>
      <li><a href="http://www.free-css.com/">About Us</a></li>
      <li><a href="http://www.free-css.com/">Products</a></li>
      <li><a href="http://www.free-css.com/">Clients</a></li>
      <li><a href="http://www.free-css.com/">Support</a></li>
    </ul>
  </div>
</div>
<div id="content">
  <div id="sidebar">
    <div id="login" class="boxed">
      <h2 class="title">Client Account</h2>
      <div class="content">
        <form id="form1" method="post" action="#">
          <fieldset>
          <legend>Sign-In</legend>
          <label for="inputtext1">Client ID:</label>
          <input id="inputtext1" type="text" name="inputtext1" value="" />
          <label for="inputtext2">Password:</label>
          <input id="inputtext2" type="password" name="inputtext2" value="" />
          <input id="inputsubmit1" type="submit" name="inputsubmit1" value="Sign In" />
          <p><a href="http://www.free-css.com/">Forgot your password?</a></p>
          </fieldset>
        </form>
      </div>
    </div>
    <div id="updates" class="boxed">
      <h2 class="title">Recent Updates</h2>
      <div class="content">
        <ul>
          <li>
            <h3>March 5, 2007</h3>
            <p><a href="http://www.free-css.com/">In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula&#8230;</a></p>
          </li>
          <li>
            <h3>March 3, 2007</h3>
            <p><a href="http://www.free-css.com/">Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh&#8230;</a></p>
          </li>
          <li>
            <h3>February 28, 2007</h3>
            <p><a href="http://www.free-css.com/">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum&#8230;</a></p>
          </li>
          <li>
            <h3>February 25, 2007</h3>
            <p><a href="http://www.free-css.com/">Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam nequea&#8230;</a></p>
          </li>
          <li>
            <h3>February 20, 2007</h3>
            <p><a href="http://www.free-css.com/">Vivamus fermentum nibh in augue. Praesent a lacus at urna congue rutrum. Nulla enim eros&#8230;</a></p>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div id="main">
    <div id="welcome" class="post">
      <p><img src="redavenue-images/img06.jpg" alt="" width="472" height="180" /></p>
      <h2 class="title">Welcome to Red Avenue!</h2>
      <h3 class="date"><span class="month">Mar.</span> <span class="day">8</span><span class="year">, 2007</span></h3>
      <div class="meta">
        <p>Posted by Jane Anderson under <a href="http://www.free-css.com/">Uncategorized</a>, <a href="http://www.free-css.com/">Daily Journal</a><br />
          <a href="http://www.free-css.com/">Trackback URI</a> | <a href="http://www.free-css.com/">No Comments</a> | <a href="http://www.free-css.com/">Permalink</a></p>
      </div>
      <div class="story">
        <p><strong>Red Avenue</strong> is a free template from Free CSS Templates released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photo is from PDPhoto.org. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em>Enjoy :)</em></p>
      </div>
    </div>
    <div id="example" class="post">
      <h2 class="title">Examples of Common Tags</h2>
      <h3 class="date"><span class="month">Feb.</span> <span class="day">24</span><span class="year">, 2007</span></h3>
      <div class="meta">
        <p>Posted by Jane Anderson under <a href="http://www.free-css.com/">Samples</a><br />
          <a href="http://www.free-css.com/">Trackback URI</a> | <a href="http://www.free-css.com/">No Comments</a> | <a href="http://www.free-css.com/">Permalink</a></p>
      </div>
      <div class="story">
        <p>This is an example of a paragraph followed by a blockquote:</p>
        <blockquote>
          <p>&ldquo;Pellentesque tristique ante ut  risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum  id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec  placerat odio.&rdquo;</p>
        </blockquote>
        <h3>Heading Level Three</h3>
        <p>This is another example of a paragraph followed by an unordered list:</p>
        <p>An ordered list example:</p>
        <ol>
          <li>List item number one</li>
          <li>List item number two</li>
          <li>List item number thre</li>
        </ol>
      </div>
    </div>
  </div>
</div>
<div id="footer">
  <p id="legal">Copyright &copy; 2007 Red Avenue. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
  <p id="links"><a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Terms of Use</a></p>
</div>
</body>
</html>
Related examples in the same category

1.	metamorph_blackandred
2.	metamorph_blackonred
3.	metamorph_red
4.	metamorph_redandblack_lt
5.	metamorph_reddie
6.	metamorph_redfirm
7.	metamorph_redflowers_lt
8.	metamorph_redinfinity
9.	metamorph_redmadness
10.	metamorph_redornament
11.	metamorph_redstorm
12.	All_The_Reds
13.	freecss_lightred
14.	simplyred
15.	sleek-red
16.	red haze
17.	red-accent
18.	red-round
19.	redalert
20.	redBull
21.	redbusiness
22.	redcrazycss
23.	reddy
24.	Redfire2
25.	redflex
26.	redhaze
27.	redhive
28.	redish
29.	RedLight
30.	redline
31.	RedOneTemplate
32.	redpassion
33.	redpepper
34.	redplanet
35.	redroses
36.	redsnow
37.	RedSquareShadow
38.	red_city
39.	Red_Hot
40.	Red_Hot_Brazil
41.	red_music
42.	Red_Splash
43.	Red_Tube_Simple
44.	Red 2