old-wall
<!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>Old Wall</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
html {
background: #343933;
}
body {
margin: 0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5em;
color: #333333;
width: 100%;
display: table;
}
a { color: #d4d2c5; text-decoration:none; }
a:hover { color: #fff; }
#background_section_top {
width: 100%;
height:88px;
background: url(old-wall-images/background_section_top_bg.jpg) repeat-x;
}
#background_section_mid {
width: 100%;
background: #aeac9c url(old-wall-images/background_section_mid_bg.jpg) repeat-x;
}
#background_section_bottom{
width: 100%;
background:url(old-wall-images/background_section_bottom_bg.jpg) bottom repeat-x;
}
#background_bottom{
width: 100%;
background: #343933 url(old-wall-images/background_bottom_bg.jpg) top repeat-x;
overflow: hidden;
}
.container {
width: 960px;
margin: auto;
}
#header {
width: 960px;
height: 88px;
background:url(old-wall-images/header_bg.jpg) no-repeat;
}
/* Logo Area */
#logo_section {
width:auto;
height:auto;
margin-top: 22px;
margin-left: 38px;
padding: 5px 0;
float:left;
display: inline;
font-size: 36px;
font-family: Impact;
color: #d4d2c5;
}
#header_text {
width: 390px;
height: 52px;
margin-top: 12px;
margin-left: 32px;
float: right;
display: inline;
font-size: 11px;
color: #d4d2c5;
text-align: right;
}
/* Left Section */
#left_section {
float: left;
width: 199px;
margin: 0 0 0 36px;
}
#left_section .image_box {
margin-top: 8px;
padding: 1px;
}
#left_section .section_box_2 {
margin: 8px 1px 0 1px;
background: url(old-wall-images/tempatemo_recent_article.jpg) no-repeat;
width: 177px;
height: 63px;
padding: 45px 8px 0 10px;
}
.section_box_2 h3 {
margin:0;
padding: 0;
font-size: 14px;
color: #fff;
text-align: right;
}
.section_box_2 p {
margin:0;
padding: 0;
font-size: 12px;
color: #fff;
text-align: right;
}
.section_box {
width: 188px;
margin: 0;
padding: 0 0 10px 7px;
border-left: 2px solid #20282a;
border-right:2px solid #20282a;
background: #323732;
}
.section_box_last {
width: 188px;
margin: 0;
padding: 0 0 10px 7px;
border-left: 2px solid #20282a;
border-right:2px solid #20282a;
border-bottom: 2px solid #20282a;
background: #323732;
}
.section_box .section_title {
width: 160px;
height: 23px;
border-bottom: 1px dashed #898c82;
border-top: 1px dashed #898c82;
margin: 0;
padding: 5px 0 0 20px;
font-size: 13px;
font-weight: bold;
color: #cdccc0;
}
.section_box ul {
list-style: none;
margin: 12px 0 15px 20px;
padding: 0;
}
.section_box_last .section_title {
width: 160px;
height: 23px;
border-bottom: 1px dashed #898c82;
border-top: 1px dashed #898c82;
margin: 0;
padding: 5px 0 0 20px;
font-size: 13px;
font-weight: bold;
color: #cdccc0;
}
.section_box_last ul {
list-style: none;
margin: 12px 0 15px 20px;
padding: 0;
}
.clener_with_height {
clear: both;
height: 1px;
}
/* Right Section */
#right_section {
float: right;
width: 690px;
}
/* Menu Section */
#menu_section{
margin: 0;
padding: 0;
}
#menu_section ul {
float: right;
margin: 0;
padding: 0;
list-style: none;
}
#menu_section ul li {
margin: 0px;
padding: 0px;
display: inline;
}
#menu_section ul li a {
float: left;
width: 99px;
height: 24px;
padding: 4px 0 0 0;
margin: 0 10px 0 0;
font-size: 11px;
font-weight: bold;
font-family: Tahoma;
text-align: center;
text-decoration: none;
color: #d4d2c5;
background: url(old-wall-images/menu_bg.jpg) repeat-x top;
border: 4px #323732 solid;
border-top: none;
}
#menu_section li a:hover, #menu_section li .current {
color: #fff;
}
/* End OF menu*/
.content_area {
margin : 105px 20px 5px 20px;
padding: 0;
}
.content_area h1 {
color: #664e3c;
font-size: 23px;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
.content_area p {
color: #4a4a4a;
font-size: 11px;
text-align: justify;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
.content_area a {
color: #fff;
text-decoration: none;
}
.content_area a:hover {
text-decoration: underline;
}
.two_column_section {
margin: 20px;
}
.two_column_section .two_column_left {
float: left;
width: 335px;
margin: 0;
padding: 10px;
}
.two_column_left h1 {
font-size: 15px;
color: #6e5a4c;
margin: 0;
padding: 0;
margin-bottom: 12px;
}
.two_column_left .gallery_box {
margin: 0;
background: #a2a091 url(old-wall-images/gallery_box_bottom.jpg) bottom right no-repeat;
border-top: 1px dashed #fff;
border-bottom : 1px dashed #fff;
margin-bottom: 15px;
padding: 0 10px 0 10px;
}
.gallery_box p {
text-align: justify;
color: #424242;
font-size: 12px;
}
.gallery_box p span.header {
color: #e7e4d4;
font-size: 14px;
font-weight: bold;
}
.gallery_box img {
margin: 0 5px 0px 0;
float: left;
}
.two_column_section .two_column_right {
float: right;
width: 255px;
margin: 0;
padding: 10px;
}
.two_column_right h1 {
font-size: 15px;
color: #6e5a4c;
margin: 0;
padding: 0;
margin-bottom: 12px;
}
.two_column_right .body {
min-height: 177px;
width: 185px;
background: url(old-wall-images/2_column_right_bg.jpg) top no-repeat;
margin: 0;
padding: 25px;
}
.body h2 {
font-size: 12px;
color: #010101;
margin: 0;
padding: 0;
}
.body p {
font-size: 12px;
color: #4c4c4c;
text-align: justify;
margin: 0;
padding: 0;
margin-bottom: 10px;
}
.body a {
color: #010101;
text-decoration: none;
}
.body a:hover {
text-decoration: underline;
}
.bottom_panel {
padding: 10px;
}
.bottom_panel .bottom_section_box_1 {
float: left;
width: 200px;
margin: 0 20px 0 30px;;
padding: 0;
}
.bottom_panel .bottom_section_box_2 {
float: left;
width: 420px;
margin: 5px 40px 0 40px;;
padding: 0;
}
.bottom_section_box_2 h3 {
color: #d0cec2;
font-size: 12px;
font-weight: bold;
margin:0;
padding: 0;
}
.bottom_section_box_2 p {
color: #d0cec2;
font-size: 12px;
margin: 5px 0 0 0;
}
.bottom_panel #footer {
margin: 0px 0 5px 0;
padding: 5px 0 5px 0;
width: 100%;
color: #d0cec2;
}
#footer a {
color: #d0cec2;
}
#footer a:hover {
color: #FFFF00;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="background_section_top">
<div class="container">
<div id="header">
<div id="logo_section">Old Wall</div>
<div id="header_text"> Pellentesque dolor nulla, congue vitae, fringilla in, varius a, orci. Mauris convallis. Proin vel libero id erat venenatis accumsan. Nunc blandit orci sit amet risus. </div>
</div>
<!-- end of header section -->
</div>
<!-- end of container -->
</div>
<!-- end of background Section top -->
<div id="background_section_mid">
<div id="background_section_bottom">
<div class="container">
<div id="left_section">
<div class="section_box">
<div class="section_title">Useful Links</div>
<ul>
<li><a href="http://www.free-css.com/">» Free CSS Templates</a></li>
<li><a href="http://www.free-css.com/">» Free Flash Website</a></li>
<li><a href="http://www.free-css.com/">» Web Design Blog</a></li>
<li><a href="http://www.free-css.com/">» Free Photos</a></li>
<li><a href="http://www.free-css.com/">» Premium Templates</a></li>
</ul>
</div>
<div class="section_box_last">
<div class="section_title">Services</div>
<ul>
<li><a href="http://www.free-css.com/">» Aliquam Elit Rrisus</a></li>
<li><a href="http://www.free-css.com/">» Volutpat Quis</a></li>
<li><a href="http://www.free-css.com/">» Elementum Eget</a></li>
<li><a href="http://www.free-css.com/">» Habitasse Platea</a></li>
<li><a href="http://www.free-css.com/">» Aenean Cursus</a></li>
<li><a href="http://www.free-css.com/">» Maecenas Aliquam</a></li>
<li><a href="http://www.free-css.com/">» Vestibulum Quis</a></li>
</ul>
</div>
<div class="image_box"> <a href="http://www.free-css.com/"><img src="old-wall-images/free.jpg" alt="" border="0" /></a> </div>
<div class="section_box_2">
<h3>RECENT ARTICLE</h3>
<p>Tincidunt vitae, sagittis vel, interdum at, erat.</p>
</div>
</div>
<!-- end of left -->
<div id="right_section">
<div id="menu_section">
<ul>
<li><a href="http://www.free-css.com/" class="current">MAIN PAGE</a></li>
<li><a href="http://www.free-css.com/">GALLERY</a></li>
<li><a href="http://www.free-css.com/">ABOUT US</a></li>
<li><a href="http://www.free-css.com/">CONTACT US</a></li>
</ul>
</div>
<div class="content_area">
<h1>WELCOME TO OUR WEBSITE</h1>
<p>This website template is provided by TemplateMo. You may use this template for any of your websites.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum. Pellentesque vitae magna.</p>
<p>Sed nec est. Suspendisse a nibh tristique justo rhoncus volutpat. Suspendisse vitae neque eget ante tristique vestibulum. Pellentesque dolor nulla, congue vitae, fringilla in, varius a, orci. Mauris convallis. Proin vel libero id erat venenatis accumsan. Nunc blandit orci sit amet risus. Provided by TemplateMo.com</p>
</div>
<div class="two_column_section">
<div class="two_column_left">
<h1>Popular Posts</h1>
<div class="gallery_box">
<p> <img alt="" src="old-wall-images/thumb_1.jpg" /> <span class="header"><a href="http://www.free-css.com/">Fusce blandit turpis vel quam</a></span><br />
Integer malesuada sagittis sapien. Thank you for visiting. Cras mauris nulla, convallis eu, semper sit amet, scelerisque.</p>
</div>
<div class="gallery_box">
<p> <img alt="" src="old-wall-images/thumb_2.jpg" /> <span class="header"><a href="http://www.free-css.com/">Proin vel libero id erat venenatis</a></span><br />
Mollis mauris vitae erat. Aliquam eget elit. Quisque nec orci. Phasellus posuere, urna euismod feugiat accumsan. </p>
</div>
<div class="gallery_box">
<p> <img alt="" src="old-wall-images/thumb_3.jpg" /> <span class="header"><a href="http://www.free-css.com/">Donec pellentesque quam</a></span><br />
Augue tortor euismod enim, auctor volutpat massa orci et nisi. Donec libero. Proin sed purus ut elit molestie mollis. </p>
</div>
</div>
<div class="two_column_right">
<h1>Announcements</h1>
<div class="body">
<h2><a href="http://www.free-css.com/">AUGUST 15, 2024</a></h2>
<p>Aliquam tristique lacus in sapien. Suspendisse potenti.</p>
<h2><a href="http://www.free-css.com/">JULY 19, 2024</a></h2>
<p>Ut sed pede. Nullam vitae tellus. Sed ultrices.</p>
<h2><a href="http://www.free-css.com/">April 13, 2024</a></h2>
<p>Sed nec est. Suspendisse a nibh tristique justo rhoncus volutpat.</p>
<h2><a href="http://www.free-css.com/">FEBRUARY 24, 2024</a></h2>
<p>varius a, orci. Mauris convallis. Proin vel libero id erat</p>
</div>
</div>
</div>
<!-- end of 2 column -->
</div>
<!-- end of right -->
<div class="clener_with_height"> </div>
</div>
<!-- end of container -->
</div>
<!-- end of background Section middle bottom -->
</div>
<!-- end of background Section middle -->
<div id="background_bottom">
<div class="container">
<div class="bottom_panel">
<div class="bottom_section_box_1">
<p><a href="http://validator.w3.org/check?uri=referer"> <img height="31" alt="" src="http://www.w3.org/Icons/valid-xhtml10" width="88" vspace="8" border="0" /> </a> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img alt="" src="http://jigsaw.w3.org/css-validator/old-wall-images/vcss-blue" vspace="8" border="0" /> </a> </p>
</div>
<div class="bottom_section_box_2">
<h3> Contact Information</h3>
<p>Tel: 000-100-1000 Fax: 000-200-2000 Email: info _at_ templatemo.com</p>
<div id="footer"> Copyright 2024 © Company Name - Designed by <a href="http://www.templatemo.com">Free CSS Templates</a></div>
</div>
<div class="clener_with_height"> </div>
</div>
<!-- end of bottom panel -->
</div>
<!-- end of container -->
</div>
<!-- end of background bottom -->
</body>
</html>
Related examples in the same category