silverglow
<!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>Silverglow</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document */
body{
background-image:url(silverglow-images/bg.jpg);
background-repeat:repeat-x;
margin:0px;
font-family: tahoma, Verdana, sans-serif;
font-size: small;}
.holder{
width:748px;
margin-left:auto;
margin-right:auto;
margin-top:10px;
background-image:url(silverglow-images/curve_mid.jpg);
background-repeat:repeat-y;
}
.header{
height:36px;
padding:5px;
padding-left:22px;
}
.navigation{
float:right;
font-size: 20px;
font-weight: normal;
letter-spacing: -1px;
color: #006699;
padding-right:22px;
padding-top:2px;
}
.block_left{
background-image:url(silverglow-images/nav_block.gif);
background-repeat:no-repeat;
float:left;
width:227px;
height:191px;
margin-left:22px;
}
*html .block_left{
background-image:url(silverglow-images/nav_block.gif);
background-repeat:no-repeat;
float:left;
width:227px;
height:191px;
margin-left:10px;
}
.block_right{
background-image:url(silverglow-images/side_banner_bg.jpg);
;
background-repeat:no-repeat;
float:right;
width:437px;
height:86px;
margin-right:22px;
font-size: 36px;
padding-left: 10px;
padding-top: 105px;
color: #FFFFFF;
}
*html .block_right{
background-image:url(silverglow-images/side_banner_bg.jpg);
;
background-repeat:no-repeat;
float:right;
width:437px;
height:86px;
margin-right:10px;
font-size: 36px;
padding-left: 10px;
padding-top: 105px;
color: #FFFFFF;
}
.top_curve{
background-image:url(silverglow-images/curve_top.jpg);
background-repeat:no-repeat;
height:16px;}
.left_shade1{
background-image:url(silverglow-images/curve_left.jpg);
background-repeat:no-repeat;
width:5px;
float:left;
height:600px;
}
.center_content{
width:738px;
background-color:#FFFFFF;
float:left;
}
.right_shade1{
background-image:url(silverglow-images/curve_right.jpg);
background-repeat:no-repeat;
width:5px;
float:left;
height:600px;
}
.left_content{
float:left;
width:227px;
margin-left:22px;
margin-top:10px;
}
*html .left_content{
float:left;
width:227px;
margin-left:10px;
margin-top:10px;
}
.right_content{
margin-top:10px;
float:right;
width:437px;
margin-right:22px;
padding-left: 10px;
border-left: solid 1px #F2F2F2;
}
*html .right_content{
margin-top:10px;
float:right;
width:437px;
margin-right:10px;
padding-left: 10px;
border-left: solid 1px #F2F2F2;
}
.bottom_curve{
height:17px;
background-image:url(silverglow-images/curve_btm.jpg);
background-repeat:no-repeat;
background-position: center center;
clear:both;
}
.footer{
width:748px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:10px;
margin-bottom:25px;
}
h2 {
margin: 0;
color: #006699;
font-size: 18px;
font-weight: normal;
letter-spacing: -1px;
padding-left:25px;
background-image:url(silverglow-images/bullet.gif);
background-repeat:no-repeat;
background-position: 5px 3px;
}
h2 a:link, h2 a:hover, h2 a:visited {
color: #000;
text-decoration: none;
}
h1 {
font-size: 20px;
font-weight: normal;
letter-spacing: -1px;
color: #006699;
margin: 0;
}
h1 a:link, h1 a:visited, h1 a:hover {
text-decoration: none;
color: #003366;
}
h4 {
margin: 0;
color: #006699;
font-size: 12px;
padding-top:5px;
padding-bottom:9px;
background-image:url(silverglow-images/dots-hr-4.gif);
background-repeat:repeat-x;
}
h3 {
margin: 0 0 8px 0;
color: #999;
font-size: 19px;
font-weight: normal;
letter-spacing: -1px;
text-transform: uppercase;
}
h5 {
margin: 0 0 8px 0;
color: #999;
font-size: 12px;
font-weight: normal;
text-transform: uppercase;
}
.hr{
width: 100%;
height:8px;
background-image:url(silverglow-images/dots-hr.gif);
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
background-repeat: repeat-x;
background-position:center;
}
a:link, a:visited {
color: #006699;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.nav{
color:#006699;
text-decoration:none;
padding-left:20px;
padding-right:5px;
background-image:url(silverglow-images/nav_buddy.gif);
background-repeat:no-repeat;
background-position: 7px 9px;}
.nav:hover{
color:#003366;
text-decoration:none;
padding-left:20px;
padding-right:5px;
background-image:url(silverglow-images/nav_buddy.gif);
background-repeat:no-repeat;
background-position: 7px -9px;}
</style>
</head>
<body>
<div class="holder">
<div class="top_curve"></div>
<div class="left_shade1"></div>
<div class="center_content">
<div class="header">
<div style="float:left"><img src="silverglow-images/logo.gif" alt="" width="37" height="36" align="left" />
<h1 style="padding-top:5px;">YourNameHere.com</h1>
</div>
<div class="navigation"><a href="http://www.free-css.com/" class="nav">home</a> | <a href="http://www.free-css.com/" class="nav">about</a> | <a href="http://www.free-css.com/" class="nav">services</a> |<a href="http://www.free-css.com/" class="nav"> contact</a></div>
</div>
<div class="focus_block">
<div class="block_left"></div>
<div class="block_right">YOUR SLOGAN HERE</div>
<br clear="all" />
</div>
<div class="left_content">
<h4>Heading - in H4 </h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In faucibus nibh. Aenean risus elit, elementum feugiat, placerat eu, aliquam pellentesque, turpis. </p>
<h4>Heading - in H4 </h4>
<br />
Ut facilisis tempor libero. Maecenas blandit, tellus nec laoreet nonummy, turpis risus tempor massa, ac dictum tellus urna consequat nibh.<br />
<br />
<h4>Heading - in H4 </h4>
<br />
Fusce consectetuer blandit eros. Donec quis nisi et nulla elementum porta. Maecenas elementum pede. Ut facilisis tempor libero. Maecenas blandit, tellus nec laoreet nonummy, turpis risus tempor massa, ac dictum tellus urna consequat nibh. </div>
<div class="right_content">
<h1>Welcome to Silver Glow </h1>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In faucibus nibh. Aenean risus elit, elementum feugiat, cerat eu, aliquam pellentesque, turpis. Ut facilisis tempor libero. Maecenas blandit, tellus nec laoreet nonummy, turpis risus tempor massa, ac dictum tellus urna consequat nibh. Fusce consectetuer blandit eros. Donec quis nisi et nulla elementum porta. Maecenas elementum pede.</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In faucibus nibh. Aenean risus elit, elementum feugiat, placerat eu, aliquam pellentesque, turpis. Ut facilisis tempor libero. Maecenas blandit, tellus nec laoreet nonummy, turpis risus tempor massa, ac dictum tellus urna consequat nibh. Fusce consectetuer blandit eros. Donec quis nisi et nulla elementum porta. Maecenas elementum pede.</p>
<div class="hr"></div>
<h2>Article Title
In H2 </h2>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In faucibus nibh. Aenean risus elit, elementum feugiat, placerat eu, aliquam pellentesque, turpis. Ut facilisis tempor libero. Maecenas blandit, tellus nec laoreet nonummy, turpis risus tempor massa, ac dictum tellus urna consequat nibh. Fusce consectetuer blandit eros. Donec quis nisi et nulla elementum porta. Maecenas elementum pede. Ut facilisis tempor libero. Maecenas blandit, tellus nec laoreet nonummy, turpis risus tempor massa, ac dictum tellus urna consequat nibh. Fusce consectetuer blandit eros. Donec quis nisi et nulla elementum porta. Maecenas elementum pede.</p>
</div>
</div>
<div class="right_shade1"></div>
<br clear="all" />
</div>
<div class="bottom_curve"></div>
<div class="footer">©2006 Your Name Inc. |
<!-- PLEASE DONT REMOVE AND GIVE THE AUTHOR CREDIT -->
Designed by: <a href="http://www.health-tags.org/">Health Tags</a>
<!-- THANK YOU -->
</div>
</body>
</html>
Related examples in the same category