Text paragraph with sidebar
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Business 2007</title>
<style type='text/css'>
/*defaults*/
body {background:#2765AF url('Business-Design-2007-images/body_bg.jpg') repeat-x 0 0; color:#000000; margin:20px 0; padding:0; font-family:"Trebuchet MS", verdana, arial, "Times New Roman", serif; font-size:90%; }
p {margin:0; padding:0 0 15px 0; }
a {color:#000000; text-decoration:underline; }
a:hover {color:#225799; text-decoration:none;}
/*structural elements*/
#container {margin:0px auto; text-align:center; width:760px; }
#holder {width:100%; padding:20px 20px 5px 20px; background:#FFFFFF; text-align:left; }
#logo {background:url('Business-Design-2007-images/logo.gif') no-repeat 180px 0; border-bottom:1px solid #DADADA; padding:5px 30px 20px 0px; }
#header {background:#DADADA url('Business-Design-2007-images/header_home.jpg') no-repeat 10px 10px; padding:10px; height:200px; }
#content {float:left; width:490px; padding:20px 10px 0 0; line-height:160%; }
#news {float:right; width:250px; padding:20px 0; line-height:140%; text-align:justify; }
.newsItem {padding:20px 20px 5px 20px; background:#FEFFD5; border:1px solid #FFEB70; font-size:90%; margin-bottom:20px; }
#footer {clear:both; width:100%; font-size:80%; background:#DADADA; padding:20px 20px 5px 20px; border-top:2px solid #2765AF; }
/*headings*/
.newsItem h3 {color:#225799; margin:0 0 10px 0; padding:0; font-size:130%; font-weight:normal; }
#content h1 {font-size:170%; font-weight:normal; line-height:130%; margin:0; padding:0 0 20px 0; }
#logo h1 {font-weight:normal; font-size:170%; margin:0; padding:0; color:#225799; }
/*navigation*/
ul#navigation {margin:0; padding:10px 0; }
ul#navigation li {margin:0; padding:0; list-style:none; display:inline; }
ul#navigation a {color:#225799; padding:0 20px 0 0; text-decoration:none; }
ul#navigation a:hover {color:#000000; text-decoration:underline; }
#home #homeLink,
#about #aboutLink,
#technology #technologyLink,
#portfolio #portfolioLink,
#partners #partnersLink,
#contact #contactLink,
#jobs #jobsLink
{text-decoration:underline; }
/*footer styling, pre-styled so you can "whack" another navigation menu in there if you like*/
#footer ul {margin:0; padding:0; }
#footer li {margin:0; padding:0; list-style:none; display:inline; }
#footer a {color:#000000; font-weight:bold; text-decoration:underline; }
#footer a:hover {color:#000000; text-decoration:none; }
/*shamelessly borrowed styles from http://www.positioniseverything.net/easyclearing.html*/
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix {display:inline-block; }
/* Hides from IE-mac \*/
* html .clearfix {height:1%; }
.clearfix {display:block; }
/* End hide from IE-mac */
</style>
<meta name="Author" content="Tjobbe Andrews, SiteCreative.net" />
</head>
<body id="home">
<div id="container">
<div id="holder" class="clearfix">
<div id="logo">
<h1>Business Design</h1>
</div>
<ul id="navigation">
<li><a id="homeLink" href="#">HOME</a></li>
<li><a id="aboutLink" href="#">ABOUT US</a></li>
<li><a id="technologyLink" href="#">TECHNOLOGY SOLUTIONS</a></li>
<li><a id="portfolioLink" href="#">PORTFOLIO</a></li>
<li><a id="partnersLink" href="#">STRATEGIC PARTNERS</a></li>
<li><a id="contactLink" href="#">CONTACT</a></li>
<li><a id="jobsLink" href="#">JOBS</a></li>
</ul>
<div id="header"></div>
<div id="content">
<h1>Business Design 2007. Propelling your business into the 21st Century with a fresh, clean Web site template.</h1>
<p>A nice clean design with no <a href="http://validator.w3.org/check?uri=referer">HTML Validation errors</a> and no <a href="http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.sitecreative.net%2Fportfolio%2Fbusiness2007%2F">CSS error</a>s. The focus with this design was to create something professional with a modern feel. The coding is of a good standard, and should be relatively easy to decipher even with limited HTML experience.</p>
<p>My previous designs, under the guise of NOWdesign at various Open Source Web design template sites, has led to over fifty thousand downloads. This design itself is intended to replace the most popular of those designs, 'Business Design' (<a href="http://www.oswd.org/design/preview/id/1965/">oswd.org</a> & <a href="http://www.openwebdesign.org/viewdesign.phtml?id=1965&referer=%2Fbrowse.php%3Fpage%3D1%26sort%3Ddownloadsdesc">OpenWebDesign.org</a>), which is currently in the top ten of most downloaded all time.</p>
<p>My name is <a href="http://www.farstyle.com">Tjobbe Andrews</a>, my portfolio site at <a href="http://www.sitecreative.net">Site Creative</a> has more templates. For information about me, visit my <a href="http://www.farstyle.com">personal Web site</a>.</p>
<p>You should know that the photo used at the top of the page may not be open source. I honestly can not remember where I got it from although I believe it was <a href="http://www.sxc.hu">www.sxc.hu</a> - although I can no longer find it on there. I assume no responsibility for the use of the image.</p>
<p>This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-Share Alike 3.0 Unported License</a>.</p>
</div>
<div id="news">
<div class="newsItem">
<h3>Copyright</h3>
<p><strong>This design is free</strong>. But please respect that I worked hard on it and would appreciate a link back to <a href="http://www.sitecreative.net/">my site</a>.</p>
<p><strong>To make it easier for you</strong> I have made the footer (box at the bottom of the page) say what I would like it to, feel free to change it to what you like though.</p>
</div>
<div class="newsItem">
<h3>Other info</h3>
<p><strong>Enjoy the design!</strong> It's aimed at small companies who want to keep their costs down by getting a ready made template. If you would like to get in touch with me about potential projects, please get in touch via my <a href="http://www.sitecreative.net/">company Web site</a>.</p>
</div>
</div>
</div>
<div id="footer">
<p>Design released by <a href="http://www.farstyle.com">FarStyle</a> via the studio of <a href="http://www.sitecreative.net/">Site Creative</a>
| <a href="http://www.ehostinfo.com/">Web Hosting</a>. 2008 Site Creative.</p>
<!--ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Technology Solutions</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Strategic Partners</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Jobs</a></li>
</ul-->
</div>
</div>
</body>
</html>
Related examples in the same category