webdesign
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Webdesign</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
font-family: tahoma, helvetica, arial, sans-serif;
font-size: 10px;
text-align: center;
background: #d9d6cc url(webdesign-images/page_bg.gif) top center repeat-x;
color: #868686;
margin: 0;
padding: 10px;
}
html, #wrapper, h1 {
margin: 0;
padding: 0;
}
img { border: 0; }
#wrapper {
margin: auto;
text-align: left;
width: 458px;
position: relative;
}
h1, h2, h3 {
font-size: 10px;
}
h1 {
line-height: 1;
position: absolute;
top: 0;
left: 0;
}
h2 {
margin: 0 0 5px 0;
padding: 0;
}
h3 {
padding: 4px 0 0 0;
}
.block {
display: block;
}
.clear {
clear: both;
height: 10px;
}
.left {
float: left;
margin: 5px 20px 0px 0px;
}
.right {
float: right;
margin: 0px 0px 0px 20px;
}
.readmore {
text-align: right;
}
/* page structure */
#wrapper {
background: url(webdesign-images/body_t.png) 24px 0px no-repeat;
height: 40px;
}
h1 {
position: absolute;
top: 16px;
left: 43px;
margin: 0;
padding: 0;
width: 135px;
z-index: 10;
}
#nav {
position: absolute;
top: 31px;
left: 0;
width: 31px;
margin: 0;
padding: 0;
z-index: 5;
}
#nav li {
float: left;
width: 31px;
padding: 0;
margin: 0;
list-style: none;
}
#nav img {
display: block;
}
#body {
background: url(webdesign-images/body_bg.png) repeat-y;
position: absolute;
top: 39px;
left: 10px;
width: 448px;
margin: 0;
padding: 10px 0 0 0;
z-index: 2;
}
#body .inner {
width: 300px;
margin: 10px 20px 0px 20px;
}
#body .inner #content {
width: 200px;
margin-left: 10px;
margin-top: 1em;
}
#body .inner #content p {
margin: 1em 0;
padding: 0;
}
#body .inner #content div {
padding: 17px;
border-top: 1px solid #d4d6cf;
border-bottom: 1px solid #d4d6cf;
}
#body .inner h2 {
font-size: 12px;
}
#page_title {
float: left;
margin: 3px 0 -50px 15px;
padding: 20px 0 50px 0;
width: 57px;
border-right: 1px solid #d4d6cf;
}
* html #page_title {
margin-left: 7px;
}
#news {
float: left;
width: 129px;
margin: 10px 0 0px 6px;
background: url(webdesign-images/box_bg.gif) repeat-y;
}
#news div {
background: url(webdesign-images/box_t.gif) no-repeat;
}
#news div div {
padding: 12px 12px 7px 12px;
background: url(webdesign-images/box_b.gif) bottom left no-repeat;
}
#news p {
margin: 0;
padding: 0 0 3px 0;
}
#news .readmore {
padding-top: 4px;
}
#paper {
position: absolute;
top: 39px;
left: 243px;
width: 196px;
z-index: 9;
background: url(webdesign-images/paper_bg.gif) repeat-y;
}
#paper .inner {
background: url(webdesign-images/paper_b.gif) bottom no-repeat;
padding: 8px 30px 18px 30px;
}
#paper .readmore {
text-align: left;
margin-bottom: 0;
padding-bottom: 0;
}
#paper p {
margin: 1em 0;
padding: 0;
}
#footer {
text-align: right;
margin-top: -10px;
}
.footerie {
display: none;
}
.clear {
margin-top: -20px;
}
a {
color: #575e58;
font-weight: bold;
}
a:hover {
color: #b31d00;
}
</style>
<!--[if IE]>
<style type="text/css" media="all">
@import "ie.css";
</style>
<![endif]-->
</head>
<body>
<div id="ie"></div>
<div id="wrapper">
<ul id="nav">
<li><a href="http://www.free-css.com/"><img src="webdesign-images/menu_1.gif" width="31" height="70" alt="home" /></a></li>
<li><a href="http://www.free-css.com/"><img src="webdesign-images/menu_2.gif" width="31" height="70" alt="portfolio" /></a></li>
<li><a href="http://www.free-css.com/"><img src="webdesign-images/menu_3.gif" width="31" height="70" alt="designs" /></a></li>
<li><a href="http://www.free-css.com/"><img src="webdesign-images/menu_4.gif" width="31" height="70" alt="client" /></a></li>
<li><a href="http://www.free-css.com/"><img src="webdesign-images/menu_5.gif" width="31" height="69" alt="contact" /></a></li>
</ul>
<h1><a href="http://www.free-css.com/"><img src="webdesign-images/logo.gif" width="135" height="30" alt="logo" /></a></h1>
<div id="body">
<div class="inner">
<div id="content">
<div>
<h2>Content,</h2>
<p>Please replace this text with the original one. Please replace this font with the customised one. please replase this font. This is demo text please replase this with your text.</p>
</div>
</div>
<!-- end content -->
<div id="page_title"> <img src="webdesign-images/title_main_page.gif" width="47" height="148" alt="main page" /> </div>
<!-- end page_title -->
<div id="news">
<div>
<div>
<h2><img src="webdesign-images/title_latest_news.gif" width="78" height="5" alt="latest news" /></h2>
<img src="webdesign-images/picture_3.jpg" width="96" height="56" alt="picture 3" />
<p>05-20-2005</p>
<p>This is a demo text please replase this text with the original one please replase this text.</p>
<p class="readmore"><a href="http://www.free-css.com/"><img src="webdesign-images/btn_learn_more.gif" width="68" height="7" alt="learn more" /></a></p>
</div>
</div>
</div>
<!-- end news -->
<div class="clear"></div>
</div>
<!-- end .inner -->
<div id="footer"> <img src="webdesign-images/footer.gif" width="435" height="196" alt="tortoise" class="footer" /> <img src="webdesign-images/footer_ie.gif" width="435" height="196" alt="tortoise" class="footerie" /> </div>
<!-- end footer -->
</div>
<!-- end body -->
<div id="paper">
<div class="inner">
<h2><img src="webdesign-images/title_latest_designs.gif" width="90" height="5" alt="latest designs" /></h2>
<a href="http://www.free-css.com/"><img src="webdesign-images/picture_1.jpg" width="130" height="74" alt="picture 1" /></a> <a href="http://www.free-css.com/"><img src="webdesign-images/btn_zoom.gif" width="130" height="22" alt="zoom in" /></a> <a href="http://www.free-css.com/"><img src="webdesign-images/picture_2.jpg" width="130" height="74" alt="picture 2" /></a> <a href="http://www.free-css.com/"><img src="webdesign-images/btn_zoom.gif" width="130" height="22" alt="zoom in" /></a>
<p>This is a demo text please replase the text with the original one. Please replase the text.</p>
<p class="readmore"><a href="http://www.free-css.com/"><img src="webdesign-images/btn_more.gif" width="52" height="6" alt="see more" /></a></p>
</div>
<!-- end .inner -->
</div>
<!-- end paper -->
</div>
<!-- end wrapper -->
<div style="clear:both;position:relative;display:block;margin-top:530px;" > Powered by <a href="http://www.freewebsitetemplates.com">Free Website Templates</a> </div>
</body>
</html>
Related examples in the same category