fibreglass
<!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>Fibreglass Company</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type='text/css'>
* {
margin: 0px;
padding: 0px;
}
body {
padding: 16px 0px 10px;
background: url('fibreglass-images/background.jpg') #5f92d2 repeat-x 0% 0%;
color: #fff;
font-family: tahoma, arial, sans-serif;
font-size: 10px;
text-align: center;
}
a {
color: #fff;
text-decoration: underline;
}
a:hover {
color: #bfd8f6;
}
span {
display: none;
}
img {
border: none;
}
ul {
list-style-type: none;
}
li {
list-style-type: none;
}
p {
margin: 10px 0px 5px;
text-align: justify;
line-height: 14px;
}
.clearthis {
margin : 0px;
height : 1px;
clear : both;
float : none;
font-size : 1px;
line-height : 0px;
overflow : hidden;
}
input {
padding-left: 2px;
background-color: #eff3f7;
border: 2px solid #eff3f7;
color: #537caf;
font-family: tahoma, arial, sans-serif;
font-size: 10px;
}
#container {
margin: 0px auto;
width: 768px;
}
/* Page Header */
#header_container {
margin-bottom: 12px;
border: 1px solid #fff;
background: url('fibreglass-images/header_background.jpg') repeat-x 0px 0px;
}
#page_header {
width: 766px;
height: 187px;
background: url('fibreglass-images/header_image.jpg') no-repeat 10px 20px;
overflow: hidden;
}
/* Page Header : Company Name & Logo */
#header_company {
margin-top: 20px;
width: 585px;
height: 35px;
float: left;
background: url('fibreglass-images/company_logo.gif') no-repeat 137px 0px;
text-align: left;
}
#header_company h1 {
background: url('fibreglass-images/company_name.gif') no-repeat 160px 0px;
width: 585px;
height: 35px;
}
/* Page Header : Welcome Note */
#header_welcome {
padding-left: 142px;
float: left;
text-align: justify;
}
#header_welcome h3 {
padding: 3px 0px 0px;
font-size: 14px;
}
#header_welcome p {
margin-top: 7px;
}
#header_welcome #welcome_text {
width: 447px;
}
/* Page Header : Menu */
#header_menu {
padding-top: 35px;
padding-right: 29px;
float: right;
}
#header_menu li {
margin-bottom: 2px;
width: 116px;
border: 1px solid #dee8f5;
text-align: left;
clear: both;
float: none;
}
#header_menu li a {
display: block;
width: 116px;
height: 20px;
color: #e3ecf8;
background-color: #3d6290;
text-decoration: none;
font-weight: bold;
overflow: hidden;
line-height: 10px;
}
#header_menu li a span {
display: block;
padding-top: 4px;
padding-left: 31px;
}
#header_menu li a:hover {
color: #fff;
background-color: #2e4a6c;
}
/* Left Sidebar */
#left_sidebar {
width: 178px;
float: left;
}
#left_sidebar .box_container {
margin-bottom: 11px;
border: 1px solid #fff;
background-color: #537caf;
}
/* Left Sidebar : User Login */
#userlogin {
padding: 7px 8px 11px 12px;
color: #f1f5f9;
font-weight: bold;
text-align: left;
}
#userlogin h2 {
width: 69px;
height: 15px;
background: url('fibreglass-images/userlogin_title.gif') no-repeat -2px 0px;
}
#userlogin form {
padding-top: 5px;
}
#userlogin .form_field {
padding-left: 1px;
padding-top: 7px;
width: 155px;
float: none;
clear: both;
text-align: right;
}
#userlogin form strong {
padding-top: 1px;
display: block;
width: 50px;
height: 13px;
float: left;
text-align: left;
}
#userlogin form input {
width: 93px;
float: right;
}
#userlogin form input.button {
padding: 0px;
width: 55px;
height: 15px;
border: none;
float: none;
}
#userlogin #link-password {
padding-top: 5px;
}
#userlogin #link-password a {
color: #eef3f9;
}
#userlogin #link-password a:hover {
color: #bfd8f6;
}
/* Left Sidebar : Latest News */
#news {
padding: 10px 17px 10px 12px;
text-align: left;
}
#news h2 {
width: 76px;
height: 19px;
background: url('fibreglass-images/news_title.gif') no-repeat 0px 0px;
}
#news h4 {
padding-top: 6px;
font-size: 10px;
font-weight: bold;
}
#news p {
margin-top: 5px;
margin-bottom: 6px;
line-height: 12px;
}
#news .link-more {
text-align: right;
font-weight: bold;
}
/* Main Content */
#maincontent_container {
border-top : 1px solid #d5dfec;
border-left : 1px solid #d5dfec;
float: right;
text-align: left;
}
#maincontent {
margin: 7px 0px 0px 16px;
width: 561px;
}
#maincontent_top {
margin-bottom: 11px;
width: 561px;
background: url('fibreglass-images/maincontent_verticaldiv.gif') repeat-y 310px 5px;
}
/* How We Started */
#started_container {
width: 313px;
float: left;
}
#started {
padding-top: 2px;
width: 294px;
}
#started h2 {
width: 96px;
height: 14px;
background: url('fibreglass-images/started_title.gif') no-repeat 0px 0px;
}
/* Repairing */
#right_container {
width: 247px;
float: left;
text-align: left;
}
#repairing {
margin-left: auto;
margin-right: 1px;
padding-bottom: 5px;
width: 231px;
float: right;
}
#repairing h2 {
width: 125px;
height: 19px;
background: url('fibreglass-images/repairing_title.gif') no-repeat 0px 4px;
}
#repairing p {
margin-top: 6px;
}
/* Get Special Offer */
#offer_container {
margin-left: auto;
border: 1px solid #fff;
background-color: #436da1;
float: right;
}
#offer {
margin: 5px 17px 4px 10px;
width: 205px;
}
#offer h2 {
width: 120px;
height: 22px;
background: url('fibreglass-images/offer_title.gif') no-repeat -1px 0px;
}
#offer p {
margin-top: 1px;
}
#offer .link-go {
text-align: right;
}
#offer .link-go a {
margin-left: auto;
display: block;
width: 34px;
height: 13px;
background: url('fibreglass-images/offer_go.gif') no-repeat 0px 0px;
}
/* Featured Products */
#featured_container {
border: 1px solid #fff;
background-color: #537caf;
float: left;
}
#featured {
margin: 9px 30px;
width: 498px;
}
#featured h2 {
width: 111px;
height: 20px;
background: url('fibreglass-images/featured_title.gif') no-repeat 0px 0px;
}
#featured_products ul {
padding-bottom: 2px;
width: 498px;
}
#featured_products li {
margin: 6px 21px 10px 1px;
float: left;
}
#featured_products li.end {
margin-right: 0px;
}
#featured_products li a {
display: block;
width: 107px;
height: 84px;
background-color: #fff;
overflow: hidden;
}
#featured_products li a img {
margin: 1px;
}
#featured_products li h4 {
padding-top: 3px;
text-align: center;
font-size: 10px;
font-weight: bold;
}
.featured_nav {
padding-left: 3px;
padding-right: 9px;
float: left;
font-weight: bold;
}
.featured_nav a {
text-decoration: none;
}
#featured .link-more {
padding-right: 3px;
font-weight: bold;
float: right;
}
/* Page Footer */
#page_footer {
margin: 5px;
width: 567px;
float: right;
text-align: center;
font-size: 11px;
}
</style>
</head>
<body>
<div id="container">
<!-- Start of Page Header -->
<div id="header_container">
<div id="page_header">
<div id="header_company">
<h1><span>Fibreglass Company</span></h1>
</div>
<div id="header_menu">
<ul>
<li><a href="http://www.free-css.com/"><span>Home</span></a></li>
<li><a href="http://www.free-css.com/"><span>About Us</span></a></li>
<li><a href="http://www.free-css.com/"><span>Products</span></a></li>
<li><a href="http://www.free-css.com/"><span>Services</span></a></li>
<li><a href="http://www.free-css.com/"><span>Contacts</span></a></li>
</ul>
</div>
<div id="header_welcome">
<h3>Welcome</h3>
<div id="welcome_text">
<p>Don't forgot to check free website templates every day, because we add at least one free website template daily.</p>
<p>This is a template designed by free website templates for you for free you can replace all the text by your own
text. This is just a place holder so you can see how the site would look like.</p>
</div>
</div>
</div>
</div>
<!-- End of Page Header -->
<!-- Start of Left Sidebar -->
<div id="left_sidebar">
<!-- Start of User Login -->
<div class="box_container">
<div id="userlogin">
<h2><span>User Login</span></h2>
<form action="http://www.free-css.com/">
<div class="form_field"> <strong>Username</strong>
<input type="text" />
</div>
<div class="clearthis"> </div>
<div class="form_field"> <strong>Password</strong>
<input type="password" />
</div>
<div class="clearthis"> </div>
<div class="form_field">
<input type="image" src="fibreglass-images/userlogin_search.gif" class="button" />
</div>
</form>
<div id="link-password"> <a href="http://www.free-css.com/">Forgot Password</a> </div>
</div>
</div>
<!-- End of User Login -->
<!-- Start of Latest News -->
<div class="box_container">
<div id="news">
<h2><span>Latest News</span></h2>
<h4> Nov 09, 2005 </h4>
<p>If you're looking for beautiful and professionally made templates you can find them at Template Beauty.com.</p>
<h4> Nov 07, 2006 </h4>
<p>Even more websites all about website templates on Just Web Templates.</p>
<p>Even more websites all about website templates on Just Web Templates.</p>
<div class="link-more"> <a href="http://www.free-css.com/">Read More</a> </div>
<div class="clearthis"> </div>
</div>
</div>
<!-- End of Latest News -->
</div>
<!-- End of Left Sidebar -->
<!-- Start of Main Content Area -->
<div id="maincontent_container">
<div id="maincontent">
<div id="maincontent_top">
<!-- Start of How We Started -->
<div id="started_container">
<div id="started">
<h2><span>How We Started</span></h2>
<p>You can remove any link to our websites from this template you're free to use the template without linking
back to us. Don't want your boss to know you used a free website template ;) .</p>
<p>If you're having problems editing the template please don't hesitate to ask for help on the forum.</p>
<p>If you're looking for beautiful and professionally made templates you can find them at Template Beauty.com.</p>
<p>Even more websites all about website templates on Just Web Templates.</p>
</div>
</div>
<!-- End of How We Started -->
<div id="right_container">
<!-- Start of We Also Do Repairing -->
<div id="repairing">
<h2><span>We also do repairing</span></h2>
<p>You can remove any link to our websites from this template you're free to use the template without linking
back to us. Don't want your boss to know you used a free website template ;) .</p>
</div>
<div class="clearthis"> </div>
<!-- End of We Also Do Repairing -->
<!-- Start of Get Special Offer -->
<div id="offer_container">
<div id="offer">
<h2><span>Get <strong>Special</strong> Offer</span></h2>
<p> This is a demo text. It will be replaced by the original. This is a demo text. </p>
<div class="link-go"> <a href="http://www.free-css.com/"><span>Go</span></a> </div>
</div>
</div>
<div class="clearthis"> </div>
<!-- End of Get Special Offer -->
</div>
<div class="clearthis"> </div>
</div>
<!-- Start of Featured Products -->
<div id="featured_container">
<div id="featured">
<h2><span>Featured Products</span></h2>
<div id="featured_products">
<ul>
<li><a href="http://www.free-css.com/"><img src="fibreglass-images/featured_product_01.jpg" width="105" height="82" alt="Featured Product" /></a>
<h4>Model 334</h4>
</li>
<li><a href="http://www.free-css.com/"><img src="fibreglass-images/featured_product_02.jpg" width="105" height="82" alt="Featured Product" /></a>
<h4>Model 334</h4>
</li>
<li><a href="http://www.free-css.com/"><img src="fibreglass-images/featured_product_03.jpg" width="105" height="82" alt="Featured Product" /></a>
<h4>Model 334</h4>
</li>
<li class="end"><a href="http://www.free-css.com/"><img src="fibreglass-images/featured_product_04.jpg" width="105" height="82" alt="Featured Product" /></a>
<h4>Model 334</h4>
</li>
</ul>
<div class="clearthis"> </div>
</div>
<div class="featured_nav"> <a href="http://www.free-css.com/">Previous</a> </div>
<div class="featured_nav"> <a href="http://www.free-css.com/">1</a> | <a href="http://www.free-css.com/">2</a> | <a href="http://www.free-css.com/">3</a> </div>
<div class="featured_nav"> <a href="http://www.free-css.com/">Next</a> </div>
<div class="link-more"> <a href="http://www.free-css.com/">Read More</a> </div>
<div class="clearthis"> </div>
</div>
</div>
<div class="clearthis"> </div>
<!-- End of Featured Products -->
</div>
</div>
<!-- End of Main Content Area -->
<!-- Start of Page Footer -->
<div id="page_footer"> Powered by <a href="http://www.freewebsitetemplates.com">Free Website Templates</a> </div>
<!-- End of Page Footer -->
<div class="clearthis"> </div>
</div>
</body>
</html>
Related examples in the same category