tomato : Effect 2 « Templates « HTML / CSS






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>&nbsp;</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>&nbsp;</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 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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

1.bigpixels
2.binary-news
3.mosaic
4.perfection
5.plain1
6.plain2
7.plastic-surgery
8.plastics
9.overdose
10.outlined
11.optimism
12.optimistic
13.Modern_Theme
14.MultiStrangeColor
15.modern
16.minimalistic
17.primitive
18.sparkle
19.sparkling
20.spotlight
21.simplyfluid
22.slider
23.pragmatic
24.popular
25.primitif
26.pure-web-2.0
27.pure
28.reflection
29.reflections
30.royal-cyan
31.royal_policy
32.smalltown
33.smallwindow
34.smartdesign
35.smarttouch
36.splendid
37.workfire
38.webtile
39.Wide_Side
40.zionnarrow
41.zionnarrows
42.xtreme
43.ZEN
44.zenlike
45.wondrous
46.stonewalled
47.tattoopatt
48.tattoopattern
49.tastelessly
50.tasty
51.thebarn
52.tinfoil_helmet
53.metal-feel
54.metal
55.historical
56.historicpaper
57.historyofwar
58.lonelyness