metal
<!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>Metal Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
html {
background: #020303;
}
body {
margin: 0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5em;
color: #fff;
background: url(metal-images/page_bg.jpg) repeat-x center top;
width: 100%;
display: table;
}
a:link, a:visited { color: #daea71; text-decoration: none; font-weight: bold; }
a:active, a:hover { color: #BBBB00; text-decoration: none; font-weight: bold; }
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
color: #fff;
background-position: left;
padding: 0px;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #fff;
margin-top: 0px;
}
#container {
width: 900px;
margin: auto;
}
#header_section {
float: left;
width: 900px;
height: 104px;
margin-top: 60px;
background: url(metal-images/header.jpg) no-repeat;
}
#title_section {
float: left;
width: 281px;
height: 40px;
font-size: 22px;
font-weight: bold;
margin: 23px 0px 0px 20px;
padding: 28px 0px 0px 30px;
background: url(metal-images/title_bg.jpg) no-repeat;
}
.topmenu{
float: right;
margin: 5px 30px 0px 0px;
}
.topmenu ul {
list-style: none;
padding: 0px;
margin: 0px;
}
.topmenu li{
display: inline;
}
.topmenu li a{
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
text-align: center;
color: #fff;
width: 80px;
height: 43px;
padding-top: 20px;
}
.topmenu li a:hover, .topmenu li .current{
color: #fff;
background: url(metal-images/top_current.jpg) no-repeat;
}
#content_section {
float: left;
width: 900px;
background: url(metal-images/content_bg.jpg) repeat-x;
height: 721px;
overflow: auto;
}
#leftmenu_section {
float: left;
width: 280px;
margin-top: 45px;
padding-left: 30px;
}
#leftmenu_top {
float: left;
width: 240px;
height: 37px;
background: url(metal-images/leftmenu_top.jpg) no-repeat;
}
#leftmenu_mid {
float: left;
width: 200px;
min-height: 500px;
padding: 0px 20px 0px 20px;
text-align: justify;
background: url(metal-images/leftmenu_mid.jpg) repeat-y;
}
#leftmenu_mid img {
float: left;
padding-right: 5px;
}
#leftmenu_mid span {
font-weight: bold;
color: #daea71;
}
#leftmenu_bot {
float: left;
width: 240px;
height: 37px;
background: url(metal-images/leftmenu_bot.jpg) no-repeat;
}
#rightcontent_section {
float: left;
width: 504px;
margin-top: 45px;
text-align: justify;
}
#rightcontent_section img{
float: left;
padding-right: 10px;
}
#rightcontent_section a:link, #rightcontent_section a:visited { color: #FFFF66; text-decoration: none; font-weight: bold; }
#rightcontent_section a:active, #rightcontent_section a:hover { color: #CCFF00; text-decoration: none; font-weight: bold; }
#content_left {
float: left;
width: 18px;
height: 721px;
background: url(metal-images/left_corner.jpg) no-repeat;
}
#content_mid {
float: left;
width: 814px;
height: 721px;
}
#content_right {
float: left;
width: 68px;
height: 721px;
background: url(metal-images/right_corner.jpg) no-repeat;
}
#footer_section {
float: left;
width: 900px;
height: 159px;
color: #adad7b;
background: url(metal-images/footer.jpg) no-repeat;
}
#footer_left {
float: left;
width: 440px;
padding: 40px 0px 0px 0px;
text-align: center;
}
#footer_right {
float: left;
width: 400px;
padding: 50px 0px 0px 50px;
}
.line {
border-bottom: dashed 1px #fff;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header_section">
<div id="title_section">FREE CSS TEMPLATE</div>
<div class="topmenu">
<ul>
<li><a href="http://www.free-css.com/" class="current">HOME</a></li>
<li><a href="http://www.free-css.com/">ABOUT US</a></li>
<li><a href="http://www.free-css.com/">SERVICES</a></li>
<li><a href="http://www.free-css.com/">SOLUTIONS</a></li>
<li><a href="http://www.free-css.com/">PARTNERS</a></li>
<li><a href="http://www.free-css.com/">CONTACT</a></li>
</ul>
</div>
</div>
<div id="content_section">
<div id="content_left"></div>
<div id="content_mid">
<div id="leftmenu_section">
<div id="leftmenu_top"></div>
<div id="leftmenu_mid">
<h2>NEW & EVENTS</h2>
<p><span><a href="http://www.free-css.com/">Title goes here</a> [24-10-2020]<br />
</span> <img src="metal-images/photo1.jpg" alt="" width="76" height="77" /> Aliquam tristique lacus in sapien. Suspendisse potenti. Ut sed pede. Nullam vitae tellus. </p>
<p>-------------------------------------------------</p>
<p><span><a href="http://www.free-css.com/">Second Title</a> [19-10-2020]<br />
</span> <img src="metal-images/photo2.jpg" alt="" width="75" height="75" />Curabitur nec odio. Phasellus tincidunt, tortor lacinia blandit commodo...</p>
<p>-------------------------------------------------</p>
<p><span><a href="http://www.free-css.com/">Third Title</a> [12-10-2020]<br />
</span> <img src="metal-images/photo3.jpg" alt="" width="75" height="75" />Vestibulum quis pede non urna venenatis vehicula... </p>
<p>Pellentesque dolor nulla, congue vitae, fringilla in, varius a, orci.</p>
<p>Mauris convallis. Proin vel libero id erat venenatis accumsan. Nunc blandit orci sit amet risus.</p>
</div>
<div id="leftmenu_bot"></div>
</div>
<div id="rightcontent_section">
<h1>WELCOME TO OUR HOMEPAGE</h1>
<p>This is a FREE CSS web template provided by TemplateMo.com. You may use this template layout for any of your websites. </p>
<p>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.</p>
<p>Quisque in diam a justo <a href="http://www.free-css.com/">condimentum</a> molestie. Vivamus a velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur quis velit quis tortor tincidunt aliquet.</p>
<p>-----------------------------------------------------------------------------------------------------------------------------</p>
<h2>NEW SERVICES</h2>
<p><img src="metal-images/services.jpg" alt="" width="112" height="98" />Nulla enim nibh, consectetuer sed, vestibulum elementum, sagittis nec, diam. Mauris blandit vehicula neque. Proin consectetuer. Donec venenatis. Cras urna metus, feugiat non, consectetuer quis, pretium quis, nunc. Nullam pede purus, tempor a, imperdiet in, porttitor at, nulla. <a href="http://www.free-css.com/">Read More</a></p>
<p>-----------------------------------------------------------------------------------------------------------------------------</p>
<h2>RECENT PROJECTS</h2>
<p><img src="metal-images/project.jpg" alt="" />Aenean eget tortor eget ipsum aliquet porta. Vestibulum quis pede non urna venenatis vehicula. Praesent vel diam. Cras sed leo tempor neque placerat pretium. Curabitur nec odio. Phasellus tincidunt, tortor lacinia blandit commodo, nunc augue mattis eros, ut convallis est augue vel orci. <a href="http://www.free-css.com/">Read More</a></p>
</div>
</div>
<div id="content_right"></div>
</div>
<div id="footer_section">
<div id="footer_left">
<p><a target="_blank" 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 target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="" src="http://jigsaw.w3.org/css-validator/metal-images/vcss-blue" vspace="8" border="0" /></a></p>
<p>Copyright Your Company Name - Designed by <a href="http://www.templatemo.com">Free CSS Templates</a></p>
</div>
<div id="footer_right"> <strong>QUICK CONTACT</strong>
<p>Tel: 010-010-0100 Mobile: 030-030-0300<br />
Fax: 020-020-0200 Email: info [at] templatemo.com</p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category