html
<!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>AppleWeb</title>
<style type='text/css'>
/* CSS Document */
body{
padding:0; margin:0;
}
div, p, h1, h2, h3, ul, img{
padding:0; margin:0;
}
ul{
list-style-type:none;
}
.balnk{
font-size:0px; line-height:0px; clear:both;
}
/*--------------------------------header-------------------*/
#main_header{
width:100%; margin:0 auto; background:url(html-images/bg.gif) repeat-x #0a2b43; color:#FFFFFF; height:216px;
}
#main_header #header{
width:764px; margin:0 auto; background:url(html-images/header_pic.gif) no-repeat #fff6d8; color:#FFFFFF; height:216px;
position:relative;
}
#main_header #header ul{
background:url(html-images/search_bg.gif) no-repeat #09283f; color:#FFFFFF; display:block; position:absolute; height:22px;
width:123px; margin:0; padding:6px 0 0 26px; top:10px; left:0px;
}
#main_header #header ul li{
float:left; display:block; margin:0 23px 0 0;
}
#main_header #header ul li a{
height:15px; text-decoration:none; text-indent:-2000px; display:block; width:20px;
}
#main_header #header ul li a.home{
background:url(html-images/home.gif) no-repeat 0 0; width:16px; height:16px;
}
#main_header #header ul li a.home:hover{
background:url(html-images/home_h.gif) no-repeat 0 0; width:16px; height:16px;
}
#main_header #header ul li a.user{
background:url(html-images/user.gif) no-repeat 0 0; width:16px; height:16px;
}
#main_header #header ul li a.user:hover{
background:url(html-images/user_h.gif) no-repeat 0 0; width:16px; height:16px;
}
#main_header #header ul li a.contact{
background:url(html-images/contact.gif) no-repeat 0 0; width:19px; height:16px;
}
#main_header #header ul li a.contact:hover{
background:url(html-images/contact_h.gif) no-repeat 0 0; width:19px; height:16px;
}
#main_header #header ul.free{
background:url(html-images/toll_free-1.gif) no-repeat #09283f; color:#5d5024; display:block; height:28px; width:140px;
padding:7px 0 0 43px; position:absolute; top:2px; left:580px; margin:0;
}
#main_header #header ul.free li{
float:left; display:block; font:10px/12px 'Trebuchet MS', Arial, Helvetica, sans-serif; text-align:center; color:#5D5024;
margin:0px 0px 0 0; padding:0 0 0 0 ; text-transform:uppercase; font-weight:normal; background-color:#FFF6D8;
}
#main_header #header ul.free li span{
font-size:14px; line-height:16px; color:#FFFFFF; font-weight:bold; background-color:#ff0033; width:63px; height:16px;
}
#main_header #header ul.free li a.call{
color:#e5f4ff; font-size:11px; font-weight:normal; text-transform:uppercase; text-indent:0px; width:72px; margin:0 0 0 0px;
padding:0 0 0 5px; background-color:#09283f;
}
#main_header #header img{
position:absolute; left:40px; top:74px; display:block;
}
#main_header #header ul.navi{
width:491px; display:block; position:absolute; top:189px; left:131px; padding:0; margin:0; background:none;
}
#main_header #header ul.navi li{
background:url(html-images/saparation.gif) no-repeat right; height:22px; padding:0 14px 0 5px; margin:0;
display:block; float:left;
}
#main_header #header ul.navi li.li1{
background:none; height:22px; padding:0 14px 0 5px; margin:0;
display:block; float:left;
}
#main_header #header ul.navi li a{
font:12px/21px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#847543; text-decoration:none; text-indent:0px;
padding:0 0 0 15px; font-weight:bold; margin:0; width:inherit; background-color:#fff6d8;
}
#main_header #header ul.navi li a:hover{
background:url(html-images/navi_h.gif) no-repeat 0 2px;
}
/*------------------------------------body-------------------------*/
#main_body{
width:100%; background-color:#0a2b43; color:#fff6d8;
}
#body{
width:764px; margin:0 auto 0 auto; padding:17px 0 0 0;
}
#body h2{
font:28px/24px 'Trebuchet MS', Arial, Helvetica, sans-serif ; color:#fff6d9; margin:0 0 15px 40px;
font-weight:normal; background-color:#0a2b43; display:block;
}
#body p{
background:url(html-images/welcome_pic.gif) no-repeat #0a2b43; color:#799fbb; padding:0 0 0 114px; margin:0 0 0 40px; width:598px;
display:block; font:13px/17px Verdana, Arial, Helvetica, sans-serif;
}
#body p span{
color:#fff6d8; background-color:#0a2b43;
}
#body p span.bg{
color:#799fbb; background-color:#041929;
}
#body p a{
width:56px; height:12px; display:block; background:url(html-images/more_bg.gif) no-repeat #0a2b43; margin:3px 0 42px 526px;
font:11px/12px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; color:#ffffff;
padding:0 0 0 5px; text-decoration:none;
}
#body p a:hover{
background:url(html-images/more_bg_h.gif) no-repeat #0a2b43; color:#ff0033;
}
#event{
width:215px; padding:0 0 0 40px; float:left; display:block;
}
#event h2{
background:url(html-images/event_bg.gif) no-repeat ; font:24px/31px "Trebuchet MS", Arial, Helvetica, sans-serif;
width:142px; height:45px; padding:5px 20px 0 54px; margin:0; font-weight:normal; display:block;
}
#event h2 span{
color:#847543; font:11px/12px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; background-color:#fff6d8;
display:block;
}
#event p{
width:191px; display:block; font:13px Verdana, Arial, Helvetica, sans-serif; color:#799fbb; background-color:#0a2b43;
margin:19px 0 0 23px; background:none; padding:0;
}
#event h3{
color:#fff6d8; font-weight:bold; font:14px Verdana, Arial, Helvetica, sans-serif; width:191px; display:block;
margin:19px 0 0 23px; padding:0; background-color:#0a2b43;
}
#event h3 a{
width:171px; height:17px; display:block; background:url(html-images/arrow.gif) no-repeat 160px 6px #051b2b; padding:0 0 0 7px;
margin:4px 0 0px 0; font:11px/15px Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF; font-weight:bold;
text-decoration:none;
}
#event h3 a:hover{
background:none; color:#FFFFFF; background-color:#0a2b43;
}
#event p a.more{
width:56px; height:12px; display:block; background:url(html-images/more_bg.gif) no-repeat #0a2b43; margin:22px 0 37px 118px;
font:11px/11px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; color:#ffffff;
padding:0 0 0 5px; text-decoration:none;
}
#event p a.more:hover{
background:url(html-images/more_bg_h.gif) no-repeat #0a2b43; color:#ff0033;
}
/*------------------------support-------------*/
#support{
width:215px; padding:0 0 0 25px; float:left; display:block;
}
#support h2{
background:url(html-images/support.gif) no-repeat; font:24px/31px 'Trebuchet MS', Arial, Helvetica, sans-serif;
width:126px; height:45px; padding:5px 20px 0 71px; margin:0; font-weight:normal; display:block;
}
#support h2 span{
color:#847543; font:11px/12px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; background-color:#fff6d8;
display:block;
}
#support p{
width:191px; display:block; font:13px Verdana, Arial, Helvetica, sans-serif; color:#799fbb; background-color:#0a2b43;
margin:19px 0 19px 16px; background:none; padding:0;
}
#support ul{
width:191px; display:block; margin:0px 0 0px 16px; padding:0;
}
#support ul li{
font:12px/15px Verdana, Arial, Helvetica, sans-serif; color:#fff6d8; background-color:#0a2b43; width:191px; display:block;
padding:0 0 0 0;
}
#support ul li a{
font:12px/17px Verdana, Arial, Helvetica, sans-serif; color:#799fbb; background-color:#0a2b43; text-decoration:none;
display:block; padding:5px 0 5px 0; margin:0;
}
#support a.online{
width:146px; height:57px; border:#486d88 1px solid; display:block; margin:20px 0 0 16px; background-color:#051b2b;
color:#fff6d8; padding:10px 18px 0 16px; font:22px/28px Verdana, Arial, Helvetica, sans-serif;
font-weight:normal; text-transform:uppercase; text-decoration:none;
}
#support a.online span{
color:#799fbb; font-size:18px; line-height:18px; padding:0 0 0 8px; background-color:#051b2b; display:block;
}
#support a.online:hover{
background-color:#1c4f75; color:#fff6d8;
}
/*--------------------------------services-------------------*/
#services{
width:215px; padding:0 0 0 28px; float:left; display:block;
}
#services h2{
background:url(html-images/services.gif) no-repeat ; font:24px/31px 'Trebuchet MS', Arial, Helvetica, sans-serif;
width:140px; height:45px; padding:5px 20px 0 53px; margin:0; font-weight:normal; display:block;
}
#services h2 span{
color:#847543; font:11px/12px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; background-color:#fff6d8;
display:block;
}
#services p{
width:191px; display:block; font:13px Verdana, Arial, Helvetica, sans-serif; color:#799fbb; background-color:#0a2b43;
margin:19px 0 0 16px; background:none; padding:0;
}
#services h3{
color:#fff6d8; font:14px Verdana, Arial, Helvetica, sans-serif; width:190px; display:block;
margin:19px 0 0 16px; padding:0; font-weight:bold; background-color:#0a2b43;
}
#services ul{
width:191px; display:block; margin:5px 0 0 16px;
}
#services ul li{
background:url(html-images/arrow1.gif) no-repeat 0 12px ; display:block; padding:0 0 0 14px;
}
#services ul li a{
font:14px/24px Verdana, Arial, Helvetica, sans-serif; color:#799fbb; text-decoration:underline; background-color:#0a2b43;
}
#services ul li a:hover{
text-decoration:none;
}
#services a.more1{
width:56px; height:12px; display:block; background:url(html-images/more_bg.gif) no-repeat #0a2b43; margin:39px 0 0 121px;
font:11px/12px Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; color:#ffffff;
padding:0 0 0 5px; text-decoration:none;
}
#services a.more1:hover{
background:url(html-images/more_bg_h.gif) no-repeat #0a2b43; color:#ff0033;
}
/*---------------------------------footer-----------------*/
#main_footer{
width:100%; float:left; background:url(html-images/footer_bg.gif) repeat-x #0c1d2a; color:#ffffff;
border-top:#ffffff 1px solid; margin:0px; padding:0px;
}
#footer {
width:530px; height:187px;
margin:0 auto 0 auto;
}
#footer ul{
width:500px; display:block; list-style-type:none; margin:46px 0 0 40px; position:absolute;
}
#footer ul li{
display:block; float:left;
}
#footer ul li a{
font:14px/12px 'Trebuchet MS', Arial, Helvetica, sans-serif;
color:#ffffff; background-color:#09161f;
text-decoration:none;
margin:0 16px 0 16px;
}
#footer ul li a.mg{
font:12px/11px Arial, Helvetica, sans-serif;
color:#ffffff; background-color:#09161f;
text-decoration:none;
margin:0 11px 0 0px;
}
#footer ul li a.mg:hover{
text-decoration:underline;
}
#footer ul li a:hover{
text-decoration:underline;
}
#footer ul.ad{
width:323px; display:block; list-style-type:none; margin:77px 0 0 90px;
}
#footer ul.ad li{
height:40px;
width:96px;
display:block;
border-right:#FFFFFF 1px dashed;
}
#footer ul.ad li.nobor{
height:40px; width:96px; display:block; margin-left:10px; border-right:none;
}
#footer ul.ad li.nobor1{
height:40px; width:96px; display:block; float:left; margin-left:10px; border-right:#FFFFFF 1px dashed;
}
#footer ul.ad li a{
font:10px/12px Tahoma, Arial, Helvetica, sans-serif; color:#d1bd86; background-color:#0c1c27; font-weight:bold;
text-decoration:none; margin:0 0 0 0; display:block;
}
#footer ul.ad li a span{
color:#ff0033; background-color:#0b1a24;
text-transform:uppercase; margin:0 10px 0 0; display:block;
}
#footer ul.css{
width:100px;
display:block;
margin:75px 0 0 211px;
font-size:0px;
padding:0px;
}
#footer p{
padding:135px 0 0 165px; font:11px/16px Tahoma, Arial, Helvetica, sans-serif; color:#FAFAFA;
background:url(html-images/footer_bg.gif) repeat-x #0c1d29; font-weight:normal; height:14px; margin:0;
}
#footer p.de{
padding:0 0 0 165px; margin:0; line-height:12px; width:160px; text-align:center; background-color:#0c1d2a;
color:#fff; background:none;
}
#footer p.de a{
color:#fff; background-color:#0c1d2a; text-decoration:underline;
}
#footer p.de a:hover {
color:#fff; background-color:#0a5083;
}
</style>
</head>
<body>
<div id="main_header">
<div id="header">
<ul>
<li><a href="#" class="home" title="home">home</a></li>
<li><a href="#" class="user" title="user">user</a></li>
<li><a href="#" class="contact" title="contact">contact</a></li>
</ul>
<ul class="free">
<li><a class="call">800-121-4545 759-121-5454</a></li>
</ul>
<img src="html-images/logo.gif" alt="appleweb" width="205" height="65" title="appleweb" />
<ul class="navi">
<li><a href="#">Network</a></li>
<li><a href="#">Submission</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">Finance</a></li>
<li class="li1"><a href="#">Testimonials</a></li>
</ul>
</div>
</div>
<div id="main_body">
<div id="body">
<h2>why choose us?</h2>
<p><span>AppleWeb</span> 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. We only ask you to not remove "Design by Template World" and the link http://www.templateworld.com from the footer of the template. 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. <a href="#">More...</a></p>
<!--latest event start -->
<div id="event">
<h2>latest events <span>on 02nd october 2006</span></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. DonecSed fringilla ligula dol, eleifend cursus, tincidunt ir, tempus id, elitau auguearcr. Nulla pede sapien, variusrtn vitae </p>
<h3>tellus,dapibusvitae, vehicula vitae, <a href="#">Aculis ante congue</a></h3>
<p>aculis ante congue vel,uar risus. Aenean a pede. Sedr fringilla, quam uttellus text facilisisconsequat, elitaugu suscipit tellus, at iaculisant ante eget massa. Vestibulu facilisis. Quisque vel est.wr Donec ante velit, eleifenrer ucont cont, euismod etftrw rhoncus eget, sapien. Inter condimentum <a href="#" class="more">more</a> </p>
</div>
<!--latest event end -->
<!--support start -->
<div id="support">
<h2>our support <span>Nulla pede sapien,</span></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. DonecSed fringilla ligula dol,<u> eleifend cursus,</u> tincidunt ir, tempus id, elitau auguearcr. Nulla pede sapien, variusrtn vitae,</p>
<ul>
<li>pede. Sedr fringilla, quam, <a>uttellus textfacilisisconsequ, elitaugu </a></li>
<li>pede. Sedr fringilla, quam, <a>uttellus textfacilisisconsequ, elitaugu </a></li>
<li>pede. Sedr fringilla, quam <a>suscipit tellus, at iaculisant ante eget massa. Vestibulu facilisis. Qu</a></li>
</ul>
<a href="#" class="online"> 24x7 hours <span>online chat</span></a> </div>
<!-- support end -->
<!--services start -->
<div id="services">
<h2>new services<span> R Richardson</span></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. DonecSed fringilla ligula dol, eleifend cursus, tincidunt ir, tempus id, elitau auguearcr. Nulla pede sapien, variusrtn vitae, </p>
<h3>tellus,dapibusvitae, vehicula vitae,</h3>
<ul>
<li><a href="#">culis ante congue</a></li>
<li><a href="#">vel,uar risus. Aenean a</a></li>
<li><a href="#">pede. Sedr fringilla, </a></li>
<li><a href="#">quam uttellus text </a></li>
<li><a href="#">facilisisconsequat,</a></li>
<li><a href="#">elitaugu suscipit tellus,</a></li>
<li><a href="#">at iaculisant ante eget </a></li>
<li><a href="#">massa.velit,</a></li>
</ul>
<a href="#" class="more1">more</a> </div>
<!--services end -->
<br class="balnk" />
</div>
</div>
<div id="main_footer">
<div id="footer"><!--footer navigation start -->
<ul>
<li><a href="#" class="mg">Network</a>|</li>
<li><a href="#">Submission</a>|</li>
<li><a href="#"> Archives</a>|</li>
<li><a href="#">Finance</a>|</li>
<li><a href="#">Testimonials</a></li>
</ul>
<ul class="ad">
<li><a>Can Can Road 0128 Thonhill Canada</a></li>
<li class="nobor1"><a><span>ph:</span>
800-121-4545 759-121-5454</a></li>
<li class="nobor"><a><span>fax:</span>
759-121-5454 800-121-4545</a></li>
</ul>
<p>© appleweb. All rights reserved.</p>
<p class="de">Designed by: <a href="http://www.templateworld.com/">Template World</a></p>
</div><!--footer navigation end -->
</div>
</body>
</html>
Related examples in the same category