lily : Flower « Templates « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » Templates » Flower 




lily
   

<!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>Lily</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
body {
  background-color: #FFE8A7;
  font-family: Georgia, "Times New Roman", serif;
  font-size:  12px;
  color:#200;
}

{
  color:#600;
  text-decoration: none;
  font-weight:bold;
  border: 0;  
}

a:hover {
  color:#900;  
}

 
#container {
  width: 800px;
  margin: auto;
  background-color:#FFE8A7;
}

#header{
  width: 800px;
  height: 200px;
  background: url(lily-images/header.jpg);
}

h1 {
  text-align: right;
  padding: 0 15px 0 0;
  color: #300;
}

/*BEGIN NAVIGATION STYLING RIGHT HORIZONTAL*/

#menu {
  
  width: 400px;
  font-style:italic;
  padding: 20px 0 0 363px;
  display: inline-block;/*for IE5*/
  clear:left;/*for IE5*/
}

.cssnav  {
  position: relative;
  float:right;
  margin: 0;
  width: 80px;
  height: 17px;
  text-align: center
}

.cssnav a {
  display: block;
  width: 80px;
  height: 17px;
  float: right; 
  text-decoration: none;  
}
/* END OF NAVIGATION */


/*BEGIN CONTENT*/

#content{
  width: 800px;
  background: url(lily-images/extender.jpgrepeat-y;
  
}
  
#contentflower{
  width: 800px;
  background:transparent url(lily-images/flower.gifno-repeat;
  min-height: 550px;
  
  
    
}

.contentleft{
  width: 430px;
  padding: 10px 5px 10px 40px;  
}

.contentright{
  width: 250px;
  float: right;
  padding: 0 32px 0 37px;
  
}

{
  color: #300;
  font-size: 100%;
  font-weight:800;
}

h2 {
  color:#300;
  font-size: 110%;
  font-style:italic;
  text-align:left
}



#footer{
  clear: both;
  width: 800px;
  height: 120px;
  background: url(lily-images/footer.jpgno-repeat;
  padding-top: 10px;
}



#footer p{
  padding: 50px 0 30px 0;
  text-align: center;
  font-size: 85%;
  
}
  

</style>


</head>
<body>
<div id="container">
  <div id="header">
    <!--NAVIGATION START-->
    <div id="menu">
      <h1>My Site</h1>
      <div class="cssnav"><a href="http://www.free-css.com/">Contact</a> </div>
      <div class="cssnav"><a href="http://www.free-css.com/">Link3</a> </div>
      <div class="cssnav"><a href="http://www.free-css.com/">Link2</a> </div>
      <div class="cssnav"><a href="http://www.free-css.com/">About</a> </div>
      <div class="cssnav"><a href="http://www.free-css.com/">Home</a> </div>
    </div>
    <!--Menu closed-->
    <!--If you only need 3/links, just comment out any of the above cssnav divs-->
    <!-- NAVIGATION END-->
  </div>
  <!--Header closed-->
  <!--START CONTENT-->
  <div id="content">
    <div id="contentflower">
      <!--CONTENT FOR RIGHT HAND COLUMN-->
      <div class="contentright">
        <h2>Header</h2>
        <p><b>This is bold text.</b> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce dignissim auctor libero. In eget mi. Ut nulla.... <a href="http://www.free-css.com/">A link goes here</a> </p>
        <p>Maecenas tempor. Morbi sapien diam, lacinia a, fermentum vitae, rhoncus vehicula, sapien. Nunc pede sem, egestas vel, auctor sagittis, imperdiet posuere, augue. Curabitur condimentum. Proin id mi.... <a href="http://www.free-css.com/">A link goes here</a> </p>
        <p align="center"><img src="lily-images/flower.jpg" width="240" height="199" alt="" /></p>
        <b>The image must not be wider than 240px but can be longer</b> </div>
      <!--Content Right closed-->
      <!--CONTENT FOR LEFT HAND COLUMN-->
      <div class="contentleft">
        <h2>Heading goes here </h2>
        <p> Maecenas molestie ante sed velit dignissim pharetra. Etiam aliquam viverra sapien. Pellentesque pellentesque viverra ante. Vivamus nec nisi a augue fermentum blandit. Donec malesuada nonummy nisl. Nulla et leo. Sed sapien sem, blandit eget, fermentum at, ultrices at, metus. </p>
        <h2>Another Heading goes here</h2>
        <p>Fusce mattis facilisis nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce dignissim auctor libero. In eget mi. Ut nulla. Maecenas tempor. Morbi sapien diam, lacinia a, fermentum vitae, rhoncus vehicula, sapien. Nunc pede sem, egestas vel, auctor sagittis, imperdiet posuere, augue. Curabitur condimentum. Proin id mi. </p>
        <h2>Another Heading goes here</h2>
        <p>Quisque non augue dignissim massa hendrerit eleifend. Sed id ipsum sit amet sapien egestas ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent a enim sed justo vestibulum ultrices. Sed dictum, sapien at mollis ultrices, ante neque tristique arcu, non imperdiet libero purus tempor mi. Sed turpis. Nunc vitae libero vitae neque adipiscing commodo. </p>
        <h2>Another Heading goes here</h2>
        <p>Quisque non augue dignissim massa hendrerit eleifend. Sed id ipsum sit amet sapien egestas ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent a enim sed justo vestibulum ultrices. Sed dictum, sapien at mollis ultrices, ante neque tristique arcu, non imperdiet libero purus tempor mi. Sed turpis. Nunc vitae libero vitae neque adipiscing commodo. </p>
        <h2>Another Heading goes here</h2>
        <p>Quisque non augue dignissim massa hendrerit eleifend. Sed id ipsum sit amet sapien egestas ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent a enim sed justo vestibulum ultrices. Sed dictum, sapien at mollis ultrices, ante neque tristique arcu, non imperdiet libero purus tempor mi. Sed turpis. Nunc vitae libero vitae neque adipiscing commodo. </p>
        <h2>Another Heading goes here</h2>
        <p>Quisque non augue dignissim massa hendrerit eleifend. Sed id ipsum sit amet sapien egestas ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent a enim sed justo vestibulum ultrices. Sed dictum, sapien at mollis ultrices, ante neque tristique arcu, non imperdiet libero purus tempor mi. Sed turpis. Nunc vitae libero vitae neque adipiscing commodo. </p>
      </div>
      <!--Content Left closed-->
    </div>
    <!--Content Flower closed-->
  </div>
  <!--Content closed-->
  <div id="footer">
    <p>Name of your site goes here<br />
      Design by Lynne  &copy;2007 <a href="http://emasai.com">eMasai.com</a></p>
  </div>
</div>
<!--Container closed-->
</body>
</html>

   
    
    
  














Related examples in the same category
1.metamorph_flower
2.metamorph_flowergallery
3.metamorph_superflower
4.flower 2
5.flower-shop
6.flowerbuds
7.flowerily
8.flowermum
9.Flowerpremium
10.flowery
11.metamorph_floral
12.metamorph_florist
13.blossom
14.blossoms
15.metamorph_blossom
16.metamorph_roseanddrops
17.floral-design
18.floral
19.floral_impact
20.flourish
21.ftdflowered
22.rose
23.rosekist
24.rs-garden
25.safflower
26.Tulips
27.lilypads
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.