AttainDigital
<!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>Your Website Title</title>
<meta name="description" content="Your Website Description" />
<meta name="keywords" content="Your Website Keywords" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type='text/css'>
/* elements */
body { margin: 0 0 20px 0; text-align: center; background: #F8F8F8 }
body, td, input, select, textarea { font: normal small/1.2 "Trebuchet MS", Helvetica, Arial, sans-serif; letter-spacing: 1px }
img { display: block; border: none }
h1 { font-size: 160% }
h2 { font-size: 140% }
hr { color: #DDD; background: #DDD; height: 1px; margin: 0 }
p { margin: 10px 0 }
a { text-decoration: none; color: #2468A2; font-weight: normal }
a:hover { color: #F86A1C }
/* Id's */
#hdr, #mnu, #bdy, #ftr, #ftr_img { width: 962px; margin: auto; text-align: left; background: #FFF }
#hdr { background-image: url(AttainDigital-img/hdr.jpg); height: 260px }
#mnu { background: #FFF url(AttainDigital-img/bkg_mnu.gif) no-repeat bottom center; min-height: 41px }
#bdy { margin-top: 15px; background: #FFF url(AttainDigital-img/bkg_bdy.gif) no-repeat top center }
#ftr { background: #FFF url(AttainDigital-img/bkg_ftr.gif) no-repeat top center; min-height: 45px }
#lft { float: left; width: 717px }
#rgt { float: right; width:180px; color: #333; font-size: 85% }
/* classes */
.inr { padding: 15px }
.clr { clear: both }
.w1 { float: left; width: 351px }
.w2 { float: left; width: 229px }
.w3 { float: left; width: 717px }
.imgfr { float: right; margin: 0 0 5px 5px }
.imgfl { float: left; margin: 0 5px 5px 0 }
.spcr { width: 15px; float: left }
.more { display: block; text-align: right; margin-top: 5px }
.pad { padding: 2px; border: 1px solid #CCC }
/* pseudos */
h1 span, h2 span { color: #2468A2; display: block }
#ftr .inr { padding-bottom: 6px }
#ftr p { margin: 3px 0 }
#hdr h1 { color: #FFF; margin: 0; padding: 10px; font-size: 280% }
#lft hr { margin: 10px 0 15px 0 }
#nws b { color: #F86A1C }
ul.menu, ul.menu li { list-style: none; margin: 0; padding: 0 }
ul.menu { position: relative; float: left }
ul.menu li { float: left; line-height: 1.3em; vertical-align: middle }
ul.menu li a { display: block; padding: 10px; text-decoration: none; color: #000; font-weight: bold }
ul.menu li a:hover { color: #2468A2 }
/* Please ensure that the Attain Digital footer remains visible at all times */
#atn { text-align: center; margin: 20px 0 }
</style>
</head>
<body>
<div id="hdr">
<h1>Your Company Name</h1>
</div>
<div id="mnu">
<ul class="menu menu-horizontal">
<li><a href="index.html" title="Homepage">Home</a></li>
<li><a href="page_1.html" title="Our Products">Our Products</a></li>
<li><a href="page_2.html" title="About Us">About Us</a></li>
<li><a href="#" title="Testimonials">Testimonials</a></li>
<li><a href="#" title="News">News</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</div>
<div id="bdy">
<div class="inr">
<div id="lft">
<div class="w1">
<h1><span>What Our Company</span> Can Do For You</h1>
<img class="pad" src="AttainDigital-img/img2.jpg" width="345" height="114" alt="Image two"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id vestibulum quam. Sed nec ante quis nunc porta faucibus id sit amet nisl. Phasellus imperdiet, libero sed pharetra vulputate, velit est porttitor dolor, nec feugiat mi odio sit amet diam. Suspendisse potenti.</p>
<p class="more"><a href="#" title="Find out more">Find out more »</a></p>
</div>
<div class="spcr"> </div>
<div class="w1">
<h1><span>Our Range</span> Of Services</h1>
<img class="pad" src="AttainDigital-img/img1.jpg" width="345" height="114" alt="Image two"/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id vestibulum quam. Sed nec ante quis nunc porta faucibus id sit amet nisl. Phasellus imperdiet, libero sed pharetra vulputate, velit est porttitor dolor, nec feugiat mi odio sit amet diam. Suspendisse potenti.</p>
<p class="more"><a href="#" title="Find out more">Find out more »</a></p>
</div>
<div class="clr"><hr/></div>
<div class="w2">
<h2><span>The Longest</span> Long stands</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id vestibulum quam. Sed nec ante quis nunc porta faucibus id sit amet nisl.</p>
<p class="more"><a href="#" title="Find out more">Find out more »</a></p>
</div>
<div class="spcr"> </div>
<div class="w2">
<h2><span>Our Range Of</span> Round Tuits</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id vestibulum quam. Sed nec ante quis nunc porta faucibus id sit amet nisl.</p>
<p class="more"><a href="#" title="Find out more">Find out more »</a></p>
</div>
<div class="spcr"> </div>
<div class="w2">
<h2><span>Top Selling</span> Glass Hammers</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id vestibulum quam. Sed nec ante quis nunc porta faucibus id sit amet nisl.</p>
<p class="more"><a href="#" title="Find out more">Find out more »</a></p>
</div>
<div class="clr"></div>
</div>
<div id="rgt">
<h1><span>Latest</span> Industry News</h1>
<div id="nws">
<p><b>January 1st, 2009</b><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id vestibulum quam.<br/><span class="more"><a href="#" title="Find out more">Find out more »</a></span></p>
<hr/>
<p><b>February 1st, 2009</b><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id vestibulum quam.<br/><span class="more"><a href="#" title="Find out more">Find out more »</a></span></p>
<hr/>
<p><b>March 1st, 2009</b><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id vestibulum quam.<br/><span class="more"><a href="#" title="Find out more">Find out more »</a></span></p>
<hr/>
</div>
<p><br/><b>Your Company Name<br/>Name or Number<br/>Street Name<br/>Suburb<br/>Town/City<br/>Region</b></p>
<p><b>Tel</b>: 01234 5678 90<br/><b>E-mail</b>: You@YourSite.com</p>
</div>
<div class="clr"></div>
</div>
</div>
<div id="ftr">
<div class="inr">
<p><b>Tel</b>: 01234 5678 90 - <b>E-mail</b>: YourEmail@YourSite.com</p>
<p>
<a href="#" title="Deep link one">Deep Link One</a> |
<a href="#" title="Deep link two">Deep Link Two</a> |
<a href="#" title="Deep link three">Deep Link Three</a> |
<a href="#" title="Deep link four">Deep Link Four</a> |
<a href="#" title="Deep link five">Deep Link Five</a>
</p>
</div>
</div>
<div><img id="ftr_img" src="AttainDigital-img/bkg_ftr_base.gif" width="962" height="9" alt="*"/></div>
<!-- The HTML below must remain un-altered if you wish to use this template -->
<div id="atn">Website template by <a href="http://www.attaindigital.co.uk" title="Attain Digital">Attain Digital</a></div>
<!-- End of demand :P -->
</body>
</html>
Related examples in the same category