grid-system : Design 9 « Templates « HTML / CSS






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 &copy; 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

1.grotesqueart
2.grunge-superstar-website-template
3.guarantee
4.guideline
5.gumamela
6.gunmetal
7.h-free-software
8.h2o-bubbles
9.halcyon
10.hanging
11.hapal
12.happy_template
13.hardwarestore
14.hawaiblomst
15.heatwave
16.HelloLand
17.hexahedron
18.hibiscus
19.hifinews
20.HigherGround11
21.highmountains
22.highway
23.highwaycss
24.hilaryduff
25.HomeOfProjects
26.honeythemes
27.hyper
28.i-feel-lucky
29.ibex
30.html
31.html5-alin1
32.html5-passion
33.hurt-hobain-1.0
34.idyllic
35.ifeellucky
36.ignition
37.ikonik
38.illogix
39.illuminated
40.illusion
41.ilounge
42.imagination
43.impeccable
44.implied
45.imprimis
46.improved
47.in-fantasy
48.inapickle
49.inception
50.indication
51.indicator
52.indigo
53.individual
54.inf04-css
55.inf05
56.inf07
57.inf08
58.infinitehorizon
59.inflight
60.informatif
61.innodemag
62.inscriptions
63.inspired by google forum
64.instant
65.integral
66.intelligent-studios
67.intensesimplicity
68.interactive-media
69.interactive-works
70.interchange
71.intercosmic
72.intercraft
73.interior-art
74.interlude
75.intermediate
76.internationalway
77.internet-encyclopedia
78.internet-phenomenon
79.internetbroadcast
80.internetcenter
81.internetmusic
82.internetsharing
83.Internet_Studio
84.invention
85.Inverted_Headline
86.invision
87.ionika
88.iqbiz
89.isometric
90.it-advance
91.it-technologies
92.itdesk
93.ithilien
94.iViolet2b
95.I_Like
96.JA
97.Jan002
98.Jazz Hut Template
99.jdf-boxing
100.jenniferlovehewitt
101.jetbiz
102.jet_30
103.Jewerly-Store
104.joker
105.judgement
106.junkbox
107.just-lucid
108.justgrey
109.Just_Lucid
110.kaleidos
111.kappebeans
112.katz-maus
113.keep_it_simple
114.keero
115.khaki
116.kim-fashion
117.kitchen
118.konnekt-media
119.KrazieKen
120.language-ofa-lover
121.lasvegas
122.lasvegastoo
123.layoftheland
124.lazybreeze
125.leafbiz
126.leafbrush
127.leanmagazine
128.leavesdew
129.leavesv1
130.lemonlimev2
131.leonardo
132.lepidoptera
133.lessantique
134.level2
135.librarypro
136.Light
137.lightspeed
138.limegreen
139.limelight
140.Limey
141.linear
142.lingerie-store
143.link-line
144.liquidity_graph
145.lithium
146.loadfoov2
147.loadhost
148.localize
149.locomotive
150.logistix
151.longbeach
152.loseout
153.lotusflower
154.lucent
155.lunaria-1
156.lusciouscandy
157.luvbold
158.mactall
159.mag
160.magazine
161.majestic
162.majesty
163.makemyday
164.marcelle
165.marked
166.Matrix
167.maxos
168.maxosdarker
169.mcube
170.meadows
171.media
172.Medieval
173.megacorporate
174.meganews
175.megazzine
176.memoranda
177.meretricious
178.Midddot
179.middle-blue
180.midnightrainforest
181.mighty
182.milestone
183.mimbo-magazine
184.minigallery
185.minimal