bizgroup
<!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>BizGroup</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style type='text/css'> * { padding: 0; margin: 0; outline: 0; } body { background: #e8eae1; font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif; font-size: 12px; line-height: 20px; color: #010101; padding-bottom: 10px; } input, textarea, select { font-family: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif; font-size:10px; } .field { padding: 7px 5px; border: solid 1px #cdd1bd; color: #969696; height: 14px; } .field-focused { color: #333; } input.button { padding: 4px 5px; cursor: pointer; } a { color: #5c7025; text-decoration: underline; cursor: pointer; } a:hover { text-decoration: none; } a img { border: 0; } p { padding-bottom: 4px; } .left, .alignleft { float: left; display: inline; } .right, .alignright { float: right; display: inline; } .cl { font-size: 0; line-height: 0; clear: both; display: block; height: 0; } .notext { font-size: 0; line-height: 0; text-indent: -4000px; background-repeat: no-repeat; } .al { text-align: left; } .ar { text-align: right; } .ac { text-align: center; } .shell { width: 960px; margin: 0 auto; } h2.txt-solutions { background-image: url(images/txt-solutions.gif); height: 33px; } h2.txt-about-bizgroup { background-image: url(images/txt-about-bizgroup.gif); } h2.txt-bizgroup-services { background-image: url(images/txt-bizgroup-services.gif); } h2.txt-support { background-image: url(images/txt-support.gif); } h2.txt-partnership-program { background-image: url(images/txt-parnership-program.gif); } h2.txt-newsletters { background-image: url(images/txt-newsletters.gif); } .more { background: url(images/arr.gif) no-repeat 0 center; padding-left: 8px; } .separator { background: url(images/separator.gif) repeat-x 0 bottom; } #top { padding: 30px 0 10px 280px; position: relative; height: 100%; } #logo { width: 266px; font-size: 0; line-height: 0; position: absolute; top: 20px; left: 0; } #logo a { display: block; height: 50px; text-indent: -4000px; background: url(images/logo.gif); } #description { padding-bottom: 10px; margin-bottom: 10px; } #description h2 { height: 18px; background: url(images/description.gif) no-repeat 0 0; } #navigation { height: 21px; font-family: Verdana, Arial, Sans-Serif; font-size: 11px; line-height: 21px; text-transform: uppercase; } #navigation ul { float: right; display: inline; list-style-type: none; } #navigation li, #navigation li a, #navigation li a span { float: left; display: inline; padding-left: 10px; } #navigation li a { color: #747963; text-decoration: none; background-position: 0 0; } #navigation li a span { float: left; display: inline; padding-right: 10px; padding-left: 0; background-position: right 0; } #navigation li a:hover, #navigation li a.active, #navigation li a:hover span, #navigation li a.active span { background-image: url(images/nav-active.gif); color: #fff; } #slider { background: url(images/slider-cnt.gif) repeat-y 0 0; } #slider .top { background: url(images/slider-top.gif) no-repeat 0 0; } #slider .bot { background: url(images/slider-bot.gif) no-repeat 0 bottom; position: relative; height: 100%; padding: 0 2px 2px 0; } #slider .slider-controls { position: absolute; bottom: 10px; right: 10px; z-index: 100; } #slider-holder { height: 400px; } #slider-holder .jcarousel-clip { width: 958px; height: 400px; position: relative; overflow: hidden; } #slider-holder ul { width: 958px; height: 400px; position: relative; overflow: hidden; } #slider-holder ul li { list-style-type: none; float: left; display: inline; height: 350px; width: 868px; padding: 40px 45px 10px; } #slider-holder .slide-info { float: left; display: inline; width: 475px; padding-top: 100px; } #slider-holder .slide-image { float: right; display: inline; } #slider-holder .slide-info h2 { font-size: 31px; line-height: 1; color: #899464; text-transform: uppercase; font-weight: normal; margin-bottom: 8px; } .slider-controls a { float: left; display: inline; font-size: 0; line-height: 0; text-indent: -4000px; width: 10px; height: 10px; margin-left: 2px; } .slider-controls a { background: url(images/slider-nav.gif) no-repeat right 0; } .slider-controls a.active { background-position: 0 0; } .cols { padding: 28px 0 34px; } .cols .col { float: left; display: inline; } .cols .col-last { margin-right: 0 !important; } .cols .col h2 { padding-bottom: 10px; margin-left: 5px; text-transform: uppercase; font-weight: normal; } .cols .col h2.notext { height: 26px; } .cols .col .content { padding: 5px 0 0 5px; } .three-cols .col { width: 240px; margin-right: 120px; } .two-cols .col { width: 310px; margin-right: 20px; } .two-cols .col .content { padding-top: 0; } .two-cols .col-big { width: 630px; } .two-cols .col-big h2 { margin-left: 0; } .two-cols .col-big .content { padding-left: 0; } .subscribe .field { float: left; display: inline; width: 224px; } .subscribe .button { float: right; display: inline; width: 64px; height: 30px; border: 0; background: url(images/button-subscribe.gif) no-repeat 0 0; } #footer { font-size: 10px; text-transform: uppercase; padding-top: 5px; color: #9d8e8e; } #footer a { color: #959a87; text-decoration: underline; } #footer a:hover { color: #6d852c; text-decoration: none; } #footer span { margin: 0 8px; color: #ced1c7; } </style> <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="js/jquery.jcarousel.pack.js" type="text/javascript"></script> <script src="js/jquery-func.js" type="text/javascript"></script> </head> <body> <div id="page" class="shell"> <!-- Logo + Description + Navigation --> <div id="top"> <h1 id="logo"><a href="#">BIZGROUP</a></h1> <div id="description" class="separator"> <h2 class="notext">one step ahead</h2> </div> <div id="navigation"> <ul> <li><a href="#" class="active"><span>home</span></a></li> <li><a href="#"><span>about us</span></a></li> <li><a href="#"><span>services</span></a></li> <li><a href="#"><span>solutions</span></a></li> <li><a href="#"><span>support</span></a></li> <li><a href="#"><span>partners</span></a></li> <li><a href="#"><span>contact</span></a></li> </ul> <div class="cl"> </div> </div> </div> <!-- END Logo + Description + Navigation --> <!-- Header --> <div id="header"> <!-- Slider --> <div id="slider"> <div class="top"> <div class="bot"> <div id="slider-holder"> <ul> <li> <div class="cl"> </div> <div class="slide-info"> <h2 class="notext txt-solutions">solutions</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lorem lacus, consectetur mattis interdum ac, aliquam nec massa. Cras libero est, con- dimentum nec porta et, blandit sed dui. Duis magna elit, bibendum non hen- drerit et, volutpat pharetra sapien. </p> <p><a href="#" class="more">Read more</a></p> </div> <div class="slide-image"> <img src="bizgroup-css/images/img1.jpg" alt="" /> </div> <div class="cl"> </div> </li> <li> <div class="cl"> </div> <div class="slide-info"> <h2 class="notext txt-solutions">solutions</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lorem lacus, consectetur mattis interdum ac, aliquam nec massa. Cras libero est, con- dimentum nec porta et, blandit sed dui. Duis magna elit, bibendum non hen- drerit et, volutpat pharetra sapien. </p> <p><a href="#" class="more">Read more</a></p> </div> <div class="slide-image"> <img src="bizgroup-css/images/img1.jpg" alt="" /> </div> <div class="cl"> </div> </li> <li> <div class="cl"> </div> <div class="slide-info"> <h2 class="notext txt-solutions">solutions</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lorem lacus, consectetur mattis interdum ac, aliquam nec massa. Cras libero est, con- dimentum nec porta et, blandit sed dui. Duis magna elit, bibendum non hen- drerit et, volutpat pharetra sapien. </p> <p><a href="#" class="more">Read more</a></p> </div> <div class="slide-image"> <img src="bizgroup-css/images/img1.jpg" alt="" /> </div> <div class="cl"> </div> </li> <li> <div class="cl"> </div> <div class="slide-info"> <h2 class="notext txt-solutions">solutions</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lorem lacus, consectetur mattis interdum ac, aliquam nec massa. Cras libero est, con- dimentum nec porta et, blandit sed dui. Duis magna elit, bibendum non hen- drerit et, volutpat pharetra sapien. </p> <p><a href="#" class="more">Read more</a></p> </div> <div class="slide-image"> <img src="bizgroup-css/images/img1.jpg" alt="" /> </div> <div class="cl"> </div> </li> </ul> </div> <div class="slider-controls"> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> </div> </div> </div> </div> <!-- END Slider --> </div> <!-- END Header --> <!-- Main --> <div id="main"> <!-- Three Column Content --> <div class="separator cols three-cols"> <div class="cl"> </div> <div class="col"> <div class="separator"> <h2 class="notext txt-about-bizgroup">about bizgroup</h2> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consec- tetur adipiscing elit. Pellentesque lorem lacus, consectetur mattis interdum ac, aliquam nec massa. Cras libero est.</p> <p><a href="#" class="more">Read more</a></p> </div> </div> <div class="col"> <div class="separator"> <h2 class="notext txt-bizgroup-services">bizgroup services</h2> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consec- tetur adipiscing elit. Pellentesque lorem lacus, consectetur mattis interdum ac, aliquam nec massa. Cras libero est.</p> <p><a href="#" class="more">Read more</a></p> </div> </div> <div class="col col-last"> <div class="separator"> <h2 class="notext txt-support">24/7 Support</h2> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, consec- tetur adipiscing elit. Pellentesque lorem lacus, consectetur mattis interdum ac, aliquam nec massa. Cras libero est.</p> <p><a href="#" class="more">Read more</a></p> </div> </div> <div class="cl"> </div> </div> <!-- END Three Column Content --> <!-- Two Column Content --> <div class="separator cols two-cols"> <div class="cl"> </div> <div class="col col-big"> <h2 class="notext txt-partnership-program">partnership program</h2> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lorem lacus, consectetur mattis interdum ac, aliquam nec massa. Cras libero est, condimentum nec porta et, blandit sed dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lorem lacus, consectetur mattis interdum ac, aliquam nec massa. Cras libero est, condimentum nec porta et, blandit sed dui. </p> <p><a href="#" class="more">Read more</a></p> </div> </div> <div class="col col-last"> <h2 class="notext txt-newsletters">Newsletters</h2> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit dolor sit amet.</p> <form action="#" method="post" class="subscribe"> <div class="cl"> </div> <input type="text" class="field" value="Valid E-Mail Address" title="Valid E-Mail Address" /> <input type="submit" class="button notext" value="SUBSCRIBE" /> <div class="cl"> </div> </form> </div> </div> <div class="cl"> </div> </div> <!-- END Two Column Content --> </div> <!-- END Main --> <!-- Footer --> <div id="footer"> <p class="right">© 2010 - CompanyName Design by <a href="http://chocotemplates.com">Chocotemplates.com</a></p> <p><a href="#">home</a><span>|</span><a href="#">about us</a><span>|</span><a href="#">services</a><span>|</span><a href="#">solutions</a><span>|</span><a href="#">support</a><span>|</span><a href="#">partners</a><span>|</span><a href="#">contact</a></p> <div class="cl"> </div> </div> <!-- END Footer --> </div> </body> </html>