ProductPackage
<!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>Package</title>
<style type='text/css'>
/* CSS DOCUMENT */
/*-------------------------- GENERAL --------------------------*/
body{
padding:0; margin:0;
font-family:Arial, Helvetica, sans-serif;
}
div, mg, p, a, ul, form, input, label, h2, h3{
padding:0; margin:0;
}
img{ border:none;}
a{ outline:none; text-decoration:none;}
ul{ list-style-type:none;}
.spacer{
line-height:0; font-size:0; clear:both;
}
/*-------------------------- HEADER --------------------------*/
div#header-bg{
background:#2B0D0A url(ProductPackage-images/header-bg.gif) 0 100% repeat-x;
padding:32px 0 32px 0;
color:#FCF7CC;
}
div#header-bg div#header{
width:922px; margin:0 auto;
}
div#header-bg div#header img.logo{
float:left; margin:2px 0 0 0;
}
/*-------------------------- LOGIN AREA --------------------------*/
div#header-bg div#header div#login-bg{
float:right; width:580px;
background:url(ProductPackage-images/login-middle-bg.gif) 0 0 repeat-x;
}
div#header-bg div#header div#login-bg div#login-area{
width:580px;
background:url(ProductPackage-images/login-left-bg.gif) 0 0 no-repeat;
}
div#header-bg div#header div#login-bg div#login-area form{
width:557px; height:47px; padding:21px 0 0 23px;
background:url(ProductPackage-images/login-right-bg.gif) 100% 0 no-repeat;
}
div#header-bg div#header div#login-bg div#login-area form label{
background:url(ProductPackage-images/login-icon.jpg) 0 2px no-repeat;
line-height:25px; font-size:22px; color:#FCF7CC;
padding:0 0 0 31px; float:left; margin:0 12px 0 0;
background-color:inherit;
}
div#header-bg div#header div#login-bg div#login-area form input{
width:120px; height:18px; border:1px solid #924A43;
background-color:#70322C; font-size:10px; color:#fff;
line-height:10px; padding:5px 0 0 10px; float:left;
margin:0 12px 0 0;
}
div#header-bg div#header div#login-bg div#login-area form input.login-btn{
width:52px; height:24px; border:none;
background:none; padding:0; margin:1px 0 0 0;
}
/*-------------------------- NAVIGATION PART --------------------------*/
div#navigation-bg{
height:66px; background:url(ProductPackage-images/navigation-bg.gif) 0 0 repeat-x;
}
div#navigation-bg div#navigation{
width:922px; margin:0 auto;
}
div#navigation-bg div#navigation ul.mainMenu{
padding:0; float:left; width:567px;
}
div#navigation-bg div#navigation ul.mainMenu li{
width:81px; float:left;
background:url(ProductPackage-images/navigation-divider.gif) 100% 0 no-repeat;
}
div#navigation-bg div#navigation ul.mainMenu li a{
width:80px; height:33px; display:block;
line-height:33px; text-align:center;
font-weight:bold; color:#FAF0C2; font-size:11px;
background-color:inherit;
}
div#navigation-bg div#navigation ul.mainMenu li a:hover{
background:url(ProductPackage-images/navigation-bg-selected.gif) 0 0 no-repeat;
}
div#navigation-bg div#navigation ul.mainMenu li a.selectMenu{
width:80px; height:33px; display:block;
line-height:33px; text-align:center;
font-weight:bold; color:#FAF0C2; font-size:11px;
background:url(ProductPackage-images/navigation-bg-selected.gif) 0 0 no-repeat;
background-color:inherit;
}
/*-------------------------- DROP DOWN MENU STARTS --------------------------*/
ul.subNav{
font:normal 11px/12px Arial, Helvetica, sans-serif;
padding:4px 0 0 0;
}
ul.subNav li{
background:url(ProductPackage-images/navigation-dropdown-divider.gif) 0 0 no-repeat;
height:17px; float:left; padding:6px 0 0 0;
}
ul.subNav li a{
display:block; margin:0 22px 0 20px;
color:#84915D;
background-color:inherit;
}
ul.subNav li a:hover{
color:#fff;
background-color:inherit;
}
/*-------------------------- DROP DOWN MENU ENDS --------------------------*/
div#navigation-bg div#navigation a.signup{
width:71px; height:28px; display:block;
background:url(ProductPackage-images/sign-up-btn.gif) 0 0 no-repeat;
margin:2px 0 0 0; float:right;
}
div#navigation-bg div#navigation a.signup:hover{
background:url(ProductPackage-images/sign-up-btn-selected.gif) 0 0 no-repeat;
}
/*-------------------------- OUR COMPANIES MAIN FEATURES --------------------------*/
div#ourCompany-bg{
background:#E7DFA0 url(ProductPackage-images/our-company-bg.gif) 0 0 repeat-x;
color:inherit;
}
div#ourCompany-bg div#ourCompany-part{
width:922px; margin:0 auto; padding:26px 0 28px 0;
background:url(ProductPackage-images/our-company-bg-pic.jpg) 606px 0 no-repeat;
}
div#ourCompany-bg div#ourCompany-part h2.ourCompany-hdr{
font:normal 35px/38px "Arial Narrow", Arial, Helvetica, sans-serif;
color:#082733; width:574px; height:43px;
background:url(ProductPackage-images/horz-dot.gif) 0 100% repeat-x;
background-color:inherit;
}
div#ourCompany-bg div#ourCompany-part div#ourCompany-leftPart{
width:284px; border-right:2px solid #CBC387;
margin:12px 0 0 0; float:left;
}
h2.faq-Hdr{
width:231px; height:20px; color:#951509;
line-height:19px; font-weight:bold; font-size:12px;
padding:0 0 0 21px; background:#FAF3BB url(ProductPackage-images/faq-icon.gif) 3px 4px no-repeat;
}
h2.moreIdeas-Hdr{
width:231px; height:20px; color:#951509;
line-height:19px; font-weight:bold; font-size:12px;
padding:0 0 0 21px; background:#FAF3BB url(ProductPackage-images/more-ideac-icon.gif) 3px 4px no-repeat;
}
ul.ourCompany-list{
padding:11px 0 10px 0;
}
ul.ourCompany-list li{
background:url(ProductPackage-images/bullet1.gif) 0 3px no-repeat;
display:block; margin:0 0 8px 0; padding:0 0 0 15px;
color:#47481A; font-size:11px; line-height:11px;
background-color:inherit;
}
ul.ourCompany-list li a{
color:#47481A; font-size:11px; line-height:11px;
text-decoration:underline;
background-color:inherit;
}
ul.ourCompany-list li a:hover{
text-decoration:none;
}
div#ourCompany-bg div#ourCompany-part div#ourCompany-rightPart{
width:252px; margin:12px 0 0 0; float:left;
padding:0 0 0 25px;
}
h2.moreInfo-Hdr{
width:231px; height:20px; color:#951509;
line-height:19px; font-weight:bold; font-size:12px;
padding:0 0 0 21px; background:#FAF3BB url(ProductPackage-images/more-info-icon.gif) 3px 4px no-repeat;
}
p.moreInfo-Text{
padding:0 0 20px 23px; font-size:10px;
line-height:14px; color:#47481A;
background-color:inherit;
}
h2.searchUrl-Hdr{
width:231px; height:20px; color:#951509;
line-height:19px; font-weight:bold; font-size:12px;
padding:0 0 0 21px; background:#FAF3BB url(ProductPackage-images/search-url-icon.gif) 3px 4px no-repeat;
}
/*-------------------------- FUTURE PLANS --------------------------*/
div#futurePlan-bg{
background:#2B0D0A url(ProductPackage-images/future-plan-bg.gif) 0 0 repeat-x;
color:#837C44;
}
div#futurePlan-bg div#futurePlanContant{
width:922px; margin:0 auto;
padding:37px 0 54px 0;
}
/*-------------------------- PROJECTS 2007 --------------------------*/
div#futurePlan-bg div#futurePlanContant div#projPart{
width:251px; float:left;
background-color:#706933;
padding:2px 2px 28px 2px;
color:#fff;
}
div#futurePlan-bg div#futurePlanContant div#projPart h2.proj-hdr{
height:37px; padding:13px 0 0 13px; color:#fff;
font:normal 24px/25px "Arial Narrow", Arial, Helvetica, sans-serif;
background-color:#1E1E1C; text-transform:uppercase;
}
div#futurePlan-bg div#futurePlanContant div#projPart h2.proj-hdr span{
font-weight:bold;
}
div#futurePlan-bg div#futurePlanContant div#projPart ul.pic{
padding:3px 0 0 0;
}
div#futurePlan-bg div#futurePlanContant div#projPart ul.pic li{
display:block; margin:0 2px 0 0; float:left;
}
div#futurePlan-bg div#futurePlanContant div#projPart ul.pic li.noRightMargin{
margin:0;
}
div#futurePlan-bg div#futurePlanContant div#projPart ul.pic li.noRightMargin a{
display:block;
}
div#futurePlan-bg div#futurePlanContant div#projPart h3.sub-hdr{
color:#E7DFA0; font-size:12px; line-height:12px;
font-weight:bold; text-indent:28px; margin:15px 0 0 0;
background:url(ProductPackage-images/bullet2.gif) 12px 0 no-repeat;
background-color:inherit;
}
div#futurePlan-bg div#futurePlanContant div#projPart p{
padding:10px 23px 0 13px; color:#fff;
font-size:11px; line-height:16px;
background-color:inherit;
}
div#futurePlan-bg div#futurePlanContant div#projPart a.more-btn{
display:block; width:76px; height:28px; margin:5px 0 0 159px;
background:url(ProductPackage-images/read-more-btn.gif) 0 0 no-repeat;
}
div#futurePlan-bg div#futurePlanContant div#projPart a.more-btn:hover{
background:url(ProductPackage-images/read-more-btn-selected.gif) 0 0 no-repeat;
}
/*-------------------------- FUTURE PART --------------------------*/
div#futurePlan-bg div#futurePlanContant div#futurePart{
width:613px; float:right; padding:10px 0 0 0;
}
div#futurePlan-bg div#futurePlanContant div#futurePart h2.future-hdr{
height:40px; color:#E7DFA0;
font:normal 35px/35px "Arial Narrow", Arial, Helvetica, sans-serif;
background:url(ProductPackage-images/horz-dot-2.gif) 0 100% repeat-x;
background-color:inherit;
}
div#futurePlan-bg div#futurePlanContant div#futurePart h3.future-subHdr{
color:#B46F07; font-size:17px; line-height:17px;
padding:20px 0 0 0; font-weight:bold;
background-color:inherit;
}
div#futurePlan-bg div#futurePlanContant div#futurePart p{
font-size:14px; line-height:24px;
color:#837C44; padding:20px 0 0 0; width:440px;
float:left; background-color:inherit;
}
div#futurePlan-bg div#futurePlanContant div#futurePart img{
float:right; display:block; margin:-50px 0 0 0;
}
/*-------------------------- FOOTER PART --------------------------*/
div#footer-bg{
background:#121212 url(ProductPackage-images/footer-bg.gif) 0 0 repeat-x;
color:#B3AC8B;
}
div#footer-bg div#footer-menu{
width:922px; margin:0 auto;
padding:20px 0 29px 0;
background:url(ProductPackage-images/footer-logo.jpg) 100% 13px no-repeat;
}
div#footer-bg div#footer-menu ul.footMenu{
padding:0 0 0 0;
}
div#footer-bg div#footer-menu ul.footMenu li{
float:left; background:url(ProductPackage-images/footmenu-divider.gif) 0 3px no-repeat;
}
div#footer-bg div#footer-menu ul.footMenu li.noDivider{
background:none;
}
div#footer-bg div#footer-menu ul.footMenu li a{
color:#B3AC8B; font-size:11px; line-height:16px;
padding:0 7px 0 7px; display:block; margin:0 0 0 1px;
background-color:inherit;
}
div#footer-bg div#footer-menu ul.footMenu li a:hover{
background-color:#262626;
color:#B3AC8B;
}
div#footer-bg div#footer-menu p.copyright{
padding:5px 0 0 7px; color:#706933;
font-size:11px; line-height:11px;
background-color:inherit;
}
div#footer-bg div#footer-menu p.copyright a{
color:#B3AC8B;
background-color:inherit;
}
div#footer-bg div#footer-menu p.copyright a:hover{
color:#706933;
background-color:inherit;
}
/*-------------------------- MISLENIOUS --------------------------*/
.noBottomPadding{
padding-bottom:0 !important;
}
.noBg{
background:none !important;
}
.topPad{
padding-top:15px !important;
}
</style>
</head>
<body>
<!--Header Background Part Starts -->
<div id="header-bg">
<!--Header Contant Part Starts -->
<div id="header">
<a href="index.html"><img src="ProductPackage-images/logo.gif" alt="Package" width="205" height="62" border="0" class="logo" title="Package" /></a>
<!--Login Background Starts -->
<div id="login-bg">
<!--Login Area Starts -->
<div id="login-area">
<form action="" method="post" name="Login" id="Login">
<label>Members Login:</label>
<input type="text" name="username" id="username" />
<input type="password" name="pass" id="pass" />
<input type="image" src="ProductPackage-images/login-btn.gif" class="login-btn" alt="Login" title="Login" />
<br class="spacer" />
</form>
</div>
<!--Login Area Ends -->
</div>
<!--Login Background Ends -->
<br class="spacer" />
</div>
<!--Header Contant Part Ends -->
</div>
<!--Header Background Part Ends -->
<!--Navigation Background Part Starts -->
<div id="navigation-bg">
<!--Navigation Part Starts -->
<div id="navigation">
<ul class="mainMenu">
<li><a href="#" class="selectMenu" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Services">Services</a></li>
<li><a href="#" title="Support">Support</a></li>
<li><a href="#" title="Chat">Chat</a></li>
<li><a href="#" title="History">History</a></li>
<li class="noBg"><a href="#" title="Contact">Contact</a></li>
</ul>
<a href="#" class="signup" title="signup now"></a>
<br class="spacer" />
<ul class="subNav">
<li class="noBg"><a href="#" title="Our Benefits">Our Benefits</a></li>
<li><a href="#" title="What Our Future Plans">What Our Future Plans</a></li>
<li><a href="#" title="Our Success">Our Success</a></li>
<li><a href="#" title="Ratings">Ratings</a></li>
<li><a href="#" title="Latest Blogs">Latest Blogs</a></li>
<li><a href="#" title="News">News</a></li>
<li><a href="#" title="Testimonials">Testimonials</a></li>
<li><a href="#" title="Comments">Comments</a></li>
</ul>
<br class="spacer" />
</div>
<!--Navigation Part Ends -->
</div>
<!--Navigation Background Part Ends -->
<!--Our Company Bacground Part Starts -->
<div id="ourCompany-bg">
<!--Our Company Part Starts -->
<div id="ourCompany-part">
<h2 class="ourCompany-hdr">Our Companies Main Features</h2>
<!--Our Company Left Part Starts -->
<div id="ourCompany-leftPart">
<h2 class="faq-Hdr">Latest F.A.Q?s</h2>
<ul class="ourCompany-list">
<li>Nulla congue pretium elit. Integer enim risus, mollis.</li>
<li>Eget, accumsan id, feugiat eu, velit. Sed molestie.</li>
<li>lectus id nisi.</li>
</ul>
<h2 class="moreIdeas-Hdr">More Ideas About Us</h2>
<ul class="ourCompany-list noBottomPadding">
<li>Quisque laoreet, elit at tincidunt porta, massa torr.</li>
<li>Porttitor magna, at vehicula pede dui id enim.</li>
<li>Pellentesque rhoncus metus quis nulla. Donecllus.</li>
<li>Metus, vehicula nec, scelerisque commodo.</li>
<li>Egestas eget.</li>
</ul>
</div>
<!--Our Company Left Part Ends -->
<!--Our Company Right Part Starts -->
<div id="ourCompany-rightPart">
<h2 class="moreInfo-Hdr">More Informations</h2>
<ul class="ourCompany-list noBottomPadding">
<li><a href="#">Aenean viverra sapien a enim pellentesque</a></li>
</ul>
<p class="moreInfo-Text">Pellentesque id nunc at leo<br />
vestibulum lobortis</p>
<h2 class="searchUrl-Hdr">Search Our Url's</h2>
<ul class="ourCompany-list noBottomPadding">
<li><a href="#">www.,elit at tincidunt/porta.com</a></li>
<li><a href="#">www.vehicula pede /a/dui id enim.com</a></li>
<li><a href="#">www. quis nulla.com</a></li>
<li><a href="#">www.scelerisque commodo.com</a></li>
</ul>
</div>
<!--Our Company Right Part Ends -->
<br class="spacer" />
</div>
<!--Our Company Part Ends -->
</div>
<!--Our Company Bacground Part Ends -->
<!--Future Plans Part Starts -->
<div id="futurePlan-bg">
<!--Future Plans Contant Part Starts -->
<div id="futurePlanContant">
<!--Projects 2007 Part Starts -->
<div id="projPart">
<h2 class="proj-hdr">Projects <span>2007</span></h2>
<ul class="pic">
<li><a href="#"><img src="ProductPackage-images/future-pic-1.jpg" alt="Pic 1" title="Pic 1" width="82" height="74" /></a></li>
<li><a href="#"><img src="ProductPackage-images/future-pic-2.jpg" alt="Pic 2" title="Pic 2" width="82" height="74" /></a></li>
<li class="noRightMargin"><a href="#"><img src="ProductPackage-images/future-pic-3.jpg" alt="Pic 3" title="Pic 3" width="82" height="74" /></a></li>
</ul>
<br class="spacer" />
<h3 class="sub-hdr">We Have For This year:</h3>
<p>Quisque laoreet, elit at tincidunt porta, massa torr Porttitor magna, at vehicula pede dui id enim. Pellentesque</p>
<a href="#" class="more-btn" title="READ MORE"></a>
</div>
<!--Projects 2007 Part Ends -->
<!--Future Part Starts -->
<div id="futurePart">
<h2 class="future-hdr">Future Plans</h2>
<h3 class="future-subHdr">Sed semper, enim id fringilla posuere</h3>
<p>mauris diam dignissim magna, id ornare libero quam innvallis erat eu lectus. Aenean bibendum facilisis ante.</p>
<p>Pellentesque id nunc at leo vestibulum lobortis. Integer luctus leo non felis. Proin in justo. Donec sapien enim, porta quis, aliquam sit amet, condimentum nonummy, lorem. Nullam mi metus, cursus in, porta vel, fringilla et, orci. Integer sit amet quam id turpis ultrices</p>
<img src="ProductPackage-images/future-img.gif" alt="Image" title="Image" width="127" height="141" />
<br class="spacer" />
</div>
<!--Future Part Ends -->
<br class="spacer" />
</div>
<!--Future Plans Contant Part Ends -->
</div>
<!--Footer Part Starts -->
<div id="footer-bg">
<!--Footer Menu Part Starts -->
<div id="footer-menu">
<ul class="footMenu">
<li class="noDivider"><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Services">Services</a></li>
<li><a href="#" title="Support">Support</a></li>
<li><a href="#" title="Chat">Chat</a></li>
<li><a href="#" title="History">History</a></li>
<li><a href="#" title="Contact">Contact</a></li>
</ul>
<br class="spacer" />
<p class="copyright">Copyright© Package 2007 All Rights Reserved</p>
<p class="copyright topPad"><a href="http://www.flashmint.com/show-type-flash.html">Flash Templates</a> by<a href="http://www.flashmint.com/">FlashMint</a></p>
</div>
<!--Footer Menu Part Ends -->
</div>
<!--Footer Part Ends -->
</body>
</html>
Related examples in the same category