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>
Related examples in the same category