redbusiness
<!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>RedBusiness</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/*
StyleSheet by David Herreman
http://www.free-css-templates.com
*/
body {
padding: 0;
margin: 0;
font: .74em Arial, sans-serif;
line-height: 1.5em;
background: #fff url(redbusiness-images/top.jpg) repeat-x top;
color: #454545;
}
a { color: #DA3B3B; background: inherit; }
a:hover { color: #DA3B3B; background: inherit; text-decoration: underline}
p { margin: 5px 0; }
h1 { font: bold 1.8em Arial, Sans-Serif; padding: 8px 0 4px 0; margin: 0; letter-spacing: -1px; }
h2 { font: bold 1.6em Arial, Sans-Serif; letter-spacing: -1px; }
h3 { padding: 4px 0; margin: 0; }
ul { margin: 0; padding : 0; list-style: none; }
img { border: 0; }
hr { height: 1px; border-style: none; color: #d0d0d0; background-color: #C0C0C0; margin: 10px 0; }
.content { margin: 0px auto; width: 800px; }
/* Top part */
#top { padding-top: 20px; background: transparent; height: 101px; }
#top h1 { font: bold 1.8em Arial, Sans-Serif; padding: 8px 0 4px 0; margin: 0; letter-spacing: 1px; color: #FFF }
#top h2 { font: 1.0em Arial, Sans-Serif; letter-spacing: 0px; color: #868686; margin:0; padding: 0 }
#top #icons { float: right; margin:20px 0; padding:0 }
#top #icons img { padding-right: 2px; border: 0 }
/* Second part */
#prec { height: 220px; margin:0; padding: 0; background: #F6F6F6; border-bottom: 1px solid #DCDCDC; overflow: hidden; margin-bottom: 15px }
#wrap { margin: 0 auto; width: 800px; }
#wrap #pic { float: right; background: #FF0000 url(redbusiness-images/mainimg.jpg) no-repeat; height: 199px; width: 589px; overflow: hidden}
#wrap #pic #slogan { float: right; padding: 25px 30px 10px 30px; text-align: right }
#wrap #pic #slogan h1 { font: bold 1.4em Arial, Sans-Serif; color: #FFF; letter-spacing: 1px; margin:0 }
#wrap #pic #slogan h2 { font: 1.0em Arial, Sans-Serif; color: #FFF; letter-spacing: 0px; margin:0; padding: 10px 0}
#wrap #pic #slogan a { color: #FFF; }
#wrap #menu { padding: 0; margin:0; background: inherit; }
#wrap #menu a { padding-left: 25px; font: 0.9em Arial, Sans-Serif; text-decoration: none; background: #F6F6F6 url(redbusiness-images/lm-li.gif) no-repeat left; }
#wrap #menu ul { padding: 10px 0 }
#wrap #menu li { line-height: 26px; background: #F6F6F6 url(redbusiness-images/li-line.gif) no-repeat bottom left; list-style: none }
/* Advertising */
#ad { background: #FFF url(redbusiness-images/download.jpg) no-repeat left; padding-left: 95px; min-height: 80px; margin-bottom: 15px;}
#ad a, #left_side a { background: #FFF; text-decoration: none }
#ad a:hover, #left_side a:hover { text-decoration: underline }
/* main area */
#main { }
#right_side { float: right; width: 212px; background: #F6F6F6; padding: 5px 10px 5px 10px; margin-bottom: 10px }
#right_side ul { padding: 3px 0 8px 0 }
#right_side li { line-height: 18px; background: #F6F6F6 url(redbusiness-images/cat-li.gif) no-repeat left; list-style: none; padding-left: 20px; }
#right_side a { background: #F6F6F6; text-decoration: none }
#right_side h3 { color: #404040; font: bold 1.2em Arial, Sans-Serif; }
#left_side { background: #FFF; margin-bottom: 10px; width: 560px; }
#left_side h3 { background: #FFF url(redbusiness-images/hbg.gif) repeat-x; height:30px; padding: 5px 0 0 0px; margin: 0; font: bold 1.2em Arial, Sans-Serif; }
#left_side h3 span { background: url(redbusiness-images/h-art.gif) no-repeat left; padding: 1px 10px 0 23px; line-height: 22px; margin: 0}
#left_side p { color: #454545; padding: 0 5px 0 5px; text-align: justify }
#left_side img { float: left; padding: 0 10px 5px 0 }
#left_side blockquote { padding-left: 10px; border-left: 2px solid #DA4040; margin: 10px 0 10px 25px; }
.date { border-top: 1px dotted #ccc; padding: 5px 0; margin: 10px 0 25px 0; text-align: right }
#left_side .rs { float: right; margin: 0 10px; border: 1px solid #ddd; padding: 5px; background: #f5f5f5 }
#left_side ul { list-style-position: inside; margin-left: 2px }
#left_side ul li { list-style-type: square; margin-left: 15px; }
#left_side ul ul li { list-style: none; margin-left: 10px; list-style-type: lower-alpha; list-style-position: inside }
/* The footer */
#footer { clear: both; border-top: 1px solid #DCDCDC; margin: 0 0 3em 0; color: #777; background: #fff }
#footer .right { float: right; text-align: right; background: #FFF; }
#footer a { text-decoration: none; background: #FFF }
</style>
</head>
<body>
<div class="content">
<div id="top">
<div id="icons"> <a href="http://www.free-css.com/"><img src="redbusiness-images/home.gif" alt="Home" /></a> <a href="http://www.free-css.com/"><img src="redbusiness-images/contact.gif" alt="Contact" /></a> <a href="http://www.free-css.com/"><img src="redbusiness-images/sitemap.gif" alt="Sitemap" /></a> </div>
<h1>Your Business</h1>
<h2>Place your best slogan here</h2>
</div>
</div>
<div id="prec">
<div id="wrap">
<div id="pic">
<div id="slogan">
<h1>FREE TEMPLATE</h1>
<h2> Curabitur vel risus sit amet ante porta adipiscing. Donec eget pede at libero tempor aliquet. Nulla justo. Phasellus hendrerit magna quis metus sagittis ultrices. Vestibulum in sapien. Nunc quis sem. Integer nulla neque, mollis eu, pretium eget, <a href="http://www.free-css.com/">iaculis ac</a>, nibh. Vestibulum velit sapien, rhoncus vitae, ultrices a, nonummy at, neque. Nunc condimentum, nisl non rhoncus porttitor, velit enim consectetuer augue, id imperdiet mauris erat nec risus. In nec eros. </h2>
</div>
</div>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/">HOME</a></li>
<li><a href="http://www.free-css.com/">ARTICLES</a></li>
<li><a href="http://www.free-css.com/">GALLERY</a></li>
<li><a href="http://www.free-css.com/">AFFILIATES</a></li>
<li><a href="http://www.free-css.com/">ARTICLES</a></li>
<li><a href="http://www.free-css.com/">ABOUTS US</a></li>
<li><a href="http://www.free-css.com/">CONTACT</a></li>
</ul>
</div>
</div>
</div>
<div class="content">
<div id="ad"> sNews is a completly free PHP and MySQL driven tool for publishing and maintaining news articles on a website. Integrating sNews into your existing design is simple, but you could also use sNews on it's own, as a simple Content Management System. Consisting of only one file, sNews is extremely lightweight, very easy to install, and easy to use via a simple web interface.</div>
<div id="main">
<div id="right_side">
<h3>Categories</h3>
<ul>
<li><a href="http://www.free-css.com/">Templates (15)</a></li>
<li><a href="http://www.free-css.com/">Internet (10)</a></li>
<li><a href="http://www.free-css.com/">Tutorials (23)</a></li>
<li><a href="http://www.free-css.com/">Photoshop (11)</a></li>
<li><a href="http://www.free-css.com/">sNews (16)</a></li>
<li><a href="http://www.free-css.com/">Personal (5)</a></li>
</ul>
<h3>Directory</h3>
<p>Links4se.com is a seo-friendly and human-edited general directory. Featured links need to be paid only $4.95 for unlimited time and regular links only $1.95!</p>
<h3>Latest Articles</h3>
<ul>
<li><a href="http://www.free-css.com/">I would like to send big thanks to...</a></li>
<li><a href="http://www.free-css.com/">This simple tutorial will show you...</a></li>
<li><a href="http://www.free-css.com/">To make this nice fade effect I...</a></li>
<li><a href="http://www.free-css.com/">If you want to advertise your...</a></li>
<li><a href="http://www.free-css.com/">This has to be one of the better...</a></li>
<li><a href="http://www.free-css.com/">This day I would like to share...</a></li>
</ul>
</div>
<div id="left_side">
<h3><span>Download this template for free!</span></h3>
<p> <img src="redbusiness-images/img.jpg" alt="img" /> Phasellus quis est eget metus blandit lacinia. Quisque molestie, diam a dignissim mattis, lectus felis placerat lectus, eget sollicitudin neque nunc eleifend metus. <a href="http://www.free-css.com/">Curabitur ullamcorper</a> sem ac pede gravida sagittis. Sed et felis. Vestibulum placerat, ipsum nec congue auctor, ante massa placerat felis, sit amet <strong>consectetuer</strong> elit arcu vitae metus. In commodo, risus sed tristique luctus, ipsum diam dapibus eros, et vehicula dui augue tempus quam. In laoreet. Suspendisse et pede volutpat lacus interdum consequat. Cras dui. Quisque ac turpis nec ligula rutrum pulvinar. Quisque lectus ligula, vehicula nec, fringilla eu, dignissim ut, nisl. Vestibulum non turpis. Maecenas urna. </p>
<blockquote>
<p>Sed et felis. Vestibulum placerat, ipsum nec congue auctor, ante massa placerat felis, sit amet consectetuer elit arcu vitae metus. </p>
</blockquote>
<div class="date"><a href="http://www.free-css.com/">Comments (5)</a> . 05 Jan 2007 . 10:37</div>
<h3><span>Lorem Ipsum</span></h3>
<div class="rs"> <strong>List example</strong>:
<ul>
<li>list line 1</li>
<li>list line 2
<ul>
<li>sublist line a</li>
<li>sublist line b</li>
</ul>
</li>
</ul>
</div>
<p> Sed odio tortor, rhoncus ac, auctor a, volutpat sed, diam. Quisque imperdiet. Maecenas quis nisl. Fusce sed nibh eget odio faucibus lobortis. Fusce sagittis est sed elit. Sed venenatis elit ut urna. Etiam varius imperdiet leo. Integer rhoncus venenatis arcu. Donec sollicitudin lectus. Cras ac est. Fusce odio. Donec posuere fermentum dolor. Sed a lacus tristique tellus ultrices mattis. Sed adipiscing urna a orci. Maecenas pharetra volutpat sem. </p>
<div class="date"><a href="http://www.free-css.com/">Comments (11)</a> . 07 Jan 2007 . 02:56</div>
</div>
</div>
<div id="footer">
<div class="right">© Copyright 2006, Your Website - <a href="http://www.free-css.com/">Home</a><br />
Design: <a href="http://www.free-css-templates.com">David Herreman</a></div>
<a href="http://validator.w3.org/check?uri=referer" title="Validate">XHTML</a> - <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Validate">CSS</a> </div>
</div>
</body>
</html>
Related examples in the same category