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;
}
p {
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">© 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