grid-system
<!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>Grid System</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type='text/css'> body { margin: 0; padding: 0; line-height: 1.7em; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; color: #161d1e; background: #566977 url(grid-system-images/body_top.png) repeat-x top; } a:link, a:visited { color: #5b0b01; text-decoration: none; font-weight: normal; } a:active, a:hover { color: #CC00FF; text-decoration: underline; } p { margin: 0px; padding: 0px; } img { margin: 0px; padding: 0px; border: none; } .float_l { float: left; } .float_r { float: right; } .divider { background: url(grid-system-images/divider.jpg) repeat-x bottom; } .cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; } .cleaner_h10 { clear: both; width:100%; height: 10px; } .cleaner_h20 { clear: both; width:100%; height: 20px; } .cleaner_h30 { clear: both; width:100%; height: 30px; } .cleaner_h40 { clear: both; width:100%; height: 40px; } .cleaner_h50 { clear: both; width:100%; height: 50px; } .cleaner_h60 { clear: both; width:100%; height: 60px; } .button_01 a{ display: block; width: 70px; height: 22px; padding: 5px 2px 0 30px; color: #ffffff; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; background: url(grid-system-images/button_01.png) no-repeat; } .button_01 a:hover { color: #ffffff; background: url(grid-system-images/button_01_hover.png) no-repeat; } h2 { margin: 0 0 5px 0; padding: 10px 0; font-size: 24px; font-weight: normal; color: #5b0b01; } h3 { margin: 0 ; padding: 2px 0; font-size: 18px; font-weight: normal; color: #000000; } /* menu */ #menu { width: 940px; height: 59px; margin: 0 auto; padding: 0 40px; background: url(grid-system-images/menu_bg.jpg) no-repeat center top; } #menu ul { float: left; margin: 0px; padding: 0px; list-style: none; } #menu ul li{ padding: 0px; margin: 0px; display: inline; } #menu ul li a{ position: relative; float: left; width: 100px; display: block; height: 40px; padding: 19px 0 0 0; text-align: center; font-size: 14px; text-decoration: none; color: #ca9b95; font-weight: bold; outline: none; } #menu li a:hover, #menu li .current{ color: #ffffff; background: url(grid-system-images/menu_hover.jpg) no-repeat center bottom; } /* end of menu */ /* site title */ #site_title_bar_wrapper { width: 100%; height: 240px; margin: 0 auto; background: url(grid-system-images/header_bg_wrapper.jpg) no-repeat top center; } #site_title_bar { width: 900px; height: 210px; margin: 0 auto; padding: 15px 50px; background: url(grid-system-images/header_bg.jpg) no-repeat top center; } #site_title_bar .site_title_left { float: left; width: 400px; } #site_title_bar .site_title_right { float: right; width: 380px; margin-top: 30px; text-align: right; } .site_title_right h2 a{ color: #63b5dc; font-style: normal; } .site_title_right p { color: #3a8fb8; } #site_title_bar #site_title { float: left; padding: 30px 0 0 0; } #site_title h1 a{ margin: 0px; padding: 0px; font-size: 30px; color: #ffffff; font-weight: bold; text-decoration: none; } #site_title h1 a:hover { font-weight: bold; text-decoration: none; } #site_title h1 a span { display: block; margin-top: 10px; margin-left: 5px; font-size: 14px; color: #486c7c; font-weight: bold; letter-spacing: 4px; } #site_title_bar #search_box { float: left; width: 270px; height: 27px; margin: 30px 0 0 0; padding: 0; background: url(grid-system-images/search.png) no-repeat; } #search_box form { width: 270px; height: 27px; margin: 0; padding: 0; } #searchfield { height: 18px; width: 170px; padding: 6px 5px 4px 5px; margin: 0 5px 0 0; color: #ffffff; font-size: 12px; font-variant: normal; line-height: normal; background: none; border: none; } #searchbutton { height: 27px; width: 80px; margin: 0px; padding: 6px 0 0 0; cursor: pointer; font-size: 12px; text-align: center; vertical-align: bottom; white-space: pre; color: #ffffff; background: none; border: none; } /* end of site title */ #content_wrapper_outter { clear: both; width: 100%; padding: 30px 0; background: url(grid-system-images/content_bg.jpg) repeat; } #content_wrapper_inner { width: 1000px; margin: 0 auto; padding: 20px 0 0 0; background: url(grid-system-images/content_wrapper.png) top center no-repeat; } #content_top{ width: 1000px; height: 35px; background:url(grid-system-images/main_content_top.png) bottom center no-repeat; } #content{ width: 840px; padding: 0 80px; background: url(grid-system-images/main_content_middle.png) center repeat-y; } #content_bottom{ width: 1000px; height: 35px; background:url(grid-system-images/main_content_bottom.png) top center no-repeat; } .section_w860 { clear: both; width: 840px; } .image_wrapper_01 img{ margin-bottom: 10px; border: 7px solid #cdd8e1; } .section_w380 { width: 380px; } .service { margin: 15px 0 0 20px; padding: 0px; list-style-image: url(grid-system-images/list_icon.png); } .service li { margin: 0; padding: 0 0 10px 15px; } .news_box{ padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed #8a9ba8; color: #ffffff; } .news_box .post_info { color: #666666; } .news_box .post_info a{ color: #2872ab; font-weight: bold; } .news_box .post_info strong { color: #2872ab; } .news_box a{ color: #000000; } /* footer */ #footer_wrapper { width: 100%; margin: 0 auto; padding: 30px 0; background: url(grid-system-images/footer_bg.jpg) repeat-x top; } #footer { width: 840px; margin: 0 auto; padding: 0 80px; color: #cccccc; } #footer a { color: #ffffff; } #footer .section_w280 { float: left; width: 240px; padding-right: 40px; } #footer .section_w280 h3 { width: 175px; height: 30px; font-size: 16px; font-weight: bold; color: #6ca7f7; } #footer .footer_list { margin: 0px; padding: 0px; list-style: none; } #footer .footer_list li { margin: 0px; padding: 3px 0; } #footer .footer_list li a { color: #cccccc; } #footer .footer_list li a:hover { color: #ff002a; text-decoration: none; } /* end of footer */ </style> <script language="javascript" type="text/javascript"> function clearText(field) { if (field.defaultValue == field.value) field.value = ''; else if (field.value == '') field.value = field.defaultValue; } </script> </head> <body> <div id="menu"> <ul> <li><a href="#" class="current">Home</a></li> <li><a href="#">Templates</a></li> <li><a href="#">Flash Files</a></li> <li><a href="#">Web Gallery</a></li> <li><a href="#">Our Store</a></li> <li><a href="#">Company</a></li> <li><a href="#">Email Us</a></li> </ul> </div> <!-- end of menu --> <div id="site_title_bar_wrapper"> <div id="site_title_bar"> <div class="site_title_left"> <div id="site_title"> <h1><a href="#">Grid System <span>free css templates for everyone</span></a> </h1> </div> <div id="search_box"> <form action="#" method="get"> <input type="text" value="Enter keyword here..." name="q" size="10" id="searchfield" onfocus="clearText(this)" onblur="clearText(this)" /> <input type="submit" name="Search" value="" alt="Search" id="searchbutton" /> </form> </div> </div> <div class="site_title_right"> <h2><a href="#">Lorem ipsum dolor sit amet</a></h2> <p>Nam nisi nunc, porta sit amet placerat ut, consequat nec lorem. Sed ac mauris a ante interdum vulputate quis sit amet tellus. Nam ut libero at lacus feugiat tincidunt vitae sed ipsum.</p> </div> </div> <!-- end of site_title_bar --> </div> <!-- end of site_title_bar_wrapper --> <div id="content_wrapper_outter"> <div id="content_wrapper_inner"> <div id="content_top"></div> <div id="content"> <div class="section_w860"> <div class="section_w380 float_l"> <h2>Welcome to Grid System</h2> <div class="image_wrapper_01"><img src="grid-system-images/image_01.jpg" alt="" width="350" height="150" /></div> <p>Grid System is a free css template from <a href="#">TemplateMo.com</a> website. Feel free to download, edit and use this template for your business or personal websites.</p> <p> Nam ut libero at lacus feugiat tincidunt vitae sed ipsum. Vivamus ut ante ullamcorper urna cursus porta. <a href="#">Mauris</a> augue mi, consectetur venenatis eleifend nec, pretium ac neque.</p> </div> <div class="section_w380 float_r"> <h2>Super Fast Services</h2> <p>Etiam nec purus eu ligula molestie pulvinar quis ac tortor. Nulla malesuada risus elementum nulla malesuada <a href="#">faucibus</a>.</p> <ul class="service"> <li>Praesent condimentum magna ut metus adipiscing rutrum consequat orci <a href="#">condimentum</a></li> <li>Nunc luctus eros eu enim gravida ut viverra magna</li> <li>Phasellus nec ante eget felis sagittis <a href="#">pellentesque</a></li> <li>Morbi <a href="#">pellentesque</a> tellus adipiscing sem pretium ut iaculis massa aliquam</li> <li>Nunc accumsan sagittis sem, ut <a href="#">ullamcorper</a> erat sodales</li> </ul> <div class="cleaner_h20"></div> <div class="button_01"><a href="#">Read more</a></div> </div> </div> <div class="cleaner_h30 divider"></div> <div class="cleaner_h30"></div> <div class="section_w860"> <div class="section_w380 float_l"> <h2>Popular Posts</h2> <div class="news_box"> <a href="#">Fusce sit amet nunc lectus, at pretium augue. Pellentesque tortor felis, porttitor ac gravida quis, vestibulum at lorem. </a> <p class="post_info">Posted in <a href="#">Templates</a> by <a href="#">Admin</a> on <strong>October 28, 2048</strong></p> </div> <div class="news_box"> <a href="#">Integer imperdiet, justo ut venenatis vehicula, magna mi placerat felis, nec ornare lorem neque eget enim..</a> <p class="post_info">Posted in <a href="#">Gallery</a> by <a href="#">Admin</a> on <strong>October 24, 2048</strong></p> </div> </div> <div class="section_w380 float_r"> <h2>Testimonials</h2> <p>Suspendisse adipiscing, mauris at pretium tincidunt, dui ligula venenatis odio, nec ultricies sapien felis in libero.</p> - <a href="#">Someone</a> <div class="cleaner_h10"></div> <p>Mauris dictum leo quis lacus venenatis at semper quam laoreet. Donec molestie libero id arcu laoreet ac consectetur enim blandit. Nulla ut nunc lorem, at <a href="#">porttitor</a> nunc.</p> - <a href="#">Royal Customer</a></div> </div> <div class="cleaner"></div> </div> <div id="content_bottom"></div> </div> <!-- end of content_wrapper_inner --> </div> <!-- end of content_wrapper_outter --> <div id="footer_wrapper"> <div id="footer"> <div class="section_w280"> <h3>Partners</h3> <div class="sub_content"> <ul class="footer_list"> <li><a href="#">Free CSS Templates</a></li> <li><a href="#">Free Flash Templates</a></li> <li><a href="#">Template Store</a></li> <li><a href="#">Web Design Tips</a></li> <li><a href="#">Best Flash Gallery</a></li> </ul> </div> </div> <div class="section_w280"> <h3>About</h3> <div class="sub_content"> <ul class="footer_list"> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Cum sociis</a></li> <li><a href="#">Donec quam</a></li> <li><a href="#">Nulla consequat</a></li> <li><a href="#">In enim justo</a></li> </ul> </div> </div> <div class="section_w280"> <h3>Privacy Policy</h3> <div class="sub_content"> <p>Nullam ultrices tempor nisi, ac egestas diam aliquam a. Ut eleifend semper turpis, id feugiat arcu dignissim eu. Donec mattis adipiscing imperdiet.</p> </div> </div> <div class="cleaner_h40"></div> <center> Copyright © 2048 <a href="#">Your Company Name</a> | Designed by <a href="http://www.templatemo.com/">Free CSS Templates</a> </center> </div> <!-- end of footer --> </div> </body> </html>