/*
CSS Credit:
http://www.templatemo.com/
*/
html {
background: #e3e3e3;
}
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5em;
color: #000;
width: 100%;
display: table;
}
a { color: #333; }
a:hover { color: #999; }
#templatemo_background_section_top {
width: 100%;
height:333px;
background: url(images/templatemo_top_section_bg.jpg) repeat-x;
}
#templatemo_background_section_middle {
width: 100%;
background: #e3e3e3;
clear: both;
overflow:hidden;
}
#templatemo_background_section_bottom {
width: 100%;
height: 327px;
background: url(images/templatemo_background_section_bottom_bg2.jpg) repeat;
float: left;
}
.templatemo_container {
width: 1000px;
margin: auto;
}
#templatemo_header {
width: 1000px;
height:280px;
background: url(images/templatemo_header.jpg) no-repeat;
}
/* Menu Section */
#templatemo_menu_panel {
width:100%;
height: 53px;
margin: 0 auto;
background: url(images/templatemo_menu_bg.jpg) repeat-x;
float:left;
}
#templatemo_menu_panel #templatemo_menu_section {
width: 930px;
height: 50px;
margin:0 auto;
padding: 0 0 0 30px;
color: #03a0a6;
}
#templatemo_menu_section ul {
float: left;
width: 930px;
margin: 0;
padding-top: 5px;
list-style: none;
}
#templatemo_menu_section ul li {
display: inline;
}
#templatemo_menu_section ul li a {
float: left;
width: 110px;
padding-top: 10px;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #666;
padding-left: 10px;
padding-right: 10px;
}
#templatemo_menu_section li a:hover, #templatemo_menu_section li .current{
color: #fff;
height: 40px;
background:url(images/templatemo_menu_current.jpg) repeat-x;
}
/* End Of Menu */
/* Left Section */
#templatemo_left_section {
width: 600px;
float: left;
margin: 10px 0px 10px 35px;
}
* html #templatemo_left_section {
margin-left: 15px;
}
.templatemo_post {
width: 600px;
margin-top: 5px;
margin-bottom: 15px;
}
/* Pink Post */
.templatemo_post_top {
width: 575px;
height: 35px;
font-size: 18px;
color:#fff;
font-weight:bold;
padding-top: 15px;
padding-left: 25px;
background: url(images/templatemo_post_top.jpg) no-repeat;
}
.templatemo_post_mid {
width: 598px;
background: #fff url(images/templatemo_post_middle.jpg) no-repeat top center;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
padding-top: 10px;
}
.templatemo_post_bottom {
width: 598px;
height: 34px;
background: url(images/templatemo_post_bottom.jpg) no-repeat bottom center;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.templatemo_post_mid img {
border: #ccc solid 1px;
float: left;
margin: 3px 15px 0 0;
}
.templatemo_post_mid p {
font-size: 12px;
color: #000;
margin : 0px 25px 25px 25px;
text-align: justify;
}
/* End Of Pink Post */
/* Yellow Post */
.templatemo_post_top_yellow {
width: 575px;
height: 35px;
background: url(images/templatemo_post_yellow_top.jpg) no-repeat;
font-size: 18px;
color:#fff;
font-weight:bold;
padding-top: 15px;
padding-left: 25px;
}
/* End Of Yellow Post */
span.post{
margin: 25px;
color: #666;
font-size: 11px;
}
/* End Of Left Section */
/* Right Section */
#templatemo_right_section {
width: 310px;
float: right;
margin: 10px 30px 10px 0px;
}
* html #templatemo_right_section {
margin-right: 15px;
}
.templatemo_section_box {
width: 310px;
margin-top: 5px;
margin-bottom: 15px;
}
.templatemo_section_box_top {
width: 285px;
height: 35px;
background: url(images/templatemo_section_top.jpg) no-repeat;
font-size: 18px;
color:#fff;
font-weight:bold;
padding: 15px 0 0 25px;
}
.templatemo_section_box_mid {
width: 308px;
background: url(images/templatemo_section_middle.jpg) #FFF no-repeat top center;
border-left: 1px #ccc solid;
border-right: 1px #ccc solid;
padding-top: 25px;
}
.templatemo_section_box_mid p {
font-size: 12px;
color:#000;
margin : 0px 25px 25px 25px;
text-align: justify;
}
.templatemo_section_box_mid p a {
font-size: 12px;
color:#333;
}
.templatemo_section_box_mid p a:hover {
font-size: 12px;
color:#999;
}
.templatemo_section_box_mid img {
float: left;
display:inline;
margin-left: 20px;
margin-bottom: 20px;
border:none;
}
.templatemo_section_box_mid ul {
margin-bottom:15px;
margin-top:0px;
padding-right:15px;
color: #333;
}
.templatemo_section_box_bottom {
width: 308px;
height: 31px;
background: url(images/templatemo_section_bottom.jpg) no-repeat bottom center #fff;
margin-top: -15px;
border-left: 1px #ccc solid;
border-right: 1px #ccc solid;
border-bottom: 1px #ccc solid;
}
/* Yellow Section */
.templatemo_section_box_top_yellow {
width: 285px;
height: 35px;
background: url(images/templatemo_section_top_yellow.jpg) no-repeat;
font-size: 18px;
color:#fff;
font-weight:bold;
padding: 15px 0 0 25px;
}
/* End Of Yellow */
/* End Of Right Section*/
.clear{
clear:both;
height:1px;
}
#templatemo_bottom_section{
width: 100%;
height: 38px;
background:url(images/templatemo_footer_bg.jpg) repeat-x;
}
#templatemo_footer{
width: 100%;
height: 28px;
background: url(images/templatemo_footer_bg.jpg) repeat-x;
text-align: center;
padding-top: 10px;
}
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fortune website, css template</title>
<meta name="keywords" content="css templates, fortune website, CSS, HTML" />
<meta name="description" content="Fortune Template is a free css template from templatemo.com" />
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="templatemo_header_wrapper">
<div id="templatemo_header_panel">
<div id="templatemo_header">
FORTUNE
</div>
<div id="templatemo_tagline">
Dark Blue Color Website Template
</div>
</div>
</div>
<div id="templatemo_banner_wrapper">
<div id="templatemo_banner_panel">
</div>
</div>
<div id="templatemo_menu_wrapper">
<div id="templatemo_menu_panel">
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="http://www.templatemo.com/page/1" target="_parent">Templates</a></li>
<li><a href="http://www.koflash.com" target="_parent">Gallery</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#" class="last">Contact</a></li>
</ul>
</div>
</div> <!-- end of menu -->
<div id="templatemo_content_wrapper">
<div id="templatemo_content_panel">
<div class="content_panel_3col_section margin_right_60">
<div class="header_01">Welcome</div>
<div class="image_box_01"><img src="images/templatemo_image_01.jpg" alt="Web Template" /></div>
<div class="p_section">Vivamus sagittis arcu eget odio viverra aliquet. In sagittis enim non est commodo vitae feugiat lectus venenatis.</div>
<p>Fortune website layout is provided by <a href="http://www.templatemo.com/page/1" target="_blank">Free CSS Templates</a>. You may download, edit and apply this layout for your websites. Credit goes to <a href="http://paulw.deviantart.com/art/55-Abstract-Tech-Brushes-86285028" target="_blank">Paul W</a> and <a href="http://www.photovaco.com" target="_blank">Free Photos</a> for photos used in this template. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis mollis quam. Cras lobortis aliquam risus, vitae consectetur nibh lobortis a. Pellentesque convallis mi nec diam dapibus vitae.</p> <a href="#">Read more..</a>
</div>
<div class="content_panel_3col_section margin_right_60">
<div class="header_01">Services</div>
<p>Sed velit neque, feugiat sit amet aliquam sed, tristique et quam. Pellentesque cursus aliquam porttitor. Nam cursus auctor dolor, id mattis nibh vehicula et.</p>
<ul class="services">
<li>Sed velit neque, feugiat sit amet aliquam sed</li>
<li>Nam cursus auctor dolor, id mattis nibh vehicula et</li>
<li>Cras porttitor elementum dolor, et vehicula enim vestibulum</li>
<li>Aliquam a ornare dolor. Vestibulum ante ipsum</li>
<li>Duis et fermentum dui. Duis at turpis sed metus placerat</li>
<li>Vestibulum velit lectus, placerat sed viverra sed</li>
</ul>
<a href="#">Read more..</a>
</div>
<div class="content_panel_3col_section">
<div class="header_01">Latest News</div>
<div class="news_section">
<div class="news_image">
<img src="images/templatemo_image_02.jpg" alt="Free Website" />
</div>
<div class="news_content">
<div class="news_title">Aenean quis ante vitae</div>
<p>Fusce adipiscing magna vitae nibh varius consequat. Nam cursus dolor id sem.</p>
<a href="#">Read more...</a>
</div>
</div>
<div class="margin_bottom_30"></div>
<div class="news_section">
<div class="news_image">
<img src="images/templatemo_image_03.jpg" alt="CSS Template" />
</div>
<div class="news_content">
<div class="news_title">Cras cursus varius mi</div>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hime.</p>
<a href="#">Read more...</a>
</div>
</div>
<div class="margin_bottom_30"></div>
<div class="news_section">
<div class="news_image">
<img src="images/templatemo_image_04.jpg" alt="Free CSS" />
</div>
<div class="news_content">
<div class="news_title">Fusce blandit sollicitudin felis</div>
<p>Sed euismod vehicula metus, convallis tincidunt ligula adipiscing feugiat.</p>
<a href="http://www.templatemo.com" target="_parent">Read more...</a> </div>
</div>
</div>
<div class="margin_bottom_20"></div>
</div> <!-- end of content panel -->
</div> <!-- end of content wrapper -->
<div id="templatemo_footer_wrapper">
<div id="templatemo_footer_panel">
Copyright © 2048 <a href="#">Your Company Name</a> | <a href="http://www.iwebsitetemplate.com" target="_parent">Website Templates</a> by <a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a>
<div class="margin_bottom_20"></div>
<a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" width="88" height="31" vspace="8" border="0" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" vspace="8" border="0" /></a>
</div> <!-- end of footer panel -->
</div> <!-- end of footer wrapper-->
</body>
</html>
