beez : Design « Templates « HTML / CSS

beez
    

<!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>BEEZ</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin : 0;
padding : 0;
font : 70% verdana, "Trebuchet MS", tahoma, arial, sans-serif;
line-height : 1.7em;
background : #fbfff1 url(beez-images/bgd2.jpg) repeat-x;
background-position : 50% 0;
color : #333;
}
#container {
width : 750px;
margin : 0 auto;
background : #fbfff1 url(beez-images/middle.jpg) no-repeat center;
color : #333;
}
      /*TOP*/
#top {
margin : 0;
padding : 0;
}
#top h1 {
padding-top : 10px;
text-align : center;
text-transform : none;
font-size : 150%;
letter-spacing: 5px;
background : #9aad42;
color : #333;
}
      /*BANNER*/
#banner {
width : 750px;
height : 135px;
margin : 0 auto;
padding : 0;
background : url(beez-images/top.jpg) no-repeat center;
color : #333;
}
      /*DROP MENU CONTAINER*/
#menu {
width : 750px;
height : 26px;
margin : 0 0 20px 0;
padding : 0;
background : #9aad42;
color : #000;
}

      /*MAIN CONTENT*/
#content {
float : right;
width : 530px;
margin-top : 0;
padding : 0;
}
      /*SIDEBAR*/
#sidebar {
float : left;
width : 190px;
margin : 0;
padding-left : 5px;
background : transparent;
}
#sidebar p {
font-size : 90%;
line-height : 1.5em;
}
      /*FOOTER*/
#footer {
clear : both;
font-size : 85%;
color : #000;
background : #fbfff1;
border-top : 1px solid #eee;
margin : 0;
text-align : left;
padding-left : 10px;
}
#footer a:link, a:visited, #navlist a:link, a:visited, a:link, a:visited {
color : #333;
background : inherit;
text-decoration : none;
}
#footer a:hover, #navlist a:hover, a:hover {
color : #869a3b;
background : inherit;
text-decoration : none;
}
      /*TYPOGRAPHY*/
h2 {
font : 130% verdana, "Trebuchet MS", arial, sans-serif;
text-transform : uppercase;
letter-spacing : 3px;
color : green;
background : inherit;
margin : 10px 0 10px 10px;
padding : 0;
}
h3 {
font : 100% arial, "Trebuchet MS", verdana, sans-serif;
color : green;
background : inherit;
margin : 5px 0 5px 10px;
padding : 0;
}
p {
margin : 10px;
}
p strong {
color : #769009;
background1 : inherit;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
      /*LINKS*/
#navlist li {
list-style-type : square;
background : inherit;
color : #769009;
margin : 0 15px 0 0;
padding : 0;
}
#navlist2 li {
list-style-type : circle;
background : inherit;
color : #769009;
margin : 0 15px 0 0;
padding : 0;
}
a img {
border : 0;
}
      /*CLASSES*/
.myborder {
border : 1px solid #aaa;
margin : 15px 10px 10px 10px;
padding : 5px;
}
      /*SCROLLBAR*/
div.scroll {
overflow : auto;
height : 11em;
width : 500px;
padding : 5px;
border : 1px solid #aaa;
margin : 20px 0 20px 0;
background : inherit;
color : #555;
font-size : 90%;
}

</style>


<link href="dropdown.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link href="dropdown_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div id="top">
  <h1>Your Company Name</h1>
</div>
<div id="banner"><img src="beez-images/top.jpg" alt="top image" title="top image"/></div>
<div id="container">
  <div id="menu">
    <div class="menu">
      <ul>
        <li><a class="hide" href="http://www.free-css.com/">&nbsp; &diams; HOMEPAGE</a>
          <!--[if lte IE 6]>
<a href="http://www.free-css.com/">&nbsp; &diams; HOMEPAGE
<table><tr><td>
</td></tr></table>
</a>
<![endif]-->
        </li>
        <li><a class="hide" href="http://www.free-css.com/">&nbsp; &diams; ABOUT</a>
          <!--[if lte IE 6]>
<a href="http://www.free-css.com/">&nbsp; &diams; ABOUT
<table><tr><td>
<![endif]-->
          <ul>
            <li><a href="http://www.free-css.com/">&nbsp; &raquo; Web Design</a></li>
            <li><a href="http://www.free-css.com/">&nbsp; &raquo; Templates</a></li>
          </ul>
          <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
        </li>
        <li><a class="hide" href="http://www.free-css.com/">&nbsp; &diams; GALLERY</a>
          <!--[if lte IE 6]>
<a href="http://www.free-css.com/">&nbsp; &diams; GALLERY
<table><tr><td>
<![endif]-->
          <ul>
            <li><a href="http://www.free-css.com/">&nbsp; &raquo; Photos 1</a></li>
            <li><a href="http://www.free-css.com/">&nbsp; &raquo; Photos 2</a></li>
            <li><a href="http://www.free-css.com/">&nbsp; &raquo; Photos 3</a></li>
          </ul>
          <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
        </li>
        <li><a class="hide" href="http://www.free-css.com/">&nbsp; &diams; RESOURCES</a>
          <!--[if lte IE 6]>
<a href="http://www.free-css.com/">&nbsp; &diams; RESOURCES
<table><tr><td>
<![endif]-->
          <ul>
            <li><a href="http://www.free-css.com/">&nbsp; &raquo; Links</a></li>
          </ul>
          <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
        </li>
        <li><a class="hide" href="http://www.free-css.com/">&nbsp; &diams; CONTACT</a>
          <!--[if lte IE 6]>
