Quotation layout
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Inter Craft</title>
<style type='text/css'>
/* CSS Document */
body{padding:0px; margin:0px; background:url(110x-images/mainbg.gif) 0 0 repeat-x; font:14px/20px Arial, Helvetica, sans-serif;}
div, p, ul, h1, h2, h3, form, label{margin:0px; padding:0px;}
ul{list-style-type:none;}
/*---Top Panel---*/
#topPan{width:729px; height:317px; position:relative; margin:0 auto;}
#topPan ul{width:729px; height:44px; background:url(110x-images/topmenubg.jpg) 0 0 no-repeat; font-size:13px; position:absolute; top:0px; left:0px;}
#topPan ul li{width:114px; float:left;}
#topPan ul li.leftpadding{padding:0 0 0 59px; width:86px; background: url(110x-images/homebg.gif) 100% 0 no-repeat #fff; color:#674E00; text-decoration:none; text-align:center; line-height:44px;}
#topPan ul li a{width:114px; height:44px; display:block; background:url(110x-images/menubg-normal.gif) 0 0 repeat-x #F2F2F2; color:#674E00; text-decoration:none; text-align:center; line-height:44px;}
#topPan ul li a:hover{width:114px; background:#fff; color:#674E00; text-decoration:none;}
#topPan #logo{width:63px; height:73px; position:absolute; top:108px; left:46px;}
#topPan h2{width:160px; height:40px; display:block; background:url(110x-images/companyname.gif) 0 0 no-repeat #FFFCF2; color:#B38800; position:absolute; top:108px; left:114px; font-size:12px; line-height:16px; padding:41px 0 0; font-weight:normal;}
#topPan h1{width:315px; height:239px; background:url(110x-images/header.jpg) 0 0 no-repeat; position:absolute; top:77px; right:0px; text-indent:-20000px;}
#topPan form{width:380px; height:46px; background:url(110x-images/formarea.gif) 0 0 no-repeat #fff; color:#6E6E6E; position:absolute; top:242px; left:31px; font:18px/46px Georgia, "Times New Roman", Times, serif;}
#topPan form label{float:left; width:104px; display:block; padding:0 0 0 72px;}
#topPan form input{width:112px; height:18px; float:left; display:block; margin:12px 14px 0 0;}
#topPan form input.button{width:50px; height:19px; float:left; display:block; border:none; background:url(110x-images/button.gif) 0 0 no-repeat #F2F2F2; font-size:14px; line-height:19px; font-weight:bold; color:#fff; text-align:center; margin:12px 0 0;}
/*---/Top Panel---*/
/*---Middle Panel---*/
#middlePan{width:683px; background:url(110x-images/middlebg.jpg) 0 0 no-repeat; position:relative; margin:0 auto; padding:38px 0 0 46px;}
#middletopPan{width:682px; position:relative; top:0px; left:0px;}
#middletopPan p.captiontext{font:17px/22px Georgia, "Times New Roman", Times, serif; font-style:italic; background:#fff; color:#989898; padding:0 310px 0 0;}
#middletopPan p.name{width:77px; background:#fff; color:#000; font-size:14px; font-style:italic; font-weight:bold; padding:0 0 0 300px;}
#middletopPan p.border{background:url(110x-images/dot-line.gif) 0% 50% repeat-x; height:74px; padding:0px; margin:0px;}
#middletopPan #services{width:254px; height:101px; background:url(110x-images/servicesbg.jpg) 0 0 no-repeat #DFCC97; color:#fff; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; position:absolute; top:0px; right:0px;}
#middletopPan #services p.largeone{font-size:24px; padding:18px 0 0 100px;}
#middletopPan #services p.largetwo{font-size:30px; padding:5px 0 0 100px;}
#middletopPan #services p.click{width:51px;}
#middletopPan #services p.click a{width:36px; height:18px; display:block; font-size:16px; background:url(110x-images/arrow.gif) 0% 50% no-repeat #AC9248; line-height:14px; color:#fff; text-decoration:none; margin:14px 0 0 166px; padding:0 0 0 15px;}
#middletopPan #services p.click a:hover{text-decoration:underline;}
/*---/Middle Panel---*/
/*---Left Panel---*/
#leftPan{width:428px; float:left;}
#leftPan h2{width:200px; font:22px/28px Georgia, "Times New Roman", Times, serif; background:#fff; color:#3D3C2C;}
#leftPan h3{width:300px; height:70px; background:url(110x-images/icon1.jpg) 0% 50% no-repeat #fff; color:#B38800; font:18px/70px Georgia, "Times New Roman", Times, serif; padding:0 0 0 65px;}
#leftPan p.redtext{font-size:18px; background:#fff; color:#D20039; padding:0 61px 0 0;}
#leftPan p.more{width:66px; height:25px;}
#leftPan p.more a{width:60px; height:25px; display:block; background:url(110x-images/arrow1.gif) 85% 50% no-repeat #AC9145; color:#fff; font:14px/25px "Trebuchet MS",Arial, Helvetica, sans-serif; text-transform:uppercase; text-decoration:none; margin:0 0 0 300px; padding:0 0 0 6px;}
#leftPan p.more a:hover{background:url(110x-images/arrow1.gif) 85% 50% no-repeat #D20039; color:#fff; text-decoration:none;}
#leftPan ul{padding:20px 62px 10px 0;}
#leftPan ul li{height:20px;}
#leftPan ul li.top-lipadding{padding:24px 0 0;}
#leftPan ul li a{background:url(110x-images/bullet.gif) 0 6px no-repeat #fff; color:#3D3C2C; font-size:14px; line-height:20px; text-decoration:none; padding:0 0 0 20px;}
#leftPan ul li a:hover{ background:url(110x-images/bullet2.gif) 0 6px no-repeat #fff; color:#7A7A77; text-decoration:none;}
#leftPan #blog{width:367px; height:167px; background:url(110x-images/image1.jpg) 0 0 no-repeat #fff; color:#3D3C2C; margin:39px 0 0; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;}
#leftPan #blog p.smalltext{font-size:20px; padding:16px 0 0 137px;}
#leftPan #blog p.bigtext{font-size:24px; padding:5px 0 0 137px;}
#leftPan #blog p.link{font:14px/18px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; margin:35px 19px 0 137px;}
#leftPan #blog p.link a{display:block; width:132px; height:54px; background:url(110x-images/click-normal.gif) 100% 0% no-repeat #C4C4C4; color:#fff; font-weight:bold; text-decoration:none; padding:0 77px 0 0;}
#leftPan #blog p.link a:hover{text-decoration:none; background:url(110x-images/click-hover.gif) 100% 0% no-repeat #C4C4C4; color:#fff;}
/*---/Left Panel---*/
/*---Right Panel---*/
#rightPan{width:254px; float:left;}
#rightPan h2{width:200px; height:36px; font:22px/20px Georgia, "Times New Roman", Times, serif; background:#fff; color:#3D3C2C;}
#rightPan h3{width:200px; height:36px; font:22px/20px Georgia, "Times New Roman", Times, serif; background:#fff; color:#3D3C2C;}
#rightPan ul{padding:0 0 25px 0;}
#rightPan ul li{width:220px; height:25px;}
#rightPan ul li a{background:url(110x-images/arrow2.gif) 0 7px no-repeat #fff; color:#3D3C2C; line-height:25px; text-decoration:underline; padding:0 0 0 20px;}
#rightPan ul li a:hover{background:url(110x-images/arrow3.gif) 0 7px no-repeat #fff; color:#7A7A77; text-decoration:underline;}
#rightPan ul.nextone{padding:0 0 25px 0;}
#rightPan ul.nextone li{width:220px; height:25px;}
#rightPan ul.nextone li a{background:url(110x-images/arrow2.gif) 0 7px no-repeat #fff; color:#D20039; line-height:25px; text-decoration:underline; padding:0 0 0 20px;}
#rightPan ul.nextone li a:hover{background:url(110x-images/arrow3.gif) 0 7px no-repeat #fff; color:#7A7A77; text-decoration:underline;}
/*---/Right Panel---*/
/*---Footer Panel---*/
#footermainPan{height:117px; background:url(110x-images/footerbg.gif) 0 0 repeat-x #fff; color:#6F5D2B; font:12px/22px "Trebuchet MS",Arial, Helvetica, sans-serif; clear:both; padding:105px 0 0;}
#footerPan{width:729px; position:relative; margin:0 auto;}
#footerlogoPan{display:block; width:215px; height:40px; position:absolute; top:0px; right:0px;}
#footerPan ul{width:546px; position:absolute; top:0px; left:42px;}
#footerPan li{float:left; }
#footerPan ul li a{padding:0 10px 0; color:#6F5D2B; background: url(110x-images/footermenubg.gif) 0 0 repeat-x #FFFBEE; text-decoration:none;}
#footerPan ul li a:hover{text-decoration:underline;}
#footerPan ul.templateworld{width:250px; background:#FFF; color:#444; display:block; position:absolute; top:80px; left:50px;}
#footerPan ul.templateworld li{widows:150;}
#footerPan ul.templateworld li a{background:#FFF; display:block; color:#444; text-decoration:none;}
#footerPan ul.templateworld li a:hover{text-decoration:underline;}
#footerPan p.copyright{width:204px; background: url(110x-images/copyrightbg.gif) 0 0 repeat-x #FFFDF6; color:#D20039; position:absolute; top:23px; left:50px;}
#footerPanhtml{width:58px; height:19px; display:block; position:absolute; top:47px; left:46px;}
#footerPanhtml a{width:53px; height:19px; background:url(110x-images/button1-normal.gif) 0 0 no-repeat #fff; display:block; position:absolute; top:0px; left:0px; line-height:19px; padding:1px 0 0 5px; border:1px solid #FFFFFA; color:#353427; text-transform:uppercase; text-decoration:none;}
#footerPanhtml a:hover{background:url(110x-images/button1-hover.gif) 0 0 no-repeat #fff; color:#353427; text-decoration:none;}
#footerPancss{width:58px; height:19px; display:block; position:absolute; top:47px; left:108px;}
#footerPancss a{width:53px; height:19px; background:url(110x-images/button1-hover.gif) 0 0 no-repeat #fff; display:block; position:absolute; top:0px; left:0px; line-height:19px; padding:1px 0 0 10px; border:1px solid #FFFFFA; color:#353427; text-transform:uppercase; text-decoration:none;}
#footerPancss a:hover{background:url(110x-images/button1-normal.gif) 0 0 no-repeat #fff; color:#353427; text-decoration:none;}
</style>
</head>
<body>
<div id="topPan">
<div id="logo"><a href="index.html"><img src="110x-images/logo.gif" title="Inter Craft" alt="Inter Craft" width="67" height="73" border="0" /></a></div>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscin</h2>
<ul>
<li class="leftpadding">Home</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Client</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h1>Header Image</h1>
<form action="" method="post">
<label>newsletter</label>
<input name="" type="text" />
<input name="" type="submit" class="button" value="Go" />
</form>
</div>
<div id="middlePan">
<div id="middletopPan">
<p class="captiontext">"Inter Craft is a free, tableless, W3C-compliant web design layout by Template World. This template has been tested and proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your tastes in any way you like." </p>
<p class="name">H. David</p>
<p class="border"> </p>
<p>We only ask you to not remove "Design by Template World" and the link http://www.templateworld.com from the footer of the template.</p>
<p> </p>
<p>If you are interested in seeing more of our free web template designs feel free to visit our website, Template World. We intend to add at least 25 new free templates in the coming month.</p>
<p class="border"> </p>
<div id="services">
<p class="largeone">special</p>
<p class="largetwo">services</p>
<p class="click"><a href="#">click</a></p>
</div>
</div>
<div id="leftPan">
<h2>Latest updates </h2>
<h3>27th june 2006</h3>
<p class="redtext">Lorem Ipsum is simply dummy text of the printi and typesetting industry.</p>
<ul>
<li><a href="#">Lorem Ipsum has been the industry's standard dum</a></li>
<li><a href="#">Ipsum has</a></li>
<li><a href="#">been the industry's standard dum</a></li>
<li class="top-lipadding"><a href="#">when an unknown printe</a></li>
<li><a href="#">text ever since the 1500s, when an unknown printer</a></li>
<li><a href="#">Lorem Ipsum</a></li>
</ul>
<p class="more"><a href="#">more</a></p>
<div id="blog">
<p class="smalltext">intercraft</p>
<p class="bigtext">current blog</p>
<p class="link"><a href="#">when an unknown printetext ever sinc1500s, when an</a> </p>
</div>
</div>
<div id="rightPan">
<h2>More services</h2>
<ul>
<li><a href="#">Lorem Ipsum has</a></li>
<li><a href="#">been the industry's</a></li>
<li><a href="#">standard dum</a></li>
</ul>
<h3>Special Support</h3>
<ul class="nextone">
<li><a href="#">ver since the 1500s,</a></li>
<li><a href="#">when an unknown</a></li>
<li><a href="#">printer galley of type</a></li>
<li><a href="#">and scrambled</a></li>
<li><a href="#">especimen </a></li>
<li><a href="#">has survived</a></li>
<li><a href="#">been the dummy</a></li>
</ul>
</div>
</div>
<div id="footermainPan">
<div id="footerPan">
<div id="footerlogoPan"><a href="index.html"><img src="110x-images/footerlogo.gif" title="Inter Craft" alt="Inter Craft" width="215" height="40" border="0" /></a></div>
<ul>
<li><a href="#">Home</a>| </li>
<li><a href="#">About Us</a> | </li>
<li><a href="#">Client</a>| </li>
<li><a href="#">Testimonial</a> | </li>
<li><a href="#">Services</a> |</li>
<li><a href="#">Contact</a></li>
</ul>
<p class="copyright">>>intercraft all right reserved.</p>
<div id="footerPanhtml"><a href="http://validator.w3.org/check?uri=referer" target="_blank">HTML</a></div>
<div id="footerPancss"><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">css</a></div>
<ul class="templateworld">
<li>Design By:</li>
<li><a href="http://www.templateworld.com" target="_blank">Template World</a></li>
</ul>
</div>
</div>
</body>
</html>
Related examples in the same category