aboutfruts : Design 2 « Templates « HTML / CSS






aboutfruts

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<style type='text/css'>
/* project: internet services template
   author: luka cvrk (www.solucija.com) */

   
/* default styles
   -------------- */
   
body { 
  padding: 0; 
  margin: 0; 
  font: 0.7em Tahoma, sans-serif; 
  line-height: 1.5em;
  background: #fff; 
  color: #454545; 
}

a {  color: #E0691A;  background: inherit;}
a:hover { color: #6C757A; background: inherit; }

h1 { font: normal 2.1em Arial, Sans-Serif; letter-spacing: -1px; padding: 7px 0 0 8px; margin: 0; }
.dark  {
  color: #967A5A;
  background: inherit;
  font-weight: bold;
  font-size: 30px;
}
h1 a, h2 a { text-decoration: none; }
h1 a:hover, h2 a:hover {
  color: #FF6600;
  background: inherit;
}
h2 { margin: 0; padding: 0; font: bold 1.7em Arial, Sans-Serif; letter-spacing: -1px; }
h2 { font-size: 1.5em; margin-bottom: 5px; color: #000; background: inherit; }

p {  margin: 0 0 5px 0; }

ul { margin: 0; padding : 0; list-style : none; }

form {   margin: 0; }

input.search { 
  width: 292px; 
  border: 0;
  background: #FFF url(input.gif) no-repeat;
  padding: 4px; 
  color: #E0691A;
  font-weight: bold;
}

input.submit {
  background: #E0691A url(submit.gif) no-repeat;
  border: 0;
  padding: 4px 0;
  width: 65px;
  margin: 0 15px 1px 0;
  color: #FFF;
  font: bold 1em Arial, Sans-Serif;
}

input.login { 
  width: 150px;
  border: none; 
  
  padding: 4px; 
}

/* layout
   ------ */

.content { 
  margin: 0 auto;
  width: 780px;
  padding: 10px; 
}

.header { 
  height: 55px;
  background: #eee;
  color: #808080;
  margin: 3px 0;
  padding: 10px 0 0 0;
  border-bottom: 1px solid #ccc;
}

.top_info {
  float: right;
  width: 555px;
  padding: 5px 0 4px 0;
  border-bottom: 1px solid #eee;
  background: #eee;
  color: #808080;
}

  .top_info_left {
    width: 200px;
    float: left;
  }

  .top_info_right {
    float: right;
    width: 290px;
    padding: 0 0 0 35px;
    border-left: 1px solid #eee;
  }

.browse_category  {
  font-size: 0.9em;
  width: 190px;
  color: #FFF;
  background: inherit;
}

.bar { 
  clear: both;
  font-size: 1.1em;
  height: 30px; 
  color: #FFF; 
  background: #5A8096;
}

  .bar li { 
    margin: 0; 
    padding: 7px 12px 5px 12px;
    color: #FFEADC;
    background: #5A8096;
    float: left; 
  }
  
  .bar li.active { 
    background: #87C0E2 no-repeat center top; 
    color: 5A8096;
    font-weight: bold; 
    padding: 7px 10px 6px 10px;
  }
  
  .bar li a { 
    font-weight: bold;
    color: #FFF; 
    background: inherit;
    text-decoration: none;
  } 
  
  .bar li a:hover {
  color: #E3C888;




  } 

.search_field { 
  background: no-repeat right; 
  color: #333333;
  clear: both;
  font-weight: bold;
  padding: 7px 25px 10px 10px;
  margin: 5px 0;
}

.grey {
  color: #FF9933;
  background: inherit;
  font-weight: normal;
}

.search_form { float: right; }

.subheader {
  margin: 0px 0 10px 0;
  border-bottom: 1px solid #eee;
  padding: 5px 0 5px 0;
  background: #A4A4A4;
  color: #fff;
}

/* left side
   --------- */

.left {
  float: left;
  width: 65%;
  margin: 0 0 10px 0;
}

.left h3 {
  clear: both;
  background: #E3A554 url(corner.gif) no-repeat right top;
  color: #FFF;
  padding: 7px 0 7px 5px;
  font: bold 1em Tahoma, Arial, Sans-Serif;
  margin: 0 0 0px 0;
}
  .left_side {
  float: left;
  width: 180px;
  margin: 10px 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;

  }
    
  .left_side a, .right_side a { color: #414141; background: #FFF; }
    
  .right_side {
  float: none;
  background: #FFFFFF;
  color: #414141;
  font-size: 14px;
  font-style: normal;
  margin-left: 10px;
  margin-bottom: 10px;
  padding-left: 10px;




  }
    
  .left_box { margin: 0 0 0px; color: #000; background: #FFF; padding: 2px 0 3px; }
  
    
/* right side
   ---------- */
    
.right {
  float: right;
  width: 34.6%;
  margin: 0 0 10px 0;
}

.right h3 {
  background: #967A5A url(corner.gif) no-repeat right top;;
  color: #FFF;
  padding: 7px 0 7px 5px;
  font: bold 1em Tahoma, Arial, Sans-Serif;
  margin: 0 0 3px 0;
}

  .right_articles {
    background: #f5f5f5;
    color: #414141;
    padding: 8px;  
    margin: 0 0 3px;
  }
  
.image {
  float: left;
  margin: 0 9px 3px 0;
}

/* footer
   ------ */

.footer { 
  clear: both;
  text-align: center;
  padding: 2px 0 1px;
  margin: 0;
  border-top: 1px solid #ccc;
  line-height: 1.8em;
}

.footer a { color: #FF6633; background: #fff; }


</style>


  <title>About Fruts</title>
</head>
<body>
  <div class="content">
    <div class="header">
      <div class="top_info">
            

      </div>
      <div class="logo">
        
      <h1><a href="#" title="Centralized Internet Services"><span class="dark">About</span> 
        Fruts</a></h1>
      </div>
    </div>
    
    <div class="bar">
      <ul>
        <li class="browse_category">Categories:</li>
        <li><a href="#" accesskey="i">Grapes</a></li>
        <li class="active">Quince</li>
        <li><a href="#" accesskey="m">Pears</a></li>
        <li><a href="#" accesskey="p">Apricots</a></li>
        <li><a href="#" accesskey="s">Cherries</a></li>
        <li><a href="#" accesskey="r">Apples</a></li>
      </ul>
    </div>
    <div class="search_field">
      <form method="post" action="?">
        <div class="search_form">
        <p>Search the Web: <input type="text" name="search" class="search" /> <input type="submit" value="Search" class="submit" /> <a class="grey" href="#">Advanced</a></p>
        </div>
      </form>
      
      
    <p>&nbsp;</p>
    </div>
    
    <div class="left">
      <h3>About quinse:</h3>
      <div class="left_box">
        
        <h2>The brief items of informationon</h2>
        
      <p>The QUINCE (Cydonia oblonga) is cultivated in moderately warm strip of 
        Eurasia and in Northern America for the sake of the fruits reaching weight 
        of 2 kg. Its Simeon find application in medicine as laxative, slime from 
        them use as enveloping means. The quince in an antiquity in the Mediterranean 
        countries was considered as a symbol of love and fertility and has been 
        devoted to Venus. Believe, that &quot;apple of discord&quot; which has 
        handed over Paris to finest of three goddesses, was not than other, as 
        a fragrant fruit of a quince.</p>
      </div>
  <h3>Web Directory</h3>
  <div class="right_side">
    
      <table>
        <tr>
          <td> 
            <p><b><img src="aboutfruts-images/arrow.gif" alt=">" width="19" height="21" /><a class="title" href="#">Apricots</a></b><br />
              <a href="#">New York</a>, <a href="#">San Francisco</a>, <a href="#">Las 
              Angeles</a>...</p>
            <p><b><img src="aboutfruts-images/arrow.gif" alt=">" /><a class="title" href="#">Grapes</a></b><br />
              <a href="#">Washington</a>, <a href="#">Madison</a>, <a href="#">Oklahoma 
              City</a>...</p>
            <p><b><img src="aboutfruts-images/arrow.gif" alt=">" /><a class="title" href="#">Cherries.</a></b></p>
            <p><a href="#">Annapols</a>, <a href="#">Indianaporis</a>, <a href="#">Montgomery</a>...</p></td>
          
          
        </tr>
      </table>
  </div>
        
      
      <h3>Gradeons:</h3>
      
    <div class="left_box"> 
      <p>&quot;CHAMPION&quot; This grade more often has fruit under the form of 
        a pear, and sometimes also under the form of an apple. This grade is still 
        known under the name &quot;Meisterquitte&quot;. This grade is recommended 
        for home gardens, since has large, sour, fragrant fruit. It(he) gives 
        average and high regular crops.</p>
      <p>Muscat One of the most perspective grades of a quince, is received in 
        1963 from of some grades of free pollination. Differs the stable productivity 
        raised by winter hardiness, good general stability. The tree low, forms 
        round, not a dense a crone. Fructifies from 3 years age. Fruits in weight 
        250 the Thin skin thin.</p>
      </div>
    </div>  
    <div class="right">
      
    <h3>Most popular product:</h3>
      <div class="right_articles">
        <p><img src="aboutfruts-images/apples.gif" alt="Image" title="Image" class="image" /><b>In opinion of the scientist.</b><br />The daily use of apples with the purposes of preventive maintenance of premature aging is necessary.</p>
      </div>
      <div class="right_articles">
        <p><img src="aboutfruts-images/apricots.gif" alt="Image" title="Image" class="image" /><b>The scientists consider that</b><br />Three small apricots contain 50 % of day time norms beta-karotin, most powerful antyoksidant..</p>
      </div>
      
    <h3>Less popular:</h3>
      <div class="right_articles">
        <p><img src="aboutfruts-images/cherries.gif" alt="Image" title="Image" class="image" /><b>The best place for </b><br />
        a bookmark of a cherry garden flat slopes, rich enough nutritious substances, 
        with good air </p>
      </div>
      <div class="right_articles">
        <p><img src="aboutfruts-images/pears.gif" alt="Image" title="Image" class="image" /><b>The pear - culture of </b><br />
        a moderate climate, differs by durability: average life expectancy of 
        a tree on seeds 50-70 years</p>
      </div>
      <div class="right_articles">
        <p><img src="aboutfruts-images/grapes.gif" alt="Image" title="Image" class="image" /><b>The grapes concerns </b><br />to group of plants most valuable for the man. It(he) surpasses apples, does not concede to a potatoes and milk at same weight of products.</p>
      </div>
      
    <div class="right_articles"></div>
    </div>  
    <div class="footer">
      <p><a href="#">RSS Feed</a> | <a href="#">Contact</a> | <a href="#">Accessibility</a> | <a href="#">Products</a> | <a href="#">Disclaimer</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a><br />
      &copy; Copyright 2006 About Frits</p>
    </div>
  </div>
</body>
</html>

   
    
    
    
    
  








Related examples in the same category

1.metamorph_drop
2.metamorph_energybolt
3.metamorph_exit
4.metamorph_global
5.metamorph_glowing
6.metamorph_host
7.metamorph_icybreeze
8.metamorph_interiordesign
9.metamorph_interstate60
10.metamorph_lotr
11.metamorph_lyrics_lt
12.metamorph_melancholy_lt
13.metamorph_mercuryworld
14.metamorph_metaform
15.metamorph_models
16.metamorph_nuke
17.metamorph_oldheavens
18.metamorph_palmbeach
19.metamorph_strongrey_lt
20.metamorph_thames
21.metamorph_transitional
22.metamorph_tropic
23.metamorph_truncata
24.metamorph_tubes
25.metamorph_tunel
26.ablaze
27.abrasive
28.abscond
29.abstraction
30.acallia-development
31.accomplishable
32.actualbiz
33.adhesive
34.adios
35.advantage
36.aero-solutions
37.aerolyk
38.affection
39.agency
40.ahoy
41.al-infolabs
42.alexx-c
43.alieninvasion
44.alpha
45.altered
46.altruism
47.ambiance
48.amoreira
49.angryhornet
50.anibanner01
51.AnotherSquare
52.anther
53.anthropod
54.Antikoerperchen
55.antiquity
56.aphotic
57.applique
58.aprilshowers
59.Arbenting-MinimalistResumeTemplate
60.expanding-portfolio
61.experience
62.expertvision
63.exploitable
64.ezine02
65.familiar
66.favorite-cakes
67.featherlight
68.featuring
69.femflex1
70.fernando1
71.fertilization
72.Fibre
73.fibreglass
74.filaments
75.findingpeace
76.firerescuesquad
77.fivestar
78.Flair Template
79.flair
80.flan2
81.flange
82.flattering
83.flavour
84.fleur
85.flightandfight
86.fluidity
87.fluidsolution
88.flyover-builders
89.WP-Bliss
90.website-design
91.website-traffic