<a href="http://www.free-css.com/">&nbsp; &diams; CONTACT
<table><tr><td>
<![endif]-->
        </li>
      </ul>
      <!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
    </div>
  </div>
  <div id="sidebar">
    <h2>Homepage</h2>
    <p> Donec lorem. Quisque eu pede ac ligula bibendum cursus. Fusce ut urna..... </p>
    <h2>Links</h2>
    <div id="nav">
      <ul id="navlist">
        <li><a href="http://www.free-css.com/">Snapp Happy</a></li>
        <li><a href="http://www.free-css.com/">Open Designs</a></li>
        <li><a href="http://www.free-css.com/">OWD</a></li>
        <li><a href="http://www.free-css.com/">OSWD</a></li>
        <li><a href="http://www.free-css.com/">CSS play</a></li>
        <li><a href="http://www.free-css.com/">Andreas Viklund</a></li>
        <li><a href="http://www.free-css.com/">James Koster</a></li>
      </ul>
    </div>
    <h2>Today's Photo</h2>
    <a href="http://www.free-css.com/"><img class="myborder" src="beez-images/bee.jpg" title="click to enlarge" alt="bee on flower" /></a>
    <h2>New Photos</h2>
    <ul id="navlist2">
      <li> <a href="http://www.free-css.com/">Bee 1 Gallery</a></li>
      <li> <a href="http://www.free-css.com/">Bee 2 Gallery</a></li>
      <li> <a href="http://www.free-css.com/">Bee 3 Gallery</a></li>
    </ul>
  </div>
  <div id="content">
    <h2>Welcome to <span style="font-weight:bold;">Beez</span> Template</h2>
    <blockquote>All images were created by me so feel free to use them if you wish. The page has been tested in Mozilla and IE7. The page validates as XHTML 1.0 Transitional using valid CSS.<br />
      For more FREE templates visit my website.</blockquote>
    <div style="float: left; width: 120px; height: 7em; margin:5px; padding: 20px; font-family: arial, helvetica; font-size: 14px; line-height: 1.5em; color: #869A3B; text-align: left;"> <span style="color:#7a513d;">".... sharing templates </span>and experiences of web design <span style="color: #858F6D;">around the world .... "</span> </div>
    <p>This is a <a href="http://www.free-css.com/">link</a> to nowhere. Donec lorem. Quisque eu pede ac ligula bibendum cursus. Nulla tristique diam sit amet lacus. Nulla ut magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam diam orci, scelerisque quis, fermentum non, volutpat non, libero. In hac habitasse platea dictumst. Fusce ut urna. Donec lorem. Quisque eu pede ac ligula bibendum cursus. Nulla tristique diam sit amet lacus. Nulla ut magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam diam orci, scelerisque quis, fermentum non, volutpat non, libero. In hac habitasse platea dictumst. Fusce ut urna.</p>
    <h2> News &amp; Updates</h2>
    <div class="scroll">
      <h3>May 3rd 2006</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc venenatis rhoncus libero. Quisque et elit luctus diam ornare sollicitudin. Quisque nec elit. Quisque vehicula metus vel nisi hendrerit cursus.</p>
      <h3>May 1st 2006</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc venenatis rhoncus libero. Quisque et elit luctus diam ornare sollicitudin. Quisque nec elit. Quisque vehicula metus vel nisi hendrerit cursus.</p>
    </div>
    <p> Donec lorem. Quisque eu pede ac ligula bibendum cursus. Nulla tristique diam sit amet lacus. Nulla ut magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam diam orci, scelerisque quis, fermentum non, volutpat non, libero. In hac habitasse platea dictumst. Fusce ut urna.</p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc venenatis rhoncus libero. Quisque et elit luctus diam ornare sollicitudin. Quisque nec elit. Quisque vehicula metus vel nisi hendrerit cursus. Nunc venenatis rhoncus libero. </p>
  </div>
  <div id="footer"> <a href="http://www.free-css.com/">Homepage</a> | <a href="http://www.free-css.com/">contact</a> | &copy; 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a> | Licensed under a <a rel="license" target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a> </div>
</div>
</body>
</html>
Related examples in the same category

1.	wcsst-10
2.	wcsst-11
3.	wcsst-12
4.	wcsst-15
5.	wcsst-16
6.	wcsst-17
7.	wcsst-18
8.	wcsst-19
9.	wcsst-2
10.	wcsst-20
11.	wcsst-21
12.	wcsst-22
13.	wcsst-23
14.	wcsst-24
15.	wcsst-25
16.	wcsst-26
17.	wcsst-3
18.	wcsst-4
19.	wcsst-5
20.	wcsst-6
21.	beez-design
22.	metamorph_camomile
23.	metamorph_champagne
24.	metamorph_clover
25.	metamorph_dao
26.	metamorph_dna
27.	metamorph_lilac
28.	metamorph_lilium
29.	metamorph_lime
30.	metamorph_limemint_lt
31.	metamorph_lionpride
32.	metamorph_swallowtail-indexl
33.	metamorph_synchronized_lt
34.	metamorph_temple
35.	metamorph_vectorart
36.	metamorph_wow
37.	wcsst-7
38.	wcsst-9
39.	bouquet
40.	baseline
41.	beautifulday
42.	bedazzled
43.	Beehives
44.	begeodan
45.	cleo-studio
46.	cloverleaf
47.	CMS Style
48.	dragonfly
49.	nautica
50.	Nautica022
51.	Nautica02Liquid
52.	Nautica03
53.	Nautica04
54.	nautica05
55.	nautica05dark
56.	nautica08
57.	nauticax
58.	soothing