classic
<!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>Classic Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* CSS Document */
body{
margin: 0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.5em;
color: #444444;
background: #c2c2c2;
}
a:link, a:visited { color: #720803; text-decoration: none; font-weight: bold;}
a:active, a:hover { color: #720803; text-decoration: none; font-weight: bold; }
h1 {
margin:0px;
padding-left: 40px;
padding-top: 40px;
font-weight: bold;
font-size: 18px;
color:#981d1d;
}
h2 {
margin: 0px;
font-weight: bold;
padding-left: 40px;
font-size: 16px;
color:#ea6300;
}
h3 {
margin:20px 0px 20px 40px;
font-weight: bold;
font-size: 12px;
color:#adadad;
}
#container {
margin: auto;
margin-top: 10px;
width: 770px;
border: solid 5px #FFFFFF;
background: #FFFFFF;
}
#left_column {
float: left;
width: 27px;
height: 442px;
background: url(classic-images/left_corner.jpg) no-repeat;
}
#left_title {
padding: 20px;
height: 43px;
color: #5e5e5e;
font-size: 14px;
font-weight: bold;
line-height: 1.5em;
letter-spacing: 2px;
}
#left_title span {
font-size: 24px;
color:#c61000;
}
#menu_column {
float: left;
width: 230px;
background: url(classic-images/left_title.jpg) no-repeat;
}
.menu_list {
float: left;
width: 230px;
}
.menu_list ul {
list-style-type: none;
margin: 10px;
padding: 0;
width: 213px;
}
.menu_list li a {
display: block;
height: 25px;
padding-top: 8px;
color: #666666;
padding-left: 50px;
background: url(classic-images/menu_button.gif);
}
.menu_list li a:hover, .menu_list li .current {
color: #a81407;
}
#new {
float: left;
width: 180px;
padding-top: 20px;
padding-left: 30px;
text-align: justify;
padding-right: 20px;
}
#new span {
background: #f09e00;
border: thin dotted;
color: #FFFFFF;
padding: 5px;
}
#contact {
float: left;
margin-top: 20px;
padding-left: 20px;
padding-top: 10px;
width: 180px;
background: #720803;
color: #FFFFFF;
height: 80px;
}
#contact span {
font-size: 14px;
font-weight: bold;
}
#right_column {
float: right;
width: 513px;
}
#right_header {
height: 251px;
color: #FFFFFF;
background: url(classic-images/header.jpg) no-repeat;
}
.right_link {
float: left;
margin: auto;
}
.right_link ul {
margin: 0px;
list-style: none;
padding-left: 300px;
}
.right_link li{
display: inline;
}
.right_link li a {
float: left;
margin-top: 55px;
width: 100px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
background: url(classic-images/bullet.gif) no-repeat;
}
.right_slogan {
float: right;
text-align: right;
margin-top: 70px;
padding-right: 15px;
width: 260px;
color: #CCCCCC;
}
#content {
background: url(classic-images/right_bg.jpg) repeat-x;
}
#content p {
margin-top: 15px;
text-align: justify;
padding-left: 40px;
padding-right: 40px;
}
.wedo img {
float: right;
padding-left: 10px;
}
#footer {
clear: both;
width: 770px;
height: 32px;
padding-top: 20px;
text-align: center;
background: #dedede;
font-weight: bold;
}
</style>
<style type="text/css">
<!--
.style1 {
font-size: 12px;
font-weight: bold;
}
-->
</style>
</head>
<body>
<div id="container">
<div id="left_column"></div>
<div id="menu_column">
<div id="left_title">Classic Website<br />
<span>Company</span></div>
<div class="menu_list">
<ul>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Our Services</a></li>
<li><a href="http://www.free-css.com/">Our Support</a></li>
<li><a href="http://www.free-css.com/" class="current">Testimonials</a></li>
<li><a href="http://www.free-css.com/">Current Events</a></li>
<li><a href="http://www.free-css.com/">Free Websites</a></li>
<li><a href="http://www.free-css.com/">Web Templates</a></li>
<li><a href="http://www.free-css.com/">Web Design</a></li>
<li><a href="http://www.free-css.com/">HTML Layouts</a></li>
<li><a href="http://www.free-css.com/">Free CSS Templates</a></li>
</ul>
</div>
<div id="new">
<p class="style1">LATEST NEWS & EVENTS</p>
<p><span>Post Date: 15-10-2020</span></p>
<p> Aliquam tristique lacus in sapien. Suspendisse potenti. Ut sed pede. Nullam vitae tellus. </p>
<p><span>Post Date: 14-10-2020</span></p>
<p>Aliquam sagittis molestie sapien. Nulla tellus risus, tincidunt vitae, sagittis vel, interdum at, erat. </p>
<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/classic-images/vcss-blue" vspace="8" border="0" /></a></p>
</div>
<div id="contact"><span>QUICK CONTACT<br />
</span> Tel: 000-100-2000<br />
Fax: 001-101-3000<br />
Email: info[at]templatemo.com</div>
</div>
<div id="right_column">
<div id="right_header">
<div class="right_link">
<ul>
<li><a href="http://www.free-css.com/">Main Page</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
</div>
<div class="right_slogan"><strong>... YOUR COMPANY SLOGAN TEXT GOES HERE ...<br />
</strong> You are free to modify the design to suit your tastes in any way you like.</div>
</div>
<div id="content">
<h1>WELCOME TO FREE WEBSITE</h1>
<p>This is a free CSS template provided by TemplateMo.com website. You may use this free website for any of your websites. Credit goes to PDPhoto.org for photos.</p>
<p>Aliquam tristique lacus in sapien. Suspendisse potenti. Ut sed pede. Nullam vitae tellus. Sed ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur velit tellus, placerat et, dapibus varius, aliquet quis, purus. Aliquam sagittis molestie sapien. Nulla tellus risus, tincidunt vitae, sagittis vel, interdum at, erat. Duis vitae velit. Ut ultricies. Fusce sollicitudin nisl a lectus. Pellentesque odio. </p>
<p><img src="classic-images/line.jpg" alt="" width="430" height="2" /></p>
<div class="wedo">
<h2>WHAT WE DO?</h2>
<p><strong><img src="classic-images/pic.jpg" alt="" width="133" height="176" />Vivamus a massa.</strong> Donec iaculis felis id neque. Morbi nunc. Praesent varius egestas velit. Donec a massa ut pede pulvinar vulputate. Nulla et augue. </p>
<p><strong>Cras magna velit,</strong> pellentesque mattis, faucibus vitae, feugiat vitae, sapien. Donec ante. Fusce ac orci sit amet velit ultrices condimentum.</p>
<p><strong>Duis vitae velit.</strong> Ut ultricies. Fusce sollicitudin nisl a lectus. Pellentesque odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed leo. Duis suscipit lorem in risus.</p>
</div>
<p><img src="classic-images/line.jpg" alt="" /></p>
<div class="wedo">
<h2>CUSTOMER SUPPORT</h2>
<p>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. Nunc ante erat, varius eu, luctus ac, tristique nec, justo. Fusce dignissim eros ac massa. Phasellus ligula augue, vestibulum in, cursus non, euismod et, pede.</p>
<p> </p>
</div>
</div>
</div>
<div id="footer">Copyright Your Company Name Designed by <a href="http://www.templatemo.com">TemplateMo.com</a></div>
</div>
</body>
</html>
Related examples in the same category