catch_info
<!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>Catchinfo</title>
<style type='text/css'>
/* CSS Document */
body{
padding:0px;
margin:0px;
background:url(catch_info-images/bg.gif) repeat-x #FEEDB7;
font-family:Arial, Helvetica, sans-serif;
color:#919191;
font-size:14px;
}
img, ul, li, h1, h2, h3, p, div{
padding:0;
margin:0;
}
.blank {
clear:both;
line-height:0px;
font-size:0px;
}
/*-------------------main frame------------*/
#main{
width:750px;
margin:0 auto 0 auto;
}
/*---------------------header------------*/
#header{
width:750px;
height:77px;
background:url(catch_info-images/header_pic.jpg) no-repeat #CCCCCC;
position:relative;
color:#FFFFFF;
}
#header img{
margin:10px 0 0 182px;
}
#header h1{
position:absolute;
top:56px; left:238px;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:12px;
}
/*-------------------body---------------*/
#body{
width:750px;
}
/*-------------------left side----------------*/
#left{
width:157px;
height:741px;
float:left;
}
#left ul{
background:url(catch_info-images/left_bg.gif) no-repeat 0 0 #FEEDB7;
list-style-type:none;
width:157px;
height:741px;
font-size:0px;
}
#left ul li{
display:block;
padding:156px 0 0 72px;
}
#left ul li.li1{
display:block;
margin:77px 0 0 72px;
padding:0 0 0 0;
}
#left ul li a{
display:block;
text-indent:-2000px;
}
#left ul li a.home{
background:url(catch_info-images/home.gif) no-repeat;
height:68px;
width:53px;
margin-left:11px;
}
#left ul li a.contact{
background:url(catch_info-images/contact.gif) no-repeat 0 0px;
height:74px;
width:64px;
}
/*----------------------middle part------*/
#mid{
width:437px;
height:741px;
float:left;
color:#919191;
font-size:14px;
background:url(catch_info-images/middle_pic.jpg) no-repeat 0 0 #FDFBFB;
}
#mid h1{
background:url(catch_info-images/dont_miss.gif) no-repeat;
height:48px;
width:131px;
text-indent:-2222px;
margin:125px 0 0 15px;
}
#mid a.see{
width:84px;
height:23px;
display:block;
margin:18px 0 0 17px;
font-family:Georgia, Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
background:url(catch_info-images/see_details_bg.gif) no-repeat #665A2E;
line-height:21px; padding-left:19px;
}
#mid a.see:hover{
background:url(catch_info-images/see_details_bgh.gif) no-repeat;
}
#mid h2{
background:url(catch_info-images/icon.gif) no-repeat 27px 0;
height:33px; width:351px;
font-family:Georgia, Arial, Helvetica, sans-serif;
color:#AB8F4A; font-size:28px;
display:block; float:left;
font-weight:normal;
margin:78px 0 0 0;
padding-left:86px;
margin-bottom:20px;
}
#mid p{
width:401px;
margin:0px 10px 28px 24px;
line-height:17px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
#mid p.nibh{
width:401px;
margin:0px 10px 0px 24px;
line-height:19px;
font-style:italic;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
color:#171717;
}
#mid p.nibh span.name{
margin:0px 10px 0px 200px;
line-height:17px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
color:#2084BD;
background-color:#FFFFFF;
font-weight:bold;
}
#mid p.nibh span{
color:#B9974B; font-size:24px; font-weight:bold;
font-family:Georgia, Arial, Helvetica, sans-serif;
}
#mid a{
width:50px;
height:23px;
display:block;
margin:19px 0 0 342px;
font-family:Georgia, Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
background:url(catch_info-images/more_bg.gif) no-repeat #918054;
text-decoration:none;
line-height:19px;
padding-left:18px;
}
#mid a:hover {
background:url(catch_info-images/more_bgh.gif) no-repeat;
}
#mid_pic a.more:hover{
text-decoration:underline;
}
/*------------------------right-------------------*/
#right_bg{
background:url(catch_info-images/right_bg.gif) no-repeat 0 0 #FEEDB7;
color:#503A00;
width:153px;
height:741px;
float:left;
}
#right_bg ul{
width:106px;
list-style-type:none;
display:block;
margin:142px 0 0 36px;
font-size:0px;
}
#right_bg ul li{
display:block;
border-bottom:#A89761 1px dashed;
height:29px;
}
#right_bg ul li.li2{
display:block;
border-bottom:none;
height:29px;
}
#right_bg ul li a{
font-family:Georgia, "Times New Roman", Times, serif;
font-size:14px;
color:#503A00;
text-decoration:none;
line-height:29px;
width:95px;
height:28px;
padding-left:11px;
display:block;
background:url(catch_info-images/arrow.gif) no-repeat 0 13px;
}
#right_bg ul li a:hover{
background-color:#FFF6D1;
}
/*-----------------------end body-------------*/
#bottom_table{
width:100%;
background-color:#FFFFFF;
color:#919191;
font-family:Arial, Helvetica, sans-serif;
margin:0 auto 0 auto;
float:left;
padding-top:31px;
padding-bottom:32px;
}
#bottom{
width:750px;
margin:0 auto 0 auto;
background-color:#FFFBEF;
height:448px;
}
#bottom p.line{
width:1px;
height:369px;
background:url(catch_info-images/line.gif) repeat-y #FFFBEF;
float:left;
margin-top:31px;
}
#leftdiv{
width:397px;
float:left;
}
#leftdiv h2{
background:url(catch_info-images/current_events.gif) no-repeat 23px 19px #FFFBEF;
width:274px;
height:40px;
display:block;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:28px;
color:#AB8F4A;
padding:22px 0 0 121px;
line-height:17px;
font-weight:normal;
}
#leftdiv h2 span{
font-family:Georgia, "Times New Roman", Times, serif;
color:#038AD7;
font-size:14px;
font-weight:bold;
line-height:17px;
}
#leftdiv p{
width:333px;
display:block;
margin:0 39px 0 23px;
line-height:17px;
margin-top:20px;
font-size:14px;
padding-bottom:5px;
}
#leftdiv a{
width:50px;
height:23px;
display:block;
margin:10px 0 0 275px;
font-family:Georgia, Arial, Helvetica, sans-serif;
font-size:14px;
color:#FFFFFF;
background:url(catch_info-images/more_bg.gif) no-repeat #FFFBEF;
text-decoration:none;
line-height:19px;
padding-left:18px;
}
#leftdiv a:hover{
background:url(catch_info-images/more_bgh.gif) no-repeat;
}
/*------------------right--------*/
#right{
width:349px;
float:left;
display:block;
}
#right img{
width:289px;
height:116px;
margin:13px 0 0 33px;
}
#right h2{
height:50px;
width:225px;
background:url(catch_info-images/services.gif) no-repeat 34px 31px #FFFBEF;
display:block;
font:28px/17px Georgia, "Times New Roman", Times, serif;
color:#AB8F4A;
padding:57px 0 0 123px;
}
#right h3{
width:282px;
font:14px/17px Arial, Helvetica, sans-serif;
color:#048BD8;
margin:0 0 0 54px;
letter-spacing:-.05em;
font-weight:bold;
}
#right ul{
list-style-type:none;
width:275px;
display:block;
padding:3px 0 0 54px;
font-size:0px;
}
#right ul li{
display:block;
height:24px;
background:url(catch_info-images/right_arrow.gif) no-repeat 0 6px #FFFBEF;
}
#right ul li a{
font:14px/22px Arial, Helvetica, sans-serif;
color:#919191;
text-decoration:underline;
display:block;
margin-left:18px;
}
#right ul li a:hover{
text-decoration:none;
}
#right a.link{
width:49px;
height:23px;
background:url(catch_info-images/more_bg.gif) no-repeat #A99661;
margin: 0px 0 0 264px;
font:14px/18px Georgia, "Times New Roman", Times, serif;
color:#FFFFFF;
display:block;
padding-left:19px;
text-decoration:none;
}
#right a.link:hover{
background:url(catch_info-images/more_bgh.gif) no-repeat;
}
/*---------------------------footer--------------*/
#footer{
width:100%;
height:146px;
background-color:#A99661;
float:left;
border-bottom:#FFFFFF 4px solid;
color:#FFFFFF;
}
#footer_div{
width:520px;
margin:0 auto 0 auto;
}
#footer_div ul{
width:520px;
display:block;
list-style-type:none;
margin:19px 0 0 0;
position:absolute;
}
#footer_div ul li{
display:block;
float:left;
}
#footer_div ul li a{
font:12px/11px Arial, Helvetica, sans-serif;
color:#FDFDFD;
text-decoration:none;
margin:0 8px 0 8px;
}
#footer_div ul li a.mg{
font:12px/11px Arial, Helvetica, sans-serif;
color:#FDFDFD;
text-decoration:none;
margin:0 11px 0 0px;
}
#footer_div ul li a.mg:hover{
text-decoration:underline;
}
#footer_div ul li a:hover{
text-decoration:underline;
}
#footer_div ul.ad{
width:323px;
display:block;
list-style-type:none;
margin:40px 0 0 110px;
}
#footer_div ul.ad li{
height:29px;
width:96px;
display:block;
border-right:#FFFFFF 1px dashed;
}
#footer_div ul.ad li.nobor{
height:29px;
width:96px;
display:block;
margin-left:10px;
border-right:none;
}
#footer_div ul.ad li.nobor1{
height:29px;
width:96px;
display:block;
float:left;
margin-left:10px;
border-right:#FFFFFF 1px dashed;
}
#footer_div ul.ad li a{
font:10px Tahoma, Arial, Helvetica, sans-serif;
color:#FAFAFA;
font-weight:bold;
text-decoration:none;
margin:0 0 0 0;
}
#footer_div ul.ad li a span{
color:#A3DCFC;
text-transform:uppercase;
}
#footer_div ul.css{
width:100px;
display:block;
margin:75px 0 0 211px;
font-size:0px;
padding:0px;
}
#footer_div ul.css li{
display:block;
float:left;
margin:0 0 0 0;
}
#footer_div ul.css li a{
display:block;
text-indent:-2000px;
height:14px;
margin:0 2px 0 0;
font-size:0px;
}
#footer_div ul.css li a.htm{
background:url(catch_info-images/xhtml.gif) no-repeat 0 0; width:48px;
}
#footer_div ul.css li a.cs{
background:url(catch_info-images/css.gif) no-repeat; width:36px;
}
#footer_div p{
padding:100px 0 0 190px;
font:11px/11px Tahoma, Arial, Helvetica, sans-serif;
color:#FAFAFA;
font-weight:normal;
height:14px;
}
</style>
<!--[if IE 6]>
<style>
#left ul li a{text-indent:-2000px;}
</style>
<![endif]-->
</head>
<body>
<div id="main"><!--main start -->
<div id="header"><!--header start -->
<img src="catch_info-images/logo.gif" width="221" height="61" alt="Catchinfo" />
<h1>Lorem ipsum dolor sit amet,</h1>
</div><!--header end -->
<div id="body"><!--body start -->
<div id="left"><!--left start -->
<ul>
<li><a href="#" class="home" title="home">Home</a></li>
<li class="li1"><a href="#" class="contact" title="contact">Contact</a></li>
</ul>
</div><!--left end -->
<div id="mid"><!--niddle start -->
<h1>Dont miss a chance</h1>
<a href="#" class="see">See details</a>
<h2>why we are ahead</h2>
<p>Catch Info is a <strong>free, tableless, W3C-compliant</strong> 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>We only ask you to not remove <strong>"Design by Template World"</strong> and the link http://www.templateworld.com from the footer of the template.</p>
<p class="nibh"><span>“</span>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.<span>”</span><span class="name">m joseph</span></p>
<a href="#">more</a></div><!--middle end -->
<div id="right_bg"><!--right side start -->
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Surpport</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Chat</a></li>
<li><a href="#">Ideas</a></li>
<li class="li2"><a href="#">Meeting</a></li>
</ul></div><!--right side end -->
<br class="blank" />
</div><!--body end -->
</div><!--main end -->
<div id="bottom_table"><!--current Event start -->
<div id="bottom"><!--start -->
<div id="leftdiv"><!--left side start -->
<h2>current events<br />
<span>on 30th september 2006</span></h2>
<p><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.ut Etiam ut magna. Proin velit enim,</strong> suscipit sed, dapibus gravida, scelerisqu
e etmagna. Fusce dolor leo, feugiat quis, elementum aullamcoi<br />
narcu. Praesent t</p>
<p>nibh. Vestibulum at velit sit amet nunc malesuada venenatis. Sed malesuada odio a lacus sollicitudin elementum. Praesent porttitor auctor leo. Morbi congue arcu. Morbi vel risus sit amet erat fringill</p>
<p><strong>nibh. Vestibulum at velit sit amet nunc malesuada </strong>
venenatis. Sed malesuada odio a lacus sollicitudin elementum. Praesent porttitor auctor leo. </p>
<a href="#">more</a>
</div><!--left side end -->
<p class="line"></p>
<div id="right"><!--right side start -->
<a href="#"><img src="catch_info-images/online.gif" alt="online supportchart" width="289" height="116" border="0" title="online supportchart"/></a>
<h2>services</h2>
<h3>Lorem ipsum dolor sit amet, consectetuer adipiscing </h3>
<ul>
<li><a href="#">suscipit sed, dapibus gravida, scelerisqu </a></li>
<li><a href="#">etmagna. Fusce dolor leo, feugiat quis,</a></li>
<li><a href="#">elementum aullamcoi</a></li>
<li><a href="#">narcu. Praesent t</a></li>
</ul>
<a href="#" class="link">more</a>
</div>
<!--right side end -->
</div><!--end -->
</div><!--current event end -->
<div id="footer"><!--footer start -->
<div id="footer_div"><!--footer navigation start -->
<ul>
<li><a href="#" class="mg">About us</a>|</li>
<li><a href="#">Services</a>|</li>
<li><a href="#">Surpport</a>|</li>
<li><a href="#">Testimonials</a></li>
<li>|<a href="#">Clients</a>|</li>
<li><a href="#">Chat</a>|</li>
<li><a href="#"> Ideas</a>|</li>
<li><a href="#">Meeting</a></li>
</ul>
<ul class="ad">
<li class="nobor1"><a><span>Designed by:</span></a><br />
<a class="footer_div" href="http://www.templateworld.com" target="_blank">Template World</a></li>
<li class="nobor1"><a><span>ph:</span><br />
012-2568-6897</a></li>
<li class="nobor"><a><span>fax:</span><br />
(012)-2568-6898</a></li>
</ul>
<ul class="css">
<li><a href="http://validator.w3.org/check?uri=referer" target="_blank" class="htm" title="xhtml valid">xhtml</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" class="cs" title="css valid">css</a></li>
</ul>
<p>catchinfo. All right reserved.</p>
</div><!--footer navigation end -->
</div><!--footer end -->
</body>
</html>
Related examples in the same category