package : Design 6 « Templates « HTML / CSS






package

   

<!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>
<title>Package</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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(package-images/header-bg.gif) 0 100% repeat-x;
  padding:32px 0 32px 0;
  }
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(package-images/login-middle-bg.gif) 0 0 repeat-x;
   }
div#header-bg div#header div#login-bg div#login-area{
  width:580px;
  background:url(package-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(package-images/login-right-bg.gif) 100% 0 no-repeat;
  }
div#header-bg div#header div#login-bg div#login-area form label{
  background:url(package-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;
  }
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(package-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(package-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;
  }
div#navigation-bg div#navigation ul.mainMenu li a:hover{
  background:url(package-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(package-images/navigation-bg-selected.gif) 0 0 no-repeat;
  }

/*-------------------------- DROP DOWN MENU STARTS --------------------------*/
ul.subNav{
  font:normal 11px/12px Arial, Helvetica, sans-serif;
  padding:4px 0 0 0;
  }
ul.subNav li{
  background:url(package-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;
  }
ul.subNav li a:hover{
  color:#fff;
  }
/*-------------------------- DROP DOWN MENU ENDS --------------------------*/

div#navigation-bg div#navigation a.signup{
  width:71px; height:28px; display:block;
  background:url(package-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(package-images/sign-up-btn-selected.gif) 0 0 no-repeat;
  }

/*-------------------------- OUR COMPANIES MAIN FEATURES --------------------------*/
div#ourCompany-bg{
  background:#E7DFA0 url(package-images/our-company-bg.gif) 0 0 repeat-x;
  }
div#ourCompany-bg div#ourCompany-part{
  width:922px; margin:0 auto; padding:26px 0 28px 0;
  background:url(package-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(package-images/horz-dot.gif) 0 100% repeat-x;
  }
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(package-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(package-images/more-ideac-icon.gif) 3px 4px no-repeat;
  }
ul.ourCompany-list{
  padding:11px 0 10px 0;
  }
ul.ourCompany-list li{
  background:url(package-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;
  }
ul.ourCompany-list li a{
  color:#47481A; font-size:11px; line-height:11px;
  text-decoration:underline;
  }
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(package-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;
  }
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(package-images/search-url-icon.gif) 3px 4px no-repeat;
  }

/*-------------------------- FUTURE PLANS --------------------------*/
div#futurePlan-bg{
  background:#2B0D0A url(package-images/future-plan-bg.gif) 0 0 repeat-x;
  }
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;
  }
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(package-images/bullet2.gif) 12px 0 no-repeat;
  }
div#futurePlan-bg div#futurePlanContant div#projPart p{
  padding:10px 23px 0 13px; color:#fff;
  font-size:11px; line-height:16px;
  }
div#futurePlan-bg div#futurePlanContant div#projPart a.more-btn{
  display:block; width:76px; height:28px; margin:5px 0 0 159px;
  background:url(package-images/read-more-btn.gif) 0 0 no-repeat;
  }
div#futurePlan-bg div#futurePlanContant div#projPart a.more-btn:hover{
  background:url(package-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(package-images/horz-dot-2.gif) 0 100% repeat-x;
  }
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;
  }
div#futurePlan-bg div#futurePlanContant div#futurePart p{
  padding:0 0 0 0; font-size:14px; line-height:24px;
  color:#837C44; padding:20px 0 0 0; width:440px;
  float:left;
  }
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(package-images/footer-bg.gif) 0 0 repeat-x;
  }
div#footer-bg div#footer-menu{
  width:922px; margin:0 auto;
  padding:20px 0 29px 0;
  background:url(package-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(package-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;
  }
div#footer-bg div#footer-menu ul.footMenu li a:hover{
  background-color:#262626;
  }
div#footer-bg div#footer-menu p.copyright{
  padding:5px 0 0 7px; color:#706933;
  font-size:11px; line-height:11px;
  }
div#footer-bg div#footer-menu p.copyright a{
  color:#B3AC8B;
  }
div#footer-bg div#footer-menu p.copyright a:hover{
  color:#706933;
  }

/*-------------------------- MISLENIOUS --------------------------*/
.noBottomPadding{
  padding-bottom:0 !important;
  }
.noBg{
  background:none !important;
  }
.topPad{
  padding-top:15px !important;
  }




</style>


</head>
<body>
<div id="header-bg">
  <div id="header"> <img src="package-images/logo.gif" alt="" width="205" height="62" class="logo" />
    <div id="login-bg">
      <div id="login-area">
        <form action="http://www.free-css.com/" 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="package-images/login-btn.gif" class="login-btn" alt="Login" title="Login" />
          <br class="spacer" />
        </form>
      </div>
    </div>
    <br class="spacer" />
  </div>
