redpepper
<!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" xml:lang="en">
<head>
<title>RedPepper About</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*==*
** rp-stylesheet.css
** ------------------------------------------------------------*
** Created: 15-01-07 (dd-mm-yy)
** Author: Jenna Smith (growldesign.co.uk)
** Template: RedPepper
**==*/
/*------------------------------------------------------------*
** Global
**------------------------------------------------------------*/
body {
background: #600 url(redpepper-img/bg.png) repeat-x;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 83%;
text-align: center;
margin: 0;
padding: 0;
color: #555;
}
img { border: 0; }
ul,
p { line-height: 1.4em; font-size: 1em; margin: 15px 0 20px; }
h2 { margin: 0; color: #fff; font-weight: normal; padding: 45px 170px 47px 30px; font-size: 1.9em; }
h3, h4 { font-size: 2em; font-weight: normal; color: #000; margin: 0; }
h4 { font-size: 1.7em; }
a { color: #f00; text-decoration: none; border-bottom: 1px solid #FFC4C4; }
a:hover { border-color: #f00; }
.l1 { border: none !important; margin: 0 !important; }
ul {
padding: 0;
list-style-type: none;
line-height: 1.8em;
}
ul li { background: url(redpepper-img/bullet.gif) no-repeat 0% 52%; padding-left: 25px; }
/*------------------------------------------------------------*
** Container
**------------------------------------------------------------*/
#container {
width: 780px;
margin: 0 auto;
text-align: left;
}
* html #container { width: 740px; }
/*------------------------------------------------------------*
** Header
**------------------------------------------------------------*/
#header { width: 780px; }
#header:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#header h1 { font-weight: normal; font-size: 2em; padding: 1.2em 0 28px 1.1em; margin: 0; }
#header h1 a { color: #fff; text-decoration: none; border: none; }
#header h1 a span { color: #f00; }
/** Navigation **/
#header ul {
margin: -6.9em 0 0 0;
padding: 0 10px;
list-style-type: none;
float: right;
}
* html #header ul { padding: 0; }
#header ul li {
float: left;
text-align: center;
margin: 0 10px;
background: transparent;
padding: 0;
}
#header ul li a {
display: block;
text-decoration: none;
color: #fff;
font-size: 1.2em;
padding: 2em 10px;
border-bottom: 0.3em solid #3F0000;
}
#header ul li a:hover { border-color: #f00; }
#header ul li a.on,
#header ul li a.on:hover { border-color: #fff; }
/*------------------------------------------------------------*
** Body
**------------------------------------------------------------*/
#body { background: #fff url(redpepper-img/body_.png) repeat-x; }
#body div { background: transparent url(redpepper-img/body_left.png) no-repeat; }
#body div div { background: transparent url(redpepper-img/body_right.png) no-repeat 100% 0%; height: 1%; padding: 0 20px 30px; }
* html #body div div { width: 100%; }
#body div div:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#body div div div { background-image: none; padding: 0; }
/*------------------------------------------------------------*
** Content
**------------------------------------------------------------*/
#body #content {
float: right;
height: auto !important;
min-height: 300px;
height: 300px;
width: 475px;
background: #fff url(redpepper-img/content_shadow.png) no-repeat;
padding: 23px 25px 0 38px;
}
#body #content ul.img { list-style-type: none; padding: 0; margin: 0; width: 100%; }
#body #content ul.img:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
#body #content ul.img li { float: left; margin-left: 10px; margin-bottom: 10px; padding: 0; background: transparent; }
#body #content ul.img li a { border: none; }
#body #content ul.img li img { border: 7px solid #900; padding: 1px; }
#body #content ul.img li a:hover img { border-color: #000; }
form { background-color: #f4f4f4; padding: 20px; margin-top: 20px; }
form p { margin: 10px 0; }
form p label { width: 100px; display: block; float: left; }
form p input,
form p textarea { border: 1px solid #999; padding: 4px; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 1.3em; width: 240px; }
textarea { height: 100px; }
input.btn { width: auto; }
/*------------------------------------------------------------*
** Breadcrumb
**------------------------------------------------------------*/
#body #content .breadcrumb {
background-color: #600;
background-repeat: repeat-y;
margin-bottom: 20px;
}
/** specific pages **/
#body #content .home { background-image: url(redpepper-img/header_home.jpg); }
#body #content .about { background-image: url(redpepper-img/header_about.jpg); }
#body #content .services { background-image: url(redpepper-img/header_services.jpg); }
#body #content .portfolio { background-image: url(redpepper-img/header_portfolio.jpg); }
#body #content .contact { background-image: url(redpepper-img/header_contact.jpg); }
/*------------------------------------------------------------*
** Submenu
**------------------------------------------------------------*/
#body #sub {
float: left;
margin: 33px 0 0 0;
background-color: #fff;
height: auto !important;
min-height: 267px;
height: 267px;
width: 172px;
padding: 20px 10px 0 20px;
}
/*------------------------------------------------------------*
** Footer
**------------------------------------------------------------*/
#footer {
width: 780px;
background: transparent url(redpepper-img/footer_.gif) repeat-x;
}
#footer a { border: none; }
#footer p { color: #fff; padding: 10px; margin: 0; }
#footer span { float: right; margin: 0 10px 0 0; }
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1> <a href="http://www.free-css.com/"><span>Red</span>Pepper</a></h1>
<ul>
<li><a href="http://www.free-css.com/">home</a></li>
<li><a href="about.html" class="on">about</a></li>
<li><a href="services.html">services</a></li>
<li><a href="portfolio.html">portfolio</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
<div id="body">
<div>
<div>
<div id="content">
<div class="breadcrumb about">
<h2>Who we are</h2>
</div>
<h3>Introduction</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras neque. Nullam velit eros, vehicula sed, accumsan ac, sodales vel, erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum facilisis sem vel enim ultrices consequat. Maecenas metus. Integer consequat gravida nisl. </p>
<h3>The Team</h3>
<p>Praesent id lorem. Maecenas in ipsum sit amet nisl facilisis pharetra. Duis mauris. Suspendisse porta.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mauris nunc, feugiat ac, bibendum ut, vehicula nec, diam. Suspendisse ac urna. Quisque pharetra. Quisque consequat mattis dui. Cras sed nibh nec nibh tempus vestibulum. Praesent euismod.</p>
</div>
<div id="sub">
<h4>Services</h4>
<ul>
<li><a href="http://www.free-css.com/">Web design</a></li>
<li><a href="http://www.free-css.com/">Web development</a></li>
<li><a href="http://www.free-css.com/">Logo design</a></li>
<li><a href="http://www.free-css.com/">Print design</a></li>
</ul>
<h4>More Lipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras neque. Nullam velit eros, vehicula...</p>
</div>
</div>
</div>
</div>
<div id="footer"> <span><a href="#header"><img src="redpepper-img/top.gif" alt="top" width="29" height="30"/></a></span>
<p>Content © <a href="http://www.free-css.com/">YourName</a>. Design © <a href="http://www.growldesign.co.uk">growldesign</a>.</p>
</div>
</div>
</body>
</html>
Related examples in the same category