global-business
<!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>Global Business</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: #333333;
background: #000000 url(global-business-images/main_bg.jpg) repeat-y center;
}
a:link, a:visited { color: #2f5e9e; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #9f1a04; 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; }
h1 {
margin: 0px;
padding: 2px 0;
font-size: 30px;
font-weight: bold;
}
h2 {
margin: 0 0 10px 0;
padding: 10px 0;
font-size: 20px;
font-weight: bold;
color: #e48009;
}
h3 {
margin: 0 0 10px 0;
padding: 0px;
font-size: 20px;
font-weight: bold;
color: #9f1a04;
}
.image_wrapper{
margin-top: 3px;
margin-bottom: 5px;
border: 5px solid #e8e8e8;
padding: 1px;
background: #fff;
}
.fl_image{
float: left;
margin-right: 30px
}
.fr_image{
float: right;
margin-left: 20px
}
.button a {
display: block;
width: 164px;
height: 34px;
padding: 10px 0 0 0;
color: #e88d23;
font-size: 18px;
font-weight: bold;
text-align: center;
text-decoration: none;
background: url(global-business-images/button_01.png) no-repeat;
}
.button a:hover {
color: #ffffff;
background: url(global-business-images/button_01_hover.png) no-repeat;
}
.button_02 a {
display: block;
width: 82px;
height: 20px;
padding: 1px 0 0 0;
color: #e88d23;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
background: url(global-business-images/button_02.png) no-repeat;
}
.button_02 a:hover {
color: #ffffff;
background: url(global-business-images/button_02_hover.png) no-repeat;
}
.fl { float: left; }
.fr { float: right; }
.margin_r_10 { margin-right: 10px; }
.margin_r_20 { margin-right: 20px; }
.margin_r_40 { margin-right: 40px; }
/* site title */
#site_title_bar_wrapper {
width: 100%;
height: 130px;
margin: 0 auto;
background: url(global-business-images/site_title_bg_wrapper.jpg) no-repeat center top;
}
#site_title_bar {
width: 950px;
height: 130px;
margin: 0 auto;
padding: 0 20px;
background: url(global-business-images/site_title_bg.jpg) no-repeat center top;
}
#site_title_bar #site_title {
float: left;
padding: 30px 0 0 0;
}
#site_title h1 a {
margin: 0px;
padding: 0px;
font-size: 24px;
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-left: 0px;
font-size: 14px;
color: #ffffff;
font-weight: bold;
letter-spacing: 4px;
}
#site_title_bar .social_network {
float: right;
margin: 0px;
padding: 30px 0 0 0;
list-style: none;
}
.social_network li {
margin: 0px;
padding: 0px;
display: inline;
}
.social_network li a {
float: left;
display: block;
width: 62px;
height: 78px;
margin-left: 10px;
}
/* end of site title */
/* banner */
#banner_wrapper {
width: 100%;
height: 310px;
margin: 0 auto;
background: url(global-business-images/banner_bg_wrapper.jpg) no-repeat center top;
}
#banner {
width: 890px;
height: 210px;
margin: 0 auto;
padding: 50px 50px;
background: url(global-business-images/banner_bg.jpg) no-repeat center top;
}
#banner #banner_content {
float: left;
width: 550px;
}
#banner #banner_content h2 {
font-size: 40px;
margin-bottom: 20px;
color: #000000;
font-weight: normal;
}
#banner #banner_content p {
line-height: 28px;
font-size: 26px;
letter-spacing: 2px;
color: #666666;
margin-bottom: 20px;
}
#banner #banner_content span {
color: #e88d23;
}
#banner .banner_image {
float: right;
width: 253px;
height: 247px;
background: url(global-business-images/banner_image.png) no-repeat;
}
/* end of banner */
/* menu */
#menu_wrapper {
width: 100%;
height: 120px;
margin: 0 auto;
background: url(global-business-images/menu_bg_wrapper.jpg) no-repeat center top;
}
#menu {
width: 990px;
height: 70px;
margin: 0 auto;
padding-top: 20px;
background: url(global-business-images/menu_bg_wrapper.jpg) no-repeat center top;
}
#menu ul {
width: 660px;
margin: 0px auto;
padding: 0px;
list-style: none;
}
#menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#menu ul li a {
position: relative;
float: left;
display: block;
width: 130px;
margin-right: 2px;
height: 50px;
padding: 20px 0 0 0;
text-align: center;
font-size: 16px;
text-decoration: none;
color: #ffffff;
font-weight: bold;
outline: none;
}
#menu ul li a span {
position: absolute;
top : 0px;
right: -2px;
width: 2px;
height: 70px;
background: url(global-business-images/divider.png) right no-repeat;
}
#menu li a:hover, #menu li .current {
background: url(global-business-images/menu_mouse_hover.png) center no-repeat;
}
#menu li .last span {
background: none;
}
/* end of menu */
/* content */
#content {
width: 940px;
margin: 0 auto;
padding: 0px 25px;
background: url(global-business-images/content_middle.jpg) repeat-y center top;
}
#content_bottom {
width: 990px;
height: 25px;
margin: 0 auto;
background: url(global-business-images/content_bottom.jpg) no-repeat center top;
}
#content p {
margin-bottom: 10px;
}
.section_w940 {
clear: both;
width: 940px;
}
.product_box {
float: left;
width: 270px;
padding: 15px;
background: url(global-business-images/product_box.jpg) no-repeat top center;
}
.product_box h2 {
font-size: 18px;
margin-bottom: 15px;
padding: 2px 0;
}
.product_box p {
margin-bottom: 15px;
}
.product_box img {
float: left;
padding-top: 5px;
margin-right: 10px;
}
.section_w450 {
float: left;
width: 450px;
}
.gallery {
margin: 0px;
padding: 0px;
list-style: none;
}
.gallery li {
margin: 0px;
padding: 0px;
display: inline;
}
.gallery li span {
float: left;
margin: 0 10px 10px 0;
border: 4px solid #e2e1e1;
}
.gallery li img {
width: 70px;
height: 70px;
border: 1px solid #ffffff;
}
.news_box{
margin-bottom: 10px;
border-bottom: 1px dashed #ccc;
color: #2f5e9e;
}
.news_box .post_info {
color: #666;
}
.news_box .post_info a {
color: #000000;
font-weight: bold;
}
.news_box .post_info strong {
color: #000000;
}
.news_box a{
color: #2f5e9e;
}
/* end of menu */
/* content */
#footer {
width: 940px;
margin: 0 auto;
padding: 20px 25px;
background: none;
text-align: center;
color: #CCCCCC;
}
#footer a {
font-weight: bold;
color: #CCCCCC;
}
#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 #ffffff;
}
.footer_menu .last_menu {
border: none;
}
/* end of menu */
</style>
</head>
<body>
<div id="site_title_bar_wrapper">
<div id="site_title_bar">
<div id="site_title">
<h1><a href="#"><img src="global-business-images/logo.png" alt="" /><span>free css template</span> </a></h1>
</div>
<ul class="social_network">
<li><a href="#"><img src="global-business-images/facebook_icon.png" alt="" /></a></li>
<li><a href="#"><img src="global-business-images/linkin_icon.png" alt="" /></a></li>
<li><a href="#"><img src="global-business-images/twitter_icon.png" alt="" /></a></li>
</ul>
</div>
<!-- end of site_title_bar -->
</div>
<!-- end of site_title_bar_wrapper -->
<div id="banner_wrapper">
<div id="banner">
<div id="banner_content">
<h2>Web Design for future!</h2>
<p>Curabitur a ante tellus, non feugiat massa. <span>Donec mattis dignissim lacus</span>, id convallis nisl interdum at.</p>
<div class="button"><a href="#">Read more</a></div>
</div>
<div class="banner_image"></div>
</div>
<!-- end of banner -->
</div>
<!-- end of banner_wrapper -->
<div id="menu_wrapper">
<div id="menu">
<ul>
<li><a href="#" class="current"><span></span>Home</a></li>
<li><a href="#"><span></span>Templates</a></li>
<li><a href="#"><span></span>Flash</a></li>
<li><a href="#"><span></span>Gallery</a></li>
<li><a href="#" class="last"><span></span>Contact</a></li>
</ul>
</div>
<!-- end of menu -->
</div>
<!-- end of menu_wrapper -->
<div id="content">
<div class="section_w940">
<div class="product_box margin_r_20">
<h2>Promote your business</h2>
<img src="global-business-images/add.png" alt="" />
<p>Morbi ultrices congue nunc sit amet rutrum. Ut pretium diam eu diam volutpat laoreet. </p>
<div class="button_02"><a href="#">Read more</a></div>
<div class="cleaner"></div>
</div>
<div class="product_box margin_r_20">
<h2>Website Analytics</h2>
<img src="global-business-images/line_chart.png" alt="" />
<p>Curabitur tristique vulputate nisl eu ultrices. Sed in elit et metus malesuada bibendum.</p>
<div class="button_02"><a href="#">Read more</a></div>
<div class="cleaner"></div>
</div>
<div class="product_box">
<h2>Online Marketing</h2>
<img src="global-business-images/pie_chart.png" alt="" />
<p>Nam at leo sapien, vitae mattis nulla. Donec sit amet felis at justo consequat interdum id nec risus. </p>
<div class="button_02"><a href="#">Read more</a></div>
<div class="cleaner"></div>
</div>
<div class="cleaner"></div>
</div>
<div class="cleaner_h30"></div>
<div class="section_w940">
<div class="section_w450 margin_r_40">
<h2>Latest Blog 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="#">News</a> by <a href="#">Admin</a> on <strong>October 29, 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="#">Photos</a> by <a href="#">Admin</a> on <strong>October 27, 2048</strong></p>
</div>
<div class="news_box"> <a href="#">Pellentesque id lectus nunc. Nullam quis faucibus massa. In ut vulputate nisi. Quisque aliquet, arcu id fringilla dictum.</a>
<p class="post_info">Posted in <a href="#">News</a> by <a href="#">Admin</a> on <strong>October 25, 2048</strong></p>
</div>
<div class="news_box"> <a href="#">Aliquam vehicula accumsan arcu, vestibulum cursus purus lobortis eu. Pellentesque vitae neque non lorem vehicula adipiscing.</a>
<p class="post_info">Posted in <a href="#">Design</a> by <a href="#">Admin</a> on <strong>October 19, 2048</strong></p>
</div>
</div>
<div class="section_w450">
<h2>Free CSS Templates</h2>
<p>You can download <a href="#">Free CSS Templates</a> from templatemo.com website. Feel free to apply this template for your websites. Credit goes to <a href="#">Smashing Magzine</a> for icons used in this template. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse iaculis, mauris sit amet molestie congue, enim augue malesuada metus, et porttitor risus dolor vel sem.</p>
<div class="button_02"><a href="#">Details</a></div>
<div class="cleaner_h40"></div>
<h2>Featured Websites</h2>
<ul class="gallery">
<li><span><a href="#"><img src="global-business-images/image01.jpg" alt="" /></a></span></li>
<li><span><a href="#"><img src="global-business-images/image02.jpg" alt="" /></a></span></li>
<li><span><a href="#"><img src="global-business-images/image03.jpg" alt="" /></a></span></li>
<li><span><a href="#"><img src="global-business-images/image04.jpg" alt="" /></a></span></li>
<li><span><a href="#"><img src="global-business-images/image05.jpg" alt="" /></a></span></li>
</ul>
<div class="cleaner"></div>
<div class="button_02"><a href="#">View All</a></div>
</div>
<div class="cleaner"></div>
</div>
</div>
<!-- end of content -->
<div id="content_bottom"></div>
<div id="footer">
<ul class="footer_menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Gallery</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>
<!-- end of footer -->
</body>
</html>
Related examples in the same category