tomato
<!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>Tomato</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
body {
margin: 0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.5em;
color: #fff;
background: url(tomato-images/page_bg.jpg) fixed;
}
a:link, a:visited { color: #89d700; text-decoration: none; }
a:active, a:hover { color: #89d700; text-decoration: none }
h1 {
font-size: 18px;
font-weight: bold;
color: #810101;
}
h2 {
padding-left: 10px;
padding-top: 10px;
font-size: 14px;
font-weight: bold;
color: #a00801;
height: 27px;
background: url(tomato-images/h2.jpg) no-repeat;
}
h3 {
margin-left: 30px;
padding-left: 5px;
font-size: 11px;
font-weight: bold;
color: #fff;
height: 19px;
background: url(tomato-images/h3.jpg) no-repeat;
}
#container {
width: 800px;
margin: auto;
}
#top {
height: 103px;
background: url(tomato-images/top.jpg) no-repeat;
}
#title {
float: left;
width: 250px;
margin: 30px 0px 0px 30px;
font-size: 24px;
font-weight: bold;
color: #920606;
line-height: 1.6em;
}
#title span {
color: #7a7a7a;
}
.menu{
float: right;
margin-top: 60px;
}
.menu ul {
list-style: none;
padding: 0px;
margin: 0px;
}
.menu li{
display: inline;
}
.menu li a{
float: left;
font-size: 11px;
font-weight: bold;
text-decoration: none;
text-align: center;
color: #fff;
width: 95px;
}
.menu li a:hover{
color: #3e3e3e;
}
#header {
height: 242px;
background: url(tomato-images/header.jpg) no-repeat;
}
#header_slogan {
padding: 45px 0px 0px 55px;
width: 280px;
text-align: justify;
color: #fff;
}
#content {
clear: both;
float: left;
margin: auto;
background: url(tomato-images/content_bg.jpg) repeat-y;
}
#content_left {
float: left;
width: 285px;
padding: 0px 20px 0px 20px;
text-align: justify;
}
#content_left p {
padding: 0px 20px 0px 30px;
}
#content_right {
float: right;
padding: 30px;
width: 415px;
color: #000;
text-align: justify;
}
#content_right li {
list-style: url(tomato-images/bullet.jpg);
}
#content_right strong {
color: #418e00;
text-decoration: underline;
}
#content_right img {
float: left;
padding-right: 15px;
}
#footer {
float: left;
height: 112px;
width: 800px;
background: url(tomato-images/footer.jpg) no-repeat;
}
#footer_left {
float: left;
width: 450px;
margin-top: 60px;
margin-left: 40px;
font-weight: bold;
}
#footer_right {
float: right;
width: 250px;
margin-top: 25px;
}
</style>
</head>
<body>
<div id="container">
<div id="top">
<div id="title">TOMATO <span>WEBSITE</span></div>
<div class="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CLIENTS</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
</div>
<div id="header">
<div id="header_slogan">
<p><img src="tomato-images/welcome.jpg" alt="" width="165" height="34" /></p>
<p>This is a free CSS template from <strong>TemplateMo.com</strong>. You may download, modify and apply this CSS layout for your websites. Credit goes to <strong>PDPhoto.org</strong> for the photos. Thank you for visiting.</p>
</div>
</div>
<div id="content">
<div id="content_left">
<h2>OUR SERVICE ?</h2>
<p><strong>Nulla enim nibh,</strong> 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. </p>
<p><strong>Nullam pede purus,</strong> tempor a, imperdiet in, porttitor at, nulla. Aliquam elit risus, volutpat quis, mattis ac, elementum eget, mauris. In hac habitasse platea dictumst. Aenean cursus.</p>
<h2>LATEST NEWS ?</h2>
<h3>POST DATE: 26-12-2020</h3>
<p>Maecenas aliquam, ligula id egestas suscipit, nisi sapien dignissim nibh, ac vestibulum lorem urna in neque. Aenean eget tortor eget ipsum aliquet porta. Vestibulum quis pede non urna venenatis vehicula.</p>
<h3>POST DATE: 18-12-2020</h3>
<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.</p>
<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/tomato-images/vcss-blue" vspace="8" border="0" /></a></p>
</div>
<div id="content_right">
<h1>WHAT WE DO ?</h1>
<ul>
<li><strong>Quisque in diam a justo condimentum molestie.</strong> Vivamus a velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </li>
<li><strong>Curabitur quis velit quis tortor tincidunt aliquet.</strong> Vivamus leo velit, convallis id, ultrices sit amet, tempor a, libero.</li>
<li> <strong>Quisque rhoncus nulla quis sem.</strong> Mauris quis nulla sed ipsum pretium sagittis. Suspendisse feugiat. Ut sodales libero ut odio. Maecenas venenatis metus eu est. </li>
<li><strong>In sed risus ac felis varius bibendum.</strong> Nulla imperdiet congue metus. Vestibulum dapibus tortor vel orci. </li>
<li><strong>Maecenas vulputate, arcu id fermentum eleifend,</strong> tortor enim tincidunt mauris, fringilla tincidunt purus urna vel risus. Fusce vulputate tellus ac felis. Praesent mauris. </li>
</ul>
<p> </p>
<h1>OUR LATEST PROJECTS ?</h1>
<p><img src="tomato-images/photo1.jpg" alt="" width="127" height="102" /><br />
Vivamus a massa. Donec iaculis felis id neque. Morbi nunc. Praesent varius egestas velit. Donec a massa ut pede pulvinar vulputate. Nulla et augue. <a href="#"><strong>More</strong></a></p>
<p> </p>
<p><img src="tomato-images/photo2.jpg" alt="" width="127" height="102" /><br />
Cras magna velit, pellentesque mattis, faucibus vitae, feugiat vitae, sapien. Donec ante. Fusce ac orci sit amet velit ultrices condimentum. <a href="#"><strong>More</strong></a></p>
</div>
</div>
<div id="footer">
<div id="footer_left">Copyright Your Company Name - Designed by <a href="http://www.templatemo.com">TemplateMo.com</a></div>
<div id="footer_right"> <strong>QUICK CONTACT</strong><br />
Tel: 000-100-1000 Mobile: 000-200-2000<br />
Fax: 000-300-3000<br />
Email: info[at]templatemo.com<br />
</div>
</div>
</div>
</body>
</html>
Related examples in the same category