website-design
<!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" lang="en" >
<head>
<title>Website Design</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type='text/css'>
html,body {
margin: 0;
padding: 0;
text-align: center;
font-family: arial, Helvetica, sans-serif;
font-size: 14px;
background: #fff url(website-design-images/bkgd.jpg) center repeat-y;
}
#body-margin{
text-align: center;
background: #fff;
padding: 0px 11px;
margin: 0 auto;
width: 920px;
voice-family: "\"}\"";
voice-family:inherit;
width: 898px;
}
img { border: none; }
a { text-decoration: none; color: #828282; font-weight: bold;}
a:hover { text-decoration: underline; color: #fd7979; }
/*---------- Divs ----------*/
#header {
background: url("website-design-images/header.jpg") no-repeat center;
height: 120px;
width: 890px;
margin: 0 auto;
}
#logo{
padding-top: 30px;
margin: 0 auto;
width: 890px;
}
#logo a:hover {
text-decoration: none;
}
#logo a {
float: left;
width: 200px;
height: 85px;
}
#container {
width: 890px;
overflow: hidden;
text-align: left;
font: 90% Tahoma, Helvetica, sans-serif;
margin: 0px auto;
background: #fff;
padding-bottom: 30px;
}
* html #container {
overflow: visible;
}
#intro{
min-height: 190px;
margin: 10px auto;
}
* html #intro { height: 190px;}
#intro-image{
float: left;
width: 560px;
}
#intro-text{
padding-top: 10px;
float: right;
width: 305px;
text-align: justify;
}
#content{
margin-top: 20px;
min-height: 250px;
}
* html #content { height: 250px;}
#sidecontent{
float: left;
border: 2px solid #828282;
margin-right: 20px;
padding: 10px;
text-align: center;
width: 240px;
voice-family: "\"}\"";
voice-family:inherit;
width: 210px;
}
html>body #sidecontent { width: 210px } /* for opera */
#sidecontent img{
padding: 1px;
border: 1px solid #828282;
}
#maincontent {
float: right;
width: 630px;
}
#mainleft {
float: left;
width: 425px;
}
#mainright {
float: right;
width: 180px;
}
#mainright a {
color: #000;
}
#footer {
width: 890px;
margin: 0 auto;
min-height: 70px;
background: #c51010 url(website-design-images/gradient.gif) repeat-x;
border-top: 4px solid #828282;
font-size: 84%;
color: #fff;
}
* html #footer {height: 100px;}
#footertextleft{
margin-top: 10px;
float: left;
width: 450px;
text-align:left;
padding-left: 10px;
}
#footertextright{
margin-top: 10px;
text-align: right;
width: 350px;
float: right;
padding-right: 10px;
}
/*------------------------- Navigation --------------------------*/
#navcontainer {
width: 890px;
height: 38px;
background: #c20404 url(website-design-images/gradient.gif) repeat-x;
margin: 10px auto 0 auto;
border-bottom: 4px solid #828282;
display: block;
font-size: 140%;
}
* html #navcontainer { height: 43px;}
#navcontainer ul {
position: relative;
float: left;
list-style-type: none;
margin: 0px;
padding: 0px 0px 0px 10px;
font-size: 65%;
}
#navcontainer li {
margin: 10px 3px 0px 3px;
float: left;
height: 28px;
background: url("website-design-images/nav.jpg") repeat-x;
}
#navcontainer a {
float: left;
display: block;
padding: 7px 9px 6px 9px;
color: #FFF;
text-decoration: none;
}
#navcontainer a:hover {
background: #828282;
color: #fff;
cursor: pointer;
}
/*---------- Headings ----------*/
h1 {
padding-top: 0;
margin-top: 0;
font: 120% Arial;
font-weight: bold;
color: #c20404;
}
.mainheading{
font-weight: bold;
font-size: 123%;
}
/*---------- Classes ----------*/
.heading{
background: #c20404;
border-bottom: 4px solid #828282;
height: 25px;
}
.subheading-white{
color: #fff;
margin: 0px;
padding: 5px 0 0 10px;
font-size: 115%;
font-weight: bold;
}
.p-indent{
padding-top: 0px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="body-margin">
<div id="header">
<div id="logo"><a href="http://www.free-css.com/">Website Design Template</a></div>
</div>
<div id="navcontainer">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Products</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Price Guide</a></li>
<li><a href="http://www.free-css.com/">Locations</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
</div>
<div id="container">
<div id="intro">
<div id="intro-image"> <img src="website-design-images/photo.jpg" alt="" /> </div>
<div id="intro-text">
<p>Lorem ipsum dolor sit amet consectetuer Mauris Pellentesque feugiat sapien pellentesque. Augue et natoque tempus Curabitur scelerisque nibh odio Integer Suspendisse tellus.</p>
<p>Vitae pellentesque consectetuer id semper libero ipsum ullamcorper Pellentesque interdum turpis. Lorem ipsum dolor sit amet consectetuer Mauris Pellentesque feugiat sapien.</p>
</div>
</div>
<div id="content">
<div id="sidecontent">
<h1>Company Portfolio</h1>
<br />
<a href="http://www.free-css.com/"><img src="website-design-images/portfolioimg.gif" alt="" /></a> <a href="http://www.free-css.com/"><img src="website-design-images/portfolioimg.gif" alt="" /></a> <a href="http://www.free-css.com/"><img src="website-design-images/portfolioimg.gif" alt="" /></a> <br />
<br />
<a href="http://www.free-css.com/"><img src="website-design-images/portfolioimg.gif" alt="" /></a> <a href="http://www.free-css.com/"><img src="website-design-images/portfolioimg.gif" alt="" /></a> <a href="http://www.free-css.com/"><img src="website-design-images/portfolioimg.gif" alt="" /></a> <br />
<br />
<a href="http://www.free-css.com/">View full portfolio</a><br />
</div>
<div id="maincontent">
<div id="mainleft">
<h1 class="mainheading">Welcome to company name</h1>
<p>Lorem ipsum dolor sit amet consectetuer augue quis vitae dictumst Proin. Velit felis Phasellus ac pretium sed In est ac tempor velit. Mauris id ac laoreet nisl tincidunt ullamcorper Vivamus turpis tristique lacus. Lorem ipsum dolor sit amet consectetuer Mauris Pellentesque feugiat sapien. Mauris id ac laoreet nisl tincidunt ullamcorper Vivamus turpis tristique lacus.</p>
<p>Sem congue eros felis ornare Aenean auctor elit nunc pede orci. Vivamus id ligula dui nibh Nam at vestibulum urna ac In. Mauris id ac laoreet nisl tincidunt ullamcorper Vivamus turpis tristique lacus.</p>
<p>Vitae pellentesque consectetuer id semper libero ipsum ullamcorper Pellentesque interdum turpis. Lorem ipsum dolor sit amet consectetuer Mauris Pellentesque feugiat sapien.</p>
<br />
</div>
<div id="mainright">
<div class="heading">
<p class="subheading-white">Latest News</p>
</div>
<div class="p-indent">
<p><b>Lorem ipsum dolor sit amet</b><br />
Aliquam feugiat lorem augue dolor fringilla. Eros consectetuer vitae In pede justo....</p>
<p><b>Lorem ipsum dolor sit amet</b><br />
Aliquam feugiat lorem augue dolor fringilla. Eros consectetuer vitae In pede justo....</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footertextleft"> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">About Us</a> | <a href="http://www.free-css.com/">Products</a> | <a href="http://www.free-css.com/">Services</a> | <a href="http://www.free-css.com/">Price Guide</a> | <a href="http://www.free-css.com/">Locations</a> | <a href="http://www.free-css.com/">Contact Us</a> </div>
<div id="footertextright">
<p>Copyright © 2008 Your Company Name<br />
Designed by <a href="http://www.richlyn.co.uk">Richlyn Systems Ltd</a></p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category