redpassion : Red « Templates « HTML / CSS

HTML / CSS » Templates » Red 
redpassion
  

<!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 Passion</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document by Dieter Schneider | www.csstemplateheaven.com */

{margin: 0; padding: 0;}

/**************************************** Main structure ****************************/

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 62.5%;
}

#container {
  width: 842px;
  margin: auto;
  font-size: 1.2em;
      }

#top_nav {
  background-image: url(redpassion-images/nav_top.jpg);
  height: 31px;
  padding-top: 15px;
  text-align: right;
  padding-right: 20px;
  color: #7E0200;
}

#header-{
  background-image: url(redpassion-images/header.jpg);
  height: 235px;
}

#main_nav {
  background-image: url(redpassion-images/main_nav.jpg);
  height: 56px;
  padding-left: 9px;
}

#contentwrapper {
  background-image: url(redpassion-images/contentwrapper.jpg);
  background-repeat: repeat-y;
}

#left {
  float: left;
  width: 160px;
  padding-top: 15px;
  margin-left: 15px!important;
  margin-left: 7px;
  font-size: 0.9em;
}

#right {
  float: right;
  width: 160px;
  padding-top: 15px;
  margin-right: 15px!important;
  margin-right: 7px;
  font-size: 0.9em;
}


#content {
  margin-right: 200px;
  margin-left: 200px;
  padding: 15px 0;
}

#footer {
  background-image: url(redpassion-images/footer.jpg);
  height: 35px;
  clear: both;
  text-align: center;
  padding-top: 20px;
}

/**************************************** text, images, lists ****************************/

img.float_left {
  float: right;
}

{
  margin-top: 20px;
  margin-bottom: 20px;
}

p.topnav, .copyright {
  margin: 0;
}

h1 {
  color: #FFFFFF;
  padding-top: 110px;
  padding-left: 130px;
  font-size: 3em;
  font-style: italic;
}

h2 {
  font-size: 1em;
  color: #9A0500;
  background-image: url(redpassion-images/h2.jpg);
  background-repeat: repeat-x;
  height: 42px;
  padding-top: 3px;
  margin-bottom: 20px;
  padding-left: 8px;
}

h3 {
  background-image: url(redpassion-images/sidebar_heading.jpg);
  font-size: 1em;
  height: 19px;
  width: 135px;
  color: #FFFFFF;
  padding-top: 3px;
  padding-left: 24px;
}

h4 {
  background-image: url(redpassion-images/sidebar_heading_2.jpg);
  font-size: 1em;
  height: 19px;
  width: 125px;
  color: #FFFFFF;
  padding-top: 3px;
  padding-left: 10px;
  padding-right: 24px;
}

dl {
  margin-top: 20px;
  margin-bottom: 20px;
}

dt {
  border-bottom: 1px solid white;
  padding: 3px;
  margin-bottom: 5px;
  background-image: url(redpassion-images/dt_bottom.gif);
  background-repeat: repeat-x;
  background-position: bottom;
}

dd {
  margin-bottom: 12px;
}

.news:first-letter {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.2em;
  font-weight: bold;
}

/**************************************** Menu ****************************/

#navcontainer ul
{
  color: White;
  float: left;
  width: 100%;
  height: 54px;
}

#navcontainer ul li display: inline; }

#navcontainer ul li a
{
  padding: 18px 1em;
  height: 18px;
  color: #720201;
  text-decoration: none;
  float: left;
  background-image: url(redpassion-images/menu_right_border.jpg);
  background-repeat: no-repeat;
  background-position: right top;
}

#navcontainer ul li a:hover
{
  color: #fff;
  background-image: url(redpassion-images/menu_hover.jpg);
  background-repeat: repeat-x;
}

/**************************************** Contact form ****************************/

label {
  font-style: italic;
}

form.contact_us {
  width: 155px;
  margin-top: 0px;
  padding: 0px;
}

input.fields_contact_us {display: block;
        width: 155px;
        background: #FFFFFF;
    border-top: 1px solid #E5E3E4;
    border-left: 1px solid #E5E3E4;
    border-bottom: 1px solid #EDEDED;
    border-right: 1px solid #EDEDED;
    margin-top: 3px;
      margin-bottom: 3px;}

textarea {width: 155px;
          background: #FFFFFF;
      border-top: 1px solid #E5E3E4;
      border-left: 1px solid #E5E3E4;
      border-bottom: 1px solid #EDEDED;
      border-right: 1px solid #EDEDED;
      display: block;
          margin-top: 3px;}

.submit_button_contact {
  margin-top: 15px;
  margin-left: 88px;
  padding: 2px;
  background-color: #910603;
  cursor: pointer;
  color: #FFFFFF;
}

</style>


