light-gray
<!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>Light Gray</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #444444;
background: #ffffff;
}
a:link, a:visited { color: #006699; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #CC0000; text-decoration: underline; }
p { margin: 0px; padding: 0px; }
img { margin: 0px; padding: 0px; border: none; }
.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; }
.fl { float: left; }
.fr { float: right; }
.m_right { margin-right: 30px; }
.button_01 a {
display: inline-block;
padding: 10px 15px 5px 5px;
background: url(light-gray-images/more_button.png) bottom right no-repeat;
text-align: center;
color: #026181;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
h1 {
margin: 0px;
padding: 0px;;
font-size: 30px;
font-weight: bold;
color: #000;
}
h2 {
margin: 0 0 15px 0;
padding: 3px 0;
font-size: 20px;
font-weight: bold;
color: #000000;
}
h3 {
margin: 0px;
padding: 0px;
font-size: 12px;
font-weight: bold;
font-weight: bold;
color: #000;
}
.image_wrapper {
border: 4px solid #d6d6d6;
padding: 1px;
background: #ffffff;
margin-top: 3px;
margin-bottom: 5px;
}
.fl_image {
float: left;
margin-right: 15px
}
.fr_image {
float: right;
margin-left: 15px
}
.em_text {
color: #000000;
}
/* site title */
#site_title_bar_wrapper {
width: 100%;
height: 100px;
margin: 0 auto;
background: url(light-gray-images/site_title_bg_wrapper.jpg) top repeat-x;
}
#site_title_bar {
width: 960px;
height: 100px;
margin: 0 auto;
padding: 0 10px;
background: url(light-gray-images/site_title_bg.jpg) center top no-repeat;
}
#site_title {
float: left;
margin: 0px;
padding: 30px 0 0 0;
}
#site_title h1 a {
margin: 0px;
padding: 0px;
font-size: 26px;
color: #0981a9;
font-weight: bold;
text-decoration: none;
}
#site_title h1 a:hover {
font-weight: normal;
text-decoration: none;
}
#site_title h1 a span {
display: block;
font-size: 13px;
color: #333;
font-weight: normal;
margin-top: 10px;
}
#site_title_bar_right_section {
float: right;
width: 700px;
}
/* end of menu */
#menu {
float: right;
margin-top: 20px;
}
#menu ul {
padding: 0;
margin: 0 auto;
list-style: none;
}
#menu ul li {
padding: 0;
margin: 0px;
display: inline;
}
#menu ul li a {
float: left;
display: block;
height: 20px;
padding: 2px 10px 0 5px;
margin: 0 0 0 30px;
font-size: 14px;
text-align: center;
font-weight: bold;
text-decoration: none;
color: #074256;
outline: none;
}
#menu li a:hover, #menu li .current {
position: relative;
color: #ffffff;
background: url(light-gray-images/menu_hover_right.png) right no-repeat;
}
#menu li a:hover span, #menu li .current span {
position: absolute;
top: 0;
left: -5px;
width: 6px;
height: 22px;
background:url(light-gray-images/menu_hover_left.png) no-repeat;
}
.call_no {
float: right;
margin: 20px 0 0 0;
width: 300px;
color: #ffffff;
font-size: 30px;
}
.call_no span {
color: #ffffff;
}
/* end of menu */
/* end of site title */
/* banner */
#banner_wrapper {
width: 100%;
height: 280px;
margin: 0 auto;
background:url(light-gray-images/banner_bg_wrapper.jpg) top repeat-x;
}
#banner {
width: 900px;
height: 160px;
margin: 0 auto;
padding: 60px;
background: url(light-gray-images/banner_bg.jpg) center top no-repeat;
}
#banner h2 {
color: #000000;
font-weight: bold;
margin-bottom: 20px;
}
#banner h2 span {
color: #af0303;
font-weight: bold;
}
#banner p {
font-size: 16px;
letter-spacing: 1px;
line-height: 25px;
margin-bottom: 20px;
}
#banner a {
font-size: 16px;
font-weight: bold;
color: #af0303;
}
#banner a span {
font-size: 20px;
}
/* end of banner */
/* content */
#content_wrapper {
width: 100%;
margin: 0 auto;
background: #c1c1c1 url(light-gray-images/content_bg.jpg) top repeat-x;
}
#content {
width: 960px;
margin: 0 auto;
padding: 0 10px 30px 10px;
background: none;
}
#content p {
margin-bottom: 10px;
}
#content .service_box {
position: relative;
float: left;
width: 260px;
height: 125px;
padding: 10px 30px;
background: url(light-gray-images/service_box_bg.jpg) top center no-repeat;
}
.service_box h3 {
font-size: 14px;
font-weight: bold;
color: #0981a9;
margin-bottom: 10px;
}
.service_box img {
position: absolute;
top: 80px;
right: 30px;
}
#conten .service_box p {
padding: 0px;
margin: 0px;
}
.section_w960 {
clear: both;
width: 960px;
}
.section_w600 {
float: left;
width: 600px;
padding-right: 40px;
}
.section_w320 {
float: left;
width: 320px;
}
.news_section {
clear: both;
margin-bottom: 10px;
}
.news_section h3 a {
color: #af0303;
font-weight: bold;
}
/* end of content */
/* footer */
#footer_wrapper {
width: 100%;
margin: 0 auto;
background: #ffffff url(light-gray-images/footer_bg.jpg) top repeat-x;
}
#footer {
width: 960px;
margin: 0 auto;
padding: 20px 10px;
text-align: center;
background: none;
color: #666;
}
#footer a {
color: #333333;
}
#footer .footer_menu {
margin: 0 0 10px 0;
padding: 0px;
list-style: none;
}
.footer_menu li {
margin: 0px;
padding: 0 20px;
display: inline;
border-right: 1px solid #7c7471;
}
.footer_menu .last_menu {
border: none;
}
/* end of footer */
</style>
</head>
<body>
<div id="site_title_bar_wrapper">
<div id="site_title_bar">
<div id="site_title">
<h1><a href="#"> Light Gray <span>free css template</span></a></h1>
</div>
<div id="site_title_bar_right_section">
<div id="menu">
<ul>
<li><a href="#" class="current"><span></span>Home</a></li>
<li><a href="#"><span></span>Services</a></li>
<li><a href="#"><span></span>Templates</a></li>
<li><a href="#"><span></span>Design</a></li>
<li><a href="#"><span></span>Flash</a></li>
<li><a href="#"><span></span>Contact</a></li>
</ul>
</div>
<!-- end of menu -->
<div class="call_no">Call<span> (000) 010 0100</span></div>
</div>
</div>
<!-- end of site_title_bar -->
</div>
<!-- end of site_title_bar_wrapper -->
<div id="banner_wrapper">
<div id="banner">
<h2>Work with us for your <span>SUCCESS</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit est tincidunt urna consectetur et fringilla neque tristique. Vestibulum vel est vitae lectus molestie dapibus. Donec nec est eros. In neque arcu, malesuada at ultrices a, vehicula pharetra mi.</p>
<a href="#">Learn More <span>»</span></a> </div>
<!-- end of banner -->
</div>
<!-- end of banner_wrapper -->
<div id="content_wrapper">
<div id="content">
<div class="service_box">
<h3>Super Package One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit est tincidunt urna consectetur et fringilla.</p>
<img src="light-gray-images/icon_1.png" alt="" />
<div class="button_01"><a href="#">Details</a></div>
</div>
<div class="service_box">
<h3>Super Package Two</h3>
<p>Aenean adipiscing sollicitudin urna. Praesent sed augue risus. Duis fringilla erat vel neque facilisis nec rutrum nisl vestibulum.</p>
<img src="light-gray-images/icon_2.png" alt="" />
<div class="button_01"><a href="#">Details</a></div>
</div>
<div class="service_box">
<h3>Super Package Three</h3>
<p>Donec sit amet mauris libero, fringilla convallis metus. Nunc eget scelerisque dolor. Pellentesque sed libero ligula.</p>
<img src="light-gray-images/icon_3.png" alt="" />
<div class="button_01"><a href="#">Details</a></div>
</div>
<div class="cleaner_h40"></div>
<div class="section_w960">
<div class="section_w600">
<h2>Welcome to free css templates</h2>
<div class="image_wrapper fl_image"><img src="light-gray-images/image_01.jpg" alt="" width="200" height="133" /></div>
<p class="em_text"><a href="#">Free CSS Templates</a> are provided by <a href="#">TemplateMo.com</a>. You may download, modify and apply this template for your websites.</p>
<p>Aenean ornare nibh adipiscing arcu pellentesque ac posuere lacus lobortis. Sed massa turpis, blandit sed condimentum fermentum, porta eu urna. Maecenas vitae neque sed mi consequat pellentesque. </p>
<p>Suspendisse sodales pharetra est a pharetra. Sed in enim sapien. Duis malesuada massa eu mauris hendrerit feugiat. Duis non eros diam, ut pharetra eros. Aenean bibendum, ligula in facilisis laoreet, dolor leo venenatis enim, ut posuere tortor justo non mi. </p>
</div>
<div class="section_w320">
<h2>Latest Updates</h2>
<div class="news_section">
<h3><a href="#">Etiam tempus tellus eget </a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et ipsum sem, ut lobortis dui.</p>
</div>
<div class="news_section">
<h3><a href="#">Nam quis aliquet quam</a></h3>
<p>Sed pharetra neque vel mauris auctor ornare. Maecenas urna lorem, consectetur eget consectetur id.</p>
</div>
<div class="button_01"><a href="#">View All</a></div>
</div>
<div class="cleaner"></div>
</div>
</div>
<!-- end of content -->
</div>
<!-- end of content_wrapper -->
<div id="footer_wrapper">
<div id="footer">
<ul class="footer_menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Web Design</a></li>
<li class="last_menu"><a href="#">Contact</a></li>
</ul>
Copyright © 2048 <a href="#">Your Company Name</a> | Designed by <a href="http://www.templatemo.com/">Free CSS Templates</a></div>
<!-- footer -->
</div>
<!-- end of footer_wrapper -->
</body>
</html>
Related examples in the same category