</div>
<div id="navigation-bg">
  <div id="navigation">
    <ul class="mainMenu">
      <li><a href="http://www.free-css.com/" class="selectMenu">Home</a></li>
      <li><a href="http://www.free-css.com/">About</a></li>
      <li><a href="http://www.free-css.com/">Services</a></li>
      <li><a href="http://www.free-css.com/">Support</a></li>
      <li><a href="http://www.free-css.com/">Chat</a></li>
      <li><a href="http://www.free-css.com/">History</a></li>
      <li class="noBg"><a href="http://www.free-css.com/">Contact</a></li>
    </ul>
    <a href="http://www.free-css.com/" class="signup"></a> <br class="spacer" />
    <ul class="subNav">
      <li class="noBg"><a href="http://www.free-css.com/">Our Benefits</a></li>
      <li><a href="http://www.free-css.com/">What Our Future Plans</a></li>
      <li><a href="http://www.free-css.com/">Our Success</a></li>
      <li><a href="http://www.free-css.com/">Ratings</a></li>
      <li><a href="http://www.free-css.com/">Latest Blogs</a></li>
      <li><a href="http://www.free-css.com/">News</a></li>
      <li><a href="http://www.free-css.com/">Testimonials</a></li>
      <li><a href="http://www.free-css.com/">Comments</a></li>
    </ul>
    <br class="spacer" />
  </div>
</div>
<div id="ourCompany-bg">
  <div id="ourCompany-part">
    <h2 class="ourCompany-hdr">Our Companies Main Features</h2>
    <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>
    <div id="ourCompany-rightPart">
      <h2 class="moreInfo-Hdr">More Informations</h2>
      <ul class="ourCompany-list noBottomPadding">
        <li><a href="http://www.free-css.com/">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="http://www.free-css.com/">www.,elit at tincidunt/porta.com</a></li>
        <li><a href="http://www.free-css.com/">www.vehicula pede /a/dui id enim.com</a></li>
        <li><a href="http://www.free-css.com/">www. quis nulla.com</a></li>
        <li><a href="http://www.free-css.com/">www.scelerisque commodo.com</a></li>
      </ul>
    </div>
    <br class="spacer" />
  </div>
</div>
<div id="futurePlan-bg">
  <div id="futurePlanContant">
    <div id="projPart">
      <h2 class="proj-hdr">Projects <span>2007</span></h2>
      <ul class="pic">
        <li><a href="http://www.free-css.com/"><img src="package-images/future-pic-1.jpg" alt="" width="82" height="74" /></a></li>
        <li><a href="http://www.free-css.com/"><img src="package-images/future-pic-2.jpg" alt="" width="82" height="74" /></a></li>
        <li class="noRightMargin"><a href="http://www.free-css.com/"><img src="package-images/future-pic-3.jpg" alt="" 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="http://www.free-css.com/" class="more-btn"></a> </div>
    <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="package-images/future-img.gif" alt="" width="127" height="141" /> <br class="spacer" />
    </div>
    <br class="spacer" />
  </div>
</div>
<div id="footer-bg">
  <div id="footer-menu">
    <ul class="footMenu">
      <li class="noDivider"><a href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">About</a></li>
      <li><a href="http://www.free-css.com/">Services</a></li>
      <li><a href="http://www.free-css.com/">Support</a></li>
      <li><a href="http://www.free-css.com/">Chat</a></li>
      <li><a href="http://www.free-css.com/">History</a></li>
      <li><a href="http://www.free-css.com/">Contact</a></li>
    </ul>
    <br class="spacer" />
    <p class="copyright">Copyright&copy; Package 2007 All Rights Reserved</p>
    <p class="copyright topPad">Powered by <a href="http://templatekingdom.com">TemplateKingdom.com</a></p>
  </div>
</div>
</body>
</html>

   
    
    
  








Related examples in the same category

1.newave
2.newdarkside
3.newday
4.newera
5.newfangled
6.newgreeny
7.newgreys
8.newhorizon
9.news portal
10.news-print
11.newsbeat
12.newsflash
13.newsportal
14.newsroll
15.newstheme
16.newwave-business-inc
17.new_rise
18.NiceSite
19.nimbuslike
20.nixed
21.noimages
22.noname1
23.nonzero
24.nothingfanzy
25.nourish
26.nowhere
27.NuahSwirl
28.nullbullum
29.numerology
30.o-no-typography
31.obsess
32.obsession
33.obtanium
34.office-plants
35.offlimits
36.offrecord
37.oheon_com_110100021
38.ohgreenworld
39.Okeanos
40.old-wall
41.oldarchitecture
42.Olive
43.one-penny
44.one_two_three
45.online-edu
46.onlinemoviestore
47.oodles
48.openyourwindows
49.opposed
50.optimal-touch
51.orchidaceae
52.ordinaire
53.ormeggiare
54.ornamental
55.ornate
56.OrngBlu
57.oswd_blozilla
58.our-work
59.ourhouse
60.outdoorv1.0
61.outliers
62.outoftheblue
63.outtabox
64.oxidation
65.paddy-harvest
66.pagedrape
67.paivi-k
68.paleforest
69.palmtrees
70.pamphlet
71.pancorbo
72.papira
73.paradigm
74.paradise1983
75.parchmenter
76.particle
77.particles
78.pastel
79.pastelco
80.pastelflowers
81.pastries
82.path-fider
83.patternmaker
84.PattyMcFatPat01
85.PattyMcFatPat03
86.pc
87.Pear Template
88.pear
89.pedestrian
90.penchantforphotos
91.pencilpink
92.people
93.perfectblemish
94.performance
95.perplex
96.personified
97.pillars
98.pills
99.pinnacle
100.Pistachio
101.pixabella
102.pixabella04
103.pixabella06
104.pixelationingreen
105.plaidshirt
106.plainandsimple
107.planning-feed
108.pluralism
109.plurkified
110.pointspace
111.pollinate
112.pollinating
113.pollination