epod
<!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>ePod</title>
<style type='text/css'>
/* CSS Document */
body{
padding:0; margin:0;
}
div, ul, p, h1, h2, h3, h4, img{
padding:0; margin:0;
}
ul{
list-style-type:none;
}
.bank{
line-height:0px; font-size:0px; clear:both;
}
/*------------------------------up_div---------------------*/
#up_div{
background:url(epod-images/up_bg.gif) repeat-x 0 0 #fff; color:#3b3b3b; width:100%; float:left;
}
#header{
background:url(epod-images/header.jpg) no-repeat 0 0; width:778px; margin:0 auto; position:relative; height:314px;
}
#header img{
display:block; top:36px; left:120px; position:absolute;
}
#header img.logo{
position:absolute; left:97px; top:124px; display:block;
}
#header h1{
width:123px; display:block; font:13px 'Trebuchet MS', Arial, Helvetica, sans-serif; color:#676666; font-weight:bold;
position:absolute; top:169px; left:100px; background-color:#fbfbe5;
}
#header ul{
width:546px; display:block; position:absolute; top:253px; left:124px;
}
#header ul li{
float:left; display:block; margin:0 3px 0 3px;
}
#header ul li a{
font:13px/20px 'Trebuchet MS', Arial, Helvetica, sans-serif; text-transform:uppercase; font-weight:bold; padding:0 8px 0 8px;
color:#202020; background-color:#FFFFFF; display:block; text-decoration:none;
}
#header ul li a:hover{
background-color:#b8446f; color:#FFFFFF;
}
/*-----------------------------middle_div-----------------------*/
#mid_div{
background:url(epod-images/mid_bg.gif) repeat-x bottom ; width:100%; float:left;
}
#body_pan{
width:686px; margin:0 auto 0 auto; background:url(epod-images/body_pic.gif) no-repeat 0 0;
}
#body_pan h2{
font:24px/18px Georgia, "Times New Roman", Times, serif; font-weight:bold; color:#3b3b3b; margin:0 0 12px 160px;
width:203px; display:block; background-color:#FFFFFF;
}
#body_pan p{
width:526px; display:block; font:15px/20px Arial, Helvetica, sans-serif; color:#525252; background-color:#FFFFFF;
margin:0 0 30px 160px
}
#update{
width:308px; float:left; margin:0; padding:0;
}
#update p.up{
background:url(epod-images/update_up.gif) no-repeat 0 0; margin:0; padding:0; width:308px; height:11px; font-size:0px;
}
#update p.down{
background:url(epod-images/update_down.gif) no-repeat 0 0; margin:0; padding:0; width:308px; height:11px; font-size:0;
}
#latest{
width:306px; border-left:#d4d4d4 1px solid; border-right:#d4d4d4 1px solid;
background:url(epod-images/latest_bg.gif) no-repeat left bottom #fff; color:#525252;
}
#latest h2{
background:url(epod-images/latest_up.gif) no-repeat #fff; width:160px; height:23px; display:block; color:#b38800;
font:18px Georgia, "Times New Roman", Times, serif; margin:0 0 14px 44px; padding:22px 0 0 0;
}
#latest h3{
width:222px; display:block; color:#d20039; font:16px 'Trebuchet MS', Arial, Helvetica, sans-serif;
margin:0 0 10px 44px; padding:0 0 0 0; font-weight:normal; background-color:#FFFFFF;
}
#latest ul{
width:236px; display:block; margin:0 0 0 44px; font-size:0px;
}
#latest ul li{
display:block; background:url(epod-images/arrow.gif) no-repeat 0 9px; margin:0; padding:0 0 0 19px;
}
#latest ul li a{
font:16px 'Trebuchet MS', Arial, Helvetica, sans-serif; color:#525252; text-decoration:underline; background-color:#FFFFFF;
}
#latest ul li a:hover{
text-decoration:none;
}
#latest p{
width:222px; display:block; color:#d20039; font:16px 'Trebuchet MS', Arial, Helvetica, sans-serif;
margin:5px 0 0px 44px; padding:0 0 0 0; font-weight:normal; background-color:#FFFFFF;
}
#latest h4{
width:242px; display:block; font:24px Arial, Helvetica, sans-serif; line-height:30px;
margin:5px 0 0px 44px; padding:0 0 0 0; font-weight:normal;
}
#latest a.more{
width:66px; height:18px; background:url(epod-images/more_arrow.gif) no-repeat; float:right; display:block;
padding:0 40px 0 0; text-indent:-2000px;
}
#latest a.more:hover{
width:66px; height:18px; background:url(epod-images/more_arrow_h.gif) no-repeat; float:right; display:block;
padding:0 40px 0 0; margin:0;
}
/*-------------------------services----------------------*/
#ser{
width:308px; float:left; margin:0 0 40px 25px; padding:0;
}
#ser p.se{
background:url(epod-images/update_up.gif) no-repeat 0 0; margin:0; padding:0; width:308px; height:11px; font-size:0px;
}
#ser p.se_down{
background:url(epod-images/update_down.gif) no-repeat 0 0; margin:0; padding:0; width:308px; height:11px; font-size:0;
}
#services{
width:306px; border-left:#d4d4d4 1px solid; border-right:#d4d4d4 1px solid;
background:url(epod-images/latest_bg.gif) no-repeat left bottom #fff; color:#525252;
}
#services h2{
background:url(epod-images/services.gif) no-repeat #fff; width:235px; height:23px; display:block; color:#D20039;
font:16px 'Trebuchet MS', Arial, Helvetica, sans-serif; margin:0 0 14px 38px; padding:22px 0 0 0; font-weight:bold;
}
#services img{
margin:0 0 8px 38px; display:block;
}
#services a.click{
padding:0; margin:0 0px 15px 125px; font:12px 'Trebuchet MS', Arial, Helvetica, sans-serif; color:#000000;
text-transform:uppercase; font-weight:bold; text-decoration:none; display:block; background-color:#fff;
}
#services a.click:hover{
color:#D20038; background-color:#fff;
}
#services ul{
width:228px; display:block; margin:0 0 0 38px; font-size:0px;
}
#services ul li{
display:block; background:url(epod-images/servo.gif) no-repeat 0 9px; margin:0; padding:0 0 0 11px;
}
#services ul li a{
font:16px 'Trebuchet MS', Arial, Helvetica, sans-serif; color:#525252; text-decoration:underline; background-color:#FFFFFF;
}
#services ul li a:hover{
text-decoration:none;
}
#services a.more1{
width:66px; height:18px; background:url(epod-images/more_arrow.gif) no-repeat; float:right; display:block;
padding:0 40px 0 0; text-indent:-2000px; margin:10px 0 0 0;
}
#services a.more1:hover{
width:66px; height:18px; background:url(epod-images/more_arrow_h.gif) no-repeat; float:right; display:block;
padding:0 40px 0 0; margin:10px 0 0 0;
}
/*----------------------------------footer------------*/
#footer{
width:100%; float:left; margin-top:20px;
}
#foo{
width:686px; margin:0 auto;
}
#foo ul{
width:540px; display:block; margin:0 0px 8px 70px; height:14px;
}
#foo ul li{
float:left; font:13px/14px 'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight:normal;
color:#6F5D2B; height:14px; display:block; background-color:#FFFFFF;
}
#foo ul li a{
font:13px/14px 'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight:normal;
color:#6F5D2B; text-decoration:none; padding:0 12px 0 12px; background-color:#FFFFFF;
}
#foo ul li a:hover{
text-decoration:underline;
}
#foo p{
width:173px; display:block; font:12px/20px 'Trebuchet MS', Arial, Helvetica, sans-serif; color:#D20039; margin:0 0 0 253px;
background-color:#fff;
}
#foo p.de{
margin:0 0 0 249px; line-height:20px; background-color:#fff; display:block;
color:#D20039; width:350px; padding:0;
}
#foo p.de a{
color:#000; background-color:#fff; text-decoration:underline;
}
#foo p.de a:hover {
color:#fff; background-color:#D20039;
}
#foo ul.css{
width:140px; display:block; margin:10px 0 98px 268px; font-size:0px; padding:0px;
}
#foo ul.css li{
display:block; float:left; margin:0 0 0 0; padding:0;
}
#foo ul.css li a{
display:block; text-indent:-2000px; height:19px; margin:0 14px 0 0; font-size:0px; padding:0;
}
#foo ul.css li a.htm{
background:url(epod-images/xhtml.gif) no-repeat 0 0; width:62px;
}
#foo ul.css li a.htm:hover{
background:url(epod-images/xhtml_h.gif) no-repeat 0 0; width:62px;
}
#foo ul.css li a.cs{
background:url(epod-images/css.gif) no-repeat; width:48px;
}
#foo ul.css li a.cs:hover{
background:url(epod-images/css_h.gif) no-repeat; width:48px;
}
</style>
</head>
<body>
<div id="up_div">
<div id="header"> <img src="epod-images/best_future.gif" width="153" height="91" alt="best for future"/> <img class="logo" src="epod-images/logo.gif" width="139" height="38" title="pod" alt="pod" />
<h1>aliquam Vestibulum metus</h1>
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About us</a></li>
<li><a href="http://www.free-css.com/">Company</a></li>
<li><a href="http://www.free-css.com/">Partners</a></li>
<li><a href="http://www.free-css.com/">Blog</a></li>
<li><a href="http://www.free-css.com/">Resources</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
</div>
<div id="mid_div">
<div id="body_pan">
<h2>who we are. . .</h2>
<p>ePod 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>
<div id="update">
<p class="up"></p>
<div id="latest">
<h2>27nth june 2006</h2>
<h3>Lorem Ipsum is simply dummy of the printi</h3>
<ul>
<li><a href="http://www.free-css.com/">Rrabitur eu lectus eu massa </a></li>
<li><a href="http://www.free-css.com/">Ornare imperdiet. Proin nec </a></li>
<li><a href="http://www.free-css.com/">Neque vitaerer lacus rewrter </a></li>
<li><a href="http://www.free-css.com/">Sollicitudin </a></li>
</ul>
<p>Lorem Ipsum is simply dummy</p>
<h4>Curabitur vitae magna.felis. Duisrew Duis vestibul mauris sit amet libe.</h4>
<a class="more" href="http://www.free-css.com/">more</a> <br class="bank" />
</div>
<p class="down"></p>
</div>
<div id="ser">
<p class="se"></p>
<div id="services">
<h2>Lorem Ipsum is simply dummy</h2>
<img src="epod-images/services_pic.gif" width="227" height="65" border="0" alt="map" /> <a class="click" href="http://www.free-css.com/">click here to browse</a>
<ul>
<li><a href="http://www.free-css.com/">Rrabitur eu lectus eu massa </a></li>
<li><a href="http://www.free-css.com/">Ornare imperdiet. Proin </a></li>
<li><a href="http://www.free-css.com/">nec Neque vitaerer lacus </a></li>
<li><a href="http://www.free-css.com/">rewrter Sollicitudin </a></li>
<li><a href="http://www.free-css.com/">Rrabitur eu lectus eu massa </a></li>
<li><a href="http://www.free-css.com/">Ornare imperdiet. Proin </a></li>
<li><a href="http://www.free-css.com/">nec Neque vitaerer lacus </a></li>
<li><a href="http://www.free-css.com/">rewrter Sollicitu</a></li>
</ul>
<a class="more1" href="http://www.free-css.com/">more</a> <br class="bank" />
</div>
<p class="se_down"></p>
</div>
<br class="bank" />
</div>
</div>
<div id="footer">
<div id="foo">
<ul>
<li><a href="http://www.free-css.com/">Home</a>|</li>
<li><a href="http://www.free-css.com/">About Us</a>|</li>
<li><a href="http://www.free-css.com/">Company </a>|</li>
<li><a href="http://www.free-css.com/">Partners</a>|</li>
<li><a href="http://www.free-css.com/">Blog</a>|</li>
<li><a href="http://www.free-css.com/">Resources </a>|</li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
<p>© epod. All rights reserved.</p>
<p class="de">Designed by: <a href="http://www.templateworld.com/">Template World</a></p>
<ul class="css">
<li><a href="http://validator.w3.org/check?uri=referer" target="_blank" class="htm" title="xhtml">xhtml</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank" class="cs" title="css">css</a></li>
</ul>
</div>
</div>
</body>
</html>
Related examples in the same category