steak-house
<!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>Steak House</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: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #543d27;
background: #2c261d;
}
a:link, a:visited { color: #631c00; text-decoration: none; font-weight: normal; }
a:active, a:hover { color: #000000; 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; }
.divider {
clear: both;
padding-bottom: 15px;
margin-bottom: 30px;
background: url(steak-house-images/horizontal_divider.jpg) bottom repeat-x;
}
.fl { float: left; }
.fr { float: right; }
.margin_r_60 { margin-right: 60px; }
.margin_r_330 { margin-right: 330px; }
.button_01 a {
display: block;
width: 90px;
height: 30px;
padding: 5px 0 0 0;
background: url(steak-house-images/readmore_bg.png) no-repeat;
color: #dbd0c1;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
}
.button_01 a:hover {
color: #FFFF99;
}
h1 {
margin: 0px;
padding: 2px 0;
font-size: 30px;
font-weight: bold;
}
h2 {
margin: 0px;
padding: 2px 0;
font-size: 30px;
font-weight: normal;
}
h3 {
margin: 0 0 10px 0;
padding: 0 0 0px 0;
font-size: 16px;
font-weight: bold;
color: #e0b328;
}
h4 {
margin: 0 0 10px 0;
padding: 0 0 5px 0;
font-size: 16px;
font-weight: bold;
color: #27231d;
}
.image_wrapper {
border: 1px solid #ffffff;
margin-top: 3px;
margin-bottom: 5px;
}
.fl_image {
float: left;
margin-right: 15px
}
.fr_image {
float: right;
margin-left: 15px
}
#container_wrapper_outter {
width: 100%;
background: url(steak-house-images/container_outter.jpg) center top no-repeat;
}
#container_wrapper_inner {
width: 100%;
background: url(steak-house-images/container_inner.jpg) center bottom no-repeat;
}
#container {
width: 990px;
margin: 0 auto;
}
/* menu */
#menu {
position: relative;
clear: both;
width: 930px;
height: 110px;
padding: 0 30px;
background: url(steak-house-images/menu_bg.jpg) no-repeat;
}
#menu ul {
padding: 15px 0 0 0;
margin: 0px;
list-style: none;
}
#menu ul li {
padding: 0px;
margin: 0px;
display: inline;
}
#menu ul li a {
float: left;
display: block;
width: 100px;
padding: 0 0 0 0;
font-size: 16px;
text-align: center;
font-weight: bold;
text-decoration: none;
color: #f9efd0;
outline: none;
}
#menu li a:hover, #menu li .current {
color: #ebc759;
}
#site_title {
position: absolute;
width: 320px;
left: 333px;
padding: 15px 0 0 0;
top: 0px;
text-align: center;
}
#site_title h1 a {
margin: 0px;
padding: 0px;
font-size: 36px;
color: #ffffff;
font-weight: normal;
text-decoration: none;
}
#site_title h1 a:hover {
font-weight: normal;
text-decoration: none;
}
#site_title h1 a span {
display: block;
margin-top: 14px;
font-size: 16px;
color: #3d2a10;
}
/* end of menu */
/* banner */
#banner {
clear: both;
width: 990px;
height: 250px;
background: url(steak-house-images/banner_bg.png) center no-repeat;
}
#banner #banner_section {
float: right;
width: 400px;
margin-top: 30px;
margin-right: 80px;
text-align: center;
}
#banner h2 {
color: #eaecd0;
font-size: 22px;
line-height: 25px;
margin-bottom: 24px;
}
#banner p {
color: #eeefd4;
font-size: 16px;
line-height: 25px;
margin-bottom: 30px;
}
/* end of banner */
/* content */
#content_wrapper {
position: relative;
clear: both;
width: 990px;
background: url(steak-house-images/content_middle.png) center repeat-y;
}
#content {
width: 940px;
padding: 80px 25px 0 25px;
margin-bottom: 85px;
background: url(steak-house-images/content_top.jpg) center top no-repeat;
}
#content_wrapper .content_bottom {
position: absolute;
width: 990px;
height: 85px;
bottom: -85px;
left: 0px;
background: url(steak-house-images/footer_bg.png) no-repeat;
}
#content h2 {
display: block;
font-size: 24px;
padding: 0 0 25px 30px;
margin-bottom: 10px;
color: #3e2b18;
background: url(steak-house-images/h2_bg.png) bottom left no-repeat;
}
#main_column {
float: left;
width: 590px;
margin-left: 50px;
}
#side_column {
position: relative;
float: right;
width: 180px;
color: #20150f;
background: #967853 url(steak-house-images/side_column_top.png) no-repeat;;
margin: 0 50px 50px 0;
padding: 20px 20px 0 20px;
}
#side_column .side_column_bottom {
position: absolute;
bottom: -50px;
left: 0px;
width: 220px;
height: 50px;
background:url(steak-house-images/side_column_bottom.png) no-repeat;
}
#main_column p {
margin-bottom: 10px;
}
#main_column .section_w590 {
width: 590px;
}
.section_w590_content {
padding-left: 30px;
}
.popular_meal_box {
float: left;
overflow: hidden;
width: 190px;
height: 250px;
padding: 28px;
background: url(steak-house-images/dish_list_bg.png) no-repeat;
}
.popular_meal_box img {
border: 1px solid #5a3f28;
margin-bottom: 10px;
}
.popular_meal_box p {
color: #191007;
margin-bottom: 10px;
}
.popular_meal_box .price {
float: left;
color: #e0b328;
font-size: 14px;
font-weight: bold;
}
.popular_meal_box a {
float: right;
color: #e0b328;
font-weight: bold;
}
#side_column .side_column_section {
margin-bottom: 30px;
}
.side_column_section img {
border: 1px solid #ffffff;
margin-bottom: 10px;
}
.category_list {
margin: 0 0 0 20px;
padding: 0;
list-style-image: url(steak-house-images/list_icon_bg.jpg);
}
.category_list li {
margin: 0px;
padding: 0 0 5px 0;
}
.category_list li a {
color: #20150f;
}
.category_list li a:hover {
color: #990000;
}
/* end of content */
/* footer */
#footer {
clear: both;
text-align: center;
width: 930px;
padding: 50px 30px;
color: #595144;
}
#footer a {
color: #696052;
}
#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 #696052;
}
.footer_menu .last_menu {
border: none;
}
/* end of footer */
</style>
</head>
<body>
<div id="container_wrapper_outter">
<div id="container_wrapper_inner">
<div id="container">
<div id="menu">
<ul>
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#" class="margin_r_330">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="site_title">
<h1> <a href="#">Steak House <span>free website template</span></a> </h1>
</div>
</div>
<!-- end of menu -->
<div id="banner">
<div id="banner_section">
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
<p>Cras auctor, arcu sit amet auctor luctus, lectus sem rhoncus felis, dignissim convallis nulla quam ac dolor. Duis sollicitudin libero et odio.</p>
</div>
<!-- banner section -->
</div>
<!-- end of banner -->
<div id="content_wrapper">
<div id="content">
<div id="main_column">
<div class="section_w590">
<h2>Special Delicious Steaks</h2>
<div class="section_w590_content">
<p>This Free CSS template is provided by TemplateMo.com. You may download, modify and apply this template for your websites. Credits go to <a href="#">photovaco.com</a> and <a href="#">pdphoto.org</a> for photos used in this layout.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et quam vitae ipsum vulputate varius vitae semper nunc. Quisque eget elit quis augue pharetra feugiat. Suspendisse turpis arcu, dignissim ac laoreet a, condimentum in massa.</p>
<div class="button_01 fr"><a href="#">More</a></div>
</div>
</div>
<div class="cleaner_h50"></div>
<div class="section_w590">
<h2>New Sweet Dishes</h2>
<div class="section_w590_content">
<p>Fusce porttitor venenatis posuere. Donec aliquam venenatis tortor, in rutrum odio aliquam at. Nam rhoncus leo at urna facilisis ac viverra quam accumsan. Nulla scelerisque laoreet tincidunt. </p>
<div class="cleaner_h20"></div>
<div class="popular_meal_box margin_r_60"> <a href="#"><img src="steak-house-images/image_01.jpg" alt="" /></a>
<h3>New Dish One</h3>
<p>Duis convallis, enim in scelerisque faucibus, mi libero interdum dolor, nec vestibulum turpis justo eget nulla.</p>
<div class="price">Price: $30</div>
<a href="#">Order</a> </div>
<div class="popular_meal_box"> <a href="#"><img src="steak-house-images/image_02.jpg" alt="" /></a>
<h3>Special Dish Two</h3>
<p>Mauris ac diam quis magna rutrum adipiscing sed eget odio. Donec in metus elit, sed interdum magna</p>
<div class="price">Price: $30</div>
<a href="#">Order</a> </div>
</div>
</div>
</div>
<!-- end of main column -->
<div id="side_column">
<div class="side_column_section">
<h4>Categories</h4>
<ul class="category_list">
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Donec velit mi</a></li>
<li><a href="#">Sed malesuada urna</a></li>
<li><a href="#">Ut aliquet eros</a></li>
<li><a href="#">Praesent leo nisi</a></li>
<li><a href="#">Vestibulum porta</a></li>
<li><a href="#">Donec elementum</a></li>
</ul>
</div>
<div class="side_column_section">
<h4>Our Address</h4>
<a href="#"><img src="steak-house-images/map.jpg" alt="" /></a>
<p> 101, Lorem ipsum,<br />
Sit amet, Consectetur, 10250<br />
<br />
Tel: 000-100-1000<br />
Fax: 002-002-0022<br />
<br />
Email:<br />
<a href="#">info{at}yourcompany.com</a> </p>
</div>
<div class="side_column_bottom"></div>
</div>
<!-- end of side column -->
<div class="cleaner"></div>
</div>
<!-- end of content -->
<div class="cleaner"></div>
<div class="content_bottom"></div>
</div>
<!-- end of content wrapper -->
<div id="footer">
<ul class="footer_menu">
<li><a href="#">Home</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">About</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>
</div>
<!-- end of container -->
</div>
</div>
</body>
</html>
Related examples in the same category