</head>
<body>
<div id="container">
  <div id="top_nav">
    <p class="topnav">Login | Register</p>
  </div>
  <div id="header">
    <h1>Red Passion</h1>
  </div>
  <div id="main_nav">
    <div id="navcontainer">
      <ul id="navlist">
        <li id="active"><a href="http://www.free-css.com/" id="current">Home</a></li>
        <li><a href="http://www.free-css.com/">Link</a></li>
        <li><a href="http://www.free-css.com/">Community</a></li>
        <li><a href="http://www.free-css.com/">About us</a></li>
        <li><a href="http://www.free-css.com/">useful links</a></li>
        <li><a href="http://www.free-css.com/">Site map</a></li>
      </ul>
    </div>
  </div>
  <div id="contentwrapper">
    <div id="left">
      <h3>Ask a question </h3>
      <form id="form1" method="post" class="contact_us" action="#">
        <p>
          <label>Name
          <input type="text" class="fields_contact_us" name="textfield" />
          </label>
          <label>E-mail
          <input type="text" class="fields_contact_us" name="textfield1" />
          </label>
          <label> Your question:
          <textarea name="textarea" cols="" rows=""></textarea>
          </label>
          <label>
          <input type="submit" class="submit_button_contact" name="Submit1" value="Submit" />
          </label>
        </p>
      </form>
      <h3>News</h3>
      <dl>
        <dt class="news">This is a definition list </dt>
        <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam diam ipsum, nonummy ut, fermentum eget, porttitor sed, velit.</dd>
        <dt class="news">Example two </dt>
        <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam diam ipsum, nonummy ut, fermentum eget, porttitor sed, velit.</dd>
        <dt class="news">The third example</dt>
        <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam diam ipsum, nonummy ut, fermentum eget, porttitor sed, velit.</dd>
      </dl>
    </div>
    <div id="right">
      <h4>Photo of the week </h4>
      <p><img src="redpassion-images/demo_image2.jpg" alt="" width="159" height="142" /></p>
      <h4>More info</h4>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam diam ipsum, nonummy ut, fermentum eget, porttitor sed, velit. Morbi mi. Aliquam sollicitudin tempus erat. Cras non nisl. Quisque condimentum lacus non lorem. Nulla nec est ut lacus ultricies tincidunt. Nunc euismod. Ut venenatis nisi ac diam. Aliquam luctus condimentum ipsum. Maecenas congue.</p>
    </div>
    <div id="content">
      <h2>About this template </h2>
      <p><img src="redpassion-images/demo_image.jpg" alt="" width="88" height="114" class="float_left" />This template is tested in the latest versions of IE, FF, Opera and IE 6.0 with excellent results. A link back to my site is always appreciated :For more visit my site. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam diam ipsum, nonummy ut, fermentum eget, porttitor sed, velit. Morbi mi. Aliquam sollicitudin tempus erat. Cras non nisl. Quisque condimentum lacus non lorem. Nulla nec est ut lacus ultricies tincidunt. Nunc euismod. Ut venenatis nisi ac diam. Aliquam luctus condimentum ipsum. Maecenas congue.
        Vivamus laoreet egestas sapien. Donec nec ipsum congue lorem laoreet aliquet. Nunc egestas blandit quam. In sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci tortor, ultrices quis, fringilla eget, nonummy at, tortor. Curabitur neque. Etiam dolor nibh, pharetra et, elementum quis, volutpat id, purus. Quisque felis nisi, sollicitudin sed, tempus at, aliquet ut, diam. Suspendisse libero diam, volutpat ac, rhoncus non, feugiat in, erat. Donec purus quam, lobortis vel, vehicula eu, dictum eu, tellus. </p>
      <h2>More headings</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam diam ipsum, nonummy ut, fermentum eget, porttitor sed, velit. Morbi mi. Aliquam sollicitudin tempus erat. Cras non nisl. Quisque condimentum lacus non lorem. Nulla nec est ut lacus ultricies tincidunt. Nunc euismod. Ut venenatis nisi ac diam. Aliquam luctus condimentum ipsum. Maecenas congue.
        Vivamus laoreet egestas sapien. Donec nec ipsum congue lorem laoreet aliquet. Nunc egestas blandit quam. In sapien. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut orci tortor, ultrices quis, fringilla eget, nonummy at, tortor. Curabitur neque. Etiam dolor nibh, pharetra et, elementum quis, volutpat id, purus. Quisque felis nisi, sollicitudin sed, tempus at, aliquet ut, diam. Suspendisse libero diam, volutpat ac, rhoncus non, feugiat in, erat. Donec purus quam, lobortis vel, vehicula eu, dictum eu, tellus. </p>
    </div>
    <div id="footer">
      <p class="copyright">&copy; Your site 2007 | Created by Dieter Schneider | <a href="http://www.csstemplateheaven.com">www.csstemplateheaven.com</a> </p>
      <p></p>
    </div>
  </div>
</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.redavenue
21.redBull
22.redbusiness
23.redcrazycss
24.reddy
25.Redfire2
26.redflex
27.redhaze
28.redhive
29.redish
30.RedLight
31.redline
32.RedOneTemplate
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
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.